Skip to content

Instantly share code, notes, and snippets.

@raymak23

raymak23/index.html

Created July 23, 2018 00:22
Show Gist options
  • Save raymak23/bb134be6467a8e6370a0ca513fce20ab to your computer and use it in GitHub Desktop.
Save raymak23/bb134be6467a8e6370a0ca513fce20ab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Cormorant+Garamond:300,300i, 400,400i, 500, 500i, 600, 600i, 700, 700i" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<a href="#" class="header-brand">Currency Exchange</a>
<nav>
<ul>
<li><a href="#">Purchase</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" class="header-cases">Support</a>
</nav>
</header>
<main>
<section class="index-banner">
<div class="vertical-center">
<h2>Currency<br> Tracking System</h2>
<h1>Select a Currency Pair and Target Rate</h1>
</div>
</section>
<!--To start banner AFTER the image -->
<div class="wrapper">
<section class="index-links">
<table>
<tr>
<td><input id="target.price" type="text"></td>
<td>
<select id="currency.pair.1">
<option value="currency1">USD</option>
<option value="currency1">EURO</option>
<option value="currency1">YEN</option>
<option value="currency1">PESO</option>
<option value="currency1">USD</option>
<option value="currency1">EURO</option>
<option value="currency1">YEN</option>
<option value="currency1">PESO</option>
</select>
</td>
<td><input type="text"></td>
<td>
<select id="currency.pair.2">
<option value="currency1">USD</option>
<option value="currency1">EURO</option>
<option value="currency1">YEN</option>
<option value="currency1">PESO</option>
<option value="currency1">USD</option>
<option value="currency1">EURO</option>
<option value="currency1">YEN</option>
<option value="currency1">PESO</option>
</select>
</td>
</tr>
</table>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul class="footer-links-main">
<li><a href="#">Currency</a></li>
<li><a href="#">Exchange Rates</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Markets</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="footer-sm">
</div>
</footer>
</div>
</body>
</html>
Raw
script.js
console.log("Initializing script");
function getRates(url) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", url, false ); // false for synchronous request
xmlHttp.send( null );
return xmlHttp.responseText;
}
var request = getRates("https://rates.fxcm.com/RatesXML");
console.log(request);
Raw
style.css
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
/*
WEBSITE CODE
*/
* {
text-decoration: none;
}
main {
padding-top: 100px;
}
header {
/*BANNER FIXED*/
position: fixed;
top: 0;
right: 0;
left: 0;
/**/
background-color: #fff;
width: 100%;
height: 100px;
}
header .header-brand {
font-family: Catamaran;
font-size: 24px;
font-weight: 900;
color: #111;
text-transform: uppercase;
display: block;
margin: 0 auto;
text-align: center;
padding: 20px 0;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
header nav ul li a {
font-family: Catamaran;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
header .header-cases {
display: none;
}
@media only screen and (min-width: 1000px) {
header .header-brand {
margin: 31px 0;
text-align: left;
padding: 0 20px 0 40px;
border-right: 3px solid #111;
float: left;
/*push down logo*/
line-height: 38px;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
/*Push down menu*/
line-height: 60px;
}
header .header-cases {
display: block;
font-family: Catamaran;
font-size: 16px;
color: #111;
text-transform: uppercase;
line-height: 38px;
border: 1px solid #111;
/*Keeps Caes border box on right side*/
float: right;
margin-right: 40px;
margin-top: 30px;
padding: 0px 20px;
}
}
/*INDEX*/
.index-banner {
width: 100%;
/*VIEW HEIGHT*/
height: calc(100vh - 100px);
background-image: url('money.jpg');
background-repeat: no-repeat;
background-position: center;
/*Always fit in containre*/
background-size: cover;
/*Helped center text in image*/
display: table;
}
.vertical-center {
/*Center texting top image*/
display: table-cell;
vertical-align: middle;
}
.index-banner h2 {
font-family: Catamaran;
font-size: 60px;
font-weight: 900;
/*Spacing*/
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px #111;
/*Add Blurr*/
}
.index-banner h1 {
font-family: Cormorant Garamond;
font-size: 28px;
font-weight: 100;
font-style: italic;
/*Spacing*/
line-height: 40px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px #111;
/*Add Blurr*/
}
.index-links {
background-color: #f2f2f2;
margin-top: 20px;
}
.index-links div {
/*Space between buttons*/
margin: 16px 16px 0;
/*changes calc*/
width: calc(100% - 32px);
height: 100px;
/*background-color: #f2f2f2;*/
background-color: rgb(122, 163, 223);
}
.index-links div h3 {
font-family: Catamaran;
font-size: 28px;
font-weight: 600;
/*Spacing*/
line-height: 100px;
color: #111;
text-align: center;
text-transform: uppercase;
}
.index-links table {
margin: 70px 20px 70px 300px;
}
.index-links table td {
padding: 5px;
font-family: Catamaran;
font-weight: bold;
}
@media only screen and (min-width: 1000px) {
.wrapper {
width: 1000px;
margin: 0 auto;
}
.index-banner {
height: 450px;
}
.index-banner h1 {
display: block;
width: 560px;
margin: 0 auto;
}
.index-links {
/*Maintaing gap betw' squares and footer*/
overflow: hidden;
}
.index-links div {
/*Space between buttons*/
/*changed from 10px to 20px*/
margin: 20px 10px 0;
/*230 Added Height for menu*/
height: 430px;
background-color: #f2f2f2;
/*Keeps all squares and rectangles next to ea. other*/
float: left;
}
.index-links div h3 {
line-height: 230px;
}
}
/*FOOTER*/
footer {
width: calc(100% - 80px);
padding: 40px 40px;
background-color: #111;
margin-top: 20px;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family: Catamaran;
font-size: 16px;
color: #fff;
line-height: 40px;
}
.footer-links-cases {
display: none;
}
.footer-sm {
width: 50px;
float: right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
}
@media only screen and (min-width: 1000px) {
.footer-links-cases {
display: block;
}
footer ul {
/*Padding for footer cases*/
padding-left: 30px;
}
footer ul li p {
font-family: Catamaran;
font-size: 16px;
color: #fff;
line-height: 40px;
text-transform: uppercase;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment