eric vor 3 Jahren
Ursprung
Commit
53cdfe6451
1 geänderte Dateien mit 113 neuen und 12 gelöschten Zeilen
  1. 113 12
      LandingPage/index.html

+ 113 - 12
LandingPage/index.html

@@ -23,10 +23,23 @@
         padding-bottom: 40px;
     }
 
-    footer {
+    .footer-div {
         background-color: rgb(220,220,220);
         display: flex;
         flex-direction: column;
+        width: 1000px;
+        height: auto;
+        margin: auto;
+    }
+
+    .footer-nav-bar {
+        text-decoration: none;
+        margin: 0px 0px 0px auto;
+    }
+
+    .footer-copyright {
+        color: rgb(120,120,120);
+        margin: 0 10px 20px auto;
     }
 
     #header-img {
@@ -57,6 +70,12 @@
         margin: auto 20px auto 20px;
     }
 
+    .footer-nav-link {
+        text-decoration: none;
+        color: black;
+        margin: auto 15px auto 10px;
+    }
+
     #Login {
         display: flex;
         flex-direction: column;
@@ -129,7 +148,6 @@
     }
 
     #Pricing {
-        background-color: blue;
         width: 940px;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
@@ -137,23 +155,65 @@
         margin: 40px auto 40px auto;
     }
 
-    .priceItem {
+    .price-item {
         height: 300px;
-        background-color: aquamarine;
+        background-color: rgb(237,237,237);
         border-radius: 4px;
-        border: black;
+        border:2px solid black;
+    }
+
+    .item-title {
+        text-align: center;
+        padding-top: 15px;
+    }
+
+    .price-item-bg {
+        height: 60px;
+        background-color: rgb(220,220,220);
+        border-radius: 4px 4px 0 0;
+        margin: 2px 2px auto 2px;
+    }
+
+    .item-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-top: 5px;
+    }
+
+    .item-text-margin {
+        margin: 5px auto 5px auto;
+    }
+
+    .item-btn {
+        background-color: rgb(255, 208, 0);
+        color: black;
+        border:none;
+        font-size: 18px;
+        padding: 8px 20px 8px 20px;
+        margin-top: 10px;
+    }
+
+    @media  (max-width: 1000px) {
+        .footer-div {
+            background-color: rgb(220,220,220);
+            display: flex;
+            flex-direction: column;
+            width: 96%;
+            height: auto;
+            margin: auto;
+        }
     }
 
     @media (max-width: 940px) {
         #Pricing {
-            background-color: blue;
             width: 100%;
             display: grid;
             grid-template-columns: 1fr 1fr 1fr;
             column-gap: 20px;
             margin: 40px auto 40px auto;
         }
-
     }
 
     @media (max-width: 800px) {
@@ -244,22 +304,63 @@
 </section>
 
 <section id="Pricing">
-    <div class="priceItem">
+    <div class="price-item">
+        <div class="price-item-bg">
+            <h2 class="item-title">BASS TROMBONE</h2>
+        </div>
 
+        <div class="item-container">
+            <h2 class="item-text-margin">$600</h2>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <button class="item-btn">SELECT</button>
+        </div>
     </div>
 
-    <div class="priceItem">
+    <div class="price-item">
+        <div class="price-item-bg">
+            <h2 class="item-title">BASS TROMBONE</h2>
+        </div>
 
+        <div class="item-container">
+            <h2 class="item-text-margin">$600</h2>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <button class="item-btn">SELECT</button>
+        </div>
     </div>
 
-    <div class="priceItem">
+    <div class="price-item">
+        <div class="price-item-bg">
+            <h2 class="item-title">BASS TROMBONE</h2>
+        </div>
 
+        <div class="item-container">
+            <h2 class="item-text-margin">$600</h2>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <p class="item-text-margin">Lorem ipsum.</p>
+            <button class="item-btn">SELECT</button>
+        </div>
     </div>
 </section>
 
 </main>
 
 <footer>
-    <p>Copyright 2016, Original Trombones</p>
-    <p>Copyright 2016, Original Trombones</p>
+    <div class="footer-div">
+        <nav class="footer-nav-bar">
+            <ul>
+                <li><a href="#login" class="footer-nav-link">Privacy</a></li>
+                <li><a href="#HowItWorks" class="footer-nav-link">Terms</a></li>
+                <li><a href="#login" class="footer-nav-link">Contact</a></li>
+            </ul>
+        </nav>
+        <p class="footer-copyright">Copyright 2016, Original Trombones</p>
+    </div>
 </footer>