Majority done
This commit is contained in:
parent
726697d705
commit
bc3fadf4ad
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
|
||||
|
||||
<defs>
|
||||
</defs>
|
||||
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
|
||||
<path d="M 71.194 32.312 c -2.886 0 -5.612 0.673 -8.058 1.84 l -3.668 -6.37 l 3.351 -5.445 c 0.282 -0.458 0.294 -1.032 0.032 -1.501 c -0.263 -0.469 -0.758 -0.76 -1.295 -0.76 h -8.423 c -0.819 0 -1.484 0.664 -1.484 1.484 s 0.664 1.484 1.484 1.484 h 5.768 l -1.988 3.231 H 32.346 l -0.55 -1.006 h 1.233 c 0.82 0 1.484 -0.664 1.484 -1.484 s -0.664 -1.484 -1.484 -1.484 H 21.825 c -0.82 0 -1.484 0.664 -1.484 1.484 s 0.664 1.484 1.484 1.484 h 6.589 l 1.311 2.398 l -3.357 6.247 c -2.317 -1.022 -4.872 -1.6 -7.562 -1.6 C 8.437 32.312 0 40.749 0 51.119 c 0 10.369 8.437 18.806 18.806 18.806 c 9.869 0 17.97 -7.646 18.731 -17.322 h 5.213 v 2.118 h -2.331 c -0.82 0 -1.484 0.664 -1.484 1.484 s 0.664 1.484 1.484 1.484 h 6.516 c 0.819 0 1.484 -0.664 1.484 -1.484 s -0.664 -1.484 -1.484 -1.484 h -1.218 v -3.204 L 57.74 30.725 l 2.82 4.898 c -4.93 3.394 -8.172 9.071 -8.172 15.495 c 0 10.369 8.437 18.806 18.807 18.806 C 81.563 69.924 90 61.488 90 51.119 C 90 40.749 81.563 32.312 71.194 32.312 z M 31.424 30.773 l 10.309 18.862 h -4.196 c -0.472 -6.001 -3.765 -11.212 -8.559 -14.31 L 31.424 30.773 z M 34.57 49.635 H 21.287 l 6.286 -11.697 C 31.444 40.521 34.114 44.76 34.57 49.635 z M 18.806 66.957 c -8.734 0 -15.839 -7.106 -15.839 -15.839 c 0 -8.734 7.106 -15.839 15.839 -15.839 c 2.183 0 4.264 0.444 6.158 1.246 l -7.465 13.891 c -0.247 0.46 -0.234 1.015 0.033 1.463 c 0.268 0.448 0.751 0.722 1.273 0.722 H 34.57 C 33.819 60.641 27.039 66.957 18.806 66.957 z M 44.27 48.092 L 33.967 29.241 h 21.204 L 44.27 48.092 z M 71.194 66.957 c -8.734 0 -15.84 -7.106 -15.84 -15.839 c 0 -5.326 2.651 -10.037 6.694 -12.909 l 7.86 13.649 c 0.274 0.477 0.774 0.744 1.286 0.744 c 0.251 0 0.506 -0.064 0.739 -0.198 c 0.711 -0.409 0.954 -1.315 0.546 -2.025 l -7.861 -13.652 c 2.006 -0.92 4.228 -1.447 6.576 -1.447 c 8.733 0 15.839 7.106 15.839 15.839 C 87.033 59.852 79.927 66.957 71.194 66.957 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
70
index.html
70
index.html
|
|
@ -1,13 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="reset.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</head>
|
||||
<body>
|
||||
<div id="flexbox">
|
||||
<div id="image">
|
||||
<div id="odin">
|
||||
<img src="assets/bicycle.svg" alt="">
|
||||
<span>Cycling</span>
|
||||
</div>
|
||||
<div id="adnotation">
|
||||
<span>Photo by me</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="interface">
|
||||
<div id="encouragement">
|
||||
<span>
|
||||
<em>
|
||||
One-a day I'mma goin' to Malta to bigger hotel<br>
|
||||
In the morning I go down to eat breakfast<br>
|
||||
I tell a waitress "I wanna two pieces of toast"<br>
|
||||
She brings me only one piece<br>
|
||||
</em>
|
||||
<span style="float: right; font-size: 1.2rem;">~ The Italian Man</span>
|
||||
</span>
|
||||
</div>
|
||||
<form action="#">
|
||||
<div id="enter">
|
||||
<h2>Let's do this!</h2>
|
||||
<div id="form-grid">
|
||||
<div class="element">
|
||||
<label for="fn">First name</label>
|
||||
<input type="text" id="fn">
|
||||
</div>
|
||||
<div class="element">
|
||||
<label for="ln">Last name</label>
|
||||
<input type="text" id="ln">
|
||||
</div>
|
||||
<div class="element">
|
||||
<label for="em">Email</label>
|
||||
<input type="email" id="em">
|
||||
</div>
|
||||
<div class="element">
|
||||
<label for="pn">Phone number</label>
|
||||
<input type="text" id="pn">
|
||||
</div>
|
||||
<div class="element">
|
||||
<label for="psk">Password</label>
|
||||
<input type="password" id="psk">
|
||||
</div>
|
||||
<div class="element">
|
||||
<label for="cpsk">Confirm password</label>
|
||||
<input type="password" id="cpsk">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="actions">
|
||||
<button type="submit">Create account</button>
|
||||
<span>
|
||||
Already have an account? <a href="#">Log in</a>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
131
style.css
131
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue