Scribd
Upload
44 views

Message

The document is the HTML code for the homepage of a website for SOS-HGS Tamale. It includes the basic structure and elements of a homepage with a header, navigation bar, hero section, and links to external stylesheets and scripts. The header contains the navbar with links to different pages and sections, and the hero section contains a welcome message, call to action buttons, and heading image.

Uploaded by

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

Message

The document is the HTML code for the homepage of a website for SOS-HGS Tamale. It includes the basic structure and elements of a homepage with a header, navigation bar, hero section, and links to external stylesheets and scripts. The header contains the navbar with links to different pages and sections, and the hero section contains a welcome message, call to action buttons, and heading image.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS-->
<link rel="stylesheet" href="./css/style.css" />
<!--Font Awesome Icons-->
<script
src="https://kit.fontawesome.com/46158df03c.js"
crossorigin="anonymous"
></script>
<!--Google Fonts - Roboto-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<!--Google Fonts - Inter-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?
family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<!--GreenSock-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"
integrity="sha512-
gmwBmiTVER57N3jYS3LinA9eb8aHrJua5iQD7yqYCKa5x6Jjc7VDVaEA0je0Lu0bP9j7tEjV3+1qUm6loO9
9Kw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!--Icons-->
<script
src="https://kit.fontawesome.com/46158df03c.js"
crossorigin="anonymous"
></script>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<!--Title-->
<title>SOS HGSTL | Home</title>
</head>
<body>
<header>
<!--Headbar: the total navigation area-->
<nav class="headbar">
<!--Topbar: the part with the external link, phone and social media links--
>
<div class="topbar">
<div class="info">
<a href="https://www.sos-childrensvillages.org" target="_blank"
>www.sos-childrensvillages.org</a
>
<p>059-584-4040</p>
</div>
<ul>
<li>
<a href="#">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
</ul>
</div>
<!--Navbar: the part with the links to other parts of the site-->
<div class="navbar">
<div class="logo">
<img src="/assets/logo.png" alt="Logo" />
</div>
<ul class="nav_list" id="nav_list">
<!-- <div class="close-btn">
<button id="close-side-nav">
<i class="fa-sharp fa-regular fa-xmark"></i>
</button>
</div> -->
<li aria-current="page">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Academics</a>
</li>
<li>
<a href="#">Admissions</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Support</a>
</li>
</ul>
<div class="hamburger">
<div class="line1 line"></div>
<div class="line2 line"></div>
<div class="line3 line"></div>
</div>
</div>
</nav>

<!--Hero-->
<section class="hero-container">
<div class="hero-text">
<h1>
<span>Welcome to </span>
<br />
<a href="https://www.sos-childrensvillages.org" target="_blank"
>SOS-HGS</a
>
Tamale
</h1>
<div class="hero-btns">
<a href="#"
>EXPLORE <i class="fa-sharp fa-solid fa-arrow-right"></i>
</a>
<a href="#" class="call-to-action"
>Get Started <i class="fa-sharp fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<div class="hero-img">
<img src="https://o.remove.bg/downloads/41a1a36e-a309-4e72-a171-
47cd502a9b1a/pexels-photo-5905859-removebg-preview.png" alt="Logo" />
</div>
</section>
</header>
<script src="script.js"></script>
</body>
</html>

You might also like