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.
84 lines
3.0 KiB
Plaintext
84 lines
3.0 KiB
Plaintext
<!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 class="container">
|
|
<!-- Navbar -->
|
|
<nav class="bg-dark text-white justify-content-center d-flex">
|
|
<div class="me-auto p-3">My Website</div>
|
|
<div class="d-flex">
|
|
<div class="me-3 p-3">About</div>
|
|
<div class="me-3 p-3">Services</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Banner Section -->
|
|
<section>
|
|
<div class="bg-danger text-white p-5">
|
|
<h1>Welcome to My Website</h1>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- About Section -->
|
|
<section class="container">
|
|
<div class="row mt-5">
|
|
<div class="col-lg-6">
|
|
<div class="p-4">
|
|
<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>
|
|
<div class="col-lg-6 mt-3 mb-3">
|
|
<img src="https://place-puppy.com/550x350" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section class="container">
|
|
<div class="row mt-5 text-center">
|
|
<div class="col-lg-4 col-md-6">
|
|
<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">
|
|
<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">
|
|
<div class="p-5 border">
|
|
<h3>Digital Marketing</h3>
|
|
<p>We help businesses grow their online presence.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-dark text-white d-flex justify-content-center d-grid gap-4 m-3 py-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> |