Add responsive design to hero section. Began creating widget options

adelinebelova · Jun 18, 2023 · 569cbc9 · 569cbc9
1 parent d6a2cf4
commit 569cbc9
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -39,7 +39,19 @@ <h1 class="heading">Embedded Widgets for <span class="highlight slanted">Notion.
                         <a class="coffee slanted" href="#">Buy me a Coffee</a>
                 </div>
             </div>
+    </div>
+    <div #wrapper2>
+            <div class="widgets">
+                <div class="options">
+                    <a class="option-box" href="#">Box 1</a>
+                    <a class="option-box" href="#">Box 2</a>
+                    <a class="option-box" href="#">Box 3</a>
+                    <a class="option-box" href="#">Box 4</a>
+                </div>
+            </div>
+    </div>
+
 
         </body>
-    </div>
+
 </html>
diff --git a/styles.css b/styles.css
@@ -17,6 +17,10 @@
 #wrapper{
     overflow-x: hidden;
     position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    width: 60vw;
+    padding-top: 120px;
 
 }
 
@@ -65,7 +69,7 @@
 }
 
 .navbar a:nth-of-type(4){
-    min-width: 160px;
+    min-width: 250px;
     border: 2px solid var(--olive);
     padding: 15px;
     margin-right: 20px;
@@ -80,9 +84,10 @@ body {
 }
 
 .hero{
-    width: 100vw;
-    height: 100vh;
-    display: flex;
+    display: inline-block;
+    align-items: center;
+    justify-content: center;
+
 }
 
 .slanted{
@@ -97,34 +102,32 @@ body {
     font-size: 55px;
     color: var(--olive);
     justify-content: center;
-    width: 70vw;
     height: auto;
     text-align: center;
-    position: absolute;
-    top: 20%;
-    left: 50%;
-    translate: -50% -50%;
+    position: relative;
     font-weight: 400;
 }
 
 .notion{
-    position: absolute;
-    width: 53vw;
-    text-align: left;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 60vw;
+    text-align: center;
     height: auto;
     color: var(--olive);
-    font-size: 16px;
-    top:  33%;
-    left: 50%;
-    translate: -50% -50%;
+    font-size: 18px;
+    margin:auto;
+    padding: 30px;
+
 }
 
 
 .text-box{
-    position: absolute;
-    top: 69%;
-    left: 49%; /*off-center to account for drop shadow */
-    translate: -50% -50%;
+    align-items: center;
+    justify-content: center;
+    margin:auto;
+    position: relative;
     width: 55vw;
     border: 4px solid var(--olive);
     border-radius: 30px;
@@ -173,9 +176,7 @@ body {
 }
 
 
-
-
-@media screen and (max-width: 300px){
+@media screen and (max-width: 750px){
     .logo{
         font-size: 20px;
         min-width: 150px;
@@ -190,13 +191,56 @@ body {
 
     .navbar a:nth-of-type(1){
         font-size: 30px;   
-        margin-right: 10px;
+        margin-right: 5px;
 
     }
 
     .navbar a:nth-of-type(4){
-        min-width: 50px;
         font-size: 10px;
-        padding: 10px;
+        margin:0;
+        min-width: 150px;
+        margin-right: 10px;
     }
+
 }
+
+@media screen and (max-width:400px){
+
+    .text-box p {
+        font-size: 18px;
+    }
+
+    .text-box p:nth-of-type(2) {
+        font-size: 20px;
+    }
+}
+
+
+/**** WIDGET OPTIONS ****/ 
+
+
+.options{
+    position: relative;
+    display: grid;
+    grid-template-columns: 450px 450px;
+    gap: 100px;
+    justify-content: center;
+    text-align: center;
+    padding-top: 100px;
+    padding-bottom: 100px;
+
+}
+
+.option-box{
+    margin:auto;
+    position: relative;
+    width: 400px;
+    height: 400px;
+    border: 4px solid var(--olive);
+    border-radius: 30px;
+    padding: 20px;
+    color: var(--olive);
+    box-shadow: 12px 12px 0px var(--sage), 15px 15px 0px var(--olive);
+
+}
+