Create a Simple Single Page Website Using HTML and CSS
When you are going to be a web developer, you must first learn HTML and CSS. However, you cannot complete learning HTML and CSS. What you can do is you can learn basic syntaxes and do the assignment and pass the exams. Except you will get real experience and knowledge when you design web site in the field. When you are new to web development, or you need to pass your assignment related to HTML and CSS, you can follow this article and create a single-page website within 5–10 minutes. I have also explained all the tags and all the other stuff for your knowledge.
Prerequisites
- VS code
Visual Studio Code is the IDE I prefer. You can use any other IDE to edit the files. Or else, you can download the VS code editor from here.
- Install the Live Server extension into the VS code.
To check and run the changes on the browser, I installed the live server into VS code. Then you can check the changes when we develop the pages with just one click. Or else you can run the file using any other way you prefer. To install the live server, you need to Open VSCode and type ctrl+P, type ext install ritwickdey.liveserver , and press enter.
So let’s go to the implementation. You need to follow the steps below.
Step 01
Create a folder called genotechies (Anywhere on your computer) and open that folder through the editor. Inside that folder, create the index.html file.
- You can run the index.html file using the Live server. Please right-click on index.html file and choose the option Open with Live Server. It will open the page on your favourite browser.
Step 02
This is the basic template of an HTML page. First, I copied it to the index.html file. So we are going to add all other components to this template.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Step 03: Add meta tags and edit the title in the head tag
The <meta> tag defines metadata about an HTML document. Metadata describes the data contained inside the web page.
<meta> tags always go inside the <head> element and are typically used to specify the character set, keywords, page description, author of the document, and viewport settings.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Genotechies Website Design</title>
</head>Step 04: Create an Image Folder and Other Files
Before we edit the body tag, we need to create the Image folder in that same directory and style.css file. You need to add the images from time to time when required. Also need to update the CSS file.
Step 05: Add the container to the top of the body
First, we add the top container. I packed the logo, search bar, image, title and social icons inside.
<div class="container">
<div class="logo">
<img src="Images/logo.png" alt="Programming PEN">
</div>
<div class="sectionSearch">
<div class="searchBox">
<i class="fas fa-search"></i>
<input type="search" placeholder="Search">
</div>
</div>
<div class="firstSectinImage">
<img src="Images/photo01.jpg" alt="" srcset="">
</div>
<div class="firstSectionHeading">
<h1><span>Summer</span> Special</h1>
<h1 class="letterSpacing"> Collections <span>with offers</span></h1>
<button class="btnBuyNow">Buy Now</button>
</div>
<div class="mediaIcons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<script src="https://kit.fontawesome.com/9e5a623fa6.js" crossorigin="anonymous"></script>Here I named classes a container, logo, sectionSearch, firstSectinImage, firstSectionHeading, letterSpacing, btnBuyNow, and mediaIcons. So I gave the styles to those classes by referring to the class names.
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100vh;
}
.logo {
position: absolute;
top: 50px;
left: 90px;
}
.sectionSearch {
position: fixed;
top: 50px;
right: 90px;
width: 170px;
height: 45px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
box-shadow: 2px 2px 30px rgba(167, 158, 245, 0.2);
box-sizing: border-box;
z-index: 1;
border: 1px solid rgba(167, 158, 245, 0.1);
}
.searchBox input {
width: 90px;
height: 20px;
border: none;
outline: none;
background-color: transparent;
color: #1f1f1f;
font-size: 1rem;
padding: 0px 10px;
}
.firstSectinImage {
position: absolute;
left: 15%;
top: 50%;
transform: translate(-15%, -50%);
}
.firstSectinImage img {
height: 400px;
}
.firstSectionHeading {
position: absolute;
top: 50%;
left: 70%;
transform: translate(-40%, -50%);
}
.firstSectionHeading h1 {
font-family: roboto, arial, helvetica;
font-weight: bold;
margin: 0px;
line-height: 60px;
font-size: 2.4rem;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
color: #3d3d4a;
text-transform: uppercase;
}
.letterSpacing {
letter-spacing: 7px;
}
.firstSectionHeading span {
color: #5b53ff;
}
.btnBuyNow {
width: 150px;
height: 40px;
background-color: #2f2e41;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
margin-top: 20px;
color: #fff;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-weight: 600;
letter-spacing: 0.5px;
font-size: 1rem;
outline: none;
cursor: pointer;
border: transparent !important;
}
.btnBuyNow:hover {
color: #fff;
background-color: #5b53ff;
transition: all ease 0.5s;
}
.mediaIcons {
position: fixed;
left: 30px;
top: 50%;
transform: translateY(-50%);
border-radius: 20px;
background-color: #fff;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
padding: 1px 2px;
z-index: 1;
}
.mediaIcons a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 15px;
text-decoration: none;
}
.mediaIcons a i {
color: rgba(39, 39, 39, 0.8);
}
.mediaIcons a:hover .fa-facebook-f {
color: #5078cf;
}
.mediaIcons a:hover .fa-twitter {
color: #00acee;
}
.mediaIcons a:hover .fa-instagram {
color: #fd9217;
}
.mediaIcons a:hover .fa-youtube {
color: #ff0000;
}I also added the last script tag, loading the social icons from the font awesome icon and toolkit.
Step 05: Adding the product section
The <section> tag defines a section in a document. So here I added a few sections. First, it’s the products section.
<section class="productSection">
<h3>New <span>Products</span> Collection</h3>
<div class="product">
<div class="productBox">
<img src="Images/product1.jpg">
<p>Baby Girl Dress</p>
<a href="">$27.99</a>
<a href="" class="btnCart">Add to cart</a>
</div>
<div class="productBox">
<img src="Images/product2.jpg">
<p>Men's Blazer Jacket</p>
<a href="">$58.99</a>
<a href="" class="btnCart">Add to cart</a>
</div>
<div class="productBox">
<img src="Images/product3.jpg">
<p>Men's All Cotton Flannel Shirt</p>
<a href="">$41.98</a>
<a href="" class="btnCart">Add to cart</a>
</div>
<div class="productBox">
<img src="Images/product4.jpg">
<p>Women's Court Tennis Shoe</p>
<a href="">$68.35</a>
<a href="" class="btnCart">Add to cart</a>
</div>
<div class="productBox">
<img src="Images/product5.jpg">
<p>Women's Standard Shirt Jacket</p>
<a href="">$89.99</a>
<a href="" class="btnCart">Add to cart</a>
</div>
<div class="productBox">
<img src="Images/product6.jpg">
<p>Men's Watch Fashion</p>
<a href="">$32.99</a>
<a href="" class="btnCart">Add to cart</a>
</div>
</div>
</section>CSS styles defined referring to each class name as follows.
.productSection {
width: 85%;
background-color: #ffffff;
box-shadow: 2px 2px 30px rgba(167, 158, 245, 0.2);
display: flex;
margin: 30px auto;
flex-direction: column;
align-items: center;
padding: 40px 20px;
margin-top: -60px;
position: relative;
background-size: 1000px;
border-radius: 10px;
}
.productSection > h3 {
margin: 20px;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
font-family: monospace;
font-weight: 700;
letter-spacing: 2px;
text-align: center;
font-size: 2rem;
color: #323543;
}
.productSection span {
color: #5b53ff;
}
.product {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 10px 0px;
width: 100%;
}
.productBox {
width: 250px;
height: 330px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 8px;
position: relative;
margin: 10px 30px;
}
.productBox img {
height: 180px;
}
.productBox p {
color: #4d4d4d70;
font-family: monospace;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
.productBox a {
color: #2c2c2c;
font-family: "Courier New", Courier, monospace;
font-size: 1rem;
text-decoration: none;
}
.btnCart {
position: absolute;
width: 140px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
left: 50%;
bottom: -20px;
transform: translateX(-50%);
border-radius: 15% 15% 15% 15% / 50% 50% 50% 50%;
background: linear-gradient(120deg, #6b60ec 20%, #a166f4);
color: #ffffff;
animation: fade 0.2s;
}
.productBox:hover .btnCart {
display: flex;
color: #fff;
}
.productBox:hover {
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
}
Step 05: Adding the about section
Adding a section about the business/company is a must. Therefore I added the next section that mentions some details.
<section class="aboutCompany">
<div class="aboutBox">
<h1>Genotechies Clothes Inc.</h1>
<h4>NEWEST FASHION TRENDS FOR ALL AROUND THE WORLD <span>Buy Now</span></h4>
<p>Globe biggest fashion chain with its thousands of outlets located world wide is dedicated to offer a wide array of Clothes and Accessories for Men, Women and Childrens...</p>
</div>
<div class="aboutBox">
<img src="Images/photo02.jpg">
</div>
</section>.aboutCompany {
width: 85%;
display: flex;
margin: 50px auto;
justify-content: space-around;
align-items: center;
padding: 30px;
margin-bottom: 100px;
}
.aboutCompany span {
color: #5b53ff;
}
.aboutBox {
width: 40%;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.aboutBox img {
width: 100%;
height: 100%;
object-fit: contain;
}
.aboutBox h1 {
color: #333333;
font-weight: 700;
font-size: 3rem;
margin: 0;
}
.aboutBox h4 {
color: #333333;
font-weight: 400;
font-size: 2rem;
margin-top: 10px;
margin-bottom: 10px;
}
.aboutBox p {
font-size: 1rem;
color: #bdbdbd;
letter-spacing: 0.5px;
}
Step 06: Adding the user subscribe section
Users can subscribe using the website's email address to get product updates.
<section class="newsletter">
<h3>Subscribe for New product Update</h3>
<div class="inputEmail">
<input type="email" placeholder="Enter Your Email">
<button type="submit" class="btnSend">SEND</button>
</div>
</section>.newsletter {
width: 100%;
height: 250px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 2px solid rgba(0, 0, 0, 0.03);
}
.newsletter h3 {
font-size: 2rem;
color: #565656;
}
.inputEmail {
width: 500px;
background-color: #fff;
border-radius: 7% 7% 7% 7% / 50% 50% 50% 50%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 20px;
box-shadow: 2px 5px 30px rgba(0, 0, 0, 0.1);
margin-top: 30px;
}
.inputEmail input {
width: 100%;
height: 40px;
border: none;
outline: none;
background-color: transparent;
}
.btnSend {
width: 120px;
height: 40px;
background-color: #202020;
border-radius: 20px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: bold;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
font-size: 1rem;
}
.btnSend:hover {
background-color: #6b60ec;
transition: all ease 0.5s;
}
Step 07: Adding the footer section
The <footer> tag defines a footer for a document or section.
<!-- Footer Section-->
<footer class="footerSection">
<div id="footerContanier">
<div id="footerLogoLeft">
GENOTECHIES CLOTHES
</div>
<div id="footerSocialIcon">
<img src="Images/instagram-icon.png">
<img src="Images/facebook-icon.png">
<img src="Images/twitter-icon.png">
<img src="Images/youtube-icon.png">
</div>
<div id="footerCenter">
<h3>Contact Us</h3>
<p><span>Tel:</span>061 765 342 122</p>
<p><span>E-Mail:</span>hello@genotechies.com</p>
<p><span>Web:</span>www.genotechies.com</p>
<p><span>Adress:</span>427, Brisbain Road, Canel Street, CA, US</p>
</div>
<div id="footerRight">
<h3>About Us</h3>
<p>Globe biggest fashion chain with its thousands of outlets located world wide is dedicated to offer a wide array of Clothes and Accessories for Men, Women and Children</p>
</div>
</div>
</footer>footer {
width: 100%;
height: 200px;
background-color: #201f1f;
background-size: cover;
position: relative;
}
#footerContanier {
width: 1526px;
margin: auto;
position: relative;
}
#footerContanier #footerLogoLeft {
font-family: 'Pacifico', cursive;
font-size: 25px;
font-weight: bold;
color: #ffffff;
position: relative;
left: 60px;
display: inline-block;
}
#footerContanier #footerSocialIcon {
position: relative;
top: 100px;
left: -220px;
display: inline-block;
}
#footerContanier #footerSocialIcon img {
width: 50px;
height: 50px;
cursor: pointer;
}
#footerContanier #footerSocialIcon img:hover {
transform: scale(1.1);
}
#footerContanier #footerCenter {
width: 430px;
position: absolute;
top: -10px;
left: 545px;
color: #ffffff;
text-align: center;
}
#footerContanier #footerCenter h3,
#footerRight h3 {
font-size: 40px;
font-family: 'Righteous';
border-bottom: 2px solid red;
text-align: center;
margin-bottom: 10px;
padding-bottom: 5px;
}
#footerRight input:focus {
border: 2px solid blue;
}
#footerContanier #footerCenter p {
line-height: 30px;
}
#footerContanier #footerCenter p span {
color: red;
font-weight: 400;
text-indent: 10px;
margin-right: 10px;
}
#footerContanier #footerRight {
width: 400px;
left: 1030px;
display: inline-block;
position: absolute;
top: -10px;
color: white;
text-align: center;
}
#footerContanier #footerRight p {
padding: 10px;
line-height: 30px;
padding-bottom: 20px;
}
#footerContanier #footerRight input {
margin-top: 10px;
width: 280px;
height: 28px;
text-align: center;
font-size: 15px;
}
Find this small website design in GitHub here.
Found this post useful? Kindly tap the 👏 button below! :)
