Best Business Website Create Using HTML With Free Source Code
This business website has been developed with a very good and beautiful design. To design it, we have used HTML and CSS for styling.
We have placed a video in the background of this website, with the help of which the beauty of this website has started looking even better and along with it we have also used a good hover effect so that the user feels like visiting your website more. It happens.
Let me tell you that the video that we have used in the background in this website can also be found on YouTube and you can also get it from our Telegram.
For you guys, I have made this website responsive which runs on all types of devices.
Business Website HTML Code
This is the complete HTML code of the business website which you can use from here.
In this code, we have created a footer i.e. copyright section along with navbar, home section, service section, which you can edit the code as per your wish.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeveloperGTM</title><link rel="preload" as="image" imagesrcset="https://developergtm.in/wp-content/uploads/2024/03/Screenshot-202024-03-07-20203055.png" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergtm.in/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.1" type="font/woff2" crossorigin="anonymous" />
<!-- CSS File -->
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Orbitron:wght@400..900&display=swap"
rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<video autoplay loop muted>
<source src="Dark Background Web.mp4">
</video>
<nav class="navbar">
<div class="containerr">
<a href="#" class="logo">DeveloperGTM</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<main class="container">
<div class="page-content">
<div class="inner-content">
<h1 class="heading">Web <span class="txt2">Designer</span> Company</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ullam, aliquid in vel quo eius
possimus magni quibusdam ex perferendis, natus suscipit voluptas, debitis unde vitae omnis saepe
ratione ea?</p>
<div class="buttons">
<a href="#" class="active">Get Start </a>
</div>
<div class="social-links">
<a href="#" class="bi bi-facebook"></a>
<a href="#" class="bi bi-youtube"></a>
<a href="#" class="bi bi-instagram"></a>
<a href="#" class="bi bi-linkedin"></a>
</div>
</div>
</div>
</main>
<section class="hero-sec">
<div class="main-box">
<div class="box">
<div class="img">
<img decoding="async" width="70px" src="image/seo.png" alt="">
</div>
<p class="head">Seo Optimize</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dolore, natus tempora unde explicabo
facilis expedita quos ratione nihil tempore?</p>
<p class="more">More Details</p>
</div>
<div class="box">
<div class="img">
<img decoding="async" width="70px" src="image/web.png" alt="">
</div>
<p class="head">Web Development</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dolore, natus tempora unde explicabo
facilis expedita quos ratione nihil tempore?</p>
<p class="more">More Details</p>
</div>
<div class="box">
<div class="img">
<img decoding="async" width="70px" src="image/market.png" alt="">
</div>
<p class="head">Marketing</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dolore, natus tempora unde explicabo
facilis expedita quos ratione nihil tempore?</p>
<p class="more">More Details</p>
</div>
<div class="box">
<div class="img">
<img decoding="async" width="70px" src="image/computer.png" alt="">
</div>
<p class="head">Competition Analysis</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dolore, natus tempora unde explicabo
facilis expedita quos ratione nihil tempore?</p>
<p class="more">More Details</p>
</div>
<div class="box">
<div class="img">
<img decoding="async" width="70px" src="image/accept-47587_1280.png" alt="">
</div>
<p class="head">Case Studies</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dolore, natus tempora unde explicabo
facilis expedita quos ratione nihil tempore?</p>
<p class="more">More Details</p>
</div>
<div class="box">
<div class="img">
<img decoding="async" width="70px" src="image/article.png" alt="">
</div>
<p class="head">Quality Articles</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dolore, natus tempora unde explicabo
facilis expedita quos ratione nihil tempore?</p>
<p class="more">More Details</p>
</div>
</div>
</section>
<footer class="foot">
<p>Copyright © 2024 Design By DeveloperGTM</p>
</footer>
</body>
</html>
Business Website Responsive Code
This is responsive business website code that works across all devices.
@media screen and (max-width: 1200px) {
.hero-sec {
height: auto !important;
}
}
@media screen and (max-width: 977px) {
.container {
height: auto;
}
.page-content .inner-content .heading {
font-size: 3rem;
}
.vid {
height: -webkit-fill-available;
}
.hero-sec .main-box{
width: -webkit-fill-available;
padding-bottom: 20px;
}
.hero-sec .main-box .box {
height: auto;
padding: 20px;
}
.navbar .containerr {
align-items: center;
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
display: flex;
margin: auto;
}
.navbar .containerr .item {
display: none;
}
.page-content {
width: auto;
margin: 10px;
}
.page-content .social-links {
margin-top: 0;
}
}
Business Website CSS Code
Friend, this is the complete css code of the business website with which we have styled this website.
*, ::before, ::after {
margin: 0;
padding: 0;
transition: .3s;
box-sizing: border-box;
color: #fff;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
video {
position: absolute;
left: 0;
top: 0;
height: auto;
width: 100%;
object-fit: cover;
z-index: -1;
transition: 1s;
}
.container {
max-width: 950px;
margin: auto;
padding-bottom: 50px;
}
.navbar {
padding: 12px 10px;
}
.navbar .containerr {
display: flex;
justify-content: space-between;
padding: 20px 50px;
align-items: center;
}
.navbar .logo {
text-decoration: none;
font-size: 2rem;
}
.navbar ul {
list-style-type: none;
display: flex;
}
.navbar ul a {
display: block;
text-decoration: none;
margin: 0 10px;
padding: 8px 16px;
position: relative;
}
.navbar ul:has(a:hover) a:not(:hover) {
filter: blur(10px);
}
.page-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 80px;
}
.page-content .inner-content {
display: flex;
row-gap: 30px;
flex-direction: column;
}
.page-content .inner-content .heading {
font-size: 5rem;
}
.page-content .inner-content .heading .txt2 {
color: #00ffbb;
}
.page-content .buttons {
display: flex;
justify-content: center;
}
.page-content .buttons a {
display: block;
text-decoration: none;
margin: 0 16px;
padding: 10px 12px;
border-radius: 6px;
font-size: 13px;
min-width: 100px;
text-align: center;
position: relative;
backdrop-filter: blur(60px);
overflow: hidden;
z-index: 1;
border: 1px solid #ffffff1e;
}
.page-content .buttons a.active {
background-color: white;
padding: 20px 50px;
color: black;
}
.page-content .buttons a.active:hover {
box-shadow: 0 0 40px rgb(190, 176, 176);
}
.page-content .buttons a:nth-child(2)::before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(40deg, #ffffff00, #ffffff20, #ffffff00);
z-index: -1;
}
.page-content .buttons a:nth-child(2):hover::before {
left: 100%;
}
.page-content .buttons a:nth-child(2):hover {
transition-delay: .3s;
box-shadow: 0 0 40px rgb(238, 5, 5);
background-color: #ff310c;
}
.page-content .social-links {
margin-top: 2rem;
display: flex;
justify-content: center;
}
.page-content .social-links a {
display: block;
height: 40px;
width: 40px;
margin: 0 10px;
border-radius: 99px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
backdrop-filter: blur(160px);
background: #c624f71e;
overflow: hidden;
position: relative;
z-index: 1;
}
.page-content .social-links a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0%;
background: #00ffbb;
z-index: -1;
}
.page-content .social-links a:hover::after {
height: 100%;
}
.hero-sec{
height: 700px;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.hero-sec .main-box{
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hero-sec .main-box .box{
background-color: black;
width: 375px;
padding: 20px;
height: 260px;
border-radius: 10px;
row-gap: 12px;
display: flex;
flex-direction: column;
margin: 20px;
transition: all 0.4s ease-in-out;
}
.hero-sec .main-box .box:hover{
background: #5cc7a433;
cursor: pointer;
border: 2px solid #4febc1;
}
.hero-sec .main-box .box .head{
font-weight: bold;
font-size: 20px;
}
.hero-sec .main-box .box .img img{
width: 70px;
height: 70px;
border-radius: 50%;
}
.hero-sec .main-box .box .more{
text-decoration: underline;
cursor: pointer;
color: #00ffbb;
}
.foot {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
background-color: black;
}
.foot p{
color: white;
}
This is my codepen, from this you can also see live projects and also you can join me on codepen, there you will get to see different types of projects.
See the Pen business website by Developergtm (@developergtm) on CodePen.