# style sign up form

SandraBergstrom · Jun 20, 2023 · 5e87dee · 5e87dee
1 parent dffedc9
commit 5e87dee
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 3 deletions.
diff --git a/src/App.module.css b/src/App.module.css
@@ -2,13 +2,25 @@
   background-color: var(--clr-primary-light);
   color: var(--clr-primary-dark);
   text-align: center;
-  min-height: 100dvh;
+  height: 100dvh;
 }
 
 .Main {
   padding-top: 80px;
 }
 
+.FillerImage {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+/* .Image {
+  height: 40vh;
+  max-width: 100%;
+  object-fit: contain;
+} */
+
 a {
   color: var(--clr-accent-light);
   transition: color ease-in-out 0.3s;
@@ -24,4 +36,33 @@ a:hover {
 a:hover i {
   color: var(--clr-accent-dark);
   transition: color ease-in-out 0.3s;
-}
+}
+
+input[type="file"] {
+  display: none;
+}
+
+i:hover {
+  cursor: pointer;
+  transition: color ease-in-out 0.3s;
+  color: var(--clr-accent-dark);
+}
+
+figure {
+  text-align: center;
+  display: inline-block;
+}
+
+/* scrollbar */
+*::-webkit-scrollbar {
+  width: 5px;
+}
+*::-webkit-scrollbar-track {
+  background: var(--clr-primary-light);
+}
+*::-webkit-scrollbar-thumb {
+  background: var(--clr-accent-light);
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--clr-accent-dark);
+}
diff --git a/src/index.css b/src/index.css
@@ -5,7 +5,7 @@
 
   --clr-natural-light: rgb(255, 250, 243);
 
-  --clr-accent-pink: rgb(160 108 131);
+  --clr-accent-pink: rgb(196, 104, 145);
   --clr-accent-light: rgb(149, 164, 170);
   --clr-accent-dark: rgb(72 102 113);
 }

diff --git a/src/styles/Button.module.css b/src/styles/Button.module.css
@@ -0,0 +1,69 @@
+.Button {
+    font-size: 0.8rem;
+    align-self: center;
+    border-radius: 100px;
+    border-color: transparent;
+    padding: 4px 10px;
+    margin-left: 2px;
+    margin-right: 2px;
+    min-width: 75px;
+  }
+
+  .Button:hover {
+    opacity: 0.8;
+    border-color: transparent;
+    cursor: pointer;
+  }
+
+  .Button:hover:active {
+    background-color: var(--clr-accent-dark) !important;
+  }
+
+  .Button:active {
+    background-color: var(--clr-accent-dark) !important;
+  }
+
+  .Button:focus {
+    background-color: var(--clr-accent-dark);
+  }
+
+  .Wide {
+    padding: 10px 50px;
+    width: 100%;
+  }
+
+  .Blue,
+  .BlueOutline:hover,
+  .Bright:hover {
+    background-color: var(--clr-accent-dark);
+    color: #ffffff;
+  }
+
+  .BlueOutline,
+  .Blue:hover {
+    /* border: 1px solid #2142b2; */
+    background-color: #ffffff;
+    color: var(--clr-accent-dark);
+  }
+
+  .Black,
+  .BlackOutline:hover {
+    /* background-color: #242a3d;
+    color: white; */
+    background-color: #242a3d;
+    color: aliceblue;
+  }
+
+  .Black:hover,
+  .BlackOutline {
+    /* background-color: #dadadf;
+    color: #242a3d;
+    border-color: #242a3d; */
+    background-color: aliceblue;
+    color: #242a3d;
+  }
+
+  .Bright {
+    background-color: var(--clr-accent-dark);
+    color: var(--clr-primary-light);
+  }
diff --git a/src/styles/SignInUpForm.module.css b/src/styles/SignInUpForm.module.css
@@ -0,0 +1,48 @@
+.Row {
+    height: calc(100vh - 81px);
+  }
+  .Input {
+    background: var(--clr-primary-light);
+    border: 1px solid var(--clr-accent-light);
+    box-sizing: border-box;
+    border-radius: 50px;
+    color: var(--clr-accent-dark);
+    text-align: center;
+    padding: 8px;
+  }
+
+  .Header {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 19px;
+    text-align: center;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--clr-accent-dark);
+    margin-bottom: 30px;
+  }
+
+  .Link {
+    text-decoration: none;
+    text-align: center;
+    display: block;
+    margin: auto;
+  }
+
+  .Link span {
+    color: var(--clr-accent-pink);
+    font-weight: 500;
+  }
+
+  .Container {
+    padding: 30px 10px;
+  }
+
+  /* .SignInCol {
+    height: 320px;
+  }
+  
+  .SignUpCol {
+    height: 375px;
+  } */