Responsive Homepage using HTML CSS |
Today We will design a simple-looking responsive homepage using HTML and CSS. We will give it a responsive look with the help of CSS media queries. Now, this snippet is for absolute beginners who have already learned a bit of HTML and CSS. Those of you trying to make a website and wondering how to make a responsive homepage for it, then this snippet is for you. For this project, I used Poppins font, and you can use this font from Google font by linking the font's URL in your HTML page.
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.
You May Also Like:
- Animated Background with Pure CSS and Html
- Creative Pricing table design using Bootstrap
- Awesome Bootstrap slider with Text Animation
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.
For the responsive part, anything below 600px pixel width, we will get a nice responsive look of the design. I have changed some basic styling in the media queries, which you will get in the code below.
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:
CSS:
how to enter data in menu bar like home,service,aboutus and so on?
ReplyDeletePost a Comment
Please do not enter any spam link in the comment box.