Skip to content

Commit

Permalink
adds deep learning stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdwalker62
sdwalker62 committed May 16, 2024
1 parent 9d88343 commit 5cd3b00
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 11 deletions.
14 changes: 14 additions & 0 deletions frontend/src/lib/assets/icons/Play.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.6406" height="16.5527">
<g>
<rect height="16.5527" opacity="0" width="16.6406" x="0" y="0"/>
<path d="M3.04688 16.5527C3.4375 16.5527 3.76953 16.3965 4.16016 16.1719L15.5469 9.58984C16.3574 9.11133 16.6406 8.79883 16.6406 8.28125C16.6406 7.76367 16.3574 7.45117 15.5469 6.98242L4.16016 0.390625C3.76953 0.166016 3.4375 0.0195312 3.04688 0.0195312C2.32422 0.0195312 1.875 0.566406 1.875 1.41602L1.875 15.1465C1.875 15.9961 2.32422 16.5527 3.04688 16.5527Z" fill="#ffffff" fill-opacity="0.85"/>
</g>
</svg>

<style lang="scss">
svg:hover path {
fill: var(--highlight);
}
</style>
Binary file added frontend/src/lib/assets/videos/deep_learning_1080.webm
View file
Binary file not shown.
56 changes: 56 additions & 0 deletions frontend/src/lib/components/Courses/PageLink.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<script lang="ts">
import Play from "$lib/assets/icons/Play.svelte";
export let title = '';
export let description = '';
export let link = '';
</script>

<div id="widget-canvas">
<p>{description}</p>
<div id="icon">
<a href={link}><Play /></a>
</div>

</div>

<style lang="scss">
#widget-canvas {
display: flex;
align-items: center;
justify-content: center;
background: var(--background-10);
gap: 1.5rem;
padding: 1rem 1rem;
border-radius: 7px;
width: 100%;
}
#icon {
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: var(--font-2);
font-family: var(--f-ExtraBold), sans-serif;
font-size: 2rem;
font-weight: 100;
}
p {
color: var(--font-2);
line-height: 1.5;
font-family: var(--f-Regular), sans-serif;
font-size: 1.4rem;
// max-height: 3rem;
}
a {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.5rem;
}
</style>
102 changes: 91 additions & 11 deletions frontend/src/routes/courses/deep_learning/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,45 @@
<script lang="ts">
import backgroundVideo from '$lib/assets/videos/deep_learning_landing_page.webm';
import backgroundVideo from '$lib/assets/videos/deep_learning_1080.webm';
import PageLink from '$lib/components/Courses/PageLink.svelte';
</script>

<video autoplay loop muted playsinline preload="metadata" src={backgroundVideo}></video>
<main>
<h1>Deep Learning Course</h1>
<video autoplay loop muted playsinline preload="metadata" src={backgroundVideo}></video>
<div id="main-background__container">
<h1>Deep Learning</h1>
<p> This is a course on Deep learning!</p>
<div id="main-course__grid">
<div class="course-list__container">
<h3>Introduction</h3>
<PageLink
title="Introduction to Deep Learning"
description="This will introduce you to the fundamentals of Deep Learning. It covers loss functions, activation functions, network optimization, and more."
link="/courses/deep_learning/introduction"
/>
<PageLink
title="Introduction to Deep Learning"
description="This will introduce you to the fundamentals of Deep Learning. It covers loss functions, activation functions, network optimization, and more."
link="/courses/deep_learning/introduction"
/>
</div>
<div class="course-list__container">
<h3>Introduction</h3>
<PageLink
title="Introduction to Deep Learning"
description="This will introduce you to the fundamentals of Deep Learning. It covers loss functions, activation functions, network optimization, and more."
link="/courses/deep_learning/introduction"
/>
</div>
<div class="course-list__container">
<h3>Introduction</h3>
<PageLink
title="Introduction to Deep Learning"
description="This will introduce you to the fundamentals of Deep Learning. It covers loss functions, activation functions, network optimization, and more."
link="/courses/deep_learning/introduction"
/>
</div>
</div>
</div>
</main>

<style lang="scss">
Expand All @@ -15,20 +49,66 @@
align-items: center;
height: 100%;
width: 100%;
z-index: 1;
}
#main-course__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
padding: 2rem;
width: 100%;
}
#main-background__container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background: #0a0a0ad8;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 1rem;
}
.course-list__container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
h1 {
font-size: 6rem;
font-family: var(--f-Light), sans-serif;
color: var(--font-1);
padding: 4rem;
color: var(--font-2);
font-family: var(--f-ExtraBold), sans-serif;
font-size: 6rem;
font-weight: 100;
padding: 3rem 0;
}
h3 {
color: var(--font-2);
font-family: var(--f-Bold), sans-serif;
font-size: 2.3rem;
opacity: 0.8;
padding: 1.3rem 0;
}
video {
// position: fixed;
position: absolute;
width: 100%;
height: 50%;
// background-size: cover;
height: 100%;
background-size: cover;
top: 1.4rem;
left: 0;
}
p {
padding: 1rem 2rem;
color: var(--font-2);
line-height: 1.5;
font-family: var(--f-Regular), sans-serif;
font-size: 2rem;
}
</style>
1 change: 1 addition & 0 deletions frontend/static/css/colors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ html.dark {
--background-7: #0a0a0a;
--background-8: #e0e0e185;
--background-9: #1f1f1f;
--background-10: #292929;

/* Typography */
--font-1: white;
Expand Down

0 comments on commit 5cd3b00

Please sign in to comment.