|
@@ -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>
|