Hello Friends, In this blog I am creating a website template using HTML & CSS only.
The code given below:-
<!DOCTYPE html>
<html lang="en">
<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">
<title>Sidebar</title>
<link rel="stylesheet" href="my_css.css">
</head>
<body>
<section class="sidebar">
<ul>
<li>Home</li>
<li>Downloads</li>
<li>Stock Photos</li>
<li>About us</li>
<li>Contact us</li>
<li>Login</li>
<li>Signup</li>
</ul>
</section>
<section class="main-content">
<div class="heading_content">
<h1>Welcome to StockImages</h1>
<div class="search_container">
<input type="text" placeholder="Search Image...">
</div>
<img src="camera.jpg"/>
</div>
<div class="img_content">
<h1>Other Images</h1>
<table>
<tr>
<td><img src="img1.jpg" alt=""></td>
<td><img src="img2.jpg" alt=""></td>
<td><img src="img3.jpg" alt=""></td>
</tr>
<tr>
<td><img src="img1.jpg" alt=""></td>
<td><img src="img2.jpg" alt=""></td>
<td><img src="img3.jpg" alt=""></td>
</tr>
<tr>
<td><img src="img1.jpg" alt=""></td>
<td><img src="img2.jpg" alt=""></td>
<td><img src="img3.jpg" alt=""></td>
</tr>
</table>
</div>
<div class="about_section">
<h2>About the Company</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="investor_section">
<h2>Our Investor</h2>
<table>
<tr>
<td><img src="face1.jpeg"><p>Anuj Kumar</p></td>
<td><img src="face2.jfif"><p>Zang</p></td>
<td><img src="face3.jpg"><p>John Smith</p></td>
</tr>
</table>
</div>
<div class="footer_content">
<table>
<tr>
<th>Learn more</th>
<th>Company</th>
<th>Social Links</th>
</tr>
<tr>
<td><a href="#">About Us</a></td>
<td><a href="#">Careers</a></td>
<td><a href="#">Instagram</a></td>
</tr>
<tr>
<td><a href="#">Contact us</a></td>
<td><a href="#">Stock Images</a></td>
<td><a href="#">Facebook</a></td>
</tr>
<tr>
<td><a href="#">Disclaimer</a></td>
<td><a href="#">Investor</a></td>
<td><a href="#">Twitter</a></td>
</tr>
</table>
</div>
</section>
</body>
</html>
.sidebar {
width: 17%;
height: 100%;
position: fixed;
margin-top: -5px;
background-color: steelblue;
}
.sidebar ul li {
list-style: none;
padding: 10px;
margin-left: -40px;
margin-top: 50px;
margin-bottom: 50px;
font-family: tahoma;
font-size: 20px;
text-align: center;
color: white;
}
.sidebar ul li:hover {
background-color: lightcoral;
cursor: pointer;
}
.main-content {
width: 70%;
margin-left: 300px;
}
.main-content .heading_content h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 30px;
}
.main-content .heading_content img {
width: 100%;
height: 680px;
}
.search_container input {
width: 95%;
padding: 20px;
font-size: 17px;
margin-bottom: 15px;
border: 2px solid;
}
.img_content {
margin-top: 50px;
border-top: 1px solid;
}
.img_content h1 {
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.img_container img {
width: 32%;
margin: 5px;
}
table {
padding: 5px;
}
table td {
width: 35%;
}
table img {
width: 350px;
}
.footer_content {
border-top: 1px solid;
margin-top: 50px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.footer_content table {
width: 75%;
margin-left: 80px;
}
.footer_content table td {
padding: 5px 40px;
text-align: center;
}
.footer_content table td a {
text-decoration: none;
font-size: 18px;
}
.footer_content table td a:hover {
color: lightcoral;
}
.about_section{
border-top: 1px solid;
margin-top: 60px;
}
.about_section h2{
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.about_section p{
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.investor_section {
text-align: center;
border-top: 1px solid;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.investor_section img {
width: 100%;
height: 400px;
margin: 5px;
}
.investor_section img:hover {
transform: scale(1.1);
transition: 0.5s;
}
Top comments (0)