Responsive Web Layout Design

Hello and welcome to today's blog post. Today we will create a Responsive Website homepage layout. This website design was made using HTML, CSS, and JS. For making this project. You need to know some basic HTML, CSS flexbox, and JavaScript. We have lots of tutorials about front-end development on our YouTube channel. We have added a video tutorial on our channel. The tutorial teaches you each step to create this responsive website design. Check out the video down below.

I hope you have watched the tutorial. The Homepage is the starting point of a website. This is the default webpage that loads when you visit a web URL. A website’s home page is an important way to tell the world about your business or organization. Homepages are often used as a virtual directory for a website. This section contains the top-level menus that help visitors can go deeper into the site. Apart from navigation, it has got a headline, sub-headline, call-to-action button, and social media icons. When we see the website from small devices, the main navigation hides, instead we have a hamburger icon. When we click on it, the hamburger icon turns to a cross icon and a vertical menu appears from the right. We have converted the horizontal menu to a full-screen vertical menu. When we click on the cross icon the navigation menu hides again.

You May Also Like:

Responsive Web Layout Design[ Source Code ]:

Create a new HTML file, add CSS, and copy the code below. If you want to test it in the browser, save it and do that. To fix any problem with your project, download the code from the button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>How to create a responsive personal portfolio website</title>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <h5>John<span>Doe</span></h5>
            </div>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="bar">
                <div class="bar-1"></div>
                <div class="bar-2"></div>
                <div class="bar-3"></div>
            </div>
        </nav>
    </header>
    <div class="banner">
        <div class="wrapper">
            <div class="content">
                <h2>Jonathon Doe</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, aliquam iure? Hic quisquam provident aut!</p>

                <a href="#">Learn More</a>

                <h5 class="socials">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-pinterest"></i>
                    <i class="fa fa-linkedin"></i>
                    <i class="fa fa-youtube"></i>
                </h5>
                
            </div>
        </div>
    </div>
    
    
    <script>
        const sidenav = () => {
            const menu = document.querySelector('.bar');
            const nav = document.querySelector('.menu');
            
            menu.addEventListener('click', () => {
               menu.classList.toggle('bar-active');
                nav.classList.toggle('nav-active');
            });
        }
        sidenav();
    </script>
</body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;f
    font-family: sans-serif;
}
/*nav*/

nav{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 10vh;
    background: #000;
}
.logo {
	color: #fff;
	text-transform: capitalize;
	font-size: 24px;
	cursor: pointer;
	font-weight: 900;
	letter-spacing: 1px;
}
.logo span{
    color: deepskyblue; 
}

.menu{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
    width: 30%;
}
.menu li{
    list-style: none;
}
.menu a{
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    padding: 30px;
    transition: .9s;
    font-weight: 600;
}
.menu a:hover {
	color: deepskyblue;
	font-weight: 500;
    letter-spacing: 2px;
}
.bar{
    display: none;
    cursor: pointer;
}
.bar div{
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px;
    transition: all .5s ease;
}
@media screen and (max-width:1024px){
    .menu{
        width: 60%;
    }
}
@media screen and (max-width:768px){
    body{
        overflow-x: hidden;
    }
    .menu{
        position: absolute;
        right: -100%;
        height: 90vh;
        top: 10vh;
        background-color: #000;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in-out;
    }
    .bar{
        display: block;
    }
}

.nav-active{
    transform: translateX(-100%);
}
.bar-active .bar-1{
    transform: rotate(-45deg) translate(-5px, 6px);
}
.bar-active .bar-2{
    opacity: 0;
}
.bar-active .bar-3{
    transform: rotate(45deg) translate(-5px, -6px);
}


.banner {
	background-image: url(2.jpg);
	height: 100vh;
	background-size: cover;
	background-position: center;
}

.content h2 {
	font-family: alfa slab one;
	color: #fff;
	font-size: 60px;
}
  .content p {
	width: 50%;
	color: rgba(255,255,255,0.6);
	line-height: 2;
}
  .content a {
    background: deepskyblue;
    text-decoration: none;
    padding: 15px 30px;
    color: #fff;
    display: inline-block;
    margin-top: 20px;
  }
  .socials i {
    color: #fff;
    font-size: 18px;
    margin-right: 25px;
  }
  .socials {
    margin-top: 30px;
  }
  .wrapper {
	width: 1060px;
	margin: auto;
	padding-top: 12%;
}


@media only screen and (min-width: 768px) and (max-width: 991px){
    .wrapper {
        width: 75%;
        padding-top: 26%;
    }
    .content{
        text-align: center;
    }
    .content h2 {
        font-size: 60px;
    }
    .content p {
        width: 100%;
    }
}

@media screen and (max-width: 767px){
    .banner {
        background-position: 60%;
    }
    .wrapper {
        width: 75%;
        padding-top: 26%;
    }
    .content h2 {
        font-size: 30px;
    }
    .content p {
        width: 100%;
    }
}

We hope that the code is working for you. If you would share our content, we would be grateful. We would like to thank you for your time in our community.

DOWNLOAD CODE

Responsive Web Layout Design[ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Web Layout Design

Responsive Web Layout Design[ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form