<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RESPONSIVE START UP WEBSITE</title>
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/
all.min.css">
<style>
/* Add space between images in sectionright */
.sectionright {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Allow the images to wrap to next line if needed */
gap: 20px; /* Space between images */
.sectionright img {
width: 100px; /* Set a fixed width for the images */
height: auto;
/* Center the 'Learn More' button */
.faith {
display: block;
margin: 30px auto; /* Centers the button horizontally */
padding: 10px 20px;
background-color: black;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
.faith:hover {
background-color: black; /* Button hover effect */
</style>
</head>
<body>
<!-- navbar -->
<header>
<nav class="navbar container">
<img src="./start logo.png" alt="" class="logo">
<ul class="navlist">
<li class="navlink"><a href="Home">Home</a></li>
<li class="navlink"><a href="Portfolio">Portfolio</a></li>
<li class="navlink"><a href="Service">Service</a></li>
<li class="navlink"><a href="Contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- herosection -->
<section>
<div class="section1left">
<br><br>
<h5>WELCOME</h5><br>
<h1 style="padding-bottom: 20px;">Lorem ipsum dolor sit <br> amet consectetur</h1><br>
<h6>Lorem ipsum, dolor sit amet consecteur adipisicing <br>
elit. Suscipit nemo hic quos, ab, dolor aperiam nobis <br>
delectus iste?</h6><br>
<button>Explore</button>
</div>
<div class="section1right">
<div class="container">
<img src="./hero-img.png" alt="image">
</div>
</div>
</section>
</main>
<!-- partners -->
<section class="partners">
<div class="container">
<br><br>
<h5>PARTNERS</h5><br>
<h1 style="padding-bottom: 20px;">Lorem ipsum dolor sit <br> amet consectetur</h1><br>
<h6>Lorem ipsum, dolor sit amet consecteur adipisicing <br>
elit. Suscipit nemo hic quos, ab, dolor aperiam nobis <br>
delectus iste?</h6><br>
</div>
<div class="sectionright">
<img src="./google.png" alt="Google" class="image">
<img src="./microsoft.png" alt="Microsoft" class="image">
<img src="./IMG-20250108-WA0009.jpg" alt="Image" class="image">
<img src="./facebook.png" alt="Facebook" class="image">
<img src="./sportify.png" alt="Sportify" class="image">
</div>
<button class="faith">Learn More</button>
</section>
<!-- footer -->
<footer>
<div class="container">
<div>
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-pinterest-p"></i>
<i class="fa-brands fa-tiktok"></i>
<i class="fa-brands fa-whatsapp"></i>
<i class="fa-brands fa-youtube"></i>
</div>
<div>
<p>© Start, 2022. All </p>
</div>
</div>
</footer>
</body>
</html>
