Add Bitcoin

gh-pages
Florens Douwes 11 years ago
parent 4d89706e0e
commit 6cb00df9d7
  1. 116
      assets/main.css
  2. 80
      index.html

@ -69,55 +69,51 @@ a:hover {
position: relative; position: relative;
width: 100%; width: 100%;
z-index: 5; z-index: 5;
margin-top: 460px; margin: 460px 0 0 0;
left: 0;
background: #fff; background: #fff;
min-height: 460px;
} }
.floating { .container {
width: 800px; max-width: 900px;
height: 400px;
margin: 0 auto; margin: 0 auto;
} }
.features { .box {
font-size: 20px; min-width: 300px;
line-height: 50px;
}
.left {
margin: 40px 0 0 0;
float: left; float: left;
} }
.right { .float-right {
margin: 40px 0 0 0;
float: right; float: right;
} }
.features {
margin: 50px 0 0 0;
font-size: 20px;
line-height: 50px;
}
.features span { .features span {
width: 30px; width: 30px;
} }
.features.right {
min-width: 220px;
padding-left: 50px;
}
.screenshots { .screenshots {
position: relative; position: relative;
top: -100px; top: -100px;
margin: 0 auto; height: 400px;
width: 300px;
height: 500px;
} }
#slideshow { #slideshow {
position: relative; position: relative;
} }
#screenshots { .clear {
position: relative; clear: both;
top: -100px;
margin: 0 auto;
width: 300px;
height: 500px;
} }
.phone { .phone {
@ -126,10 +122,15 @@ a:hover {
width: 300px; width: 300px;
} }
.bitcoin {
font-size: 12px;
padding: 6px 0;
}
.footer { .footer {
margin: 50px 0 0 0;
text-align: center; text-align: center;
height: 30px; height: 140px;
margin: 50px auto 100px auto;
background: #fff; background: #fff;
} }
@ -141,68 +142,27 @@ a:hover {
color: #777; color: #777;
} }
/* Mobile Devices (Tablets) */ @media (max-width: 899px) {
@media all and (max-width: 950px) and (min-width: 550px){ .box {
.wrapper {
height: 800px;
}
.floating {
width: 100%;
}
.features {
height: 420px; /* blaze it */
width: 100%; width: 100%;
} }
.right { .screenshots {
float: right; top: 0;
margin-right: 0; height: 450px;
text-align: center;
width: 49%;
}
.left {
float: left;
text-align: center;
width: 49%;
}
.footer {
padding-top: 400px;
}
}
/* Mobile Devices (Phones) */
@media all and (max-width: 549px) {
.wrapper {
height: 800px;
}
.floating {
width: 100%;
} }
.features { .features {
height: 800px;
width: 100%;
}
.right {
float: right;
margin-right: 0;
text-align: center; text-align: center;
width: 100%;
} }
.left { #slideshow {
float: left; width: 300px;
text-align: center; margin: 0 auto;
width: 100%;
} }
.footer { .features.right {
padding-top: 800px; min-width: 300px;
padding-left: 0;
} }
} }

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<title>Clover - 4chan browser</title> <title>Clover - 4chan browser</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
@ -15,7 +16,7 @@
</div> </div>
<div class="header"> <div class="header">
<p> <p>
THE NEW 4CHAN ANDROID BROWSER<br>POST FROM TOILET. HEH. The new 4chan Android browser<br>Post from toilet. Heh.
<div class="dllinks"> <div class="dllinks">
<div class="top">download now</div> <div class="top">download now</div>
<a href="https://play.google.com/store/apps/details?id=org.floens.chan">Play Store</a> | <a href="#" onclick="alert('Coming soon!');">F-Droid</a> | <a href="https://github.com/Floens/Clover/releases/download/v1.0/Clover_v1.0.apk">APK</a> <a href="https://play.google.com/store/apps/details?id=org.floens.chan">Play Store</a> | <a href="#" onclick="alert('Coming soon!');">F-Droid</a> | <a href="https://github.com/Floens/Clover/releases/download/v1.0/Clover_v1.0.apk">APK</a>
@ -23,52 +24,53 @@
</p> </p>
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div class="floating"> <div class="container">
<div class="features"> <div class="box features">
<div class="left"> <span class="fa fa-code-fork"></span>Open Source
<span class="fa fa-code-fork"></span>Open Source <br>
<br> <span class="fa fa-envelope-o"></span>New post notifications
<span class="fa fa-envelope-o"></span>New post notifications <br>
<br> <span class="fa fa-camera-retro"></span>Smooth Image Viewer
<span class="fa fa-camera-retro"></span>Smooth Image Viewer <br>
<br> <span class="fa fa-refresh"></span>Auto thread reload
<span class="fa fa-refresh"></span>Auto thread reload <br>
<br> <span class="fa fa-lock"></span>HTTPS only
<span class="fa fa-lock"></span>HTTPS only <br>
<br> <span class="fa fa-comment-o"></span>Fast reply
<span class="fa fa-comment-o"></span>Fast reply
</div>
<div class="right">
<span class="fa fa-money"></span>Free
<br>
<span class="fa fa-chevron-right"></span>4chan pass support
<br>
<span class="fa fa-thumb-tack"></span>Pinned threads
<br>
<span class="fa fa-fast-forward"></span>Fast
<br>
<span class="fa fa-play"></span>WebM support
<br>
<span class="fa fa-pencil"></span>Themes (soon)
</div>
</div> </div>
<div class="screenshots"> <div class="box screenshots">
<div id="slideshow"> <div id="slideshow">
<img class="phone" id="phone1" src="assets/img/phone1.png"> <img class="phone" id="phone1" src="assets/img/phone1.png">
<img class="phone" id="phone2" src="assets/img/phone2.png"> <img class="phone" id="phone2" src="assets/img/phone2.png">
<img class="phone" id="phone3" src="assets/img/phone3.png"> <img class="phone" id="phone3" src="assets/img/phone3.png">
</div> </div>
</div> </div>
</div> <div class="box features right">
<div class="footer"> <span class="fa fa-money"></span>Free
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <br>
<input type="hidden" name="cmd" value="_s-xclick"> <span class="fa fa-chevron-right"></span>4chan pass support
<input type="hidden" name="hosted_button_id" value="45YW6N3QEHSV8"> <br>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <span class="fa fa-thumb-tack"></span>Pinned threads
<img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="1" height="1"> <br>
</form> <span class="fa fa-fast-forward"></span>Fast
<br>
<span class="fa fa-play"></span>WebM support
<br>
<span class="fa fa-pencil"></span>Themes (soon)
</div>
<div class="clear"></div>
<div class="footer">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="45YW6N3QEHSV8">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="1" height="1">
</form>
<div class="bitcoin">Bitcoin: 1N7VtcNh8L8u4tF9CJ38GjnPbmxM4Vixi6</div>
<a href="https://github.com/Floens/Clover">GitHub</a> | <a href="https://play.google.com/store/apps/details?id=org.floens.chan">Play Store</a> | <a href="#" onclick="alert('Coming soon!');">F-Droid</a> | <a href="https://github.com/Floens/Clover/releases/download/v1.0/Clover_v1.0.apk">APK</a> <a href="https://github.com/Floens/Clover">GitHub</a> | <a href="https://play.google.com/store/apps/details?id=org.floens.chan">Play Store</a> | <a href="#" onclick="alert('Coming soon!');">F-Droid</a> | <a href="https://github.com/Floens/Clover/releases/download/v1.0/Clover_v1.0.apk">APK</a>
</div>
</div> </div>
</div> </div>

Loading…
Cancel
Save