Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Make Brands Unstoppable</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container px-0">
<nav class="navbar navbar-expand-lg bg-body-light">
<div class="container-fluid">
<a href="#" class="navbar-brand">BrandName</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item d-flex justify-content-center align-items-center ms-lg-5">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item d-flex justify-content-center align-items-center ms-lg-5">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item d-flex justify-content-center align-items-center ms-lg-5">
<a href="#" class="nav-link">Work</a>
</li>
<li class="nav-item d-flex justify-content-center align-items-center ms-lg-5">
<a href="#" class="nav-link">Clients</a>
</li>
<li class="nav-item d-flex justify-content-center align-items-center ms-lg-5">
<a href="#" class="nav-link">Career</a>
</li>
<li class="nav-item d-flex justify-content-center align-items-center ms-lg-5">
<a href="#"
class="nav-link d-flex justify-content-center align-items-center rounded-pill py-0 pe-0 ps-2 btn-shadow">
Get Quote <span
class="material-symbols-outlined bg-orange rounded-circle ms-2 p-1 text-light">send</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<section class="container-fluid px-0 position-relative">
<div class="position-relative">
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 222" xmlns="http://www.w3.org/2000/svg"
class="position-relative top-10vh z-i-1">
<path
d="M 0,400 L 0,150 C 35.13210678476509,131.26606118926395 70.26421356953018,112.53212237852793 95,105 C 119.73578643046982,97.46787762147207 134.07525250664435,101.13757167515223 165,128 C 195.92474749335565,154.86242832484777 243.4347764038926,204.917590920863 281,196 C 318.5652235961074,187.082409079137 346.1856418777853,119.1920646413957 372,121 C 397.8143581222147,122.8079353586043 421.82265608496624,194.31415051355418 447,209 C 472.17734391503376,223.68584948644582 498.5237337823497,181.55133330438753 528,151 C 557.4762662176503,120.44866669561246 590.082408785635,101.48051626889574 621,117 C 651.917591214365,132.51948373110426 681.1466310751105,182.52660162002945 717,190 C 752.8533689248895,197.47339837997055 795.3310669139231,162.41307725098645 824,151 C 852.6689330860769,139.58692274901355 867.5291012691969,151.82108937602487 890,136 C 912.4708987308031,120.17891062397514 942.55252800929,76.30256524491415 978,93 C 1013.44747199071,109.69743475508585 1054.2607866936435,186.96864964431862 1086,196 C 1117.7392133063565,205.03135035568138 1140.4043252161368,145.82283617781152 1168,141 C 1195.5956747838632,136.17716382218848 1228.1219124418094,185.74000564443534 1258,187 C 1287.8780875581906,188.25999435556466 1315.1080250166258,141.21714124444705 1345,127 C 1374.8919749833742,112.78285875555295 1407.445987491687,131.3914293777765 1440,150 L 1440,400 L 0,400 Z"
stroke="none" stroke-width="0" fill="#ebf3da" fill-opacity="1"></path>
</svg>
</div>
<div class="position-relative mt-10vh svg-bg-green">
<div class="container pb-5">
<div class="row">
<div
class="col-12 col-sm-12 col-md-12 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<p class="display-4 fw-bold text-uppercase mb-0 w-100">elevate</p>
<p class="display-4 fw-bold text-uppercase mb-0 w-100 text-green">your power of</p>
<div class="d-flex align-items-center w-100">
<p class="display-4 fw-bold text-uppercase mb-0">ads</p>
<div class="d-flex flex-column justify-content-center ms-2">
<p class="mb-0">with Our</p>
<p class="mb-0">Agency</p>
</div>
</div>
<div class="d-flex w-100">
<a href="#"
class="d-flex text-decoration-none text-dark justify-content-center align-items-center rounded-pill py-0 pe-0 ps-2 btn-shadow-bottom text-uppercase bg-light mt-5">
Contact us <span
class="material-symbols-outlined bg-orange rounded-circle ms-4 p-1 text-light">call</span>
</a>
</div>
</div>
<div
class="col-12 col-sm-12 col-md-12 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<img src="./placeholder-image-1.png" alt="placeholder image 1" class="w-75">
<div class="mt-4 img-shadow"></div>
</div>
<div
class="col-4 col-sm-4 col-md-4 col-lg-4 my-4 d-flex flex-column justify-content-center align-items-center">
<span class="material-symbols-outlined fs-1 mb-3">lightbulb</span>
<p class="text-center mb-0">
<span>Tailored Creative</span><span class="d-block text-green">Solutions</span>
</p>
</div>
<div
class="col-4 col-sm-4 col-md-4 col-lg-4 my-4 d-flex flex-column justify-content-center align-items-center">
<span class="material-symbols-outlined fs-1 mb-3">analytics</span>
<p class="text-center mb-0">
<span>Data-Driven</span><span class="d-block text-green">Results</span>
</p>
</div>
<div
class="col-4 col-sm-4 col-md-4 col-lg-4 my-4 d-flex flex-column justify-content-center align-items-center">
<span class="material-symbols-outlined fs-1 mb-3">user_attributes</span>
<p class="text-center mb-0">
<span>Personalized Client</span><span class="d-block text-green">Support</span>
</p>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid position-relative px-0">
<div class="container pb-5">
<div class="row">
<div
class="col-12 col-sm-12 col-md-12 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<img src="./placeholder-image-2.png" alt="placeholder image 2" class="w-75">
<div class="mt-4 img-shadow"></div>
</div>
<div
class="col-12 col-sm-12 col-md-12 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<p class="display-4 fw-bold text-capitalize mb-0 w-100">grow your product</p>
<p class="display-4 fw-bold text-capitalize mb-0 w-100 text-orange">brand & experience</p>
<p class="mt-5 my-3 text-justify">Partner with us to elevate your brand's visibility and deepen
customer engagement. Our blend of creativity and cutting-edge technology ensures that every
interaction with your brand is memorable and impactful.</p>
<p class="my-3 text-justify">In today's competitive market, a strong brand presence is more
crucial than ever. We understand the nuances of branding and work meticulously to craft
strategies that resonate with your target audience. From visual identity to digital experiences,
we ensure your brand not only stands out but also connects emotionally with your customers. Our
team is committed to creating experiences that not only attract attention but also foster
long-term loyalty.</p>
<p class="my-3 text-justify">Let us be the driving force behind your brand's growth. With our
tailored strategies, your brand will not only meet industry standards but set new ones. Trust us
to take your brand to new heights, when it truly belongs.</p>
</div>
</div>
</div>
</section>
<section class="container-fluid position-relative px-0">
<div class="position-relative">
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 222" xmlns="http://www.w3.org/2000/svg"
class="position-relative top-10vh z-i-1">
<path
d="M 0,400 L 0,150 C 35.13210678476509,131.26606118926395 70.26421356953018,112.53212237852793 95,105 C 119.73578643046982,97.46787762147207 134.07525250664435,101.13757167515223 165,128 C 195.92474749335565,154.86242832484777 243.4347764038926,204.917590920863 281,196 C 318.5652235961074,187.082409079137 346.1856418777853,119.1920646413957 372,121 C 397.8143581222147,122.8079353586043 421.82265608496624,194.31415051355418 447,209 C 472.17734391503376,223.68584948644582 498.5237337823497,181.55133330438753 528,151 C 557.4762662176503,120.44866669561246 590.082408785635,101.48051626889574 621,117 C 651.917591214365,132.51948373110426 681.1466310751105,182.52660162002945 717,190 C 752.8533689248895,197.47339837997055 795.3310669139231,162.41307725098645 824,151 C 852.6689330860769,139.58692274901355 867.5291012691969,151.82108937602487 890,136 C 912.4708987308031,120.17891062397514 942.55252800929,76.30256524491415 978,93 C 1013.44747199071,109.69743475508585 1054.2607866936435,186.96864964431862 1086,196 C 1117.7392133063565,205.03135035568138 1140.4043252161368,145.82283617781152 1168,141 C 1195.5956747838632,136.17716382218848 1228.1219124418094,185.74000564443534 1258,187 C 1287.8780875581906,188.25999435556466 1315.1080250166258,141.21714124444705 1345,127 C 1374.8919749833742,112.78285875555295 1407.445987491687,131.3914293777765 1440,150 L 1440,400 L 0,400 Z"
stroke="none" stroke-width="0" fill="#ffdded" fill-opacity="1"></path>
</svg>
</div>
<div class="position-relative mt-10vh svg-bg-pink">
<div class="container pb-5">
<div class="row">
<div
class="col-12 col-sm-12 col-md-12 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<p class="display-4 fw-bold text-capitalize mb-0 w-100">our service</p>
<div class="row mt-5">
<div
class="col-12 col-sm-6 col-md-6 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<p class="fs-4 text-capitalize w-100 d-flex align-items-center">
<span class="material-symbols-outlined text-pink me-1">lightbulb</span>
Creative
</p>
<p class="text-justify mb-0">Unleash the power of creativity with campaigns that
captivate and convert.</p>
</div>
<div
class="col-12 col-sm-6 col-md-6 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<p class="fs-4 text-capitalize w-100 d-flex align-items-center">
<span class="material-symbols-outlined text-pink me-1">psychology</span>
Public Relations
</p>
<p class="text-justify mb-0">Build and maintain a positive image with our expert PR
services.</p>
</div>
<div
class="col-12 col-sm-6 col-md-6 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<p class="fs-4 text-capitalize w-100 d-flex align-items-center">
<span class="material-symbols-outlined text-pink me-1">stadium</span>
Event & Exibition
</p>
<p class="text-justify mb-0">Stand out at event and exibitions with our innovative and
impactful designs.</p>
</div>
<div
class="col-12 col-sm-6 col-md-6 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<p class="fs-4 text-capitalize w-100 d-flex align-items-center">
<span class="material-symbols-outlined text-pink me-1">campaign</span>
Media
</p>
<p class="text-justify mb-0">Reach your audience effectively with our targeted media
strategies.</p>
</div>
<div
class="col-12 col-sm-6 col-md-6 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<p class="fs-4 text-capitalize w-100 d-flex align-items-center">
<span class="material-symbols-outlined text-pink me-1">linked_services</span>
Digital & IT
</p>
<p class="text-justify mb-0">Stay ahead of the curve with our cutting-edge digital and
IT solutions.</p>
</div>
</div>
</div>
<div
class="col-12 col-sm-12 col-md-12 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<img src="./placeholder-image-3.png" alt="placeholder image 3" class="w-75">
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid position-relative px-0">
<div class="container pb-5">
<div class="row">
<div
class="col-12 col-sm-12 col-md-12 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<img src="./placeholder-image-4.png" alt="placeholder image 4" class="w-75">
<div class="mt-4 img-shadow w-50"></div>
</div>
<div
class="col-12 col-sm-12 col-md-12 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<p class="display-4 fw-bold text-capitalize mb-0 w-100">contact us</p>
<div class="mt-5 my-3 d-flex align-items-center w-100">
<span class="material-symbols-outlined bg-green text-light rounded-circle p-1">call</span>
<p class="mb-0 d-flex flex-column justify-content-center text-capitalize ms-3">
<span>call us</span><span>+91 1234567890</span>
</p>
</div>
<div class="mt-5 my-3 d-flex align-items-center w-100">
<span class="material-symbols-outlined bg-green text-light rounded-circle p-1">mail</span>
<p class="mb-0 d-flex flex-column justify-content-center text-capitalize ms-3">
<span>mail</span><span class="text-lowercase">hello@example.com</span>
</p>
</div>
<div class="mt-5 my-3 d-flex align-items-center w-100">
<span class="material-symbols-outlined bg-green text-light rounded-circle p-1">work</span>
<p class="mb-0 d-flex flex-column justify-content-center text-capitalize ms-3">
<span>career</span><span class="text-lowercase">career@example.com</span>
</p>
</div>
<div class="mt-5 my-3 d-flex align-items-center w-100">
<span
class="material-symbols-outlined bg-green text-light rounded-circle p-1">location_on</span>
<p class="mb-0 d-flex flex-column justify-content-center text-capitalize ms-3">
<span>location</span><span>some place, some landmark, some area,</span>
<span>some city, state name - 123456</span>
</p>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid position-relative px-0">
<div class="position-relative">
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 222" xmlns="http://www.w3.org/2000/svg"
class="position-relative top-10vh z-i-1">
<defs>
<linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="0%" stop-color="#ebf3da"></stop>
<stop offset="100%" stop-color="#ffdded"></stop>
</linearGradient>
</defs>
<path
d="M 0,400 L 0,150 C 35.13210678476509,131.26606118926395 70.26421356953018,112.53212237852793 95,105 C 119.73578643046982,97.46787762147207 134.07525250664435,101.13757167515223 165,128 C 195.92474749335565,154.86242832484777 243.4347764038926,204.917590920863 281,196 C 318.5652235961074,187.082409079137 346.1856418777853,119.1920646413957 372,121 C 397.8143581222147,122.8079353586043 421.82265608496624,194.31415051355418 447,209 C 472.17734391503376,223.68584948644582 498.5237337823497,181.55133330438753 528,151 C 557.4762662176503,120.44866669561246 590.082408785635,101.48051626889574 621,117 C 651.917591214365,132.51948373110426 681.1466310751105,182.52660162002945 717,190 C 752.8533689248895,197.47339837997055 795.3310669139231,162.41307725098645 824,151 C 852.6689330860769,139.58692274901355 867.5291012691969,151.82108937602487 890,136 C 912.4708987308031,120.17891062397514 942.55252800929,76.30256524491415 978,93 C 1013.44747199071,109.69743475508585 1054.2607866936435,186.96864964431862 1086,196 C 1117.7392133063565,205.03135035568138 1140.4043252161368,145.82283617781152 1168,141 C 1195.5956747838632,136.17716382218848 1228.1219124418094,185.74000564443534 1258,187 C 1287.8780875581906,188.25999435556466 1315.1080250166258,141.21714124444705 1345,127 C 1374.8919749833742,112.78285875555295 1407.445987491687,131.3914293777765 1440,150 L 1440,400 L 0,400 Z"
stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1"></path>
</svg>
</div>
<div class="position-relative mt-10vh svg-bg-linear-gradient-green-pink">
<div class="container pb-5">
<div class="row">
<div
class="col-12 col-sm-12 col-md-12 col-lg-5 my-4 d-flex flex-column justify-content-center align-items-center">
<div class="w-100 text-justify">
<p class="display-4 fw-bold text-uppercase mb-0 w-100">keep the good</p>
<p class="display-4 fw-bold text-uppercase mb-0 w-100">vibes flowing</p>
</div>
<p class="my-4 w-100 text-justify">Subscribe for updates on new launches, exclusive playlists,
and more.</p>
<div class="d-flex w-100">
<a href="#"
class="d-flex text-decoration-none text-dark justify-content-center align-items-center rounded-pill py-0 pe-0 ps-2 btn-shadow-bottom text-uppercase bg-light">
newsletter <span
class="material-symbols-outlined bg-orange rounded-circle ms-4 p-1 text-light">chevron_right</span>
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-2 m-0 p-0"></div>
<div
class="col-12 col-sm-12 col-md-12 col-lg-4 my-4 d-flex flex-column justify-content-center align-items-center">
<div class="w-100 mb-5">
<p class="w-100 d-flex justify-content-center align-items-center">
<span class="w-50">
<a href="#"
class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2-hover link-dark">
Home
</a>
</span>
<span class="w-50">
<a href="#"
class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2-hover link-dark">
Clients
</a>
</span>
</p>
<p class="w-100 d-flex justify-content-center align-items-center">
<span class="w-50">
<a href="#"
class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2-hover link-dark">
Career
</a>
</span>
<span class="w-50">
<a href="#"
class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2-hover link-dark">
Services
</a>
</span>
</p>
<p class="w-100 d-flex justify-content-center align-items-center mb-0">
<span class="w-50">
<a href="#"
class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2-hover link-dark">
Work
</a>
</span>
<span class="w-50">
<a href="#"
class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2-hover link-dark">
Contact Us
</a>
</span>
</p>
</div>
<div class="w-100">
<div class="w-100 d-flex justify-content-between align-items-center">
<a href="#"
class="bg-dark link-light p-2 rounded link-underline link-underline-opacity-0">
Facebook
</a>
<a href="#"
class="bg-dark link-light p-2 rounded link-underline link-underline-opacity-0">
X
</a>
<a href="#"
class="bg-dark link-light p-2 rounded link-underline link-underline-opacity-0">
Instagram
</a>
<a href="#"
class="bg-dark link-light p-2 rounded link-underline link-underline-opacity-0">
Linked In
</a>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-1 m-0 p-0"></div>
</div>
<p class="mb-0 mt-5">© Copyright BrandName 2024. All rights reserved.</p>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>Below is the css code for this video.
style.css
* {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
height: auto;
width: 100%;
}
.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:focus-visible {
border: none;
outline: none;
box-shadow: none;
}
.navbar-toggler:hover {
box-shadow: 0 0 6px #00000040;
}
.navbar-nav .nav-link.active {
position: relative;
}
.navbar-nav .nav-link.active::before {
content: "";
position: absolute;
left: var(--bs-navbar-nav-link-padding-x);
bottom: 0;
height: 1px;
width: 10px;
background: #ef6a31;
}
.bg-orange {
background-color: #ef6a31;
}
.text-orange {
color: #ef6a31;
}
.bg-green {
background-color: #a0bf24;
}
.text-green {
color: #a0bf24;
}
.text-pink {
color: #f040a8;
}
.text-justify {
text-align: justify;
}
.svg-bg-green {
background-color: #ebf3da;
}
.svg-bg-pink {
background-color: #ffdded;
}
.svg-bg-linear-gradient-green-pink {
background: linear-gradient(to right, #ebf3da, #ffdded);
}
.btn-shadow {
box-shadow: 0 0 6px #00000040;
}
.img-shadow {
height: 10px;
width: 60%;
background-color: #00000080;
border-radius: 100%;
filter: blur(6px);
}
.btn-shadow-bottom {
box-shadow: 0 6px 6px -6px #000000bf;
}
.top-10vh {
top: -10vh;
}
.z-i-1 {
z-index: -1;
}
.mt-10vh {
margin-top: -10vh;
}Thanks for visiting