UPDATE

UKASHA09 · Mar 2, 2023 · 33a29ec · 33a29ec
1 parent e36b0b8
commit 33a29ec
Show file tree

Hide file tree

Showing 4 changed files with 323 additions and 0 deletions.
diff --git a/images/pexels-samuel-wölfl-1427541.jpg b/images/pexels-samuel-wölfl-1427541.jpg
diff --git a/index.html b/index.html
@@ -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>&copy; SkillUp 2023. All rights reserved.</p>
+ </div>
+ </footer>
+ </body>
+</html>
diff --git a/script.js b/script.js
@@ -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');
+
diff --git a/style.css b/style.css
@@ -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();