Website design code in 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.

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.

Источник

CSS Website Layout

A website is often divided into headers, menus, content and a footer:

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

Header

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

Example

Header

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Example

/* The navbar container */
.topnav overflow: hidden;
background-color: #333;
>

/* Navbar links */
.topnav a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Links — change color on hover */
.topnav a:hover background-color: #ddd;
color: black;
>

Content

The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

• 1-column (often used for mobile browsers)
• 2-column (often used for tablets and laptops)
• 3-column layout (only used for desktops)

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Example

/* Create three equal columns that float next to each other */
.column float: left;
width: 33.33%;
>

/* Clear floats after the columns */
.row:after content: «»;
display: table;
clear: both;
>

/* Responsive layout — makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) .column width: 100%;
>
>

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Tip: To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc.

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.

Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above).

To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Unequal Columns

The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any) is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total:

Example

/* Left and right column */
.column.side width: 25%;
>

/* Middle column */
.column.middle width: 50%;
>

/* Responsive layout — makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) .column.side, .column.middle width: 100%;
>
>

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Footer

The footer is placed at the bottom of your page. It often contains information like copyright and contact info:

Example

Responsive Website Layout

By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

How to Create a Simple Website in HTML & CSS | With Source Code

Are you looking for Simple Website Design, If your answer is yes then you are in the right post? In this blog, you will learn to create a simple website design using HTML & CSS. I already have created a lot of Website Designs. I hope you will like those projects.

A website is a collection of web pages located under a single domain name. websites are typically dedicated to a particular topic or purpose, such as news, education, commerce, entertainment, or social networking.

Have a quick look at the given preview of our website. In this image, I have added a full background image, a logo, links, text, and buttons. And here, as you can see, when I take the cursor over the link, the link’s color will be pink.

If you want to see the actual demo of this Website then you can watch the video given below. After watching the video tutorial, You will also get an idea of the HTML and CSS code that I have used to create this website.

Video Tutorial | Create Simple Website in HTML & CSS

As you have seen in this video tutorial of this Simple Website. First, there is a full background image after that you can see the logo, some links, texts, and buttons. As you’ve seen in this video whenever I take the cursor over the menu links the color of the menu link will be changed, also whenever I take the cursor over the hire me button the background color of the link will be changed and you can see white text color and border color there.

That’s how you can create a simple website design using HTML and CSS only. I hope you are now able to create this simple website using HTML and CSS. If you are a beginner I suggest you don’t skip the video. It might be difficult for you so, try to understand the codes, methods, and logic.

You May Like This:

A Simple Website [Source Codes]

1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Create a Simple Website by clicking on the given download button.

First, paste the following codes into your index.html file.

Second, paste the following codes into your style.css file.

@import url(‘https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&display=swap’); * < margin: 0; padding: 0; box-sizing: border-box; font-family: 'Karla', sans-serif; >body < color: #fff; >.container < width: 100%; height: 100vh; background-image: url(back.jpg); background-position: center; background-size: cover; padding-top: 35px; padding-left: 8%; padding-right: 8%; >nav < padding: 10px 0; display: flex; align-items: center; justify-content: space-between; >.logo a < font-size: 40px; text-decoration: none; >span < color: #f9004d; >nav ul li < display: inline-block; list-style: none; margin: 10px 15px; >nav ul li a < text-decoration: none; transition: 0.5s; >nav ul li a:hover < color: #f9004d; >.login < text-decoration: none; margin-right: 15px; font-size: 18px; >.btn < background: #000; border-radius: 6px; padding: 9px 25px; text-decoration: none; transition: 0.5s; font-size: 18px; >.content < margin-top: 10%; max-width: 600px; >.content h2 < font-size: 60px >.content p < margin-top: 10px; line-height: 25px; >a < color: #fff; >.link < margin-top: 30px; >.hire < color: #000; text-decoration: none; background: #fff; padding: 9px 25px; font-weight: bold; border-radius: 6px; transition: 0.5s; >.link .hire:hover

That’s all, now you’ve successfully created a project on the Website. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

Источник