Skip to content

Commit b90ec65

Browse files
files from sminty
1 parent ce7a586 commit b90ec65

File tree

4 files changed

+251
-0
lines changed

4 files changed

+251
-0
lines changed

CSS/style.css

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
* {margin: 0; padding: 0; outline: 0;}
2+
3+
4+
body {
5+
font-family: Helvetica, Arial, Verdana, sans-serif;
6+
color: #e5e5e5;
7+
font-size: 12px;
8+
background:#bfbfbf;
9+
10+
11+
}
12+
13+
14+
h1, h2 {
15+
font-family: 'Open Sans', sans-serif;
16+
font-weight: 300;
17+
margin:0 0 15px 0;
18+
}
19+
20+
21+
h1 {
22+
font-size: 36px;
23+
letter-spacing: -1px;
24+
line-height: 100%;
25+
}
26+
27+
28+
h2 {
29+
font-size: 24px;
30+
}
31+
32+
33+
p {
34+
margin: 0 0 15px 0;
35+
}
36+
37+
a {
38+
color: #3e3e3e;
39+
}
40+
41+
42+
43+
.clear {
44+
clear: both;
45+
}
46+
.wrap {
47+
width: 100%;
48+
max-width: 1600px;
49+
min-width: 960px;
50+
z-index: 10;
51+
position: relative;
52+
margin: 0 auto;
53+
padding: 0;
54+
55+
}
56+
57+
58+
59+
.section {
60+
width: 100%;
61+
max-width: 1600px;
62+
min-width: 960px;
63+
z-index: 10;
64+
position: relative;
65+
margin: 0 auto;
66+
padding: 0 0 20px 0;
67+
height: 500px;
68+
}
69+
70+
71+
.inner {
72+
width: 960px;
73+
margin: 0 auto;
74+
position: relative;
75+
min-height: 50px;
76+
padding:30px 0;
77+
font-size: 18px;
78+
font-family: 'Open Sans', sans-serif;
79+
font-weight: 300;
80+
}
81+
82+
.inner:after {
83+
content: "";
84+
display: table;
85+
clear: both;
86+
}
87+
88+
89+
.subMenu {
90+
height: 50px;
91+
z-index: 1000;
92+
width: 100%;
93+
background: #0977bc;
94+
}
95+
96+
.subMenu .inner {
97+
padding:0;
98+
font-weight: 400;
99+
margin: 0 auto;
100+
}
101+
102+
103+
.subNavBtn {
104+
display: block;
105+
height: 35px;
106+
width: 10%;
107+
float: left;
108+
margin: 0px 0px 0 0;
109+
text-decoration: none;
110+
font-size: 14px;
111+
padding: 15px 2% 0 2%;
112+
text-align: center;
113+
114+
color: #fff;
115+
}
116+
.subMenu a:hover {
117+
background: #1783c7;
118+
}
119+
120+
.active {
121+
background: #25aae1;
122+
}
123+
.end {
124+
margin: 0;
125+
}
126+
127+
128+
129+
130+
/* SECTIONS */
131+
.sTop {
132+
min-height: 130px;
133+
background:#fff;
134+
color:#3d3d3d;
135+
padding: 50px 0;
136+
height: 300px;
137+
138+
}
139+
140+
.s1 {
141+
background:#184764;
142+
color:#fff;
143+
144+
}
145+
146+
147+
.s2 {
148+
background: #313131;
149+
}
150+
.s2 a {
151+
color: #fff;
152+
}
153+
154+
.s3 {
155+
background: #1b83b3;
156+
}
157+
158+
159+
.s4 {
160+
background: #5aa3c4;
161+
}
162+
163+
164+
165+
.s5 {
166+
background: #bce1f1;
167+
color: #3d3d3d;
168+
}
169+
170+
.s6 {
171+
background: #161616;
172+
}

index.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Lets Build a one page site with Javascript, Jquery, HTML and CSS!</title>
5+
<link href="css/style.css" rel="stylesheet" type="text/css">
6+
7+
</head>
8+
<body>
9+
<div class="wrap ">
10+
<div class="section sTop">
11+
<div class="inner">
12+
<h1 class="title">My amazing one page website </h1>
13+
<h2 class="subtitle">And it's all about mopeds!</h2>
14+
</div>
15+
</div>
16+
17+
<div class="subMenu" >
18+
<div class="inner">
19+
<a href="#sTop" class="subNavBtn">Home</a>
20+
<a href="#s1" class="subNavBtn">My Mopeds</a>
21+
<a href="#s2" class="subNavBtn">Why Mopeds?</a>
22+
<a href="#s3" class="subNavBtn">Try Mopeds!</a>
23+
<a href="#s4" class="subNavBtn">Spy Mopeds</a>
24+
<a href="#s5" class="subNavBtn">Buy Mopeds</a>
25+
<a href="https://twitter.com/grahammcbain" class="subNavBtn extLink end">Follow me on twitterk</a>
26+
</div>
27+
</div>
28+
29+
<div class="section s1">
30+
<div class="inner ">
31+
<h1>My Mopeds</h1>
32+
<ul>
33+
<li><a href="http://www.mopedarmy.com/img/gallery/picture_card_0711.jpg">Peugeot 102sp</a></li>
34+
<li><a href="http://www.mopedarmy.com/img/gallery/ped.jpg">Garelli Super Sport XL</a></li>
35+
<li><a href="http://www.mopedarmy.com/photos/brand/2/11295/">Puch Magnum</a></li>
36+
</ul>
37+
</div>
38+
</div>
39+
40+
<div class="section s2">
41+
<div class="inner">
42+
<h1>Why Mopeds?</h1>
43+
<h2>Because they are practical, maneuverable, and fun!
44+
<p><a href="https://mopedschool.files.wordpress.com/2014/06/tomos.jpg"><img style="heigh:100px;" src="https://mopedschool.files.wordpress.com/2014/06/tomos.jpg" title="Me in the glory days"/><p>
45+
46+
</div>
47+
</div>
48+
49+
50+
51+
<div class="section s3">
52+
<div class="inner">
53+
<h1>Try Mopeds!</h1>
54+
<h2>My wife Alissa tried mopeds and she loves them!</h2>
55+
<p><a href="http://imgur.com/AVmlW8k"><img src="http://i.imgur.com/AVmlW8k.jpg" title="source: imgur.com"/></p>
56+
</div>
57+
</div>
58+
59+
<div class="section s4">
60+
<div class="inner">
61+
<h1>Spy Mopeds!</h1>
62+
<a href="http://garage.1977mopeds.com/build/Puch+Maxi+2V">Checkout one of my favorite projects on garage!</a>
63+
</div>
64+
</div>
65+
66+
<div class="section s5">
67+
<div class="inner">
68+
<h1>Buy Mopeds</h1>
69+
<ul>
70+
<li><a href="http://www.boltmotorbikes.com/">Bolt Motorbikesp</a></li>
71+
<li><a href="http://www.1977mopeds.com/mopeds-22.html">1977 Mopeds!</a></li>
72+
<li><a href="http://fortcollins.craigslist.org/search/sso?query=moped">Craigslist</a></li>
73+
</ul>
74+
</div>
75+
</div>
76+
</div>
77+
78+
</body>
79+
</html>

public/jshelpers.js

Whitespace-only changes.

public/style.css

Whitespace-only changes.

0 commit comments

Comments
 (0)