Skip to content

Commit 1ab7c3b

Browse files
ladunjexaladunjexa
authored
Add files via upload
1 parent 0a1e7e7 commit 1ab7c3b

File tree

15 files changed

+500
-0
lines changed

15 files changed

+500
-0
lines changed

‎index.html‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>ladunjexa — Advanced CSS & Sass Course</title>
8+
<meta name="description" content="" />
9+
<meta name="keywords" content="" />
10+
11+
<link
12+
rel="stylesheet"
13+
href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"
14+
/>
15+
<!--Replace with your tailwind.css once created-->
16+
<link
17+
href="https://unpkg.com/@tailwindcss/custom-forms/dist/custom-forms.min.css"
18+
rel="stylesheet"
19+
/>
20+
21+
<link rel="stylesheet" href="master/assets/css/style.css" />
22+
</head>
23+
24+
<body
25+
class="leading-normal tracking-normal text-indigo-400 m-6 bg-cover bg-fixed"
26+
style="background-image: url('master/assets/media/header.png')"
27+
>
28+
<div class="h-full">
29+
<!--
30+
NAVBAR
31+
-->
32+
<div class="w-full container mx-auto">
33+
<div class="w-full flex items-center justify-between">
34+
<a
35+
class="flex inline items-center text-indigo-400 no-underline hover:no-underline font-bold text-2xl lg:text-4xl"
36+
href="#"
37+
>
38+
<span
39+
class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500"
40+
>Advanced CSS & Sass Course</span
41+
>
42+
</a>
43+
<div class="flex w-1/2 justify-end content-center">
44+
<a
45+
class="udemy-button-link inline-block text-blue-300 no-underline hover:text-pink-500 hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 transform hover:scale-125 duration-300 ease-in-out"
46+
href="https://udemy.com/"
47+
>
48+
<!-- Udemy SVG -->
49+
<svg
50+
viewBox="0 0 412.77 799.91"
51+
xmlns="http://www.w3.org/2000/svg"
52+
width="24"
53+
height="24"
54+
viewBox="0 0 24 24"
55+
>
56+
<path
57+
d="M412.74 238.2l-206.4-119.1L0 238.2V119.1L206.37 0l206.4 119.1v119.1z"
58+
fill="#a435f0"
59+
/>
60+
<path
61+
d="M0 338.22h108.11v262.54c0 67.83 50.67 100.9 98.26 100.9 48 0 98.3-33.95 98.3-101.81V338.22h108.1v268.8c0 62.48-19.65 110.7-58.96 143.76-39.33 33.04-88.45 49.13-148.35 49.13-59.84 0-108.99-16.06-147.38-49.13C19.65 717.75 0 671.32 0 609.69z"
62+
/>
63+
</svg>
64+
</a>
65+
66+
<a
67+
class="github-button-link inline-block text-blue-300 no-underline hover:text-pink-500 hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 transform hover:scale-125 duration-300 ease-in-out"
68+
href="https://github.com/"
69+
>
70+
<!-- GitHub SVG -->
71+
<svg
72+
xmlns="http://www.w3.org/2000/svg"
73+
width="24"
74+
height="24"
75+
viewBox="0 0 24 24"
76+
>
77+
<path
78+
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
79+
/>
80+
</svg>
81+
</a>
82+
</div>
83+
</div>
84+
</div>
85+
86+
<!--
87+
HERO
88+
-->
89+
<div
90+
class="container pt-24 md:pt-36 mx-auto flex flex-wrap flex-col md:flex-row items-center"
91+
>
92+
<!-- Left column -->
93+
<div
94+
class="flex flex-col w-full xl:w-2/5 justify-center lg:items-start overflow-y-hidden"
95+
>
96+
<h1
97+
class="my-4 text-3xl md:text-5xl text-white opacity-75 font-bold leading-tight text-center md:text-left"
98+
>
99+
Advanced<span
100+
class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500"
101+
>
102+
CSS and Sass</span
103+
>
104+
Course: Flexbox, Grid, Animations and More!
105+
</h1>
106+
<p
107+
class="leading-normal text-base md:text-2xl mb-8 text-center md:text-left"
108+
>
109+
<a
110+
href="https://www.udemy.com/course/advanced-css-and-sass/"
111+
>Udemy course</a
112+
>
113+
by
114+
<span class="italic"
115+
>Jonas Schmedtmann</span
116+
>.
117+
</p>
118+
<form
119+
class="bg-gray-900 opacity-75 w-full shadow-lg rounded-lg px-8 pt-6 pb-8 mb-4"
120+
>
121+
<div class="mb-4">
122+
<label
123+
class="block text-blue-300 py-2 font-bold mb-2"
124+
for="emailaddress"
125+
>
126+
Projects + BONUS
127+
</label>
128+
<div class="portfolio-list grid grid-cols-2 gap-2">
129+
<!-- controlled by JavaScript -->
130+
</div>
131+
</div>
132+
<div class="flex items-center justify-between pt-4">
133+
<a href="#" class="project-href">
134+
<button
135+
class="project-href-button bg-gradient-to-r from-purple-800 to-green-500 hover:from-pink-500 hover:to-green-500 text-white font-bold py-2 px-4 rounded focus:ring transform transition hover:scale-105 duration-300 ease-in-out"
136+
type="button"
137+
>
138+
ladunjexa.vercel.app
139+
</button></a
140+
>
141+
</div>
142+
</form>
143+
</div>
144+
145+
<!-- Right column -->
146+
<div class="w-full xl:w-3/5 p-12 overflow-hidden">
147+
<div
148+
class="relative transform transition hover:scale-105 duration-700 ease-in-out -rotate-6 hover:rotate-6"
149+
>
150+
<img
151+
class="mx-auto w-full md:w-4/5"
152+
src="master/assets/media/macbook.svg"
153+
/>
154+
<img src="#" class="macbook-project-mockup" />
155+
</div>
156+
</div>
157+
158+
<div class="mx-auto md:pt-16">
159+
<div
160+
class="flex flex-row justify-center items-center mt-5 gap-10 technologies-container"
161+
>
162+
<!-- controlled by JavaScript -->
163+
</div>
164+
</div>
165+
166+
<!--Footer-->
167+
<div class="w-full pt-16 pb-6 text-sm text-center md:text-left fade-in">
168+
<a class="text-gray-500 no-underline hover:no-underline" href="#"
169+
>&copy; ladunjexa 2023</a
170+
>
171+
- UI by
172+
<a
173+
class="text-gray-500 no-underline hover:no-underline"
174+
href="https://www.tailwindtoolbox.com"
175+
>TailwindToolbox.com</a
176+
>
177+
</div>
178+
</div>
179+
</div>
180+
<script src="master/assets/js/script.js"></script>
181+
</body>
182+
</html>

‎master/assets/css/style.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
2+
3+
html {
4+
font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
5+
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
6+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
7+
}
8+
9+
.macbook-project-mockup {
10+
width: 75%;
11+
height: 80%;
12+
position: absolute;
13+
top: 50%;
14+
left: 48.7%;
15+
transform: translate(-50%, -50%);
16+
margin-left: auto;
17+
margin-right: auto;
18+
transition-property: background-color, border-color, color, fill, stroke,
19+
opacity, box-shadow, transform;
20+
transition-duration: 700ms;
21+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
22+
}

‎master/assets/js/script.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
let projectsList = [
2+
{ name: "Natours-Web", img: "natours-mockup.png", href: "Natours-Web/" },
3+
{ name: "Nexter-Web", img: "nexter-mockup.png", href: "Nexter-Web/" },
4+
{ name: "Xotelo-Web", img: "xotelo-mockup.png", href: "Xotelo-Web/" },
5+
{
6+
name: "Alexa's Portfolio-Web",
7+
img: "alexaportfolio-mockup.png",
8+
href: "BONUS/Alexa-Portfolio-Web",
9+
},
10+
{
11+
name: "Christmas-SPA-Web",
12+
img: "cspa-mockup.png",
13+
href: "BONUS/Christmas-SPA-Web",
14+
},
15+
];
16+
17+
let technologiesUsed = [
18+
{ name: "HTML", img: "html_icon.svg" },
19+
{ name: "CSS", img: "css_icon.svg" },
20+
{ name: "JS", img: "js_icon.svg" },
21+
{ name: "Sass", img: "sass_icon.svg" },
22+
];
23+
24+
let udemyCourseLink =
25+
"https://www.udemy.com/course/advanced-css-and-sass/"
26+
let githubRepoLink =
27+
"https://github.com/ladunjexa/Advanced-CSS-and-Sass-Course";
28+
29+
let buttonProps = {
30+
className:
31+
"bg-gradient-to-r from-gray-800 to-gray-500 hover:from-gray-500 hover:to-gray-400 text-white font-semibold py-1 px-2 rounded focus:ring transform transition hover:scale-105 duration-300 ease-in-out",
32+
type: "button",
33+
};
34+
35+
let techContainerClasses =
36+
"h-12 transform hover:scale-125 duration-300 ease-in-out";
37+
38+
let techContainer = document.querySelector(".technologies-container");
39+
let portfolioList = document.querySelector(".portfolio-list");
40+
let projectContainer = document.querySelector(".macbook-project-mockup");
41+
let projectHref = document.querySelector(".project-href");
42+
let projectHrefBtn = document.querySelector(".project-href-button");
43+
let githubNavLink = document.querySelector(".github-button-link");
44+
let udemyNavLink = document.querySelector(".udemy-button-link");
45+
46+
window.onload = function () {
47+
// Set github link
48+
githubNavLink.setAttribute("href", githubRepoLink);
49+
udemyNavLink.setAttribute("href", udemyCourseLink);
50+
51+
// Set technologies
52+
technologiesUsed.forEach((tech) => {
53+
let img = document.createElement("img");
54+
55+
img.className = techContainerClasses;
56+
img.src = `master/assets/media/${tech.img}`;
57+
img.alt = `${tech.name} icon`;
58+
59+
techContainer.appendChild(img);
60+
});
61+
62+
// Set projects
63+
projectsList.forEach((project, index) => {
64+
let button = document.createElement("button");
65+
66+
button.id = `button-${project.name}-${index}`;
67+
button.className = buttonProps.className;
68+
button.type = buttonProps.type;
69+
button.textContent = `${project.name.slice(0, project.name.length - 4)}`;
70+
button.onclick = () => loadProject(project);
71+
72+
portfolioList.appendChild(button);
73+
});
74+
75+
// Load random initial project
76+
loadProject(projectsList[Math.floor(Math.random() * projectsList.length)]);
77+
};
78+
79+
// Load project
80+
const loadProject = (project) => {
81+
projectContainer.setAttribute(
82+
"src",
83+
`master/assets/media/projects/${project.img}`
84+
);
85+
projectHref.setAttribute(
86+
"href",
87+
`https://ladunjexa.github.io/Advanced-CSS-and-Sass-Course/${project.href}`
88+
);
89+
projectHrefBtn.innerHTML = `Go to ${project.name.replace("-", " ")}`;
90+
};

‎master/assets/media/css_icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎master/assets/media/github.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎master/assets/media/header.png‎

241 KB
Loading

‎master/assets/media/html_icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎master/assets/media/js_icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)