27 C
Delhi
Tuesday, May 24, 2022

How to Create a Responsive Homepage using HTML and CSS

 

Hello, and Welcome Back. Homepage design is the first step for any website layout designer to create a website project for their customer. It is the most crucial segment of any website layout because the homepage is the virtual front door of any webpage, and it creates a deep impression among the visitors. If the homepage looks are esthetic or attractive, then there is a high chance that the visitors will be interested in scrolling further on the website and exploring more from it.


You May Also Like:

For the HTML part of the snippet, I have taken a header tag, and inside that, I did the actual HTML mark up of the design. First of all, I took a div named wrapper, which will act as the container for all the elements that I will need for making the navbar for the homepage. Then I took a div called logo inside, which I placed a png logo image. If you want, you can write simple text instead of the picture. After that, I have taken an unordered list named nav-area, and inside that, I took five nav-items. After the wrapper div, I have used another div named welcome-text to create some banner text. Inside that, I used a simple random header text and a call to action button. That’s is for the HTML markup for this project

In the CSS Part, I discarded the document’s default margin and padding by providing a margin and padding of 0 to the universal selector. I gave the wrapper class a custom width of 1170px and gave margin auto, so the navbar aligns perfectly at the center. I gave the header element a background image and blackish overlay effect on it with linear-gradient CSS function. Then I provided a 100vh height to it and gave it a relative position value. I then did some basic styling like positioned the logo and nav-area to left and right and made the navbar display inline.

I gave the welcome-text class width of 600px and height of 300px and gave it absolute position value for the banner text. I used the margin value to take the welcome-text content to the middle of the homepage. After that, I have provided some basic styling for all the elements in the welcome-text class.


Responsive homepage using Html and CSS (Source Code)

To create this snippet, you need to create two files. One of them is an HTML file, and another one is the CSS file. After that, you need to copy the HTML and CSS code and paste the code to the appropriate files and save them.


HTML:


<body>

    <header>

           <div class=”wrapper”>

            <div class=”logo”>

            <img src=”logo.png”>

            </div>

   <ul class=”nav-area”>

       <li><a href=”#”>Home</a></li>

                <li><a href=”#”>About</a></li>

<li><a href=”#”>Product</a></li>

 <li><a href=”#”>Services</a></li>

  <li><a href=”#”>Contact</a></li>

   </ul>

</div>

 <div class=”title”>

 <h1>Theinfowave</h1>

  <li class=”active”><a href=”#”>Contact US</a></li>

 </div>

</body>

    </header>

CSS: 


*{margin:0;padding:0;}

.wrapper {width:1170px;margin:auto;}

header {background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(pic.jpg); height:100vh; background-size:cover; background-position:center;position:relative;}

.nav-area {float: right; list-style-type:none; margin-top:30px;}

.nav-area li {display:inline-block;}

.nav-area li a {color:#fff; text-decoration:none; padding: 5px 15px; font-family:cambria; font-size:18px;}

 .nav-area li a:hover {background:#fff; color:#333;}

.logo img {float:left;width:150px;height:auto;margin-top:30px;}

 .title {position:absolute; top:65%;left:50%;transform:translate(-50%,-50%);}

 .title h1{text-align:center; color:#fff; text-transform:uppercase; font-size:60px;}

 .title a {border: 1px solid #fff; padding: 10px 20px; text-decoration:none; text-transform:uppercase; font-size:14px; margin-left:130px; margin-top:18px; display:inline-block; color:#fff;}

.title a:hover {background-color:#fff; color:#333;}

 .active a { background-color:#fff; color:#000;}

I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated.



 



 

Related Articles

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

25,000FansLike
1,500FollowersFollow
5,000FollowersFollow
6,000SubscribersSubscribe

Latest Articles