Commit 3f43ad33 authored by Carson Greene's avatar Carson Greene

Release commit

Add header image + download buttons Add backgroud for large pages Add footer with copyright. links to source code, and social media pages
parent 8268e710
Pipeline #55 skipped
* {
margin: 0;
font-family: sans-serif;
font-family: arial;
}
body {
background-color: #eeeeee;
background-image: url(../img/bkgnd.png);
min-width: 410px;
height: 100%;
}
#appicon {
float:left;
padding: 10 20;
float: left;
height: 100%;
padding-right: 20;
}
h1 {
padding: 20 0 0 0;
font-size: 50;
font-size: 40;
font-weight: lighter;
color: #444444
color: #444444;
}
h2 {
color: #999999;
font-size: 15;
font-weight: lighter;
}
#header {
padding: 20;
height: 75;
}
header {
padding-bottom: 20;
background-color: white;
}
#shadow {
background: linear-gradient(#aaaaaa, rgba(0,0,0,0));
height:20;
#top-shadow-container {
height: 0;
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;
overflow: visible;
position: absolute;
bottom: 10;
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%;
overflow: hidden;
position: relative;
left: 0;
top: 0;
align-content: center;
}
#header-image {
width: 100%;
postition: relative;
top: 0;
left: 0;
}
#staff-container {
height: 100%;
width: calc(100% - 300px);
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
}
#staff {
postition: absolute;
height: 100%;
top: 0px;
right: 0px;
}
#download-badges {
height: 100%;
}
#gplay-badge {
position: absolute;
top: 15px;
right: 10px;
height: calc(50% - 20px);
}
#app-store-badge {
position: absolute;
bottom: 15px;
right: 10px;
height: calc(50% - 20px);
}
#mainbody {
color: #222222;
padding: 0 20;
color: #555555;
height: calc(100% - 410px);
padding: 20px;
max-width: 750px;
margin: auto;
line-height: normal;
background-color: white;
}
h2 {
padding-bottom: 5;
#copyright {
margin-left: auto;
margin-right: auto;
padding: 10;
text-align: center;
}
.column {
width: 25%;
float: left;
padding-bottom: 10px;
}
footer {
background-color: #dddddd;
color: #888888;
padding: 15px;
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 5 15;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
......
This diff is collapsed.
......@@ -4,25 +4,62 @@
</head>
<body>
<header>
<a href="index.html">
<img id="appicon" src="img/scales.png" height="75"></img>
</a>
<h1>Scales</h1>
<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="shadow"></div>
<div id="mainbody">
<h2>What is Scales?</h2>
<p>Scales 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>
<div id="header-image-container">
<div id="top-shadow-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">
<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>
</footer>
</body>
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