Skip to main content

Amazing Full Screen Landing Page Using Only Html & Css

In this post, you will learn to make an amazing FullScreen Landing Page Using Only Html & CSS. Here is the video and source code. Enjoy! ☺

VIDEO :


SOURCE CODE:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/82fb063a14.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <title>Amazing Full Screen Landing Page</title>
</head>
<body>
    <div class="header">
        <div class="main">
            <ul>
                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
            </ul>
        </div>
        <h1>Think Creative</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <div class="buttons">
            <button class="btn1"><i class="fas fa-play"></i> Play Video</button>
            <button class="btn2"><i class="fas fa-download"></i> Download</button>
        </div>
    </div>
</body>
</html>

CSS:

body{
    margin: 0;
    padding: 0;
    font-family: Century Gothic;
}
.header{
    height: 100vh;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("bg.jpg")no-repeat;
    background-size: cover;
}
.main{
    margin: auto;
    max-width: 1200px;
}
.main ul{
    float: right;
    list-style: none;
}
.main ul li{
    display: inline-block;
}
.main ul li a{
    color: #ffffff;
    text-decoration: none;
    padding: 10px 10px;
    font-size: 25px;
}
.header h1{
    color: #ffffff;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 50px;
    font-weight: 500;
}
.header p{
    color: #ffffff;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 25px;
}
.buttons{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.btn1{
    border: none;
    outline: none;
    border-radius: 2px;
    background: #e74c3c;
    font-size: large;
    padding: 10px 15px;
    color: #ffffff;
    font-family: Century Gothic;
    cursor: pointer;
}
.btn2{
    border: none;
    outline: none;
    border-radius: 2px;
    background: #ffffff;
    font-size: large;
    padding: 10px 15px;
    font-family: Century Gothic;
    cursor: pointer;
}

BACKGROUND IMAGE:



Comments

Post a Comment

Popular posts from this blog

About us Page Using Html & Css Only

Video: Source Code : <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < link   href = "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&displa y=swap"   rel = "stylesheet" >      < link   rel = "stylesheet"   href = "style.css" >      < title > About Us Page </ title > </ head > < body >      < div   class = "container" >          < div   class = "text" >              < h1 > Code Incredible.. </ h1 >              < br >< br >              < p >                 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias  aliquid et numquam blanditiis vitae! Illum quidem magni numquam minima, velit suscipit , voluptatum accusantiu
Post a Comment
Read more

Amazing 404 Error Page Using HTML & CSS

  Video: Source Code: <! DOCTYPE   html > < html   lang = "en" > < head >     < meta   charset = "UTF-8" >     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >     < meta   http-equiv = "X-UA-Compatible"   content = "ie=edge" >     < title >Error! 404</ title > </ head > <style> * {     margin:  0 ;     padding:  0 ;     font-family: Nunito;     box-sizing:  border-box ; } body {     background:  linear-gradient (to  right ,  #48dbfb ,  #1dd1a1 );     display:  flex ;     align-items:  center ;     justify-content:  center ;     min-height:  100 vh ; } .box {     width:  40 % ;     background:  #0abde3 ;     padding:  50 px ;     text-align:  center ;     color:  #ffffff ;     border-radius:  8 px ;      box-shadow:  0   19 px   38 px   rgba ( 0 ,  0 ,  0 ,  .3 ),  0   15 px   12 px   rgba ( 0 ,  0 ,  0 ,  .22 ); } .box   h1 {     margi
Post a Comment
Read more

Parallax Website using HTML And CSS

VIDEO: Source Code:      Images used: HTML: <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < link   rel = "stylesheet"   href = "style.css" >      < title > Parallax Website </ title > </ head > < body >      < div   class = "bg1" >          < h1 > Parallax </ h1 >      </ div >      < div   class = "bg2" >      </ div >      < div   class = "bg3" >      </ div >      </ body > </ html > CSS: * {      margin :  0 ;      padding :  0 ;      font-family : Century Gothic; } .bg1 {      height :  100 vh ;      width :  100 % ;      background :  url ( "photo1.jpg" )no-repeat;      background-size : cover;      background-attachment : fixed; } .bg
Post a Comment
Read more