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.
99 lines
3.3 KiB
HTML
99 lines
3.3 KiB
HTML
<!--s14 assigning
|
|
1-chris
|
|
2- ron
|
|
3- josua
|
|
4-jp
|
|
5-chris
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
<!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>
|
|
<!-- member 1 -->
|
|
<body class="">
|
|
<!-- Navbar -->
|
|
<nav class="d-flex justify-content-between d-grid gap-5 bg-dark text-white p-2">
|
|
<div class="px-4">My Website</div>
|
|
<div class="d-flex d-inline justify-content-center">
|
|
<div class="px-4">About</div>
|
|
<div class="px-4">Services</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Banner Section -->
|
|
<section class="p-5 bg-danger text-white">
|
|
<div>
|
|
<h1>Welcome to My Website</h1>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- About Section -->
|
|
<!-- josua -->
|
|
<section class="container mt-5 mb-5 mx-auto">
|
|
<div class="row">
|
|
<div class="col-lg-6 order-1">
|
|
<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-lg-6 order-2" >
|
|
<img src="https://place-puppy.com/550x350" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--end josua-->
|
|
|
|
<!-- member 4 -->
|
|
<!-- Services Section -->
|
|
<section class="container text-center flex-wrap mx-auto">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="border border-secondary m-3 p-5">
|
|
<h3>Web Development</h3>
|
|
<p>We provide professional web development services.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="border border-secondary m-3 p-5">
|
|
<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="border border-secondary m-3 p-5">
|
|
<h3>Digital Marketing</h3>
|
|
<p>We help businesses grow their online presence.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--end member 4-->
|
|
|
|
|
|
<!-- member 5 -->
|
|
<!-- Footer -->
|
|
<footer class="d-flex justify-content-center d-grid gap-3 p-2 text-white bg-dark">
|
|
<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> |