Scribd
Upload
29 views5 pages

Hom 1

The document is an HTML template for a responsive startup website, featuring a navigation bar, hero section, partners section with logos, and a footer with social media icons. It includes CSS styles for layout and button design, ensuring a visually appealing presentation. The content includes placeholder text and images, indicating areas for customization.

Uploaded by

mikedestiny853
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
29 views5 pages

Hom 1

The document is an HTML template for a responsive startup website, featuring a navigation bar, hero section, partners section with logos, and a footer with social media icons. It includes CSS styles for layout and button design, ensuring a visually appealing presentation. The content includes placeholder text and images, indicating areas for customization.

Uploaded by

mikedestiny853
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

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>&copy; Start, 2022. All </p>

</div>

</div>

</footer>

</body>

</html>

You might also like