Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/fortheweb-widget.html

Created November 6, 2018 00:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/0fd1249f097b1b84f016aaaccc8005ce to your computer and use it in GitHub Desktop.
Save nfreear/0fd1249f097b1b84f016aaaccc8005ce to your computer and use it in GitHub Desktop.
Download ZIP
We need a better web. #ForTheWeb is a global campaign of people like you, uniting as one voice .. NOT official! .. https://fortheweb.webfoundation.org
Raw
fortheweb-widget.html
<!doctype html>
<style>
.fortheweb-wrapper {
background: #000 url(https://webfoundation.org/docs/2018/11/Untitled-design-8.png) right -20px no-repeat;
color: #fff;
font: 1.2rem "Open Sans", Helvetica, Arial, sans-serif;
x-font-size: 16px;
line-height: 1.42857143;
min-height: 350px;
min-width: 640px;
x-min-width: 750px;
padding: .1rem 3rem;
text-align: left;
}
.fortheweb-wrapper a {
color: #fff;
}
.fortheweb-wrapper > div {
x-background: #000;
border-radius: 5px;
x-opacity: .7;
padding: 8px;
width: 55%;
}
.fortheweb-wrapper h2 {
font-size: 3.2em;
font-weight: 600;
line-height: 1.1;
margin: 1rem 0;
}
.fortheweb-wrapper .btn {
color: #333;
text-decoration: none;
background-color: #EFEFEF;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.XX-h-claim {
position: absolute;
width: 55%;
left: 15px;
bottom: auto;
}
</style>
<div class="fortheweb-wrapper">
<div class="h-block h-claim c-contrast highlighted">
<h2 class="h-claim-title">#ForTheWeb</h2>
<p style="text-align: left;">
The free and open web faces real challenges.
More than half the world’s population still can’t get online.
For the other half, the web’s benefits come with too many risks:
to our privacy, our democracy, our rights.
</p>
<p style="text-align: left;">
Join us to build a better web.
</p>
<p class="btn-find-out">
<a
href="https://fortheweb.webfoundation.org/principles-1"
data-href="https://webfoundation.org/fortheweb"
class="btn btn-default c-dark"
>Find Out More</a>
</p>
</div>
</div>
<pre>
NDF / 06-Nov-2018.
* https://webfoundation.org/
* https://fortheweb.webfoundation.org/
* https://fortheweb.webfoundation.org/principles-1
* https://webfoundation.org/about/terms-of-use/
* https://creativecommons.org/licenses/by/4.0/
NOTE :- This is NOT an official widget!
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment