From a4280bed91adc0af0501299067191093b0919a76 Mon Sep 17 00:00:00 2001 From: Reda Lazri <the.red.shortcut@gmail.com> Date: Thu, 1 Sep 2016 16:39:37 +0100 Subject: [PATCH] Fixed the 'BUY' button and the ribbon/triangle...fixes --- css/master.css | 95 ++++++++++++++++++++++++++++-------------------- givingguide.html | 50 ++++++++++--------------- 2 files changed, 76 insertions(+), 69 deletions(-) diff --git a/css/master.css b/css/master.css index 26dd894..7bb2eaf 100644 --- a/css/master.css +++ b/css/master.css @@ -284,6 +284,7 @@ section { } /*Comparisons*/ + .title { margin-top: 40px; padding-bottom: 8px; @@ -293,7 +294,7 @@ section { background-position: center bottom; } -.sale { +/*.sale { position: absolute; top: 10px; left: -67px; @@ -313,15 +314,29 @@ section { font-size: 14px; font-weight: 700; +}*/ + +.sale { + position: absolute; + top: 0; + left: 0; + + width: 0; + height: 0; + + color: #fff; + border-width: 113px 113px 0 0; + border-style: solid; + border-color: #0AD778 transparent transparent transparent; } -/*.sale-text P { +.sale-text { position: absolute; - top: 18px; - left: 23px; + top: -93px; + left: 4px; -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); + transform: rotate(-45deg); text-transform: uppercase; color: white; @@ -329,29 +344,30 @@ section { font-size: 20px; font-weight: bold; -}*/ +} .rfy { position: absolute; - top: 30px; - left: -42px; + top: 44px; + left: -71px; - width: 180px; - padding: 6px 0; + width: 266px; + padding: 10px 0; -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); transform: rotate(-45deg); text-align: center; + text-decoration: underline; text-transform: uppercase; color: #fff; - background: #1e33f6; + border-bottom: 0; + background: #2B81E3; font-size: 14px; font-weight: 700; } + .bad, .good { overflow: hidden; @@ -376,17 +392,17 @@ section { background-image: url("../img/bad.svg"); } -.neutral { +li.neutral { background-image: url("../img/neutral.svg"); } -.pros, -.cons { +.cons, +.pros { padding-left: 15px; } -.pros li, -.cons li { +.cons li, +.pros li { padding-left: 30px; list-style: none; @@ -400,49 +416,50 @@ section { } .get-item { - /*width: 40%;*/ - margin: 0 auto; - width: 120px; + width: 140px; + margin: 0 auto 13px; + padding: 4px 35px; text-align: center; + text-decoration: none; color: white; + border-bottom: 0; border-radius: 100px; background: #2B81E3; - border-color: #135299; font-family: "Signika Regular"; font-size: 24px; } -.get-item a { +.get-item:active, +.get-item:focus, +.get-item:hover, +.rfy:active, +.rfy:focus, +.rfy:hover { text-decoration: none; color: white; - border-bottom: 0; + background: #6eadf5; } -.dropdown-toggle { - padding: 13px 55px; +.get-item:active { background: #2B81E3; - border-color: #135299; - border-radius: 100px; - width: 40px; - } -.dropdown-menu { - margin: 0; -} -.dropdown-menu li { - list-style: none; - margin-bottom: 12px; +.seller-group { + padding: 10px; + + text-align: center; } -.dropdown-menu a { - border-bottom: 0; - padding: 3px 20px; +.seller { + display: inline-block; + + text-align: center; } + /*Charities*/ .charities { diff --git a/givingguide.html b/givingguide.html index 1aa4cd3..44ab55e 100644 --- a/givingguide.html +++ b/givingguide.html @@ -132,51 +132,41 @@ <div class="good col-md-6 col-sm-6"> <!-- Begin Sale --> - <div class="sale">Sale!</div> + <div class="sale"> + <p class=sale-text> + Sale! + </p> + </div> <!-- End Sale --> <!-- Begin RFY --> - <div class="rfy">RYF-certified</div> + <a class="rfy" href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom">RFY-Certified</a> <!-- End RFY --> <img src="https://static.fsf.org/nosvn/images/givingguide/images/tehnoetic-s2.png" alt="replicant phone" class="center-block" width="80" /> <h5 class="text-center">Tehnoetic S2 with Replicant</h5> <!-- Buy/Download Button --> - <div class="btn-container center-block" id="get-item" style="display:none"> - <script>document.getElementById('get-item').style.display='';</script> - - <div class="btn-group"> - <button type="button" class="btn btn-primary get-item">BUY</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - <span class="caret"></span> - <span class="sr-only">Toggle Dropdown</span> - </button> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li role="separator" class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> + + <a id="get-item" class="get-item center-block" role="button" data-toggle="collapse" href="#sellers" aria-expanded="false" aria-controls="sellers" style="display:none"> + BUY + </a> + <div class="collapse" id="sellers"> + <div class="center-block seller-group"> + <a href="#" class="seller action-button">Seller 1</a> + <a href="#" class="seller action-button">Seller 2</a> </div> </div> - <!-- End Buy/Download button --> - + <script>document.getElementById('get-item').style.display='';</script> <noscript> - <div class="list-group"> - <a href="#" class="list-group-item active"> - Cras justo odio - </a> - <a href="#" class="list-group-item">Dapibus ac facilisis in</a> - <a href="#" class="list-group-item">Morbi leo risus</a> - <a href="#" class="list-group-item">Porta ac consectetur ac</a> - <a href="#" class="list-group-item">Vestibulum at eros</a> - </div> + <div class="center-block seller-group"> + <a href="#" class="seller action-button">Seller 1</a> + <a href="#" class="seller action-button">Seller 2</a> + </div> </noscript> - + <!-- End Buy/Download button --> <ul class="pros"> <li>Fully free software, based on Android.</li> -- 2.25.1