diff --git a/slides.html b/slides.html index a5850a6..d9f01b4 100644 --- a/slides.html +++ b/slides.html @@ -1,10 +1,100 @@ - - - - - Document - - - + + + + + + + + Document + + + + + + + + + + + + +
+ +
+ +
+

SLIDES

+

Slides for each coding module

+
+ +
+ + + + + + + + + + + + + + + +
+ +
+

All slides from module videos

+
+ +
+

WEB DEV FOUNDATION

+

4 WEEKS

+
+
+ Your + Development Setup + First + Step with Git + + HTML Foundatio + CSS + Foundation + Advanced + CSS + Next + Step with Git + +
+ + + + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css index e69de29..4291a60 100644 --- a/style.css +++ b/style.css @@ -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; + } +}