counterweight/odin-project-notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

final

Browse source
This commit is contained in:
Pablo Martin 2025-05-05 15:20:30 +02:00
parent d2292dbf2b
commit 4fe145e0a2
2 changed files with 104 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

53
projects/sign-up-form/index.html
View file

@ -22,12 +22,57 @@
</div>
<div class="right-panel">
<div class="top-right-area">
<h3 class="right-panel-header first right-panel-left-margin">This is not a real online service! You know you need something like this in your life to help you realize your deepest dreams. Sign up <em>now</em> to get started.</h2>
<h3 class="right-panel-header second right-panel-left-margin">You <em>know</em> you want to.</h2>
<h3 class="right-panel-header first right-panel-left-margin">
This is not a real online service! You know you need something like
this in your life to help you realize your deepest dreams. Sign up
<em>now</em> to get started.
</h3>
<h3 class="right-panel-header second right-panel-left-margin">
You <em>know</em> you want to.
</h3>
</div>
<div class="form-area subtle-shadow">
<div class="form-contents right-panel-left-margin">
<div class="form-header">
<h3>Let's do this!</h3>
</div>
<div class="form-fields">
<div class="form-field-container">
<h5 class="form-field-header">First name</h5>
<input class="form-field-value-container"></input>
</div>
<div class="form-field-container">
<h5 class="form-field-header">Last name</h5>
<input class="form-field-value-container"></input>
</div>
<div class="form-field-container">
<h5 class="form-field-header">Email</h5>
<input class="form-field-value-container"></input>
</div>
<div class="form-field-container">
<h5 class="form-field-header">Phone number</h5>
<input class="form-field-value-container"></input>
</div>
<div class="form-field-container">
<h5 class="form-field-header">Password</h5>
<input class="form-field-value-container"></input>
</div>
<div class="form-field-container">
<h5 class="form-field-header">Confirm password</h5>
<input class="form-field-value-container"></input>
</div>
</div>
</div>
</div>
<div class="form-area">ola</div>
<div class="bottom-right-area">
<div class="button bg-green subtle-shadow">Create Account</div>
<div
class="create-account-button bg-main subtle-shadow right-panel-left-margin"
>
Create Account
</div>
<p class="existing-account-nudge-text right-panel-left-margin">
Already have an account? <span class="text-color-main">Log in</span>
</p>
</div>
</div>
</div>

59
projects/sign-up-form/style.css
View file

@ -4,7 +4,7 @@
}
:root {
--main-color: green;
--main-color: rgb(80, 126, 80);
font-family: Arial, Helvetica, sans-serif;
}
@ -106,6 +106,38 @@ body {
width: 100%;
}
.form-contents {
position: relative;
width: 60%;
}
.form-fields {
display: grid;
grid-template-columns: repeat(2, auto);
}
.form-field-container {
margin-bottom: 30px;
}
.form-field-header {
text-transform: uppercase;
color: gray;
margin: 0;
}
.form-field-value-container {
border: 1px solid rgb(218, 218, 218);
border-radius: 5px;
height: 25px;
width: 250px;
}
.form-field-value-container:focus {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
border: 0px solid blue;
}
.right-panel-left-margin {
left: 5%;
}
@ -122,16 +154,35 @@ body {
.right-panel-header.first {
top: 45%;
max-width: 50%;
}
.right-panel-header.second {
top: 75%;
}
.bg-green {
background-color: rgb(46, 65, 46)
.create-account-button {
position: absolute;
bottom: 25%;
padding: 10px 30px;
border-radius: 10px;
color: white;
font-weight: bold;
}
.existing-account-nudge-text {
position: absolute;
bottom: 18%;
}
.bg-main {
background-color: var(--main-color);
}
.text-color-main {
color: var(--main-color);
}
.subtle-shadow {
box-shadow: ;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}