Scribd
Upload
42 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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
42 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
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