Business website templete HTML CSS Only
HTML
<!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">
<link rel="stylesheet" href="css\styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
<title>Tech Ninja</title>
</head>
<body>
<!-- Navbar -->
<section id="navbar">
<nav>
<div class="site-logo">
<img src="Images\logo.png" alt="" class="logo">
</div>
<ul class="navbar-nav">
<div class="nav-items">
<li class="menu-items"><a href="#" class="nav-links">Home</a></li>
<li class="menu-items"><a href="#" class="nav-links">About</a></li>
<li class="menu-items"><a href="#" class="nav-links">Recent Posts</a></li>
<li class="menu-items"><a href="#" class="nav-links">Popular posts</a></li>
</div>
</ul>
</nav>
</section>
<!-- Header -->
<section id="Header">
<header>
<div class="header-conponents">
<h1 class="header-heading">All about business here!</h1>
<p class="header-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus ipsa quas
dolorum aut expedita tempora
doloremque enim! Illo quidem veniam modi quasi, minus non placeat itaque error delectus impedit
deleniti
laboriosam optio laborum eius! Voluptatum molestias accusamus nam velit id.</p>
<button class="header-button">Learn More!</button>
<button class="header-sc-btn">Learn More!</button>
</div>
</header>
</section>
<!-- About Us -->
<section id="about">
<h1 class="about-heading">About Us</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, perferendis iusto? Id, molestias
consequuntur. Vel non, neque quidem itaque sunt saepe maxime repellendus, quam error harum recusandae
excepturi nostrum eius Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae fugiat nisi omnis
mollitia doloremque quia amet incidunt non illum!</p>
</section>
<!-- Recent Posts -->
<section id="services">
<div class="main-services">
<div class="service">
<img src="https://img.icons8.com/wired/64/4a90e2/domain.png" />
<h1>Service 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, eaque maxime deleniti ipsa fuga
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, ipsam.
reiciendis?</p>
<button class="service-btn">Learn More</button>
</div>
<div class="service">
<img src="https://img.icons8.com/pastel-glyph/64/4a90e2/web-design--v2.png" />
<h1>Service 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quisquam facilis assumenda ratione sit
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, ipsam.
odit.</p>
<button class="service-btn">Learn More</button>
</div>
<div class="service service-f">
<img src="https://img.icons8.com/wired/64/4a90e2/detective.png" />
<h1>Service 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit laudantium eius similique, odio nisi
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, ipsam.
voluptas.</p>
<button class="service-btn">Learn More</button>
</div>
</div>
</section>
<!-- Quote -->
<section id="quote">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi cumque iusto dolor odit, maiores consequuntur.
</h1>
</section>
<!-- Popular Posts -->
<section class="recent-posts">
<div class="posts">
<div class="post">
<img class="recent" src="Images\1.jpg" alt="">
<h2>Heading here</h2>
<p class="blog-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto et. Quos,
sunt quibusdam.
</p>
<button>Learn More.</button>
</div>
<div class="post">
<img class="recent" src="Images\2.jpg" alt="">
<h2>Heading here</h2>
<p class="blog-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto et. Quos,
sunt quibusdam.
</p>
<button>Learn More.</button>
</div>
<div class="post">
<img class="recent" src="Images\3.jpg" alt="">
<h2>Heading here</h2>
<p class="blog-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, architecto et. Quos,
sunt quibusdam.
</p>
<button>Learn More.</button>
</div>
</div>
</section>
<!--Footer -->
<section id="footer">
<footer>
<p>Copyright © | Tech Ninja | All rights reserved</p>
</footer>
</section>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#navbar {
height: 70px;
background-color: #2b5b9e;
display: flex;
padding-left: 31px;
}
.logo {
height: 50px;
width: 50px;
padding: 10px;
position: absolute;
}
.navbar-nav {
display: flex;
}
.nav-items {
list-style: none;
color: white;
padding-top: 26px;
padding-left: 112px;
display: flex;
padding-left: 100px;
padding-right: 10px;
}
.menu-items a {
margin: 0 20px;
color: white;
text-decoration: none;
}
#Header {
height: 100vh;
background: url("header-bg.jpg") fixed no-repeat;
background-size: cover;
}
.header-conponents {
justify-content: left;
padding-right: 371px;
color: white;
padding-top: 15%;
padding-left: 76px;
}
.header-heading {
font-size: 60px;
padding-bottom: 30px;
font-weight: 1000;
}
.header-para {
width: 400px;
padding-bottom: 30px;
}
.header-button {
font-size: 21px;
padding: 10px;
border: none;
color: white;
background-color: #2c77bc;
/* border-radius: 24px; */
}
.header-sc-btn {
font-size: 21px;
padding: 10px;
border: none;
color: white;
background-color: #2c77bc;
margin-left: 10px;
}
#about {
height: 210px;
background-color: #2b5b9e;
text-align: center;
padding-top: 86px;
padding-left: 218px;
padding-right: 218px;
color: white;
}
.about-heading {
margin-bottom: 10px;
font-weight: 900;
font-size: 30px;
}
#about p {
margin-top: 15px;
}
.recent-posts {
background-color: rgb(226, 225, 225);
}
.posts {
text-align: center;
display: flex;
align-items: center;
padding: 100px 273px;
padding-left: 226px;
padding-right: 100px;
}
.post {
height: 350px;
width: 250px;
background-color: white;
text-align: center;
margin-right: 30px;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.recent {
height: 150px;
margin-bottom: 20px;
width: 250px;
}
.blog-para {
padding: 10px;
}
.post h1 {
margin-bottom: 20px;
}
.post button {
color: white;
background-color: #2c77bc;
font-size: 20px;
border: none;
margin-top: 20px;
padding: 7px;
padding-right: 15px;
padding-left: 15px;
margin-top: 30px;
}
#quote {
height: 400px;
background-image: url("image1 (5).jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: #747474;
background-blend-mode: darken;
text-align: center;
}
#quote h1 {
padding-left: 300px;
padding-right: 300px;
font-size: 40px;
padding-top: 105px;
color: white;
}
.main-services {
text-align: center;
}
#services {
padding: 30px;
height: 500px;
}
.main-services {
padding-top: 50px;
}
.service {
height: 300px;
padding: 10px;
width: 200px;
background-color: red;
display: inline-block;
margin: 30px;
background-color: rgb(212, 235, 255);
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.service-btn {
font-size: 25px;
margin-top: 12px;
color: white;
background-color: #2b5b9e;
border: none;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#footer {
height: 70px;
text-align: center;
background-color: #505050;
}
#footer p {
padding-top: 25px;
color: white;
}
Comments
Post a Comment