Simple Website Design using HTML and CSS

Simple Website Design using HTML and CSS

Welcome Friends, In this blog, we will learn how to create a Simple Website layout Design using HTML and CSS. Earlier I have shared a blog on how to Create a Simple Accordion Design using only HTML and CSS. In this tutorial of Simple Website Design layout, I have used plain HTML and CSS.

In this blog, you will learn how to make a simple looking website using html5 and css3. In addition to the blog, I will give you access to the source code that I am going to be using to use it in your project. Together we will build this simple looking website, and by doing that, you will learn some necessary skills of html5 and css3 like how to use fonts, images, navigations, some basic animations, etc.


The above video is showing the finished version of the website on the website's homepage, where I have created a simple-looking navbar with a font-awesome icon in it. When we hover over the nav item, the background, and color, the anchor element will change. When we click over the nav item, it will take to the associated page with a slow transition effect. For the five pages (home, about, portfolio, services, and contact), I have taken five div and named them with a unique id. I also linked the respective pages in the navbar so that it can take us to that particular page when we click on it.

You may also like:

• Navigation Bar with Slider using HTML CSS & Bootstrap 4 
• Awesome Bootstrap slider with Text Animation
• Creative Profile Card Design using HTML CSS and JS

In the CSS part, I have discarded the document's document's default padding and margin. Thus, I have provided the padding and margin to 0. I used lato as the default font fort he projects. Then i have given the box div a width of 100% and a height of 100vh. Then i provided a relative position and 100% height value to all the div inside the box id. for the content class, I used absolute position value and transform property to bring all the items of content class in the middle. I also provided text-align property to get the content center of the viewport. After that, I did some necessary styling for all the elements in the content class. For the navbar, I want it to be fixed when we will scroll down the page, so I have given it absolute position value and provided a z-index value to remain on the top of the content. After that, I have decorated the navbar with some necessary styling. I have added a font-awesome icon to the left side of each nav-item. I used the font-awesome 4.7.0 CDN version and added that in my HTML file.  I have also added a deep pink background color for the nav-item hover effect. I have given a background image for the homepage, but I have provided a whitish background color for the rest of the section.

Simple Website Layout Design (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 it to the appropriate files and save them.

HTML:

<div id="box"> <ul> <li><a href="#home"><i class="fa fa-home"></i>  Home</a></li> <li><a href="#about"><i class="fa fa-book">  about</i></a></li> <li><a href="#portfolio"><i class="fa fa-cog">  portfolio</i></a></li> <li><a href="#services"><i class="fa fa-folder">  services</i></a></li> <li><a href="#contact"><i class="fa fa-envelope">  contact</i></a></li> </ul> <div id="home"> <section class="content"> <h1> Creative Agency</h1> </section> </div> <div id="about"> <section class="content"> <h1> About</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa cupiditate deleniti dicta dolorum ducimus ea enim et fugiat illo impedit in inventore laboriosam minima natus nemo non pariatur perferendis praesentium quas quos ratione, repellat rerum sequi tempore totam vitae voluptate. Dolore et minima numquam perferendis praesentium quaerat rem voluptatem?</p> </section> </div> <div id="portfolio"> <section class="content"> <h1> Portfolio</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa cupiditate deleniti dicta dolorum ducimus ea enim et fugiat illo impedit in inventore laboriosam minima natus nemo non pariatur perferendis praesentium quas quos ratione, repellat rerum sequi tempore totam vitae voluptate. Dolore et minima numquam perferendis praesentium quaerat rem voluptatem?</p> </section> </div> <div id="services"> <section class="content"> <h1> Services</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa cupiditate deleniti dicta dolorum ducimus ea enim et fugiat illo impedit in inventore laboriosam minima natus nemo non pariatur perferendis praesentium quas quos ratione, repellat rerum sequi tempore totam vitae voluptate. Dolore et minima numquam perferendis praesentium quaerat rem voluptatem?</p> </section> </div> <div id="contact"> <section class="content"> <h1> Contact</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa cupiditate deleniti dicta dolorum ducimus ea enim et fugiat illo impedit in inventore laboriosam minima natus nemo non pariatur perferendis praesentium quas quos ratione, repellat rerum sequi tempore totam vitae voluptate. Dolore et minima numquam perferendis praesentium quaerat rem voluptatem?</p> </section> </div> </div>


CSS:

*{ margin: 0; padding: 0; } body{ font-family: lato; } #box{ width: 100%; height: 100vh; scroll-behavior: smooth; overflow-y: scroll; } #box div{ position: relative; height: 100%; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; padding: 0 40px; } .content h1 { font-size: 70px; font-weight: bold; color: #262626; text-transform: uppercase; margin-bottom: 40px; } #about .content h1, #portfolio .content h1, #services .content h1, #contact .content h1{ color: #5b5b5b; } .content p { line-height: 1.5; margin: auto; color: #000; } ul { padding: 0; text-align: center; position: fixed; margin: 2% auto; z-index: 1; width: 1100px; left: 0; right: 0; font-family: lato; } ul li{ list-style: none; display: inline-block; } ul li a { display: block; text-decoration: none; height: 45px; font-size: 20px; background: #fff; width: 200px; color: #262626; margin: 4px 0; text-transform: uppercase; line-height: 45px; } ul li a:hover{ background: deeppink; text-decoration: none; color: #fff; } #home{ background-image: url(1.jpg); -webkit-background-size: cover; background-size: cover; background-position: center center; } #portfolio, #contact { background: #f3f3f3; }

I hope you liked it. Please feel free to leave a comment. Thank you for stopping by in this blog.