diff --git a/assets/Norse-Bold.otf b/assets/Norse-Bold.otf new file mode 100644 index 0000000..98ba001 Binary files /dev/null and b/assets/Norse-Bold.otf differ diff --git a/assets/bg.jpg b/assets/bg.jpg new file mode 100644 index 0000000..bfa29f6 Binary files /dev/null and b/assets/bg.jpg differ diff --git a/assets/bicycle.svg b/assets/bicycle.svg new file mode 100644 index 0000000..e474451 --- /dev/null +++ b/assets/bicycle.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/example-result.png b/example-result.png new file mode 100644 index 0000000..cbee09a Binary files /dev/null and b/example-result.png differ diff --git a/index.html b/index.html index f191b8f..120e712 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,73 @@ - - - - Document - - - - - - + + + + Document + + + + +
+
+
+ + Cycling +
+
+ Photo by me +
+
+
+
+ + + One-a day I'mma goin' to Malta to bigger hotel
+ In the morning I go down to eat breakfast
+ I tell a waitress "I wanna two pieces of toast"
+ She brings me only one piece
+ + ~ The Italian Man + +
+
+
+

Let's do this!

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + + Already have an account? Log in + +
+
+
+
+ \ No newline at end of file diff --git a/style.css b/style.css index e69de29..96366b5 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,131 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap'); + +@font-face { + font-family: Norse-Bold; + src: url(assets/Norse-Bold.otf); +} + +:root { + font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +em { + font-style: italic; +} + +#flexbox { + display: flex; + min-height: 100svh; +} + +#image { + flex: 3; + background: url('assets/bg.jpg') 25% / auto 100%; + position: relative; + color: #fff; + #odin { + position: absolute; + top: 12%; + padding: 0.1em 0 0.2em 0; + font-size: 5rem; + text-align: center; + background: #000000aa; + width: 100%; + font-family: Norse-Bold; + text-transform: uppercase; + span { + display: inline-block; + } + img { + filter: invert(1); + height: 5rem; + position: relative; + top: 10px; + } + } + #adnotation { + width: 100%; + position: absolute; + bottom: 0.5em; + text-align: center; + font-size: 0.9rem; + } +} + +h2 { + margin: 0 0 1rem 0; + font-weight: 700; + font-size: 1.4rem; +} + +#interface { + flex: 5; + display: flex; + flex-direction: column; + justify-content: center; + background: #eaeaea; + & > div, & > form > div { + padding: 0 2.5rem; + } + #encouragement { + margin: 2rem 0; + width: fit-content; + font-size: 1.5em; + } + #enter { + box-sizing: border-box; + padding-top: 2em; + padding-bottom: 2em; + background-color: #fff; + box-shadow: #000 0 0 8px -5px; + #form-grid { + display: grid; + width: 520px; + grid-template-columns: 1fr 1fr; + gap: 1.3em 3em; + .element { + display: flex; + flex-direction: column; + label { + margin: 0.2em 0; + text-transform: uppercase; + font-size: 0.85rem; + color: #252525; + font-weight: bold; + letter-spacing: 0.1em; + } + input { + display: block; + padding: 0.3em 0.5em; + font-size: 1rem; + border-radius: 5px; + border: 1px solid #ddd; + outline: none; + transition: 0.05s ease-in-out border; + &:focus { + box-shadow: #000 0 0 8px -5px; + border: 1px solid #22d; + } + } + } + } + } + button[type="submit"] { + display: block; + padding: 0.8em 2.5em; + margin: 2rem 0; + font-size: 1rem; + border-radius: 6px; + border: none; + outline: none; + background: #415214; + color: #fff; + font-weight: bold; + cursor: pointer; + transition: 0.1s ease-in-out background-color; + &:hover { + box-shadow: #000 0 0 8px -5px; + background: #52661b; + } + } +}