styled Download button

mdr19002 · Feb 16, 2020 · ed8584d · ed8584d
1 parent 49a1cb9
commit ed8584d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/css/axit.css b/css/axit.css
@@ -139,7 +139,6 @@ textarea {
    header ul {
      display: flex;
      align-items: center;
-     justify-content: flex-end;
      list-style-type: none;
      padding: 10px 0;
      margin: 0;
@@ -159,22 +158,36 @@ textarea {
      align-items: center;
    }
 
-   #raleway {
-     color: white;
-     font-family: "Raleway", sans-serif;
+   #main-text {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
 
-   #raleway h1{
+   .raleway {
+     color: white;
+     font-family: "Raleway", sans-serif;
+   }
+
+   .raleway h1{
      font-weight: 400;
    }
 
-   #raleway p {
+   .raleway p {
      font-weight: 300;
    }
 
+   #download {
+     font-family: 'Open Sans', sans-serif;
+     color: white;
+     font-weight: semibold;
+     border: 3px solid white;
+     width: 160px;
+     text-align: center;
+     padding: 10px 30px;
+     margin-top: 30px;
+   }
+
    hr{
      border-top: 2px solid white;
      width: 60px;
@@ -262,9 +275,12 @@ textarea {
     main .centered > div {
       width: 50%;
     }
-    #raleway {
+    #main-text {
       display: block;
     }
+    #download {
+      margin-top: 50px;
+    }
     #form-container {
       justify-content: flex-end;
     }

diff --git a/wk3_axit.html b/wk3_axit.html
@@ -44,15 +44,13 @@
 
   <main class="bg">
     <div class="centered">
-      <div>
+      <div id="main-text">
         <img src="img/axit_logo.png" alt="AXIT logo">
-        <div id="raleway">
-          <h1>MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h1>
+          <h1 class="raleway">MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h1>
           <hr>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+          <p class="raleway">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
             euismod bibendum laoreet. Proin gravida dolor sit amet lacus
             accumsan et viverra justo commodo.</p>
-        </div>
         <p id="download">Download</p>
       </div>
       <div id="form-container">