Anime - Posts - OneCompiler

HTML_____

<!DOCTYPE html> <html> <head> <title>Hello, World!</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <header> <h1><span style="color: red;">MD</span>VD</h1> <nav> <a href="#">home</a> <a href="#">movie</a> <a href="#">anime</a> <a href="#">series</a> </nav>

    <div class="search-box">
       <img src="https://assets.onecompiler.app/42x6dks5u/43976zurm/image.png"alt="search-icon">
       <input type="text" placeholder="Search ">
    </div>
</header>

<!-- CAROUSEL -->

<div class="carousel">  <div class="list"> <div class="item"> <img src="https://assets.onecompiler.app/42x6dks5u/43976zurm/one%20pice%20gig.jpg" alt="search-icon"> <div class="content"> <h1>One Piece</h1> <div class="detailes"> <P>2021  </P> <p> 16 +</p> <p> 2 season </p> <p> drama </p> </div>

        <h4>D. Luffy and his crew, the Straw Hat Pirates, as he explores the Grand Line in search of the mythical treasure known as the "One Piece" to become the next King of the Pirates.</h4>
       <div class="button">
        <button class="download-btn">Download</button>
        <button class="trailer-btn">Trailer</button>
       </div>
     </div>
  </div>
</div>

</body> </html>

CSS

body{
margin:0;
padding:0;
background-color: black;
color: white;
}

header{
display: flex;
height: 70px;
background-color: rgba(255, 255, 255 0.374);
backdrop-filter: blur(10px);
padding:0 50px;
justify-content: space-between;
align-items:center;
position: relative;
z-index: 100;
}

hearder h1{
font-size: 40px;

}

.search-box img{
width: 20px;
background-color: lightgray;
padding: 5px 10px;
margin-right: -1 ;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}

.search-box input{
padding: 7.5px 30px;
background-color: lightgray;
border: none;
outline: none;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;

}

nav{
display: flex;
justify-content:space-between ;
width: 400px;
}

nav a {
text-decoration: none;
color: lightgray;
font-size: 20px;
font-weight: 700;
padding: 0 10px;
text-shadow: 0 0 15px rgba(0, 0, 0, 0.699);
transition: 0.4s;
}

nav a :hover{
color: red;
}

/* CAROUSEL */
.carousel{
height:100vh;
width: 100vw;
overflow: hidden;
position: relative;
}

.carousel .list .item{
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;

/* OR */

inset: 0 0 0 0 ;

}

.carousel .list .item img{
width: 100%;
height: 100%;
object-fit: cover;
}

.carousel .list .item .content{
position: absolute;
top: 10%;
width: 1140px;
max-width: 80%;
left: 50%;
transform: translateX(-50%);
padding-right: 30%;
box-sizing: border-box;
text-shadow: 0 0 15px rgba(0, 0, 0, 0.598);

}

.content h1{
font-size: 65px;
font-weight: bold;
text-wrap: nowrap;

}

.detailes{
display: flex;
text-wrap: nowrap;
margin-bottom: -20px;

}

.detailes p{
border-right: 4px solid white;
font-size: 23px;
font-weight: bold;
color: #262626;

}

.detailes p:last-child{
border:none;

}

.content h4{
max-width: 400px;
font-size: 17px;
line-height: 25px;
margin: 40px 0;
}

.carousel .buttons{
display: flex;
}

.download-btn{
width: 150px;
padding: 12px 0;
font-weight: bold;
border: none;
background-color: #26B6C6;
color: black;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.566);
border-radius: 20px;
margin: right 10px;
transition: 0.4s;
cursor: pointer;
}

.trailer-btn{
width: 150px;
padding: 12px 0;
font-weight: bold;
border: none;
background-color: red;
color: black;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.566);
border-radius: 20px;
margin: right 10px;
transition: 0.4s;
cursor: pointer;

}

.buttons button:hover{
opacity: 0.7;
box-shadow: 5px 5px 15px #8C8C8C;
}