final first assignment

RobCso · RobCso · commit ade40b95ad7e · 2022-07-01T12:48:58.000+01:00
diff --git a/css/style.css b/css/style.css
@@ -47,17 +47,25 @@ body {
         flex-direction: row;
         font-size: 0.75rem;
         padding: 0rem 1rem 0rem 0rem;
+        color: gray;
 
 }
 
+.navigation-item-karma {
+    color: black !important;
+}
+
 .navigation-link {
     color: var(--grey-dark);
     font-weight: 600;
-    text-transform: uppercase;
     text-decoration: none;
     padding: 0.5rem 0;
 }
 
+.navigation-link:hover {
+    color: orange;
+}
+
 /* body with background picture*/
 
 .main {
@@ -69,8 +77,22 @@ body {
     text-align: center;
 }
 
+.button {
+    background-color: orangered;
+    color: white;
+    border-radius: 1px;
+    padding: 5px 15px;
+    font-size: 11px;
+    border: none;
+}
+
 .karma {
     padding-top: 150px;
+    font-size: 1.2rem;    
+}
+
+.karma-intro {
+    font-size: 2rem;
 }
 
 .second-heading {
@@ -88,6 +110,8 @@ body {
 .join-us{
     border-top: 2px solid lightgray;
     text-align: center;
+    margin-top: 30px;
+    padding-top: 20px;
 }
 
 .icon-footer {
@@ -100,7 +124,7 @@ body {
     padding: 3px;
     border-radius: 50%;
     border: solid lightgray;
-    margin: 0px 2px;
+    margin: 0px 5px;
 }
 
 .copyright {
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 
         <nav class="navigation">
             <ul class="navigation-list">
-                <li class="navigation-item">
+                <li class="navigation-item navigation-item-karma">
                     <a class="navigation-link" href="#">Meet Karma</a>
                 </li>
                 <li class="navigation-item">
@@ -42,7 +42,7 @@
 
     <main class="main">
         <div class="karma">
-            <h1>Introducing Karma</h1>
+            <p class="karma-intro">Introducing Karma</p>
             <p class="bring-wifi">Bring WiFi with you, everywhere you go.</p>
             <button class="button" href="#">Learn More</button>
         </div>
