This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice
What I Built
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body{
overflow-x:hidden ;
}
.main-width{
width: 1400px;
max-width: 95%;
margin: 0 auto;
}
.hero{
height: 100%;
width: 100%;
min-height: 100vh;
background-image: url(Tanjiro1.png);
background-size: 100%;
background-repeat: no-repeat;
}
.hero header .logo h2 a{
display: block;
font-size: 30px;
font-weight: 600;
text-decoration: none;
color: white;
font-family:'Noto Sans JP', sans-serif;
}
.hero header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px 0 30px;
}
nav ul li{
list-style: none;
display: inline-block;
}
nav ul li a{
text-decoration:none;
color: aliceblue;
margin-left: 80px;
font-size: 20px;
font-weight: 600;
border-bottom: 2px solid white;
transition: 4s;
}
nav ul li:not(:last-child) a:hover
nav ul li:not(:last-child) a:focus{
border-bottom: 2px solid white;
}
nav ul li.active a{
border-bottom: 2px solid white;
}
nav ul li.btn a{
background: transparent;
color: white;
border: 1px solid #f5dca8;
padding: 9px 20px;
border-radius: 80px;
line-height: 1.4;
font-size: 18px;
font-weight: 600;
margin-left: 150px;
}
nav ul li.btn:hover a{
border: 1px solid white;
color: black;
background: white;
transition: .4s;
}
.content{
padding-top: 140px;
}
.content .main-text{
position: relative;
z-index: 2;
margin-bottom: 50px;
}
.content .main-text h6{
font-size: 14px;
font-weight: 400;
color: white;
margin-bottom: 40px;
}
.content .main-text h1{
font-size: 60px;
line-height: 1;
color: white;
margin: 0px 0px 45px;
font-family: 'Permanent Marker', cursive;
}
.content .main-text p{
max-width: 100%;
width: 480px;
color: white;
line-height: 1.8;
font-size: 15px;
margin-bottom: 50px
}
.content .main-text a{
display: inline-block;
text-decoration: none;
color: black;
background: white;
border: 1px solid white;
padding: 9px 25px;
line-height: 1.4;
border-radius: 30px;
font-size: 14px;
font-weight: 500;
}
.content .main-text a:hover{
transform: scale(1.2);
border: 1px solid #f5dca8;
background: transparent;
color: white;
transition: .4s;
}
HTML
<!DOCTYPE html>
Anime
鬼滅の刃
- Seasons
- Episodes
- Manga
- Play Now
#1 Best Anime
It is a Japanese manga series written and illustrated by Koyoharu Gotōge,
Demon Slayer
A family is attacked by demons and only two members survive - Tanjiro and his sister Nezuko, who is turning into a demon slowly. Tanjiro sets out to become a demon slayer to avenge his family and cure his sister.....
Watch Now
This is my anime website exclusive to me it has best animated buttons and smooth transitions
All the rights Swally Belong to me
SOCIAL SHARE CARD GENERATOR