Create HTML CSS Bootstrap Agency Portfolio With Free Source Code By Indian Coding Wala

Omnath Dubey 5/15/2023 08:13:00 AM

HTML Source Code :-

<!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="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css" />
<title>Indian Coding Wala Agency Portfolio</title>
</head>
<body>
<nav>
<div class="nav__logo"><h1><i class="bi bi-apple"></i></h1></div>
<ul class="nav__links">
<li class="link"><a href="#">Home</a></li>
<li class="link"><a href="#">About Us</a></li>
<li class="link"><a href="#">Agency Portfolio</a></li>
<li class="link"><a href="#" >Contact</a></li>
</ul>
</nav>
<header>
<div class="header__container">
<div class="header__content">
<h1>
<b> Indian<br />Coding Wala <br> <span>Agency Portfolio.</span></b>
</h1>
<a class="start__project">Create Website With Free Source Code By Indian Coding Wala</a>
</div>
<div class="footer__cards">
<div class="card">
<h1><i class="bi bi-1-circle-fill"></i></h1>
<h5>Indian Coding </h5>
<p>
Indian Coding Wala Agency Portfolio Indian Coding Wala Agency Portfolio...
</p>
</div>
<div class="card">
<h1><i class="bi bi-2-circle-fill"></i></h1>
<h5>Agency Portfolio</h5>
<p>
Indian Coding Wala Agency Portfolio Indian Coding Wala Agency Portfolio...
</p>
</div>
<div class="card">
<h1><i class="bi bi-3-circle-fill"></i></h1>
<h5>Free Source Code </h5>
<p>
Indian Coding Wala Agency Portfolio Indian Coding Wala Agency Portfolio...
</p>
</div>
<div class="card">
<h1><i class="bi bi-4-circle-fill"></i></h1>
<h5>Source Code </h5>
<p>
Indian Coding Wala Agency Portfolio Indian Coding Wala Agency Portfolio...
</p>
</div>
<div class="card">
<h1><i class="bi bi-5-circle-fill"></i></h1>
<h5>Omnath Dubey </h5>
<p>
Indian Coding Wala Agency Portfolio Indian Coding Wala Agency Portfolio...
</p>
</div>
<div class="card">
<h1><i class="bi bi-6-circle-fill"></i></h1>
<h5>Indian Coding </h5>
<p>
Indian Coding Wala Agency Portfolio Indian Coding Wala Agency Portfolio...
</p>
</div>
</div>
</div>
</header>
</body>
</html>

CSS Source Code :-

:root {
--primary-color: #b45309;
--extra-light: #f3f4f6;
--max-width: 1200px;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
font-family: "Poppins", sans-serif;
}

nav {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--max-width);
padding: 2rem 1rem;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
overflow: hidden;
}

.nav__logo {
font-size: 1.2rem;
font-weight: 500;
color: var(--extra-light);
}

.nav__links {
list-style: none;
gap: 2rem;
display: none;
}

.nav__links a {
padding: 1rem;
text-decoration: none;
color: var(--extra-light);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
}

a.contact__btn {
padding: 0.5rem 2rem;
border: 2px solid var(--extra-light);
position: relative;
}

.contact__btn::before {
content: "";
position: absolute;
top: 50%;
right: -40%;
transform: translateY(-50%);
height: 5px;
width: 50%;
border-radius: 5px;
background-image: linear-gradient(
to right,
var(--primary-color),
rgba(0, 0, 0, 0)
);
}

header {
background-image: url("https://images.pexels.com/photos/316902/pexels-photo-316902.jpeg?auto=compress&cs=tinysrgb&w=600");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}

.header__container {
position: relative;
min-height: 175vh;
max-width: var(--max-width);
margin: auto;
padding: 0 1rem;
}

.header__content {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}

.header__content h1 {
font-size: 3rem;
line-height: 4rem;
font-weight: 300;
color: var(--extra-light);
}

.header__content h1 span {
color: var(--primary-color);
}

.header__content .start__project {
text-decoration: none;
margin-top: 2rem;
color: var(--extra-light);
font-weight: 600;
position: relative;
}

.header__content .start__project::before {
content: "";
position: absolute;
top: 50%;
right: -120%;
height: 5px;
width: 100%;
border-radius: 5px;
background-image: linear-gradient(
to right,
var(--primary-color),
rgba(164, 11, 11, 0)
);
}

.footer__cards {
position: absolute;
bottom: 0;
width: calc(100% - 2rem);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
align-items: end;
}

.card {
padding: 1rem;
border-radius: 5px;
background-color: rgb(87, 4, 4);
color: var(--extra-light);
height: max-content;
cursor: pointer;
transition: 0.5s;
}

.card h4 {
font-size: 1.5rem;
font-weight: 300;
}

.card h5 {
font-size: 1rem;
font-weight: 500;
}

.card p {
margin-top: 1.2rem;
font-size: 0.9rem;
transition: 0.3s;
}

@media (min-width: 640px) {
.header__container {
min-height: 150vh;
}

.header__content {
align-items: flex-start;
text-align: left;
}

.header__content h1 {
font-size: 4rem;
line-height: 5rem;
}

.footer__cards {
grid-template-columns: repeat(3, 1fr);
}
}

@media (min-width: 780px) {
.nav__links {
display: flex;
}

.header__container {
min-height: 100vh;
}

.header__content h1 {
font-size: 5rem;
line-height: 6rem;
}

.footer__cards {
grid-template-columns: repeat(6, 1fr);
}

.card {
height: 100px;
}

.card:hover {
height: 250px;
}
}

Agency Portfolio

There are millions of websites created every day, also, there is much fake content spread on the internet. So, Our main goal is to provide you with 100% Original and Safe content that provides you a great and better experience on the world wide web. We mainly focus on our service so and improving it regularly to provide a better user experience to all users. Basically, we focus on the News niche so, our main priority is to search for new content and present it in front of you to learn something new.