Html Code
<header>
<div class="loader"></div>
<div class="container">
<nav class="flex items-center justify-between center">
<div class="left flex items-center justify-between">
<div class="branding">
<h1 class="head">
Harry <span class="subtitle">Potter</span>
</h1>
</div>
<div>
<a href="#movies">Movies</a>
<a href="#book">Books</a>
<a href="#about_us">About Us</a>
</div>
</div>
<div class="right">
<a href="#contact_us">
<button class="btn btn-primary">Contact Us</button>
</a>
</div>
</nav>
<div class="hero flex items-center justify-between">
<div class="left flex-1 flex justify-center">
<img src="Images/Main.png" alt="Harry Potter Sittitng">
</div>
<div class="right flex-1">
<h6>Harry Potter</h6>
<h1><span>Famous</span>
<br>
Fictional Character</h1>
<p>Harry Potter is a famous fictional character.
<br>
The role in Books is casted by Daniel Radcliffe.</p>
</div>
</div>
</div>
</header>
CSS Code
body{
background-color: var(--light );
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.6;
}
a{
text-decoration: none;
}
span{
color: var(--primary);
}
.loader{
background: var(--dark) url(../Images/Loaders/Loader-1.gif) no-repeat center center;
background-size: 75%;
height: 100vh;
width: 100%;
position: fixed;
z-index: 100;
}
header {
background-color: var(--dark);
clip-path: polygon(0 0,100% 0,100% 100%,70% 90%,0 100%);
}
.container {
max-width: 1152px;
padding: 0 15px;
margin: 0 auto;
}
.head{
color: var(--light);
font-size: 1.7rem;
font-family: Ostrich;
}
.subtitle{
color: var(--primary);
font-family: Ostrich;
}
header nav .left a{
color: var(--pure);
text-decoration: none;
margin-right: 2rem;
text-transform: uppercase;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transistion: all .3s ease;
-o-transition: all .3s ease;
}
header nav .left a:hover{
color: var(--primary);
}
header nav{
padding: 2rem 0;
}
header nav .branding{
margin-right: 3rem;
}
.btn{
padding: 0.8rem 2rem;
font-size: 1rem;
font-weight: 600;
border: 2px solid transparent;
outline: none;
cursor: pointer;
text-transform: uppercase;
border-radius: 4.5px;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transistion: all .3s ease;
-o-transition: all .3s ease;
}
.btn-primary{
background: var(--primary);
color: var(--secondary);
}
.btn-primary:hover{
background: transparent;
border-color: var(--primary);
color: var(--primary);
}
.hero{
padding: 3rem 0;
}
.hero .left img{
width: 400px;
}
.hero .right{
color: var(--pure);
margin-top: -7rem;
}
.hero .right h6{
color: var(--primary);
font-size: 1.6rem;
margin-bottom: 0.5rem;
}
.hero .right h1{
font-size: 4rem;
font-weight: 100;
line-height: 1.2;
margin-bottom: 2rem;
font-family: Ostrich;
}
.hero .right h1 span{
font-family: Ostrich;
}
.hero .right p{
line-height: 1.9;
}
.content{
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}