Responsive Website layout Design

Responsive web design is a technique that allows web developers to change the appearance of a website for smaller devices like mobile phones, tablets, etc. For example, designers adjust fonts, colors, images, layout, text, navigation, and other items based on the size and orientation of a device. In this post, we are going to share another responsive web design layout snippet that can adapt to all screens, from desktops to smartphones. After watching the full video, you can collect the source code. This video demonstrates how to make responsive web layouts work as you resize your browser window. If the content of our YouTube channel seems useful to you, then subscribe to our YouTube channel and stick with us.

We hope you have watched the video to the end. Content on any device is more effective when it's optimized for that device. Responsive layouts enhance the user experience and increase the readability of that website. It can help you increase your conversion rate for a specific web page and the overall time spent by the user. In today's blog post, we have designed a responsive header and an accompanying hero section. The header of this layout has a png logo on the left and menu items on the right. A captivating image is set in the background of the hero section. We have added a headline, supporting text, and a call to action button in the middle of the hero section. Some changes have been made for the smaller devices with the use of media queries. The main changes that have been made to the responsive design are in the header. The logo and nav changed their positions from side by side to top of each other. Besides, the font size of the headline and nav items has also been reduced so that it can be seen clearly on smaller devices.

You May Also like:

Responsive Website Layout Design [ Source Code ]:

First, create an HTML file and then a CSS file. Copy the text code from the box below and paste it into your project. Create the project and test it in your browser to make sure it works. If it’s not working then please download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>Responsive Website Layout Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>

<header>
    <div class="wrapper">
        <div class="logo">
            <img src="logo.png" alt="">
        </div>
        
        <ul class="nav-area">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>


<div class="welcome-text">
    <h1>Website Design</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <a href="#">Contact US</a>
</div>


</header>


</body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0; 
}
body{
    font-family: 'Lato', sans-serif;
}
.wrapper{
    width: 1170px;
    margin: auto;
}
header{
    background: url(1.jpg);
    height: 100vh;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.nav-area{
    float: right;
    list-style: none;
    margin-top: 30px;
}
.nav-area li{
    display: inline-block;
}
.nav-area li a {
	color: #565656;
	text-decoration: none;
	padding: 5px 20px;
	font-family: poppins;
	font-size: 16px;
	text-transform: uppercase;
	border-radius: 50px;
}
.nav-area li a:hover {
	background: #565656;
	color: #fff;
}
.logo{
    float: left;
}
.logo img{
    width: 100%;
    padding: 15px 0;
}

.welcome-text {
    width: 100%;
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.welcome-text h1 {
	text-align: center;
	color: #565656;
	text-transform: uppercase;
	font-size: 38px;
	font-family: alfa slab one;
}
.welcome-text a {
	border: 1px solid #565656;
	padding: 10px 25px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	margin-top: 20px;
	display: inline-block;
	color: #565656;
	font-weight: 900;
}
.welcome-text a:hover {
	background: #565656;
	color: #fff;
}

/*resposive*/

@media (max-width:600px){
    .wrapper {
width: 100%;
}
.logo {
float: none;
width: 20%;
text-align: center;
margin: auto;
}
.nav-area {
float: none;
margin-top: 0;
}
    .nav-area li a {
padding: 5px;
font-size: 11px;
}
.nav-area {
text-align: center;
}
    
    .welcome-text h1 {
font-size: 30px;
}
}

I hope the code is working for you. Our website has many more snippets based on various animation examples, full website designs, and javascript animation. You can click the Load More button on our home page to access those projects we created in the past. Please don't forget to share our content. Thank you for being part of our community.

DOWNLOAD CODE

Responsive Website Layout Design [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Website layout Design

Responsive Website Layout Design [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form