Anime

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

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

The above is the detailed content of Anime. For more information, please follow other related articles on the PHP Chinese website!