You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
3.0 KiB
HTML
77 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
|
|
|
|
<title>S14 - Activity</title>
|
|
|
|
</head>
|
|
<body>
|
|
<!-- Navbar -->
|
|
<nav class="d-flex flex-row justify-content-between align-items-center bg-dark text-white py-3 px-5 fs-5">
|
|
<div class="">My Website</div>
|
|
<div class="d-inline d-flex">
|
|
<div class="me-4">About</div>
|
|
<div>Services</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Banner Section -->
|
|
<section class="p-5 bg-danger text-white">
|
|
<div class="px-5">
|
|
<h1>Welcome to My Website</h1>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- About Section -->
|
|
<section class="row mt-5 d-grid mx-auto" style="width: 90%;">
|
|
<div class="container d-flex d-grid gap-5 text-md-left" style="height: 400px;">
|
|
<div class="col-5">
|
|
<h2>About Us</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt nisi et sem eleifend aliquet. Fusce interdum rutrum ipsum, non feugiat risus consectetur eu. Nulla sodales orci et mi ultrices, at mattis leo gravida. Curabitur non dapibus orci.</p>
|
|
</div>
|
|
<div class="col-5">
|
|
<img src="https://place-puppy.com/550x350" class="img-fluid w-100">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section class="row mt-5 text-center d-flex">
|
|
<div class="col-lg-4 col-md-6 mt-5">
|
|
<div class="p-5 border">
|
|
<h3>Web Development</h3>
|
|
<p>We provide professional web development services</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 mt-5">
|
|
<div class="p-5 border">
|
|
<h3>Graphic Design</h3>
|
|
<p>Our talented designers create stunning graphics for your brand</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-12 mt-5">
|
|
<div class="p-5 border">
|
|
<h3>Digital Marketing</h3>
|
|
<p>We help business grow their online presence</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-dark text-white mt-5 d-flex d-inline p-5 justify-content-center fs-5 d-grid gap-3">
|
|
<div>© 2023 My Website.</div>
|
|
<div>|</div>
|
|
<div>All rights reserved.</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |