Initial commit with existing project files
This commit is contained in:
273
index.html
Executable file
273
index.html
Executable file
@@ -0,0 +1,273 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="custom.css">
|
||||
<title>Agency</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar d-flex justify-content-around">
|
||||
<a href="#" id="logo" class="navbar-brand">Logo</a>
|
||||
<ul class="navbar-nav flex-row d-flex justify-content-around">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Portfolio</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="header-baseline">
|
||||
<p>Welcome to our studio!</p>
|
||||
<p>It's nice to meet you</p>
|
||||
<button>Tell me more</button>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<!--- Services Section -->
|
||||
<section>
|
||||
<h3 class="section-title">Services</h3>
|
||||
<p class="section-description">Lorem ipsum dolor sit amet, consectetur.</p>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 service">
|
||||
<i class="fa-solid fa-cart-shopping"></i>
|
||||
<h6 class="card-title">E-Commerce</h6>
|
||||
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
|
||||
accusantium alias dolorem ea impedit iste necessitatibus nostrum, officiis quas repellendus
|
||||
saepe, vel. Animi beatae ea, est expedita magnam quam quia.</p>
|
||||
</div>
|
||||
<div class="col-md-4 service">
|
||||
<i class="fa-solid fa-laptop"></i>
|
||||
<h6 class="card-title">Responsive Design</h6>
|
||||
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
|
||||
accusantium alias dolorem ea impedit iste necessitatibus nostrum, officiis quas repellendus
|
||||
saepe, vel. Animi beatae ea, est expedita magnam quam quia.</p>
|
||||
</div>
|
||||
<div class="col-md-4 service">
|
||||
<i class="fa-solid fa-lock"></i>
|
||||
<h6 class="card-title">Web Security</h6>
|
||||
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
|
||||
accusantium alias dolorem ea impedit iste necessitatibus nostrum, officiis quas repellendus
|
||||
saepe, vel. Animi beatae ea, est expedita magnam quam quia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--- Portfolio Section -->
|
||||
<section id="section-portfolio">
|
||||
<h3 class="section-title">Portfolio</h3>
|
||||
<p class="section-description">Lorem ipsum dolor sit amet, consectetur.</p>
|
||||
<div class="container">
|
||||
<!-- First portfolio row -->
|
||||
<div class="row justify-content-center">
|
||||
<!-- Card 1 -->
|
||||
<div class="col-md-3 portfolio-card">
|
||||
<img src="assets/img/portfolio/1.jpg" alt="" class="img-fluid">
|
||||
<h6 class="card-title">Threads</h6>
|
||||
<p class="card-description">Illustration</p>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="col-md-3 portfolio-card">
|
||||
<img src="assets/img/portfolio/2.jpg" alt="" class="img-fluid">
|
||||
<h6 class="card-title">Explore</h6>
|
||||
<p class="card-description">Graphic Design</p>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="col-md-3 portfolio-card">
|
||||
<img src="assets/img/portfolio/3.jpg" alt="" class="img-fluid">
|
||||
<h6 class="card-title">Finish</h6>
|
||||
<p class="card-description">Identity</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Second portfolio row -->
|
||||
<div class="row d-flex justify-content-center">
|
||||
<!-- Card 4 -->
|
||||
<div class="col-md-3 portfolio-card">
|
||||
<img src="assets/img/portfolio/4.jpg" alt="" class="img-fluid">
|
||||
<h6 class="card-title">Lines</h6>
|
||||
<p class="card-description">Branding</p>
|
||||
</div>
|
||||
<!-- Card 5 -->
|
||||
<div class="col-md-3 portfolio-card">
|
||||
<img src="assets/img/portfolio/5.jpg" alt="" class="img-fluid">
|
||||
<h6 class="card-title">Southwest</h6>
|
||||
<p class="card-description">Website Design</p>
|
||||
</div>
|
||||
<!-- Card 6 -->
|
||||
<div class="col-md-3 portfolio-card">
|
||||
<img src="assets/img/portfolio/6.jpg" alt="" class="img-fluid">
|
||||
<h6 class="card-title">Window</h6>
|
||||
<p class="card-description">Photography</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- About Section -->
|
||||
<section id="section-about">
|
||||
<h3 class="section-title">About</h3>
|
||||
<p class="section-description">Lorem ipsum dolor sit amet, consectetur.</p>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Card 1 (img right) -->
|
||||
<div class="col-md-6 about-card">
|
||||
<div class="card-title">
|
||||
<p>2009-2011</p>
|
||||
<p>Our Humble Beginings</p>
|
||||
</div>
|
||||
<div class="card-description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam, autem
|
||||
consequuntur debitis deserunt distinctio dolorem exercitationem facere fugiat illum incidunt
|
||||
ipsum laboriosam molestias mollitia optio perferendis quae repellendus rerum.</p>
|
||||
</div>
|
||||
<img src="assets/img/about/1.jpg" alt="" class="about-img about-img-right">
|
||||
</div>
|
||||
<!-- Card 2 (img left) -->
|
||||
<div class="col-md-6 about-card">
|
||||
<img src="assets/img/about/2.jpg" alt="" class="about-img about-img-left">
|
||||
<div class="card-title">
|
||||
<p>March 2011</p>
|
||||
<p>An Agency is Born</p>
|
||||
</div>
|
||||
<div class="card-description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam, autem
|
||||
consequuntur debitis deserunt distinctio dolorem exercitationem facere fugiat illum incidunt
|
||||
ipsum laboriosam molestias mollitia optio perferendis quae repellendus rerum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 (img right) -->
|
||||
<div class="col-md-6 about-card">
|
||||
<div class="card-title">
|
||||
<p>December 2015</p>
|
||||
<p>Transition to Full Service</p>
|
||||
</div>
|
||||
<div class="card-description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam, autem
|
||||
consequuntur debitis deserunt distinctio dolorem exercitationem facere fugiat illum incidunt
|
||||
ipsum laboriosam molestias mollitia optio perferendis quae repellendus rerum.</p>
|
||||
</div>
|
||||
<img src="assets/img/about/3.jpg" alt="" class="about-img about-img-right">
|
||||
</div>
|
||||
<!-- Card 4 (img left) -->
|
||||
<div class="col-md-6 about-card">
|
||||
<img src="assets/img/about/4.jpg" alt="" class="about-img about-img-left">
|
||||
<div class="card-title">
|
||||
<p>July 2020</p>
|
||||
<p>Phase Two Expansion</p>
|
||||
</div>
|
||||
<div class="card-description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam, autem
|
||||
consequuntur debitis deserunt distinctio dolorem exercitationem facere fugiat illum incidunt
|
||||
ipsum laboriosam molestias mollitia optio perferendis quae repellendus rerum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Img alone -->
|
||||
<p id="about-img-alone" class="about-img">Be Part of Our Story!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Team Section -->
|
||||
<section>
|
||||
<div class="container">
|
||||
<h3 class="section-title">Our Amazing Team</h3>
|
||||
<p class="section-description">Lorem ipsum dolor sit amet, consectetur.</p>
|
||||
<div class="row">
|
||||
<!-- Card 1 -->
|
||||
<div class="col-md-4 team-card">
|
||||
<img src="assets/img/team/1.jpg" alt="" class="team-card-img">
|
||||
<p class="card-title">Parveen Anand</p>
|
||||
<p class="card-description">Lead Designer</p>
|
||||
<div class="team-card-socials">
|
||||
<a href="#"><i class="fa fa-twitter"></i></a>
|
||||
<a href="#"><i class="fa fa-facebook"></i></a>
|
||||
<a href="#"><i class="fa fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="col-md-4 team-card">
|
||||
<img src="assets/img/team/2.jpg" alt="" class="team-card-img">
|
||||
<p class="card-title">Diana Petersen</p>
|
||||
<p class="card-description">Lead Marketer</p>
|
||||
<div class="team-card-socials">
|
||||
<a href="#"><i class="fa fa-twitter"></i></a>
|
||||
<a href="#"><i class="fa fa-facebook"></i></a>
|
||||
<a href="#"><i class="fa fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="col-md-4 team-card">
|
||||
<img src="assets/img/team/3.jpg" alt="" class="team-card-img">
|
||||
<p class="card-title">Larry Parker</p>
|
||||
<p class="card-description">Lead Developer</p>
|
||||
<div class="team-card-socials">
|
||||
<a href="#"><i class="fa fa-twitter"></i></a>
|
||||
<a href="#"><i class="fa fa-facebook"></i></a>
|
||||
<a href="#"><i class="fa fa-linkedin"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="team-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dignissimos
|
||||
esse excepturi
|
||||
inventore iusto nesciunt similique velit voluptas.</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Companies Section -->
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3"><img src="assets/img/logos/microsoft.svg" alt="" class="company-img"></div>
|
||||
<div class="col-md-3"><img src="assets/img/logos/google.svg" alt="" class="company-img"></div>
|
||||
<div class="col-md-3"><img src="assets/img/logos/facebook.svg" alt="" class="company-img"></div>
|
||||
<div class="col-md-3"><img src="assets/img/logos/ibm.svg" alt="" class="company-img"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Contact Section -->
|
||||
<section>
|
||||
<div class="container">
|
||||
<h3 id="contact-section-title" class="section-title">Contact Us</h3>
|
||||
<p id="contact-section-description" class="section-description">Lorem ipsum dolor sit amet, consectetur.</p>
|
||||
<form class="row contact-form">
|
||||
<div class="col-md-6">
|
||||
<label for="name"></label>
|
||||
<input type="text" id="name" name="name" placeholder="Your Name *" required>
|
||||
<label for="email"></label>
|
||||
<input type="text" id="email" name="email" placeholder="Your Email *" required>
|
||||
<label for="phone"></label>
|
||||
<input type="text" id="phone" name="phone" placeholder="Your Phone *" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="message"></label>
|
||||
<textarea id="message" name="message" placeholder="Your Message *" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-submit">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="footer-copyright" class="col-md-4">
|
||||
<p>Copyright © Your Website 2023</p>
|
||||
</div>
|
||||
<div id="footer-socials" class="col-md-4">
|
||||
<a href="#"><i class="fa fa-twitter"></i></a>
|
||||
<a href="#"><i class="fa fa-facebook"></i></a>
|
||||
<a href="#"><i class="fa fa-linkedin"></i></a>
|
||||
</div>
|
||||
<div id="footer-policies" class="col-md-4">
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Use</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://kit.fontawesome.com/b62beca04b.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user