Design Beautiful Landing Page using HTML and CSS

 

landing page

Design Beautiful Landing Page using HTML and CSS

The latest version of HTML(HyperText Markup Language) provides many advanced features that make web page creation simpler and faster. It is often associated with web pages since HTML5 represents the latest version of HTML and represents the latest version of HTML.
CSS (style sheet language) determines how a website will look according to themes, colors, and even fonts. HTML pages are commonly used in conjunction with CSS, which is a style sheet language. In addition to allowing greater creativity, it also makes it easier for developers to design sites.
This article shows you how to design a beautiful landing page using HTML and CSSIt's always beneficial to learn how to create beautiful landing pages, and a landing page like this can be easily created. This amazing landing page is very simple to design if you know basic HTML and CSS.

Page Source Code:

Creating an HTML file named index.html and pasting the given codes there is the first step. Make sure your file is entitled .html.

<!DOCTYPE html>

<html lang="en" dir="ltr">

    <head>

        <meta charset="utf-8">

        <link rel="stylesheet"                      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

        <link rel="preconnect" href="https://fonts.googleapis.com">

        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Roboto&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="./css/style.css">

        <title>Landing page</title>

    </head>

    <body>

        <header>

            <div class="header">

                <nav>

                    <a href="#" class="brand">  <span>H</span>ost<span>T</span>ech</a>

                    <ul>

                        <li> <a href="#"><span>H</span>ome</a></li>

                        <li> <a href="#about"><span>A</span>bout</a></li>

                        <li> <a href="#"><span>S</span>ervice</a></li>

                        <li> <a href="#"><span>B</span>log</a></li>

                        <li> <a href="#"><span>C</span>ontact</a></li>

                    </ul>

                </nav>

            </div>

        </header>

        <section class="landing-section">

            <div class="social">

                <ul>

                    <li><i class="fab fa-facebook"></i></li>

                    <li><i class="fab fa-instagram"></i></li>

                    <li><i class="fab fa-twitter"></i></li>

                    <li><i class="fab fa-youtube"></i></li>

                </ul>

            </div>

            <div class="content">

                <h1><span>T</span>ake <span>M</span>ore <span>K</span>nowledge</h1>

                <p>Lorem ipsum dolor sit amet consectetur adipisicing eliquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <button type="button" name="button">Know More</button>

            </div>

            <div class="image">

                <img src="./images/Doctors-bro.svg">

            </div>

        </section>

    </body>

</html>

Once you've created a CSS file called style.css, paste the codes in it and remember that your file should have the extension .css.

*{

    margin: 0;

    padding:0;

    font-style: 'Roboto', sans-serif;

    overflow-x: hidden;


}


.header{

    width: 98.5vw;

}

.header nav{

    display: flex;

    justify-content: space-between;

    padding: 2rem;

}


.header nav>a{

    font-size: 2.3rem;

    text-decoration: none;

    color: #434343;

    font-weight: bold;

}

.header nav>a span{

    color: blue;

}


.header nav ul{

    display: flex;

    width: 50%;

    justify-content: space-evenly;

    align-items: center;

}


.header nav ul a{

    text-decoration: none;

    color: #434343;

    font-size: 1.3rem;

    transition: 0.3s ease-in;

    font-weight: 600;

}

.header nav ul a span{

    color:blue;

}

.header nav ul li a:hover{

    color: blue;

}


.landing-section{

    display: flex;

    position: relative;

    top: 20px;

    overflow-y: hidden;

    height: 100%;

}

.social{

    position: relative;

    width: 300px;

    left: -169px;

    height: 400px;

    border-radius:52% 48% 88% 12% / 33% 34% 66% 67% ;

    background-image: linear-gradient(to right top, #0d03ff, #b800cb, #eb0095, #ff0067, #ff0043);

}

.social ul{

    list-style: none;

    position: absolute;

    top: 50%;

    left: 70%;

    transform: translate(-50%,-50%);

}

.social ul li{

    margin-top: 5px;

}

.social ul li i{

        font-size: 2rem;

        cursor: pointer;

}


.social ul li:nth-child(1){

    color: rgb(0,0,255,0.7);

}

.social ul li:nth-child(2){

    color: darkgreen;

}

.social ul li:nth-child(3){

    color: rgb(0,0,255,0.7);

}

.social ul li:nth-child(4){

    color: rgb(255,0,0);

}



.content{

    width: 400px;

    position: absolute;

    top: 40%;

    left: 30%;

    transform: translate(-50%,-50%);

}


.content h1{

    font-size: 2.5rem;

    color: #434343;

}

.content h1 span{

    color: blue;

}


.content p{

    font-size: 1.2rem;

    margin-top: 10px;

}


.content button{

    margin-top: 10px;

    width: 150px;

    height: 50px;

    background: none;

    border:2px solid #434343;

    border-radius: 30px;

    font-size: 1.2rem;

    font-weight: bold;

    transition: 0.3s ease-in;

    cursor: pointer;

}


.content button:hover{

    background: #ff0043;

    border-color: #ff0043;

    color: white;

}

.image{

    width: 500px;

    position: absolute;

    right: 0;

}

.image img{

    width: 80%;

    height: 80%;

}         



Post a Comment

0 Comments