Commit 2708af41 authored by Carson Greene's avatar Carson Greene

Add reviews and device screenshots

Edit footer to include more things
parent ce98ac6d
......@@ -9,12 +9,6 @@ body {
height: 100%;
}
#appicon {
float: left;
height: 100%;
padding-right: 20;
}
h1 {
font-size: 40;
font-weight: lighter;
......@@ -27,44 +21,39 @@ h2 {
font-weight: lighter;
}
#header {
header {
background-color: white;
padding: 20;
height: 75;
height: 70;
}
header {
background-color: white;
#appicon {
float: left;
height: 100%;
padding-right: 20;
}
#top-shadow-container {
height: 0;
#top-shadow {
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#top-shadow {
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0,0,0,0));
height:10;
}
#bottom-shadow-container {
height: 0;
#bottom-shadow {
overflow: visible;
position: absolute;
bottom: 10;
bottom: 0;
left: 0;
width: 100%;
}
#bottom-shadow {
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
height:10;
}
#header-image-container {
height: 200;
width: 100%;
......@@ -118,24 +107,60 @@ header {
#mainbody {
color: #555555;
height: calc(100% - 410px);
padding: 20px;
height: auto;
padding: 0px;
max-width: 750px;
margin: auto;
background-color: white;
padding: 20px;
}
#copyright {
margin-left: auto;
margin-right: auto;
padding: 10;
.screenshot-div {
width: calc(50% - 3px);
padding: 20 0;
text-align: center;
display: inline-block;
}
.column {
width: 25%;
.screenshot {
width: 100%;
}
#reviews-header {
border-style: dotted none;
border-color: #aaaaaa;
border-width: 2px 0px;
text-align: center;
width: 100%;
display: inline-block;
margin-bottom: 20px;
}
.row {
margin-bottom: 20px;
overflow: auto;
width: 100%;
}
.review {
width: calc(33.33% - 22px);
text-align: center;
display: inline-block;
padding: 0 10px;
}
.review.left {
border-right: 1px solid #dddddd;
float: left;
padding-bottom: 10px;
}
.review.right {
border-left: 1px solid #dddddd;
float: right;
}
.review-header {
padding: 0 0;
}
footer {
......@@ -143,8 +168,25 @@ footer {
color: #888888;
padding: 15px;
overflow: hidden;
display: inline-block;
width: calc(100% - 30px);
}
#copyright {
margin-left: auto;
margin-right: auto;
padding: 10;
text-align: center;
}
.column {
width: 25%;
display: inline-block;
padding-bottom: 10px;
float: left;
}
ul {
list-style: none;
margin: 0;
......@@ -169,12 +211,15 @@ p {
line-height: 125%;
}
@media screen and (max-height:630px) {
#mainbody {
height: auto;
}
@media screen and (max-width:450px) {
.column {
width: 100%;
float: none;
}
.screenshot-div {
display: block;
width: 100%;
padding-bottom: 20px;
}
}
This diff is collapsed.
<head>
<title>Scales</title>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type"image/png" href="img/scales.png"></link>
</head>
<body>
<header>
<div id=header>
<a href="index.html">
<img id="appicon" src="img/scales.png" height="75"></img>
</a>
<h1>Scales</h1>
<h2>Jumpstart your practice routine</h2>
</div>
</header>
<div id="header-image-container">
<div id="top-shadow-container">
<!DOCTYPE html>
<html>
<head>
<title>Scales</title>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type"image/png" href="img/scales.png"></link>
</head>
<body>
<header>
<a href="index.html">
<img id="appicon" src=img/scales.png></img>
</a>
<span>
<h1>Scales</h1>
<h2>Jumpstart your practice routine</h2>
</span>
</header>
<div id="header-image-container">
<div id="top-shadow"></div>
</div>
<img id=header-image src=img/header-image.jpg>
<div id=staff-container>
<img id=staff src=img/staff.png>
</div>
<div id=download-badges>
<a href=https://s.greene.tech/ascales>
<img id=gplay-badge src=img/google-play-badge.png>
</a>
<a href=https://s.greene.tech/iscales>
<img id=app-store-badge src=img/app-store-badge.svg>
</a>
</div>
<div id="bottom-shadow-container">
<img id=header-image src=img/header-image.jpg>
<div id=staff-container>
<img id=staff src=img/staff.png>
</div>
<div id=download-badges>
<a href=https://s.greene.tech/ascales>
<img id=gplay-badge src=img/google-play-badge.png>
</a>
<a href=https://s.greene.tech/iscales>
<img id=app-store-badge src=img/app-store-badge.svg>
</a>
</div>
<div id="bottom-shadow"></div>
</div>
</div>
<div id="mainbody">
<h3>What is Scales?</h3>
<p>The Scales app is a great way to practice your scales. Many music teachers suggest
practicing random, and one of the best ways to do that is by shuffling
notecards.</p>
<p>However, that can be hard. Notecards must be all written out by hand,
and they're easily lost or damaged. The Scales app takes all of this out
of the equation.</p>
<p>Scales is a very simple app: it presents scales in a random order, remembering
what scales you've played, and all while allowing you to adjust what scales
are shown by type and number of sharps or flats. You can even disable
scales individually.</p>
</div>
<footer>
<p id=copyright>&#169;2016 Carson Greene</p>
<div class="column">
<b>Source Code</b>
<ul>
<li><a href="https://git.greene.tech/cgreene/scales-android">Android</a></li>
<li><a href="https://git.greene.tech/cgreene/scales-ios">iOS</a></li>
</ul>
</div>
<div class="column">
<b>Social Media</b>
<ul>
<li><a href="https://facebook.com/TheScalesApp">Facebook</a></li>
<li><a href="https://twitter.com/TheScalesApp">Twitter</a></li>
</ul>
<div id="mainbody">
<div class=text>
<h3>What is Scales?</h3>
<p>The Scales app is a great way to practice your scales. Many music teachers suggest
practicing random, and one of the best ways to do that is by shuffling
notecards.</p>
<p>However, that can be hard. Notecards must be all written out by hand,
and they're easily lost or damaged. The Scales app takes all of this out
of the equation.</p>
<p>Scales is a very simple app: it presents scales in a random order, remembering
what scales you've played, and all while allowing you to adjust what scales
are shown by type and number of sharps or flats. You can even disable
scales individually.</p>
</div>
<span id=screenshots>
<div class=screenshot-div>
<img class=screenshot src=img/android.png>
<i class=caption>On Android...</i>
</div>
<div class=screenshot-div>
<img class=screenshot src=img/ios.png>
<i class=caption>...or iOS</i>
</div>
</span>
<span id=reviews-header>
<h3>Reviews</h3>
</span>
<div class=row>
<div class="review left">
<div class=stars>&#9733;&#9733;&#9733;&#9733;&#9733;</div>
<h4 class=review-header>Wonderful app!</h4>
<i class=review-body>A very unique and creative way to practice!</i>
</div>
<div class="review">
<div class=stars>&#9733;&#9733;&#9733;&#9733;&#9733;</div>
<h4 class=review-header>Very simple and very useful app</h4>
<i class=review-body>...I guess this would seem kind of silly to a non-musician, but I actually use it all the time both at and away from the piano...</i>
</div>
<div class="review right">
<div class=stars>&#9733;&#9733;&#9733;&#9733;&#9733;</div>
<h4 class=review-header>Great app</h4>
<i class=review-body>This app is very user friendly and has great content for musicians!</i>
</div>
</div>
</div>
</footer>
</body>
<footer>
<p id=copyright>&#169;2016 Carson Greene</p>
<div class="column">
<b>Source Code</b>
<ul>
<li><a href="https://git.greene.tech/cgreene/scales-android">Android</a></li>
<li><a href="https://git.greene.tech/cgreene/scales-ios">iOS</a></li>
<li><a href="https://git.greene.tech/cgreene/scalesweb">Website</a></li>
</ul>
</div>
<div class="column">
<b>Social Media</b>
<ul>
<li><a href="https://facebook.com/TheScalesApp">Facebook</a></li>
<li><a href="https://twitter.com/TheScalesApp">Twitter</a></li>
</ul>
</div>
<div class="column">
<b>Developer Sites</b>
<ul>
<li><a href="https://greene.tech">Website</a></li>
<li><a href="https://blog.greene.tech">Blog</a></li>
</ul>
</div>
</footer>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment