Make a simple website using html, css

Basic website design using html and css

Firstly Design is the most important thing for any website.. It gives an idea to build a website.. Then we have to check what factors need to create a website like programming languages or html, css and javascript or php etc.

Here is the basic design of the project

Technologies used

It is a simple website design. For this we are using markup languages HTML and CSS

Softwares Used

There is no extra softwares required to create a html file. We just need notepad or notepad++ or Visual Studio code if you are used.

Topics covered

All the topics that I explained in the HTML, CSS articles will be covered while doing this project.

Softwares required to execute this project

To execute HTML files browsers like Google chrome, Mozilla firefox, Microsoft edge etc. anything can be used. Latest versions are best for executing HTML 5 version and CSS 3 versions.

For mobile HTML files are not directly accessed. For that we need to use some Mobile applications like HTML creator etc. This app will gives the output of html code directly. For that we need to add code to the app and click on the output button. This will execute any html code and gives the result.

Here is the output of the code:

HTML code:

<!DOCTYPE html>
<html>
<head>
<title> 1st project</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>

<header>
<div class="logo">
<h1>My first project</h1>
</div>
<div class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</header>

<section>
<div class="intro">
<div class="text">
<h1>Heading Text Goes here</h1>
<p>Paragraph text goes here.. <br> Paragraph text goes here..</p>
<a href="#">Learn more</a>
</div>
<div class="intro_img">
<img src="img1.jpeg" alt="Image here">
</div>
</div>
<h1 class="serr"> Services </h1>
<hr>

<div class="services">
<div class="serv1">
<img src="img1.jpeg" alt="img">
<h3>Service 1</h3>
<p>Here is the text related to service</p>
<button>Read More</button>
</div>
<div class="serv1">
<img src="img1.jpeg" alt="img">
<h3>Service 2</h3>
<p>Here is the text related to service</p>
<button>Read More</button>
</div>
<div class="serv1">
<img src="img1.jpeg" alt="img">
<h3>Service 3</h3>
<p>Here is the text related to service</p>
<button>Read More</button>
</div>
</div>
</section>

<footer>
<div class="copy">
<p> © Copyright All rights are reserved</p>
</div>

<div class="footernavbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>

CSS code:

body{
margin:0;
padding:0;
box-sizing: border-box;
}

header{
display: flex;
width: 100%;
height: auto;
background-color: #F9F6AB;
}
header .logo{
margin-right: 40%;
padding: 5px;
font-size: 20px;
font-weight: 500;
color: #8B2E2E;
}
header ul{
padding: 30px;
display: flex;
}
header ul li{
list-style-type: none;
margin-left: 35px;
padding: 10px;
}
header ul li a{
text-decoration: none;
color: #8B2E2E;
}

.intro{
display: flex;
width: 100%;
height: auto;
}
.intro .text{
margin: 20px;
margin-right: 20%;
margin-left: 10%;
margin-top: 120px;
}
.intro .text h1{
font-size: 30px;
margin-left: 20px;
margin-top: 30px;
color: #8B2E2E;
font-family: Garamond, 'Times New Roman', Times, serif;
font-style: italic;
}
.intro .text p{
font-size: 20px;
margin-left: 40px;
}
.intro .text a{
text-decoration: none;
padding: 10px 80px;
margin: 20px;
margin-left: 30px;
border-radius: 3px;
background-color: #8B2E2E;
color: #F9F6AB;
transition: all ease 1s;
}
.intro .text a:hover{
background-color: #F9F6AB;
color: #8B2E2E;
}
.intro .intro_img{
width: 50%;
height: 100%;
}
.intro img{
width: 60%;
height: auto;
padding: 30px;

}

.serr{
font-size: 40px;
text-align: center;
color: #8B2E2E;
line-height: 1px;
}
hr{

width:120px;
align-items: center;
}

.services{
width: 80%;
height: 60vh;;
align-items: center;
justify-content: center;
display: flex;
}
.services .serv1{
height: 250px;
width: 200px;
margin-right: 5%;
margin-left: 50px;
border-color: #8B2E2E;
border-style: solid;
border-width: 1px;
border-radius: 20px;
text-align: center;
align-items: center;
line-height: 12px;
}
.services .serv1 img{
width: 100px;
height: 100px;
border-radius: 50%;
margin: 10px;
margin-bottom: 0;
}
.services .serv1 h3, p{
font-family: 'Courier New', Courier, monospace;
color: #8B2E2E
}
.services .serv1 button{
padding: 10px;
width: 80%;
background-color: #8B2E2E;
color: #F9F6AB;
border-radius: 25px;
}
.services .serv1 button:hover{
cursor: pointer;
background-color: #F9F6AB;
color: #8B2E2E;
}

footer{
display: flex;
background-color: #F9F6AB;
}
.copy{
width: 60%;
height: auto;
margin-left: 40px;
margin-top: 20px;
}
.footernavbar ul{
padding: 10px;
display: flex;
}
.footernavbar ul li{
list-style-type: none;
margin-left: 35px;
padding: 10px;
}
.footernavbar ul li a{
text-decoration: none;
color: #8B2E2E;
}

Explanation :

It is the basic and static web design used. Here we are creating body by three parts.

1. header,

2. section or main body (section)

3. footer

In the above CSS code I'm using navbar CSS code for 2 times to give an idea about that topic. But we don't need to write that multiple times with same CSS. Instead of that we need to use same class names or id names for that part or mention that two names in the code where we need to add.

Header, footer has background color and body is normal white color. The color combinition used in the project gives best look. These color codes will be taken from Photoshop.

Make a simple website using html, css

Basic website design using html and css

Here is the basic design of the project

Technologies used

Softwares Used

Topics covered

Softwares required to execute this project

Here is the output of the code:

HTML code:

CSS code:

Explanation :

Click here to download the zip file of the Project

Contact Form