styled left side of 2nd row

mdr19002 · Feb 16, 2020 · 49a1cb9b0e2367d2ddcd21b6e2389095284282e6 · 49a1cb9
1 parent ed9fbaf
commit 49a1cb9b0e2367d2ddcd21b6e2389095284282e6
Unified Split

Showing with 39 additions and 13 deletions.

+30 −6 css/axit.css

BIN img/axit_bg.jpg

+9 −7 wk3_axit.html
diff --git a/css/axit.css b/css/axit.css
@@ -144,10 +144,6 @@ textarea {
      padding: 10px 0;
      margin: 0;
    }
-
-   .desktop li {
-     margin-left: 50px;
-   }
 
    main {
      background-image: url(../img/axit_bg.jpg);
@@ -163,8 +159,27 @@ textarea {
      align-items: center;
    }
 
-   main .centered > * {
+   #raleway {
-     width: 50%;
+     color: white;
+     font-family: "Raleway", sans-serif;
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+   }
+
+   #raleway h1{
+     font-weight: 400;
+   }
+
+   #raleway p {
+     font-weight: 300;
+   }
+
+   hr{
+     border-top: 2px solid white;
+     width: 60px;
+     align: center;
+     margin-bottom: 30px;
    }
 
    #form-container {
@@ -232,6 +247,9 @@ textarea {
       display: flex;
       padding: 25px 0;
     }
+   .desktop li {
+    margin-left: 50px;
+  }
   }
 
   @media (min-width: 768px) {
@@ -241,6 +259,12 @@ textarea {
     main .centered {
       flex-direction: row;
     }
+    main .centered > div {
+      width: 50%;
+    }
+    #raleway {
+      display: block;
+    }
     #form-container {
       justify-content: flex-end;
     }

diff --git a/img/axit_bg.jpg b/img/axit_bg.jpg
diff --git a/wk3_axit.html b/wk3_axit.html
@@ -13,7 +13,7 @@
 
   <link rel="stylesheet" href="css/normalize.css">
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Raleway:300,400&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/axit.css">
 
   <meta name="theme-color" content="#fafafa">
@@ -46,12 +46,14 @@
     <div class="centered">
       <div>
         <img src="img/axit_logo.png" alt="AXIT logo">
-        <h1>MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h1>
+        <div id="raleway">
-        <hr>
+          <h1>MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+          <hr>
-          euismod bibendum laoreet. Proin gravida dolor sit amet lacus
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
-          accumsan et viverra justo commodo.</p>
+            euismod bibendum laoreet. Proin gravida dolor sit amet lacus
-        <p>Download</p>
+            accumsan et viverra justo commodo.</p>
+        </div>
+        <p id="download">Download</p>
       </div>
       <div id="form-container">
         <form>