DEV Community

Deepak Chauhan
Deepak Chauhan

Posted on

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

<!DOCTYPE html>




Anime








鬼滅の刃









#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

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay