Home / Project / Make a cool landing page using HTML and CSS

Make a cool landing page using HTML and CSS

-


hello everyone and welcome back to a new project.
in this project, I will show you how to make a cool landing page with split effect using only HTML and CSS like the example in the video below.

I will give you the full source code of this project if you liked it just tell us in the comment and you can tell us if you want from us to create a specific project

HTML Code:




<!DOCTYPE HTML>

<html>
    <head>
    <link rel="stylesheet" href="main.css">
    
    </head>

    
    <body>
        <div class="container">

            <div class="right">
                <div class="filter">
                </div>
                <div class="info">
                   
                    <a href="#">get a programmer</a>
                </div>
            </div>
            
            <div class="left">
                <div class="filter">
                </div>
                <div class="info">
                    
                    <a href="#">get a designer</a>
                </div>
            </div>
            
        </div>
        
        <div class="section">
            <h1>Who we are</h1>
            <p>
            Donec sit amet leo urna. Suspendisse tristique eros maximus dignissim ultrices. Donec laoreet, leo vitae malesuada ultrices, magna nunc blandit eros, in sodales mi dolor vitae libero. Aenean commodo quis nisi gravida volutpat. Cras facilisis hendrerit augue, nec lacinia urna feugiat pellentesque. Duis non mollis massa. Integer placerat non ligula non fringilla. Aenean tristique id urna nec dapibus. Ut sem est, facilisis sed justo imperdiet, vestibulum sodales nulla.

Suspendisse nisl dui, lobortis at sem at, imperdiet pellentesque est. Suspendisse sit amet erat mauris. Etiam magna diam, mattis a sagittis ac, pulvinar et est. Sed varius, purus ut hendrerit vehicula, enim nibh sagittis ante, dapibus dapibus ex lectus ut metus. Nullam tincidunt, nulla ut volutpat imperdiet, elit dui faucibus odio, viverra dapibus nunc justo eu lectus. Integer et neque in sapien vehicula congue non ut ligula. Nam molestie fermentum augue eu mollis. Praesent efficitur ultricies hendrerit.
            </p>
        </div>
        
    </body>

</html>

CSS Code:



*{
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: sans-serif;
}


.container{
    height: 100vh;
    display: flex;
    flex-direction: row;
}
.filter{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .3;
}
.info{
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    transform: translate(-50%,-50%);
    color: #fff;
}
.info a{
    margin: 10px;
    padding: 10px 30px;
    color: #fff;
    font-size: 1.2rem;
    text-transform: uppercase;
    border: 1px solid #fff;
    transition: .4s;
    text-decoration: none
}
.info a:hover{
    background-color: #fff;
    color: #212121;
}
.right{
    position: relative;
    width: 50%;
    background-image: url(https://images.unsplash.com/photo-1528660544347-95a93c58e424?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80);
    background-size: cover;
    background-position: center;
    transition: .4s;
    border-right: 4px solid #212121;
}
.right:hover{
    width: 80%;
}
.right:hover .info p{
    display: block;
}
.right .filter
{
    background-color: #3f51b5;
}
.left{
    position: relative;
    width: 50%;
    background-image: url(https://images.unsplash.com/photo-1521898284481-a5ec348cb555?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80);
    background-size: cover;
    background-position: center;
    transition: .4s;
    border-left: 4px solid #212121;
}
.left:hover{
    width: 80%;
}
.left .filter{
    background-color: #f44336;
}
.section{
    padding: 100px 20%;
}
.section h1{
    text-align: center;
    text-transform: uppercase;
    margin: 10px 0;
}
.section p{
    font-size: 1.2rem;
    line-height: 2rem;
}

and that's it, i hope you liked this new project, if it's the case, you can visit our page and see more of our project.
Make a cool landing page using HTML and CSS Make a cool landing page using HTML and CSS Reviewed by Medics on March 29, 2019 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
-->
Powered by Blogger.