How To Make An Awesome Website Just Using HTML And CSS

byPosted at
How To Make A Awesome Website Just Using HTML And CSS
Awesome Website Just Using HTML And CSS

We will make an awesome website only using HTML and CSS. This website is fully responsive. In this tutorial you will learn how to make a website using HTML and CSS.



How To Create A Website Just Using HTML And CSS

  1. 00:00 - 01:04 min : Intro
  2. 01:04 - 24.00 min: Make A Website Just Using HTML And CSS


Basic HTML Code

This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices. 


  <html>
<head>
<meta charset="utf-8">
<meta content="IE-edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, intial-scale=1.0" name="viewport">
<title>Blog Website</title>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

HTML 

  <!--doctype html-->
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--==Title==================================-->
<title>HTML CSS - Website</title>

<!--==CSS====================================-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<!--==Fav-icon===============================-->
<link rel="shortcut icon" href="images/fav-icon.svg"/>

<!--==Import-Poppins-Font-Family=============-->
<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:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap" rel="stylesheet">

<!--==Using-FontAwesome=======================-->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

</head>

<body>


    <!--==Navigation===========================-->
    <nav class="navigation">

        <!--logo--------->
        <a href="#" class="logo">Design.</a>

        <!--contact-btn--->
        <a href="#contact" class="contact-btn">Contact</a>

    </nav>
    <!--navigation-end---------------------------->




    <!--==container===============================-->
    <section class="container">

        <!--img------------->
        <div class="container-img">
            <img alt="img" src="images/img.svg">
        </div>

        <!--text------------>
        <div class="container-text">
            <strong>Get an amazing logo for your startup in 60 seconds.</strong>
            <p>A delightful new way to make logos for your internet startup is coming soon.</p>
            <!--notify-box------->
            <form class="notify-box">
                <!--input-->
                <input type="email" class="input" placeholder="YourEmail@gmail.com" required>
                <!--submit-btn--->
                <input type="submit" class="notify-btn" value="Notify Me">
            </form>
        </div>


    </section>
    <!--container-end--------------------------------------->





    <!--==Services================================-->
    <section id="services">

        <!--box-1------------->
        <div class="service-box">

            <!--img------>
            <div class="service-img">
                <img alt="service" src="images/service-1.svg">
            </div>

            <!--text----->
            <div class="service-text">
                <strong>Real logos. Real fast</strong>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, accusamus qui! Molestias corporis quaerat optio minus</p>
            </div>

        </div>

        <!--box-2------------->
        <div class="service-box">

            <!--img------>
            <div class="service-img">
                <img alt="service" src="images/service-2.svg">
            </div>

            <!--text----->
            <div class="service-text">
                <strong>Do it yourself and save</strong>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, accusamus qui! Molestias corporis quaerat optio minus</p>
            </div>

        </div>


        <!--box-3------------->
        <div class="service-box">

            <!--img------>
            <div class="service-img">
                <img alt="service" src="images/service-3.svg">
            </div>

            <!--text----->
            <div class="service-text">
                <strong>Get website-ready logos</strong>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, accusamus qui! Molestias corporis quaerat optio minus</p>
            </div>

        </div>


        <!--box-4------------->
        <div class="service-box">

            <!--img------>
            <div class="service-img">
                <img alt="service" src="images/service-4.svg">
            </div>

            <!--text----->
            <div class="service-text">
                <strong>Professional Logo Designs.</strong>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, accusamus qui! Molestias corporis quaerat optio minus</p>
            </div>

        </div>

    </section>
    <!--services-end---------------------------------------------->





    <!--==container-2===============================================-->
    <section class="container reverse">

        <!--img------------->
        <div class="container-img">
            <img alt="img" src="images/img-2.svg">
        </div>

        <!--text------------>
        <div class="container-text">
            <strong>Launch your website faster with a new logo from logobly.</strong>
            <p>A delightful new way to make logos for your internet startup is coming soon.</p>
            <!--notify-box------->
            <form class="notify-box">
                <!--input-->
                <input type="email" class="input" placeholder="YourEmail@gmail.com" required>
                <!--submit-btn--->
                <input type="submit" class="notify-btn" value="Notify Me">
            </form>
        </div>


    </section>
    <!--container-end--------------------------------------->




    <!--==contact====================================-->
    <section id="contact">

        <!--img----------->
        <img alt="contact" src="images/contact.svg"/>

        <!--connect-btn--->
        <a href="https://facebook.com/goingtointernet">Let's Connect <i class="far fa-paper-plane"></i></a>

    </section>


    <!--copyright======================================-->
    <span class="copyright">Copyright 2021 - GoingToInternet</span>

</body>

</html>
CSS 
*{
    font-family: poppins;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
body{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
}
/*====navigation===========================*/
.logo{
    font-size: 2rem;
    color: #2f2e41;
    font-weight: 700;
}
.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}
.contact-btn{
    color: #2f2e41;
    border: 1px solid #33333344;
    width: 120px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all ease 0.3s;
}
.contact-btn:hover{
    color: #ffffff;
    background-color: #33b1f9;
    border: none;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.07);
    transition: all ease 0.3s;
}

/*==container-section=================================*/
.container{
    max-width: 1200px;
    margin: 80px auto 110px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.container-img{
    max-width: 500px;
}
.container-img img{
    width: 100%;
    object-fit: contain;
    object-position: center;
}
.container-text{
    width: 450px;
}
.container-text strong{
    font-size: 2.3rem;
    line-height: 45px;
    color: #19191f;
}
.container-text p{
    color: #777777;
    margin: 10px 0px;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}
.notify-box{
    display: flex;
    justify-content: space-between;
}
.notify-box .input{
    width: 100%;
    padding: 10px;
    border: none;
    outline: none;
    background-color: #eeeeee;
}
.notify-box .notify-btn{
    min-width: 120px;
    background-color: #33b1f9;
    color: #ffffff;
    border: none;
    outline: none;
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
}
/*==services========================================*/
#services{
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin: 100px auto 100px auto;
}
.service-box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 20px;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    transition: all ease 0.3s;
}
.service-box:hover{
    box-shadow: 2px 2px 30px rgba(0,0,0,0.07);
    transition: all ease 0.3s;
}
.service-img{
    width: 100px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 40px;
}
.service-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.service-text{
    margin-right: auto;
}
.service-text strong{
    color: #19191f;
    font-size: 1.2rem;
}
.service-text p{
    color: #838383;
    margin-top: 2px;
    font-size: 0.9rem;
}
/*==container=2========================*/
.reverse{
    flex-direction: row-reverse;
}
/*==contact===========================*/
#contact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 70px auto;
}
#contact img{
    max-width: 500px;
    object-fit: contain;
    object-position: center;
}
#contact a{
    background-color: #2f2e41;
    color: #ffffff;
    width: 300px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    transition: all ease 0.3s;
}
#contact a i{
    margin-left: 5px;
}
#contact a:hover{
    background-color: #33b1f9;
    transition: all ease 0.3s;
}
/*==copyright=======================*/
.copyright{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #e2e2e2;
    color: #1b1b1b;
    padding: 15px;
    font-size: 0.9rem;
}
/*==making-responsive================================*/
@media(max-width:1250px){
    .container,
    #services,
    #contact{
        width: 100%;
        max-width: 90%;
    }
    .container-img{
        width: 300px;
    }
    .container-text{
        width: 400px;
    }
}
@media(max-width:1000px){
    #services{
        grid-template-columns: 1fr;
    }
}
@media(max-width:860px){
    .container{
        flex-direction: column;
        margin-top: 40px;
    }
    .container-text{
        width: 90%;
        text-align: center;
        margin-top: 30px;
    }
    .notify-box{
        margin-top: 30px;
    }
    #contact img{
        width: 90%;
        max-width: 400px;
    }
}
@media(max-width:600px){
    .logo{
        font-size: 1.4rem;
    }
    .container-text strong{
        font-size: 1.6rem;
        line-height: 34px;
    }
    .container-img,
    #contact img,
    #contact a{
        max-width: 250px;
        width: 90%;
    }
    .service-box{
        flex-direction: column;
        text-align: center;
    }
    .service-img{
        margin: 0px;
    }
    .service-text{
        margin: 10px 0px 0px 0px;
    }
}





How To Dowload Files
Share
Post a Comment Labels,

Comments


Archive

Contact Form

Send