Skip to content

Commit

Permalink
Created homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@vik-wed
vik-wed committed May 26, 2024
0 parents commit 542a119
Show file tree
Hide file tree
Showing 11 changed files with 392 additions and 0 deletions.
Binary file added img/campus-life.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/exams.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/favicon.ico
Binary file not shown.
Binary file added img/graduation.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/library.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/studying.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/wordmark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
183 changes: 183 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<!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>Karamozov College</title>
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" href="style.css" />
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header>
<img src="img/wordmark.png" alt="Logo" height="50" />
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
width="40"
height="40"
fill="#000b76"
>
<path
d="m17.545 15.467l-3.779-3.779a6.15 6.15 0 0 0 .898-3.21c0-3.417-2.961-6.377-6.378-6.377A6.185 6.185 0 0 0 2.1 8.287c0 3.416 2.961 6.377 6.377 6.377a6.15 6.15 0 0 0 3.115-.844l3.799 3.801a.953.953 0 0 0 1.346 0l.943-.943c.371-.371.236-.84-.135-1.211M4.004 8.287a4.282 4.282 0 0 1 4.282-4.283c2.366 0 4.474 2.107 4.474 4.474a4.284 4.284 0 0 1-4.283 4.283c-2.366-.001-4.473-2.109-4.473-4.474"
/>
</svg>
<svg viewBox="0 0 100 80" width="40" height="40" fill="#000b76">
<rect width="100" height="10"></rect>
<rect y="30" width="100" height="10"></rect>
<rect y="60" width="100" height="10"></rect>
</svg>
</header>
<section class="application">
<p>Interested in applying?</p>
<button class="learn-more">
Learn more
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 14 10"
width="25"
height="20"
>
<path stroke="#fff" d="M1 5h12m0 0L9 1m4 4L9 9" />
</svg>
</button>
</section>
<section>
<div class="slideshow-container">
<img
class="mySlides"
src="img/campus-life.jpg"
width="100%"
alt="College building"
/>
<img
class="mySlides"
src="img/library.jpg"
width="100%"
alt="Library with books"
/>
<img
class="mySlides"
src="img/graduation.jpg"
width="100%"
alt="Students graduating cap and gowns"
/>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<div class="dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
</section>
<section>
<div class="img-container">
<img
src="img/exams.jpg"
alt="College building with desks spiraling from the center of the room, multiple students are seen studying"
width="100%"
/>
<p class="subtitle">Explore degree programs</p>
</div>
<div class="img-container">
<img
src="img/studying.jpg"
alt="3 students sitting on the grass in front of college studying"
width="100%"
/>
<p class="subtitle">Study abroad</p>
</div>
</section>
<footer>
<div class="footer-logo">
<img src="img/logo.png" alt="Logo" height="30" />
<p>© 2024 All rights reserved.</p>
</div>
<a href="/">Privacy Notice</a>
<div class="socials">
<svg
enable-background="new 0 0 56.693 56.693"
height="40"
viewBox="0 0 56.693 56.693"
width="40"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="#000b76"
>
<path
d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029 c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77 L40.43,21.739z"
/>
</svg>
<svg
fill="#000b76"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enable-background="new 0 0 56.7 56.7"
xml:space="preserve"
height="40"
width="40"
>
<g>
<path
d="M28.2,16.7c-7,0-12.8,5.7-12.8,12.8s5.7,12.8,12.8,12.8S41,36.5,41,29.5S35.2,16.7,28.2,16.7z M28.2,37.7
c-4.5,0-8.2-3.7-8.2-8.2s3.7-8.2,8.2-8.2s8.2,3.7,8.2,8.2S32.7,37.7,28.2,37.7z"
/>
<circle cx="41.5" cy="16.4" r="2.9" />
<path
d="M49,8.9c-2.6-2.7-6.3-4.1-10.5-4.1H17.9c-8.7,0-14.5,5.8-14.5,14.5v20.5c0,4.3,1.4,8,4.2,10.7c2.7,2.6,6.3,3.9,10.4,3.9
h20.4c4.3,0,7.9-1.4,10.5-3.9c2.7-2.6,4.1-6.3,4.1-10.6V19.3C53,15.1,51.6,11.5,49,8.9z M48.6,39.9c0,3.1-1.1,5.6-2.9,7.3
s-4.3,2.6-7.3,2.6H18c-3,0-5.5-0.9-7.3-2.6C8.9,45.4,8,42.9,8,39.8V19.3c0-3,0.9-5.5,2.7-7.3c1.7-1.7,4.3-2.6,7.3-2.6h20.6
c3,0,5.5,0.9,7.3,2.7c1.7,1.8,2.7,4.3,2.7,7.2V39.9L48.6,39.9z"
/>
</g>
</svg>
<svg
fill="#000b76"
enable-background="new 0 0 56.693 56.693"
height="40"
viewBox="0 0 56.693 56.693"
width="40"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g>
<path
d="M30.071,27.101v-0.077c-0.016,0.026-0.033,0.052-0.05,0.077H30.071z"
/>
<path
d="M49.265,4.667H7.145c-2.016,0-3.651,1.596-3.651,3.563v42.613c0,1.966,1.635,3.562,3.651,3.562h42.12 c2.019,0,3.654-1.597,3.654-3.562V8.23C52.919,6.262,51.283,4.667,49.265,4.667z M18.475,46.304h-7.465V23.845h7.465V46.304z M14.743,20.777h-0.05c-2.504,0-4.124-1.725-4.124-3.88c0-2.203,1.67-3.88,4.223-3.88c2.554,0,4.125,1.677,4.175,3.88 C18.967,19.052,17.345,20.777,14.743,20.777z M45.394,46.304h-7.465V34.286c0-3.018-1.08-5.078-3.781-5.078 c-2.062,0-3.29,1.389-3.831,2.731c-0.197,0.479-0.245,1.149-0.245,1.821v12.543h-7.465c0,0,0.098-20.354,0-22.459h7.465v3.179 c0.992-1.53,2.766-3.709,6.729-3.709c4.911,0,8.594,3.211,8.594,10.11V46.304z"
/>
</g>
</svg>
<svg
fill="#000b76"
height="40"
viewBox="0 0 512 512"
width="40"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:serif="http://www.serif.com/"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
d="M501.303,132.765c-5.887,-22.03 -23.235,-39.377 -45.265,-45.265c-39.932,-10.7 -200.038,-10.7 -200.038,-10.7c0,0 -160.107,0 -200.039,10.7c-22.026,5.888 -39.377,23.235 -45.264,45.265c-10.697,39.928 -10.697,123.238 -10.697,123.238c0,0 0,83.308 10.697,123.232c5.887,22.03 23.238,39.382 45.264,45.269c39.932,10.696 200.039,10.696 200.039,10.696c0,0 160.106,0 200.038,-10.696c22.03,-5.887 39.378,-23.239 45.265,-45.269c10.696,-39.924 10.696,-123.232 10.696,-123.232c0,0 0,-83.31 -10.696,-123.238Zm-296.506,200.039l0,-153.603l133.019,76.802l-133.019,76.801Z"
style="fill-rule: nonzero"
/>
</svg>
</div>
</footer>
<script src="slides.js"></script>
</body>
</html>
67 changes: 67 additions & 0 deletions slides.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
let slideIndex = 1;

let myTimer;

let slideshowContainer;

window.addEventListener("load", function () {
showSlides(slideIndex);
myTimer = setInterval(function () {
plusSlides(1);
}, 4000);

slideshowContainer = document.getElementsByClassName(
"slideshow-container"
)[0];

slideshowContainer.addEventListener("mouseenter", pause);
slideshowContainer.addEventListener("mouseleave", resume);
});

function plusSlides(n) {
clearInterval(myTimer);
if (n < 0) {
showSlides((slideIndex -= 1));
} else {
showSlides((slideIndex += 1));
}
}

function currentSlide(n) {
clearInterval(myTimer);
myTimer = setInterval(function () {
plusSlides(n + 1);
}, 4000);
showSlides((slideIndex = n));
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}

pause = () => {
clearInterval(myTimer);
};

resume = () => {
clearInterval(myTimer);
myTimer = setInterval(function () {
plusSlides(slideIndex);
}, 4000);
};
142 changes: 142 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-family: "Poppins", sans-serif;
}

header {
width: 100%;
display: grid;
grid-auto-flow: column;
padding: 1rem;
gap: 0.5rem;
}

footer {
background-color: #daa520;
display: grid;
padding: 1rem;
gap: 0.5rem;
}

a {
color: #000b76;
}

.footer-logo {
display: grid;
grid-auto-flow: column;
gap: 0.5rem;
justify-content: start;
align-items: end;
}

.socials {
display: grid;
grid-auto-flow: column;
gap: 1rem;
justify-content: space-between;
}

/** Homepage styling **/
.application {
background-color: #daa520;
padding: 1.5rem 1rem;
color: #000b76;
font-size: 1.5rem;
display: grid;
gap: 1rem;
}

.learn-more {
background-color: #000b76;
color: white;
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: start;
justify-self: start;
gap: 0.5rem;
font-size: 1.1rem;
padding: 0.5rem 0.8rem;
border: 1px solid white;
border-radius: 1rem;
box-shadow: 0 8px 16px 0 #000b7130, 0 6px 20px 0 #000b7130;
}

.learn-more:hover {
background-color: #000c76d4;
cursor: pointer;
}

.img-container {
position: relative;
text-align: center;
color: white;
}

.subtitle {
background-color: #daa520;
color: #000b76;
padding: 0.5rem 1rem;
position: absolute;
border-radius: 1rem 0 0 1rem;
bottom: 2rem;
right: 0;
font-weight: 600;
}

/** Slideshow styling **/
.slideshow-container {
position: relative;
}

.mySlides {
display: none;
}

.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
padding: 0 1rem;
color: #daa520;
font-weight: bold;
font-size: 2rem;
transition: 0.6s ease;
}

.next {
right: 0;
}

.prev {
left: 0;
}

.prev:hover,
.next:hover {
color: #daa520bd;
}

.dots {
text-align: center;
}

.dot {
cursor: pointer;
height: 0.5rem;
width: 0.5rem;
background-color: #daa52037;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active,
.dot:hover {
background-color: #daa520;
}

0 comments on commit 542a119

Please sign in to comment.