How to create Landing Page(Full Screen) using Html and Css

Hey, Geeks So Today in this article We gonna know about creating Landing Pages using HTML and CSS.



Landing pages are a very important component of a new website. In this post, we will create a basic structure with Html and Customize it with CSS.

Check it Live on Github : https://harshit1072003.github.io/landingpage/

File structure
  1. index.html
  2. style.css
  3. assets/photo

Requirements
We have basic knowledge about the Html and CSS 

1. HTML Code

    <title>Landing Pages | Cosmic Gyan</title>
<body>
    <section class="b1">
        <div class="in1">
            <div class="content">
                <h1>CosmicGyan Academy</h1>
                <a class="btn" href="#">Get Started</a>
            </div>
        </div>

    </section>
</body>


2. CSS Code 
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,300;1,500;1,700&display=swap');

html,body{
    margin: 0;
    padding: 0; 
    height: 100%;
    width: 100%; background: #000;
}
.b1{
    width: 100%;
    height: 100%;
    margin: auto;
    background: url(1006616.jpg) no-repeat 50% 50%;
    top: 0;
    background-size: cover;
    display: table;
}
.b1 .in1{
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    max-width: none;
}
.content{
    max-width: 700px;
    margin: auto;
    text-align: center;
}
.content h1{
    font-family: 'poppins',sans-serif;
    color: #f9f3f4;
    font-size: 4rem;
    text-shadow: 0 0 300px #000;
    box-sizing: 20px;
    background: rgba(0, 0, 0, 0.432);
}
.content .btn{
    border-radius: 9px;
    color: #f9f3f4;
    text-decoration: none;
    font-family: 'poppins', sans-serif;
    border: 3px solid #f9f3f4;
    padding: 7px 24px;
    font-weight: bold;
    transition: 0.2s ease;
}
.content .btn:hover{
    color: #111;
    background-color: #f9f3f4;
    transition: 0.2s ease;
}

Output

Output Video



Tags

Post a Comment

0 Comments