How To Create A Modern Website Using HTML And CSS Step By Step Website Tutorial

Hey, guys again welcome back to the brand new tutorial in this tutorial we gonna learn how to create this beautiful website for card companies using HTML CSS only. in this tutorial, we will learn How to create a modern website using HTML and CSS step by step website tutorial.

Assets For the Website :

The HTML

Let’s start with basic HTML for making a skeleton of the website . We have to start with navbar and then move to the header part of the website then jump to the image part. Using the below code you will 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="header">
        <div class="container">
            <!-- navbar -->
            <div class="navbar">
                <div class="logo">
                    <img src="image/logo.png" alt="">
                </div>

                <nav>
                    <ul>
                        <li>Home</li>
                        <li>Product</li>
                        <li>Work</li>
                        <li>About</li>
                        <li>Contact</li>
                    </ul>
                </nav>

            </div>
            <!-- end navbar -->
            <div class="row" style="padding-top: 8rem;">

                <!-- left text -->
                <div class="col-2">
                    <h1>Choose Card</h1>
                    <h1>Considering your</h1>
                    <h1 class="text_info" >Personal Need</h1>
                    <p class="text_para" >Gold card and Platinum card with many benefits <br> with more entertainments in your life</p> 
                    <a href="" class="btn" >Explore Now  &#8594</a>            

                </div>

                <!-- end left text -->

                <!-- right image -->
                <div class="col-2">
                    <img src="image/card_01.png" alt="">
                </div>
            </div>
           
        </div>
    </div>

</body>
</html>

The CSS

let’s make a very basic styling using CSS to make our header part. As I mention in upper part using our HTML we have created all the components of navbar and header text para and image lets make this header looks beautiful by applying some CSS to out skeleton. Here below I have mention all the code for designing our header. you can check this out and play around with these values and see what effect you will get.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #000;

}

body{

    font-family: 'Inter', sans-serif;
    height: 100vh;
}

.navbar
{
    display: flex;
    align-items: center;
    padding: 20px;
}

nav{
    flex: 1;
    text-align: right;
}

nav ul{
    display: inline-block;
    list-style-type: none;
}

nav ul li 
{
    display: inline-block;
    margin-right: 50px;
    color: white;
    font-weight: 700;
}

ul li:hover {
    background: rgb(0, 0, 0);
    color: #ffffffe0;
}

a{
    text-decoration: none;
    color:rgb(255, 255, 255); ;
}

p{
    color: rgb(0, 0, 0);
}

.container
{
    max-width: 1400px;
    margin: auto;
    flex-wrap: wrap;
    justify-content: space-around;
}

.row
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}

.col-2
{
    flex-basis: 50%;
    min-width: 300px;
}

.col-2 img {
    max-width: 100%;
    padding: 50px 50px;
}

.col-2 h1 {
    font-size: 50px;
    line-height: 32px;
    margin: 25px 0;
    color: rgb(255, 255, 255);
}

.text_info
{
    font-size: 40px;
    font-weight: 200;
    color: white;
}

.text_para
{
    margin-top: 2rem;
    border-radius: 10px;
    color: white;
}

.btn
{
    display: inline-block;
    background: #f0f0f0;
    color: rgb(41,41,41);
    padding: 22px 29px;
    margin: 30px 0;
    border-radius: 9px;
}

.btn:hover {
    background: #0004ff;
    color: white;
    transition: 0.9s;
}

I hope you have learned from this tutorial how we can create the Above website using only HTML & CSS.

Hopefully from this article, you have learned how to make this Header using HTML, CSS.
If you can understand how to make this watch from this article, please comment with your opinion. I have already made many more types of JavaScript mini-projects so you can see those designs if you want.

You can visit my blog for more tutorials like this.

Conclusion

I hope you enjoyed this little project.

Happy Codding ✨

Download Link Assets

File size

People are also reading: