-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
323 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>SkillUp</title> | ||
<link rel="stylesheet" type="text/css" href="style.css"> | ||
</head> | ||
<body> | ||
<header> | ||
<nav> | ||
<ul> | ||
<li><a href="#">Home</a></li> | ||
<li><a href="#">Programs</a></li> | ||
<li><a href="#">Partnerships</a></li> | ||
<li><a href="#">Contact</a></li> | ||
</ul> | ||
</nav> | ||
<div class="header-text"> | ||
<h1>SkillUp</h1> | ||
<p>Empowering Youth Through Industry Innovation and Skill Development</p> | ||
<a href="#">Learn More</a> | ||
</div> | ||
</header> | ||
<section class="program-description"> | ||
<div class="container"> | ||
<h2>Program Description</h2> | ||
<p>SkillUp is a program that provides skill development and training opportunities to youth in the tech industry, with the goal of promoting economic growth through job creation and innovation.</p> | ||
<a href="#">Apply Now</a> | ||
</div> | ||
</section> | ||
<section class="partnerships"> | ||
<div class="container"> | ||
<h2>Partnerships</h2> | ||
<p>SkillUp partners with local tech companies to design training programs that meet industry needs and provide job placement opportunities for program graduates.</p> | ||
<a href="#">Learn More</a> | ||
</div> | ||
</section> | ||
<section class="impact"> | ||
<div class="container"> | ||
<h2>Impact</h2> | ||
<p>SkillUp has helped hundreds of youth gain the necessary skills to succeed in the tech industry, with many graduates securing meaningful employment and contributing to economic growth in their communities.</p> | ||
<a href="#">Read Our Stories</a> | ||
</div> | ||
</section> | ||
<footer> | ||
<div class="container"> | ||
<p>© SkillUp 2023. All rights reserved.</p> | ||
</div> | ||
</footer> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
navLinks.forEach((link, index) => { | ||
if (link.style.animation) { | ||
link.style.animation = ''; | ||
} else { | ||
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`; | ||
} | ||
}); | ||
|
||
burger.classList.toggle('toggle'); | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,263 @@ | ||
/* Global Styles */ | ||
* { | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; | ||
} | ||
|
||
body { | ||
font-family: 'Open Sans', sans-serif; | ||
} | ||
|
||
.container { | ||
max-width: 960px; | ||
margin: 0 auto; | ||
padding: 50px; | ||
} | ||
|
||
/* Header Styles */ | ||
header { | ||
height: 100vh; | ||
background-image: url('header-background.jpg'); | ||
background-size: cover; | ||
background-position: center; | ||
display: flex; | ||
align-items: center; | ||
} | ||
|
||
nav { | ||
width: 100%; | ||
display: flex; | ||
justify-content: flex-end; | ||
margin-bottom: 50px; | ||
} | ||
|
||
nav ul { | ||
list-style: none; | ||
display: flex; | ||
} | ||
|
||
nav ul li { | ||
margin-right: 30px; | ||
} | ||
|
||
nav ul li a { | ||
color: #000000; | ||
text-decoration: none; | ||
|
||
transition: all 0.3s ease; | ||
} | ||
|
||
nav ul li a:hover { | ||
color: #f8b739; | ||
} | ||
|
||
.header-text { | ||
max-width: 600px; | ||
margin-left: 50px; | ||
color: #000000; | ||
} | ||
|
||
.header-text h1 { | ||
font-size: 5em; | ||
margin-bottom: 20px; | ||
} | ||
|
||
.header-text p { | ||
font-size: 1.5em; | ||
margin-bottom: 30px; | ||
} | ||
|
||
.header-text a { | ||
display: inline-block; | ||
padding: 20px 40px; | ||
background-color: #f8b739; | ||
color: #fff; | ||
text-decoration: none; | ||
font-weight: bold; | ||
text-transform: uppercase; | ||
border-radius: 50px; | ||
transition: all 0.3s ease; | ||
} | ||
|
||
.header-text a:hover { | ||
transform: translateY(-5px); | ||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | ||
} | ||
|
||
/* Section Styles */ | ||
section { | ||
padding: 100px 0; | ||
} | ||
|
||
.program-description { | ||
background-color: #f5f5f5; | ||
} | ||
|
||
.program-description h2 { | ||
margin-bottom: 30px; | ||
} | ||
|
||
.program-description p { | ||
margin-bottom: 50px; | ||
} | ||
|
||
.program-description a { | ||
padding: 20px 40px; | ||
background-color: #1abc9c; | ||
color: #fff; | ||
text-decoration: none; | ||
font-weight: bold; | ||
text-transform: uppercase; | ||
border-radius: 50px; | ||
transition: all 0.3s ease; | ||
} | ||
|
||
.program-description a:hover { | ||
transform: translateY(-5px); | ||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | ||
} | ||
|
||
.partnerships { | ||
background-image: url('images/pexels-samuel-wölfl-1427541.jpg'); | ||
background-size: cover; | ||
background-position: center; | ||
color: #ffffff; | ||
} | ||
|
||
.partnerships h2 { | ||
margin-bottom: 30px; | ||
background-color: #000000; | ||
} | ||
|
||
.partnerships p { | ||
margin-bottom: 50px; | ||
} | ||
|
||
.partnerships a { | ||
padding: 20px 40px; | ||
background-color: #2c3e50; | ||
color: #fff; | ||
text-decoration: none; | ||
font-weight: bold; | ||
text-transform: uppercase; | ||
border-radius: 50px; | ||
transition: all 0.3s ease; | ||
} | ||
|
||
.partnerships a:hover { | ||
transform: translateY(-5px); | ||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | ||
} | ||
|
||
.impact { | ||
background-color: #3498db; | ||
color: #fff; | ||
} | ||
|
||
.impact h2 { | ||
margin-bottom: 30px; | ||
} | ||
|
||
.impact p { | ||
margin-bottom: 50px; | ||
} | ||
|
||
.impact a { | ||
padding: 20px 40px; | ||
background-color: #fff; | ||
color: #3498db; | ||
text-decoration: none; | ||
font-weight: bold; | ||
text-transform: uppercase; | ||
border-radius: 50px; | ||
transition: all 0.3s ease; | ||
} | ||
|
||
.impact a:hover { | ||
transform: translateY(-5px); | ||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | ||
} | ||
|
||
/* Footer Styles */ | ||
footer { | ||
background-color: #eee; | ||
padding: 50px 0; | ||
text-align: center; | ||
} | ||
|
||
footer p { | ||
font-size: 0.8em; | ||
color: #999; | ||
} | ||
|
||
/* Media Queries */ | ||
@media (max-width768px) { | ||
nav ul { | ||
display: none; | ||
} | ||
|
||
.header-text { | ||
margin-left: 0; | ||
text-align: center; | ||
} | ||
|
||
.header-text h1 { | ||
font-size: 4em; | ||
} | ||
} | ||
|
||
@media (max-width: 576px) { | ||
.header-text h1 { | ||
font-size: 3em; | ||
} | ||
|
||
.header-text p { | ||
font-size: 1.2em; | ||
} | ||
|
||
.header-text a { | ||
padding: 15px 30px; | ||
font-size: 0.8em; | ||
} | ||
|
||
.program-description p { | ||
margin-bottom: 30px; | ||
} | ||
|
||
.program-description a { | ||
padding: 15px 30px; | ||
font-size: 0.8em; | ||
} | ||
|
||
.partnerships p { | ||
margin-bottom: 30px; | ||
} | ||
|
||
.partnerships a { | ||
padding: 15px 30px; | ||
font-size: 0.8em; | ||
} | ||
|
||
.impact p { | ||
margin-bottom: 30px; | ||
} | ||
|
||
.impact a { | ||
padding: 15px 30px; | ||
font-size: 0.8em; | ||
} | ||
} | ||
|
||
/* Javascript */ | ||
const navSlide = () => { | ||
const burger = document.querySelector('.burger'); | ||
const nav = document.querySelector('nav ul'); | ||
const navLinks = document.querySelectorAll('nav ul li'); | ||
|
||
burger.addEventListener('click', () => { | ||
nav.classList.toggle('nav-active'); | ||
}); | ||
} | ||
|
||
navSlide(); |