color: white;
}
-/*.label-warning {
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
+.alert-link {
+ border-bottom: 0;
+}
- background-color: #ffd429;
-}*/
/*Typography*/
-
-/* Generated by Font Squirrel (https://www.fontsquirrel.com) on August 20, 2016 */
@font-face {
font-family: "Open Sans Bold";
font-weight: bold;
color: #2caf8f;
- font-family: "Signika Bold";
- font-size: 25px;
+ font-family: "Signika Light";
+ font-size: 35px;
}
h2 {
- color: #2caf8f;
+ color: #4B423B;
font-family: "Signika Light";
- font-size: 24px;
+ font-size: 28px;
}
h3 {
color: #333;
font-family: "Signika Regular";
- font-size: 22px;
+ font-size: 25px;
}
h4 {
- padding-top: 20px;
+ padding-top: 23px;
color: #9b9b9b;
color: #4a4a4a;
font-family: "Signika Regular";
- font-size: 19px;
+ font-size: 20px;
line-height: 20px;
}
+li,
p {
+ margin-bottom: 10px;
+
list-style: outside;
- color: #333;
+ color: #1c1c1c;
font-family: "Open Sans";
- font-size: 18px;
+ font-size: 17px;
line-height: 30px;
}
li {
margin-bottom: 20px;
- font-size: 17px;
+
list-style-type: disc;
}
a {
+ transition: 0.3s all ease;
+ text-decoration: none;
+
color: #2caf8f;
-border-bottom: 2px solid #ffd429;
-text-decoration: none;
+ border-bottom: 2px solid #ffd429;
+
+}
+
+a:hover {
+ text-decoration: none;
+
+ color: #0f4639;
}
/*Header*/
background: #fffae5;
}
-.actions button {
+.action {
+ margin-bottom: 50px;
+}
+
+.action-button {
margin-bottom: 30px;
padding: 6px 45px;
- color: #333333;
+ color: #4B423B;
border: 0;
+ border-bottom: 0;
border-radius: 100px;
background: #FFD429;
- /* Print the guide: */
font-family: "Signika Regular";
font-size: 22px;
}
+.action-button:hover {
+ color: white;
+ background: #2caf8f;
+}
+
/*Comparisons*/
.title {
margin-top: 40px;
background-repeat: no-repeat;
- line-height: 25px;
}
.bad img,
font-size: 24px;
}
+/*Charities*/
+
+.charities {
+ /*padding-top: 30px;*/
+ padding-bottom: 50px;
+}
+
+.charities img {
+ transition: 0.3s all ease;
+}
+
+.charities img:hover {
+ transform: scale(1.2);
+}
+
/*Licenses*/
.fix-margin {
margin: 0;
list-style-type: none;
+ transition: 0.3s all ease;
+
border-right: 1px #9BD2BF solid;
background-color: white;
font-family: "Signika Regular";
font-size: 1.1em;
+
}
.navbar li:first-child {
.navbar li a {
display: block;
+ transition: 0.3s all ease;
text-decoration: none;
+
}
.navbar li a:hover {
/*Navbar*/
.navbar-nav {
-
margin: 10px 10px 10px 100px;
}
list-style-type: none;
+ transition: 0.3s all ease;
+
border-right: 1px #9BD2BF solid;
background-color: white;
font-family: "Signika Regular";
font-size: 1em;
+
}
.navbar li:first-child {
.navbar li a {
display: block;
+ transition: 0.3s all ease;
text-decoration: none;
+
}
.navbar li:hover a {
/*Intro*/
.intro-text {
- background: transparent;
+ background: transparent;
}
+
.intro-text h1 {
- color: rgba(255, 255, 255, 0.95);
margin-top: 0;
+ color: rgba(255, 255, 255, 0.95);
+
}
+
.intro-text p {
color: rgba(255, 255, 255, 0.79);
}
+
.intro-text h4 {
- font-family: 'Signika Light';
color: #FFDD55;
+
+ font-family: "Signika Light";
+ }
+
+ .illustration img {
+ width: 80%;
}
-.illustration img {
- width: 80%;
-}
/*Footer*/
.footer-logo img {
width: 50%;
<!--End Intro-->
<!--Begin Actions-->
- <div class="actions">
+ <section class="actions">
<div class="container">
<div class="row">
<!-- Begin Share -->
- <div class="share col-md-4 col-sm-4 text-center">
+ <div class="action col-md-4 col-sm-4 text-center">
<h2>Share</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
- <button type="button" name="share"><a href="https://www.fsf.org/share?u=https://www.fsf.org/givingguide/&t=Check out the Free Software Foundation Ethical Tech Giving Guide">#givefreely</a></button>
+ <a class="action-button" href="https://www.fsf.org/share?u=https://www.fsf.org/givingguide/&t=Check out the Free Software Foundation Ethical Tech Giving Guide">#givefreely</a>
</div>
<!-- End Share -->
<!-- Begin Share -->
- <div class="print col-md-4 col-sm-4 text-center">
+ <div class="action col-md-4 col-sm-4 text-center">
<h2>Organize</h2>
<p>
Like this guide? Download the printable version and organize a <a href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer">Giving Guide Giveaway</a> to share it with your community.
</p>
- <button type="button" name="print"><a href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer#printable">Print the guide</a></button>
+ <a class="action-button" href="https://www.fsf.org/givingguide/giving-guide-giveaway-primer#printable">Print the guide</a>
</div>
<!-- End Share -->
<!-- Begin Share -->
- <div class="donate col-md-4 col-sm-4 text-center">
+ <div class="action col-md-4 col-sm-4 text-center">
<h2>Non-profit</h2>
<p>
Donating to a <a href="#charities">nonprofit</a> in someone's name is at least as meaningful as buying them an electronic device.
</p>
- <button type="button" name="donate">Donate</button>
+ <a class="action-button" href="#charities">Donate</a>
</div>
<!-- End Share -->
</div>
<!-- End Row -->
</div>
<!-- End Container -->
- </div>
+ </section>
<!--End Actions-->
<!--Begin Comparisons-->
- <div class="comparisons">
+ <section class="comparisons">
<!--Smartphones-->
<div class="container">
<!--End Row-->
</div>
<!--End Container-->
- </div>
+ </section>
<!--End comparisons-->
<!--More certified products-->
- <div class="certified">
+ <section class="certified">
<div class="container">
<h1>More Products Certified to Respect Your Freedom</h1>
<div class="row">
<!-- Begin Certified -->
- <div class="col-md-4 col-sm-4">
+ <div class="col-md-4 col-sm-4 col-xs-6">
<img src="img/products/tehnoetic-wifi.png" alt="" class="center-block" />
<h5 class="text-center">Tehnoetic Mini Wi-Fi Adapter</h5>
<p>
</p>
</div>
- <div class="col-md-4 col-sm-4">
+ <div class="col-md-4 col-sm-4 col-xs-6">
<img src="https://static.fsf.org/nosvn/images/givingguide/images/thinkpenguin-mini-router.png" alt="" class="center-block" />
<h5 class="text-center">ThinkPenguin VPN Router</h5>
<p>
</p>
</div>
- <div class="col-md-4 col-sm-4">
+ <div class="col-md-4 col-sm-4 col-xs-6">
<img src="https://static.fsf.org/nosvn/images/givingguide/images/thinkpenguin-long-range-adapter.png" alt="" class="center-block img-responsive" />
<h5 class="text-center">ThinkPenguin Long-Range Wi-Fi Adapter</h5>
<p>
</div>
<!--End Container-->
- </div>
+ </section>
<!-- End Certified -->
<!-- Begin Donations -->
- <div class="donations">
+ <section class="charities" id="charities">
<div class="container">
<h1>Recommended organizations for holiday donations</h1>
<div class="row">
- <div class="col-md-3 col-xs-6">
- <a href="http://www.fsf.org/"><img src="img/charities/fsf.jpg" alt="" class="center-block img-responsive"/></a>
+ <div class="col-md-3 col-xs-4">
+ <a href="http://www.fsf.org/"><img src="img/charities/fsf.jpg" alt="fsf" class="center-block img-responsive"/></a>
</div>
- <div class="col-md-3 col-xs-6">
- <a href="http://www.sfconservancy.org/"><img src="img/charities/sfc.jpg" alt="" class="center-block img-responsive"/></a>
+ <div class="col-md-3 col-xs-4">
+ <a href="http://www.sfconservancy.org/"><img src="img/charities/sfc.jpg" alt="sfc" class="center-block img-responsive"/></a>
</div>
<div class="col-md-3 col-xs-4">
- <a href="http://www.eff.org/"><img src="img/charities/eff.jpg" alt="" class="center-block img-responsive"/></a>
+ <a href="http://www.eff.org/"><img src="img/charities/eff.jpg" alt="eff" class="center-block img-responsive"/></a>
</div>
<div class="col-md-3 col-xs-4">
- <a href="http://www.creativecommons.org/"><img src="img/charities/cc.jpg" alt="" class="center-block img-responsive"/></a>
+ <a href="http://www.creativecommons.org/"><img src="img/charities/cc.jpg" alt="cc" class="center-block img-responsive"/></a>
</div>
<div class="col-md-3 col-xs-4">
- <a href="http://wikimedia.org/"><img src="img/charities/wikimedia.jpg" alt="" class="center-block img-responsive"/></a>
+ <a href="http://wikimedia.org/"><img src="img/charities/wikimedia.jpg" alt="wikimedia" class="center-block img-responsive"/></a>
</div>
<div class="col-md-3 col-xs-4">
- <a href="http://www.softwarefreedom.org/"><img src="img/charities/sflc.jpg" alt="" class="center-block img-responsive"/></a>
+ <a href="http://www.softwarefreedom.org/"><img src="img/charities/sflc.jpg" alt="sflc" class="center-block img-responsive"/></a>
</div>
<div class="col-md-3 col-xs-4">
- <a href="http://www.gnome.org/"><img src="img/charities/gnome.jpg" alt="" class="center-block img-responsive"/></a>
+ <a href="http://www.gnome.org/"><img src="img/charities/gnome.jpg" alt="gnome" class="center-block img-responsive"/></a>
</div>
<div class="col-md-3 col-xs-4">
- <a href="https://ceata.org/"><img src="img/charities/ceata.jpg" alt="" class="center-block img-responsive"/></a>
+ <a href="https://ceata.org/"><img src="img/charities/ceata.jpg" alt="ceata" class="center-block img-responsive"/></a>
</div>
</div>
</div>
- </div>
+ </section>
<!-- End Donations -->
<!-- Begin Licenses -->
- <div class="Licenses">
+ <section class="Licenses">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- End Row -->
</div>
<!-- End Container -->
- </div>
+ </section>
<!-- End Licenses -->
<!--Begin Footer-->
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="141px" height="3px" viewBox="0 0 141 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
- <title>Line</title>
- <desc>Created with Sketch.</desc>
- <defs></defs>
- <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
- <g id="Mobile-Copy-2" transform="translate(-90.000000, -1527.000000)" stroke="#FFD429" stroke-width="3">
- <path d="M91.5,1528.5 L229.503616,1528.5" id="Line"></path>
- </g>
- </g>
-</svg>
\ No newline at end of file
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
- <title>Shape</title>
- <desc>Created with Sketch.</desc>
- <defs></defs>
- <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="Mobile" transform="translate(-18.000000, -3064.000000)" fill="#D80909">
- <g id="Avoid" transform="translate(0.000000, 2580.000000)">
- <g id="clear-copy-3" transform="translate(18.000000, 484.000000)">
- <polygon id="Shape" points="18.269531 2.62067407 11.081611 9.80859348 18.269531 16.9965139 16.45745 18.808594 9.269531 11.6206746 2.081612 18.808594 0.269531 16.9965139 7.45745103 9.80859348 0.269531 2.62067407 2.081612 0.808594 9.269531 7.99651341 16.45745 0.808594"></polygon>
- </g>
- </g>
- </g>
- </g>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><svg width="19px" height="22px" viewBox="0 0 19 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Artboard Copy@2x</title> <defs/> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Actions-Copy-3" transform="translate(-1637.000000, -35.000000)"/> <g id="Artboard-Copy" fill="#D80909"> <polygon id="Shape" points="18.460938 6.757812 11.488281 13.730468 18.460938 20.703125 16.703125 22.460937 9.730469 15.488281 2.757813 22.460937 1 20.703125 7.972657 13.730468 1 6.757812 2.757813 5 9.730469 11.972656 16.703125 5"/> </g> </g></svg>
\ No newline at end of file
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="19px" height="14px" viewBox="0 0 19 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
- <title>Shape</title>
- <desc>Created with Sketch.</desc>
- <defs></defs>
- <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="Mobile" transform="translate(-15.000000, -2310.000000)" fill="#2CAF8F">
- <g id="Buy" transform="translate(0.000000, 1911.000000)">
- <g id="check-copy" transform="translate(15.000000, 399.000000)">
- <polygon id="Shape" points="5.98934386 11.0628437 16.8373444 0.214844 18.277344 1.65484361 5.98934386 13.9428437 0.277344 8.23084389 1.71734361 6.79084428"></polygon>
- </g>
- </g>
- </g>
- </g>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><svg width="19px" height="22px" viewBox="0 0 19 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Artboard@2x</title> <defs/> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard" fill="#2CAF8F"> <polygon id="check" points="6.71199986 18.84958 17.5600004 8 19 9.44020938 6.71199986 21.7299995 1 16.0171676 2.43999961 14.5769582"/> </g> </g></svg>
\ No newline at end of file
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
- <title>neutral copy</title>
- <desc>Created with Sketch.</desc>
- <defs>
- <circle id="path-1" cx="9.5" cy="9.5" r="6.5"></circle>
- <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-3" y="-3" width="19" height="19">
- <rect x="0" y="0" width="19" height="19" fill="white"></rect>
- <use xlink:href="#path-1" fill="black"></use>
- </mask>
- </defs>
- <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="neutral-copy" stroke="#FFD429" stroke-width="6">
- <use id="Oval-2" mask="url(#mask-2)" xlink:href="#path-1"></use>
- </g>
- </g>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><svg width="19px" height="22px" viewBox="0 0 19 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Artboard Copy 2@2x</title> <defs> <circle id="path-1" cx="9.5" cy="12.5" r="6.5"/> <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-3" y="-3" width="19" height="19"> <rect x="0" y="3" width="19" height="19" fill="white"/> <use xlink:href="#path-1" fill="black"/> </mask> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Actions-Copy-3" transform="translate(-1666.000000, -35.000000)"/> <g id="Artboard-Copy-2" stroke="#FFD429" stroke-width="6"> <use id="Oval-2" mask="url(#mask-2)" xlink:href="#path-1"/> </g> </g></svg>
\ No newline at end of file
-<svg width="141px" height="3px" viewBox="0 0 141 3" xmlns="http://www.w3.org/2000/svg">
- <g fill="none" fill-rule="evenodd" stroke-linecap="round"><path d="m91.5 1528.5h138" transform="translate(-90-1527)" stroke="#ffd429" stroke-width="3"/></g>
-</svg>
+<svg width="141px" height="3px" viewBox="0 0 141 3" xmlns="http://www.w3.org/2000/svg"> <g fill="none" fill-rule="evenodd" stroke-linecap="round"><path d="m91.5 1528.5h138" transform="translate(-90-1527)" stroke="#ffd429" stroke-width="3"/></g></svg>
\ No newline at end of file