Align header logo and website description

dreezyduh · Jan 30, 2024 · b295e53 · b295e53
1 parent 6c91302
commit b295e53
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
 # landingpage-project
-Project using `learned css skills in order to test current knowledge 
+Project using learned css skills in order to test current knowledge 
diff --git a/index.html b/index.html
@@ -12,22 +12,24 @@
 </head>
 <body>
     <div class="hero">
-        <div class="first-part">
-            <div class="header">Header Logo</div>
-            <ul>
-                <li><a href="#">header link one</a></li>
-                <li><a href="#">header link two</a></li>
-                <li><a href="#">header link three</a></li>
-            </ul>
-        </div>
-        <div class="second-part">
-            <div class="leftdescrip">
-                <div class="description">This website is awesome</div>
-                <div class="subtext">This website has some subtext that goes here under the main title. It's a smaller font and the color is lower contrast</div>
-                <button class="button">Sign up</button>
+        <div class="header-container">
+            <div class="first-part">
+                <div class="header">Header Logo</div>
+                <ul>
+                    <li><a href="#">header link one</a></li>
+                    <li><a href="#">header link two</a></li>
+                    <li><a href="#">header link three</a></li>
+                </ul>
             </div>
-            <div class="rightdescrip">
-                <img src="./images/porci.png" alt="porci pe wow">
+            <div class="second-part">
+                <div class="leftdescrip">
+                    <div class="description">This website is awesome</div>
+                    <div class="subtext">This website has some subtext that goes here under the main title. It's a smaller font and the color is lower contrast</div>
+                    <button class="button">Sign up</button>
+                </div>
+                <div class="rightdescrip">
+                    <img src="./images/porci.png" alt="porci pe wow">
+                </div>
             </div>
         </div>
     </div>

diff --git a/style.css b/style.css
@@ -9,16 +9,16 @@ body {
 .hero {
     background-color: #1F2937;
     display: flex;
-    flex: 1;
-    flex-direction: column;
-    padding: 16px;
+    justify-content: center;
 
 }
 
 .first-part {
     display: flex;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
 }
 
 .header {
@@ -42,8 +42,7 @@ body {
 
 .second-part {
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: space-between;
     margin-top: 60px;
     margin-bottom: 60px;
     text-wrap: wrap;
@@ -145,8 +144,6 @@ a {
 
 .adbutton {
     padding: 150px;
-    display: flex;
-    justify-content: center;
 }
 
 .adbutton-container{
@@ -176,6 +173,7 @@ a {
     color: #F9FAF8;
     font-size: 20px;
     width: 150px;
+    flex-shrink: 0;
 }
 
 .footer {