Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@marioramirez90
marioramirez90 committed Jun 13, 2024
1 parent dca0a3a commit 01ab569
Show file tree
Hide file tree
Showing 2 changed files with 291 additions and 8 deletions.
106 changes: 98 additions & 8 deletions slides.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body></body>
</html>



<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>

<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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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=Source+Sans+3:ital,wght@0,590;1,590&display=swap"
rel="stylesheet">
</head>

<body>
<main class="slides-main">

<section class="slides-container"></section>

<div class="slides-header-content">
<h2 class="slides-header-title">SLIDES</h2>
<P class="slides-header-subtitle">Slides for each coding module</P>
</div>

<form class="search">
<input type="text" name="search" id="search" placeholder=" " />
<label for="search">Search Slides</label>

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0,0,256,256"
style="fill:#000000;">
<g fill="#6a1cc3" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none"
font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g transform="scale(5.12,5.12)">
<path
d="M21,3c-9.37891,0 -17,7.62109 -17,17c0,9.37891 7.62109,17 17,17c3.71094,0 7.14063,-1.19531 9.9375,-3.21875l13.15625,13.125l2.8125,-2.8125l-13,-13.03125c2.55469,-2.97656 4.09375,-6.83984 4.09375,-11.0625c0,-9.37891 -7.62109,-17 -17,-17zM21,5c8.29688,0 15,6.70313 15,15c0,8.29688 -6.70312,15 -15,15c-8.29687,0 -15,-6.70312 -15,-15c0,-8.29687 6.70313,-15 15,-15z">
</path>
</g>
</g>
</svg>




</form>

<div class="slides-info-titel">
<h2>All slides from module videos</h2>
</div>

<div class="slides-modul-title">
<h3>WEB DEV FOUNDATION</h3>
<P class="slides-modul-time">4 WEEKS</P>
</div>
<div class="slides-menu">
<a class="button"
href="https://docs.google.com/presentation/d/1MgywvbSmj7TGK4zSdQDSAg1reqlp9K__tgJEkXlTs-8/edit#slide=id.g75b8156060_0_0">Your
Development Setup</a>
<a class="button"
href="https://docs.google.com/presentation/d/1-PaZptKth8AEABs4wyTCjcLZ8FcV14o4leRMkS_9mCI/edit#slide=id.g75b8156060_0_0">First
Step with Git</button>
<a class="button"
href="https://docs.google.com/presentation/d/1wG3SoVjLjX-EFf0Nho_d1pP786muJ4cDXt0DJt3QCSk/edit#slide=id.g75b8156060_0_0">
HTML Foundatio</button>
<a class="button"
href="https://docs.google.com/presentation/d/1zFr2nDVndzVRG-alTnwAieifHYblnIkuLKDYdghvRoc/edit#slide=id.g75b8156060_0_0">CSS
Foundation</button>
<a class="button"
href="https://docs.google.com/presentation/d/1K0CbUdITLRgG7NlqqC1yXKdNfRjA3gQAdEI8VRBEVKQ/edit#slide=id.g75b8156060_0_0">Advanced
CSS</button>
<a class="button"
href="https://docs.google.com/presentation/d/1iTOCNw9hHCytLA6BE_BidURMVbkG7suCdrkp-Gtu5Eg/edit#slide=id.g75b8156060_0_0">Next
Step with Git</button>

</div>









</main>



</body>

</html>
193 changes: 193 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
/* Universelle Box-Sizing-Einstellung */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Grundlegende Schrift- und Farbstile */
html {
font-family: "montserrat";
}
/* Einstellungen fuer den Body */
.body {
max-width: 1440px;
margin: 0 auto;
padding: 0;
}

/* slides main Einstellungen*/
.slides-main {
display: flex;
position: absolute;
flex-direction: column;
left: 25rem;
top: 3.125rem;
}
/* slides main-header Einstellungen*/

.slides-header-content h2 {
font-family: "Montserrat";
margin: 0;
font-weight: 600;
font-size: 2.25rem;
line-height: 2.29rem;
color: hsl(268, 75%, 44%, 1);
}

.slides-header-content p {
font-family: "Montserrat";
margin-top: 1.5rem;
font-weight: 600;
font-size: 1.5rem;
line-height: 1.41px;
}
/* search-bar Einstellungen*/

form {
position: relative;
margin-top: 1.5rem;
}

label {
color: hsl(268, 75%, 44%, 0.38);
position: absolute;
font-size: 2rem;
left: calc(8px + 2px);
top: 50%;
transform: translateY(-50%);
font-family: "Source Sans 3", sans-serif;
font-weight: 200;
line-height: 2.5rem;
letter-spacing: 1px;
transition: font-size 200ms, top 200ms;
}
/* search-bar inputs Einstellungen*/
input {
border: 2.75px solid hsl(268, 75%, 44%, 1);
border-radius: 2px;
box-sizing: 1000px;
-width: 707px;
height: 3.875rem;
padding: 5px 505px 5px 5px;
}

input:focus + label,
input:not(:placeholder-shown) + label {
font-size: 75%;
top: 0.625rem;
}
svg {
width: 1.75rem;
height: 1.75rem;
position: absolute;
top: 1.1rem;
right: 1.25rem;
}
/* slides menu info Einstellungen*/

.slides-info-titel {
margin-top: 6rem;
}

.slides-info-titel h2 {
font-size: 1.1rem;
font-weight: 600;
line-height: 1.52rem;
font-family: "Montserrat";
}
/* slides menu title Einstellungen*/
.slides-modul-title {
display: flex;
justify-content: space-between;
margin-top: 1rem;
}

.slides-modul-title h3 {
font-family: "Source Sans Pro 3", sans-serif;
font-size: 0.8rem;
line-height: 1.17rem;
font-weight: 700;
font-weight: 700;
}

.slides-modul-title p {
font-family: "Source Sans Pro", sans-serif;
font-size: 0.8rem;
line-height: 1.17rem;
font-weight: 500;
}
/* slides menü button Einstellungen*/
.slides-menu .button {
display: flex;

padding: 10px;
margin: 0 0 15px;
border-radius: 2px;
border: 2.75px solid hsl(268, 75%, 44%, 1);
flex-direction: column;
text-align: center;
text-decoration: none;
color: hsl(268, 75%, 44%, 1);
background-color: transparent;
box-shadow: 5px 5px hsl(268, 75%, 44%, 1);
font-family: "Source Sans 3", sans-serif;
font-size: 2.8rem;
line-height: 2.8rem;
letter-spacing: 1px;
}
/* slides menü button:hover Einstellungen*/
.button:hover {
background-color: hsla(268, 75%, 44%, 0.287);
transition: background-color 300ms;
}
.button:active {
background-color: blueviolet;
color: white;
}
/* @Media Tablets und Handys */

/* Tablets */
@media (max-width: 1024px) {
.slides-main {
left: 5rem;
top: 2rem;
}
.slides-header-content h2 {
font-size: 1.8rem;
}
.slides-header-content p {
font-size: 1.2rem;
}
input {
width: 80%;
}
}

/* Handys */
@media (max-width: 768px) {
.body {
width: 100%;
/padding: 0 2rem 1rem 2rem;
}
.slides-main {
position: relative;
left: 0;
top: 0;
}
.slides-header-content h2 {
font-size: 1.5rem;
}
.slides-header-content p {
font-size: 1rem;
}
input {
width: 100%;
}
.slides-menu .button {
font-size: 1.5rem;
padding: 8px;
}
label {
font-size: 1.5rem;
}
}

0 comments on commit 01ab569

Please sign in to comment.