Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@GuaciG
GuaciG committed Sep 21, 2021
0 parents commit 4ed1f1e
Show file tree
Hide file tree
Showing 34 changed files with 4,549 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
180 changes: 180 additions & 0 deletions about.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
<!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">
<title>TechiesGIRLS-About</title>
<link rel="stylesheet" href="style-about.css">
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/2e918371a2.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>
<body>
<!-- Navbar section -->
<nav class="navbar">
<div class="navbar__container">
<a href="/index.html" id="navbar__logo"><i class="fas fa-code-branch"></i>TechiesGIRLS</a>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
<a href="/index.html" class="navbar__links">Home</a>
</li>
<li class="navbar__item">
<a href="/tech.html" class="navbar__links">Tech</a>
</li>
<li class="navbar__item">
<a href="/about.html" class="navbar__links active">About</a>
</li>
<li class="navbar__item">
<a href="/contact.html" class="navbar__links">Contact</a>
</li>
<li class="navbar__btn">
<a href="/" class="button"><i class="far fa-user-circle"></i>Sign up</a>
</li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<div class="main">
<div class="main__container">
<img src="images/friendship.png" alt="friendship">
</div>
</div>

<!-- BUTTON SCROLL TO TOP -->
<button onclick="topFunction()" id="myBtnScr" title="Go to top"><i class="fas fa-chevron-circle-up"></i></button>

<!-- Support Section-->
<div class="support">
<div class="support__container">
<h2>Unique support programme</h2>
<p>At TechiesGIRLS, we’re driven by a culture of continuous collaboration. When lockdown struck, supporting over 800 students and our collaborators became the number one priority. The last year has proven one thing, it’s that we’re always stronger together. </p>
</div>
</div>

<!-- Program Section-->
<div class="program">
<div class="program__container">
<h2>How the team will encourage you</h2>
<div class="program__container--wrap">
<div class="program--img">
<img src="/images/change.jpg" alt="change neon">
</div>
<div class="program--text">
<h3>Inspired people</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore, dignissimos inventore! Consequuntur voluptatum itaque soluta dicta cupiditate, eius fuga. Velit consequuntur cupiditate possimus dolorum fuga expedita natus omnis impedit alias! Tempore, dignissimos inventore! Consequuntur voluptatum itaque soluta dicta cupiditate, eius fuga. </p>
</div>
</div>
<div class="program__cards">
<div class="program__cards__container">
<div class="program__card">
<i class="far fa-lightbulb"></i>
<p>Ideas</p>
</div>
<div class="program__card">
<i class="fas fa-comments"></i>
<p>Communication</p>
</div>
<div class="program__card">
<i class="fas fa-users-cog"></i>
<p>Team Work</p>
</div>
</div>
</div>
<div class="program__container--wrap">
<div class="program--img">
<img src="/images/yoga-home.jpg" alt="Yoga at home">
</div>
<div class="program--text">
<h3>Motivated people</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore, dignissimos inventore! Consequuntur voluptatum itaque soluta dicta cupiditate, eius fuga. Velit consequuntur cupiditate possimus dolorum fuga expedita natus omnis impedit alias! Tempore, dignissimos inventore! Consequuntur voluptatum itaque soluta dicta cupiditate, eius fuga. </p>
</div>
</div>
<div class="program__cards">
<div class="program__cards__container">
<div class="program__card">
<i class="fas fa-swimmer"></i>
<p>Gym Discounts</p>
</div>
<div class="program__card">
<i class="fas fa-book"></i>
<p>Student Discounts</p>
</div>
<div class="program__card">
<i class="fas fa-coffee"></i>
<p>Social Meetings</p>
</div>
</div>
</div>
</div>


</div>

<!-- Footer Section-->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
<h2>About Us</h2>
<a href="/sign__up">How it works</a>
<a href="/">Testimonials</a>
<a href="/">Careers</a>
<a href="/">Investments</a>
<a href="/">Terms of Service</a>
</div>
<div class="footer__link--items">
<h2>Contact Us</h2>
<a href="/">Contact</a>
<a href="/">Support</a>
<a href="/">Collaboration</a>
<a href="/">Destinations</a>
<a href="/">Sponsorships</a>
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
<h2>Videos</h2>
<a href="/">Submit Video</a>
<a href="/">Ambassadors</a>
<a href="/">Agency</a>
<a href="/">Influencer</a>
<a href="/">Blog</a>
</div>
<div class="footer__link--items">
<h2>Product</h2>
<a href="/">Features</a>
<a href="/">Pricing</a>
<a href="/">Login</a>
<a href="/">Sign Up</a>
<a href="/">Packages</a>
</div>
</div>
</div>
<div class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="/index.html" id="footer__logo"><i class="fas fa-code-branch"></i>TechiesGIRLS</a>
</div>
<p class="website__rights"><span>&copy;</span> TechiesGIRLS 2021. All rights reverved</p>
<div class="social__icons">
<a href="/" class="social__icon--link" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="/" class="social__icon--link" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="/" class="social__icon--link" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="/" class="social__icon--link" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="/" class="social__icon--link" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</div>

<script src="app.js"></script>
</body>
</html>
108 changes: 108 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
//menu responsive for mobile

const menu = document.querySelector("#mobile-menu");
const menuLinks = document.querySelector(".navbar__menu");

menu.addEventListener("click", () => {
menu.classList.toggle("is-active");
menuLinks.classList.toggle("active");
});

//slider - reviews

$(document).ready(function () {
$(".reviews__container--wrap").slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [
{
breakpoint: 802,
settings: {
slidesToShow: 1,
},
},
{
breakpoint: 520,
settings: {
slidesToShow: 1,
},
},
],
});
});

//slider - customer logos

$(document).ready(function () {
$(".customer-logos").slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [
{
breakpoint: 802,
settings: {
slidesToShow: 6,
},
},
{
breakpoint: 520,
settings: {
slidesToShow: 3,
},
},
],
});
});

//modules accordion for mobile

const accordionButtons = document.querySelectorAll(".btn");

accordionButtons.forEach((accordionBtn) => {
accordionBtn.addEventListener("click", () => {
const height = accordionBtn.nextElementSibling.scrollHeight;
accordionBtn.classList.toggle("active-btn");
if (accordionBtn.classList.contains("active-btn")) {
accordionBtn.nextElementSibling.style.maxHeight = `${height}px`;
} else {
accordionBtn.nextElementSibling.style.maxHeight = "0px";
}
});
});

// SCRIPT FOR BUTTON SCROLL TO TOP

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
//Get the button
const mybutton = document.getElementById("myBtnScr");

if (
document.body.scrollTop > 1000 ||
document.documentElement.scrollTop > 1000
) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Loading

0 comments on commit 4ed1f1e

Please sign in to comment.