commit 36a37bcd7e8ed68d7dd2cb312847abbfe2653bc7 Author: ThronRycer Date: Fri Apr 9 16:46:47 2021 +0200 Initial Commit diff --git a/50Days/day1.css b/50Days/day1.css new file mode 100644 index 0000000..e69de29 diff --git a/50Days/day1.html b/50Days/day1.html new file mode 100644 index 0000000..583f8a8 --- /dev/null +++ b/50Days/day1.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + diff --git a/50Days/day1.js b/50Days/day1.js new file mode 100644 index 0000000..74e0f12 --- /dev/null +++ b/50Days/day1.js @@ -0,0 +1 @@ +! \ No newline at end of file diff --git a/lebenslauf/lebenslauf.css b/lebenslauf/lebenslauf.css new file mode 100644 index 0000000..2977782 --- /dev/null +++ b/lebenslauf/lebenslauf.css @@ -0,0 +1,39 @@ +body { + background-color: #2f3a4c; +} + +.container { + display: flex; +} + +.contact-details { + display: flex; + margin-top: 15px +} + +.icon { + color: white; + display: flex; + align-items: center; + margin-right: 5px; +} + +.icon i { + background: #9fc9ae; + padding: 9px 10px; +} + +.text { + font-family: "Roboto", sans-serif; + color: white +} + +.heading{ + font-weight: bold; + margin-bottom: 3px; +} + +.info { + font-weight: 100; +} + diff --git a/lebenslauf/lebenslauf.html b/lebenslauf/lebenslauf.html new file mode 100644 index 0000000..2bcd38a --- /dev/null +++ b/lebenslauf/lebenslauf.html @@ -0,0 +1,52 @@ + + + + + + + + + + + Lebenslauf + + +
+
+
+ +
+
+
Phone
+
+49 (0)176 342 266 69
+
+
+
+
+
+ +
+
+
Phone
+
+49 (0)176 342 266 69
+
+
+ +
+
+ +
+
+
Phone
+
+49 (0)176 342 266 69
+
+
+ + + diff --git a/navbar/navbar01.css b/navbar/navbar01.css new file mode 100644 index 0000000..a9b1c73 --- /dev/null +++ b/navbar/navbar01.css @@ -0,0 +1,186 @@ +@import url("https://fonts.googleapis.com/css2?family=Work+Sans&display=swap"); + +:root { + --background: rgba(0, 214, 170, 0.85); +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + margin: 0; + background: #222; + font-family: "Work Sans", sans-serif; + font-weight: 400; +} + +.content { + height: 200vh; + background-image: url(https://images.unsplash.com/photo-1614999440385-acc897b5e97b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80); + background-color: #999; + background-blend-mode: multiply; + background-size: cover; + display: grid; + place-items: center; + color: rgb(255, 0, 255); +} + +/* nav styles start here */ + +header { + background: var(--background); + text-align: center; + position: fixed; + z-index: 999; + width: 100%; +} + +.logo { + margin: 10px; +} + +.nav-toggle { + display: none; +} + +.nav-toggle-label { + position: absolute; + top: 0; + left: 0; + margin-left: 1em; + height: 100%; + display: flex; + align-items: center; + +} + +.nav-toggle-label span, +.nav-toggle-label span::before, +.nav-toggle-label span::after { + display: block; + background: white; + width: 2em; + height: 2px; + border-radius: 2px; + position: relative; +} + +.nav-toggle-label span::before, +.nav-toggle-label span::after { + content: ""; + position: absolute; +} + +.nav-toggle-label span::before { + bottom: 7px; +} + +.nav-toggle-label span::after { + top: 7px; +} + +nav { + background: var(--background); + width: 100%; + position: absolute; + text-align: left; + top: 100%; + left: 0; + transform: scale(1, 0); + transform-origin: top; + transition: transform 400ms ease-in-out; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +li { + margin-bottom: 1em; + margin-left: 1em; +} + +a { + color: white; + text-decoration: none; + font-size: 1.2rem; + text-transform: uppercase; + opacity: 0; + transition: opacity 150ms ease-in-out; +} + +a:hover { + color: #000; +} + +.nav-toggle:checked ~ nav { + transform: scale(1, 1); +} + +.nav-toggle:checked ~ nav a { + opacity: 1; + transition: opacity 250ms ease-in-out 200ms; +} + +@media screen and (min-width: 800px) { + .nav-toggle-label { + display: none; + } + + header { + display: grid; + grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr; + } + + .logo { + grid-column: 2 / 3; + } + + nav { + all: unset; + grid-column: 3/4; + display: flex; + justify-content: center; + align-items: center; + } + + ul { + display: flex; + justify-content: center; + } + + li { + margin-left: 1.5em; + margin-right: 1.5em; + margin-bottom: 0; + } + + a { + opacity: 1; + position: relative; + } + + nav a::before { + content: ""; + display: block; + height: 3px; + background: #222; + border-radius: 5px; + position: absolute; + width: 90%; + bottom: -.3em; + left: 5%; + right: 0; + transform: scale(0, 1); + transition: transform 250ms ease-in-out + } + + nav a:hover::before { + transform: scale(1, 1); + } +} diff --git a/navbar/navbar01.html b/navbar/navbar01.html new file mode 100644 index 0000000..5d346b4 --- /dev/null +++ b/navbar/navbar01.html @@ -0,0 +1,30 @@ + + + + + + + navbar01 + + + + +
+

Logo

+ + + +
+ +
+

This is the content

+
+ + diff --git a/workspace.code-workspace b/workspace.code-workspace new file mode 100644 index 0000000..ef9f5d2 --- /dev/null +++ b/workspace.code-workspace @@ -0,0 +1,7 @@ +{ + "folders": [ + { + "path": "." + } + ] +} \ No newline at end of file