Website Design Using HML and CSS

Hello Readers, Welcome to my other Blog, today in this Blog I'm going to create a website design Using HTML and CSS. It is so beautiful and so simple website design using only css.

Video Tutorial Of Website Design Using HTML and CSS:

In the video, you have seen the demo of this and I hope you love it.

Source Code:

index.html

<!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>Website Design Using HTML & CSS</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>

<body>
    <nav>
        <div class="logo">
            <i class="fa fa-lightbulb-o" aria-hidden="true"></i>Creative
        </div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Services</a></li>
            <li><a class="active" href="#">Get Started</a></li>
        </ul>
    </nav>
    <div class="conatiner">
        <img src="/img/web_design_2.png" alt="">
        <div class="content">
            <h2>Social Media Marketing <br>& Web Development</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae accusantium dicta to <br> repudiandae,
                molestias labore modi rerum, aliquid hic, nobis ipsum minima lorem <br> repudiandae, molestias
                labore modi rerum, aliquid hic, nobis ipsum minima.</p>
            <button>Read More</button>
        </div>
    </div>
    <div class="copyright">
        Copyright © 2021 Creative. All rights reserved
    </div>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 13pt;
    background-color: #feffff;
    padding: 10px;
}

nav {
    display: flex;
    height: 80px;
    width: auto;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px 0 100px;
    margin-bottom: 10px;
    border-radius: 10px;
    flex-wrap: wrap;
}

nav .logo i {
    color: #9f00ff;
    font-size: 38px;
    cursor: pointer;
    margin-right: 11px;
}

nav .logo {
    color: #111;
    font-size: 35px;
    font-weight: 600;
    margin-left: -12px;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

nav ul li {
    margin: 0 5px;
}

nav ul li a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
    padding: 8px 15px;
    border-radius: 5px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

nav ul li a.active, nav ul li a:hover {
    color: #fff;
    background: #af68db;
    border-radius: 50px;
}

.conatiner {
    padding: 10px 10px;
    height: 100px;
    margin-left: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
    margin-bottom: 295px;
}

.conatiner img {
    margin-top: 40px;
    margin-left: -80px;
}

.conatiner .content {
    padding: 10px;
    position: relative;
    margin-left: 20px;
    float: right;
    overflow: hidden;
}

.conatiner .content h2 {
    color: #9f00ff;
    font-size: 50px;
    font-weight: 900;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.conatiner .content p {
    font-family: sans-serif;
    letter-spacing: 1px;
    margin-top: 20px;
}

.conatiner button {
    color: #fff;
    background: #9f00ff;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 800;
    border: none;
    padding: 8px 15px;
    letter-spacing: 1px;
    margin-top: 20px;
}

.conatiner button:hover {
    color: #111;
    background: #9a20e6;
}

.copyright {
    font-size: 10pt;
    text-align: center;
    padding-bottom: 10px;
    color: #050505;
}

Sagar Developer

Website Design Using HML and CSS

In the video, you have seen the demo of this and I hope you love it.

Source Code:

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

Website Design Using HML and CSS

In the video, you have seen the demo of this and I hope you love it.

Source Code:

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form