Skip to content

Commit 77cd96c

Browse files
buckyrobertsbuckyroberts
committed
Foundation
1 parent 15b3204 commit 77cd96c

File tree

3 files changed

+64
-88
lines changed

3 files changed

+64
-88
lines changed

‎Bootstrap/landing/index.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
<!-- Custom CSS -->
1212
<link href="landing.css" rel="stylesheet">
1313
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
14+
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
15+
<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
1416
</head>
1517
<body>
1618

@@ -46,12 +48,12 @@
4648

4749

4850
<!-- Banner header section -->
49-
<div class="intro-header">
51+
<div class="intro-banner">
5052
<div class="container">
5153
<div class="row">
5254

5355
<div class="col-lg-12">
54-
<div class="intro-message">
56+
<div class="intro-inner">
5557
<h1>Welcome to thenewboston</h1>
5658
<h3>Social Network for Programmers</h3>
5759
<hr class="intro-divider">
@@ -60,21 +62,21 @@ <h3>Social Network for Programmers</h3>
6062
<li>
6163
<a href="#" class="btn btn-default btn-lg">
6264
<i class="fa fa-comment fa-fw"></i>
63-
<span class="network-name">Forum</span>
65+
<span class="button-title">Forum</span>
6466
</a>
6567
</li>
6668

6769
<li>
6870
<a href="#" class="btn btn-default btn-lg">
6971
<i class="fa fa-user fa-fw"></i>
70-
<span class="network-name">Profile</span>
72+
<span class="button-title">Profile</span>
7173
</a>
7274
</li>
7375

7476
<li>
7577
<a href="#" class="btn btn-default btn-lg">
7678
<i class="fa fa-youtube-play fa-fw"></i>
77-
<span class="network-name">Videos</span>
79+
<span class="button-title">Videos</span>
7880
</a>
7981
</li>
8082

‎Bootstrap/landing/landing.css

Lines changed: 29 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -11,56 +11,58 @@ h3,
1111
h4,
1212
h5,
1313
h6 {
14-
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
15-
font-weight: 700;
14+
font-family: 'Droid Sans', sans-serif;
15+
font-weight: bold;
1616
}
1717

1818
.topnav {
1919
font-size: 14px;
2020
}
2121

22-
.lead {
23-
font-size: 18px;
24-
font-weight: 400;
25-
}
26-
27-
.intro-header {
28-
padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
22+
/* Have padding top so banner image doesn't overlap top nav */
23+
.intro-banner {
24+
padding-top: 50px;
2925
padding-bottom: 50px;
3026
text-align: center;
31-
color: #f8f8f8;
27+
color: #f2f2f2;
3228
background: url("wood.jpg") no-repeat center center;
3329
background-size: cover;
3430
}
3531

36-
.intro-message {
32+
.intro-inner {
3733
position: relative;
3834
padding-top: 20%;
3935
padding-bottom: 20%;
4036
}
4137

42-
.intro-message > h1 {
38+
.intro-inner > h1 {
4339
margin: 0;
4440
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
4541
font-size: 5em;
4642
}
4743

4844
.intro-divider {
4945
width: 400px;
50-
border-top: 1px solid #f8f8f8;
46+
border-top: 1px solid #f2f2f2;
5147
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
5248
}
5349

54-
.intro-message > h3 {
50+
.intro-inner > h3 {
5551
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
5652
}
5753

54+
/* Special paragraphs that stand out */
55+
.lead {
56+
font-size: 20px;
57+
}
58+
59+
/* For smaller devices */
5860
@media (max-width: 767px) {
59-
.intro-message {
61+
.intro-inner {
6062
padding-bottom: 15%;
6163
}
6264

63-
.intro-message > h1 {
65+
.intro-inner > h1 {
6466
font-size: 3em;
6567
}
6668

@@ -79,86 +81,30 @@ h6 {
7981
}
8082
}
8183

82-
.network-name {
83-
text-transform: uppercase;
84-
font-size: 14px;
85-
font-weight: 400;
86-
letter-spacing: 2px;
84+
.button-title {
85+
font-family: 'Architects Daughter', cursive;
86+
font-size: 18px;
8787
}
8888

8989
.content-section-a {
9090
padding: 50px 0;
91-
background-color: #f8f8f8;
91+
background-color: #f2f2f2;
9292
}
9393

9494
.content-section-b {
9595
padding: 50px 0;
96-
border-top: 1px solid #e7e7e7;
97-
border-bottom: 1px solid #e7e7e7;
98-
}
99-
100-
.section-heading {
101-
margin-bottom: 30px;
96+
border-top: 1px solid #e3e3e3;
97+
border-bottom: 1px solid #e3e3e3;
10298
}
10399

100+
/* hr */
104101
.section-heading-spacer {
105102
float: left;
106103
width: 200px;
107-
border-top: 3px solid #e7e7e7;
108-
}
109-
110-
.banner {
111-
padding: 100px 0;
112-
color: #f8f8f8;
113-
background: url("https://snap-photos.s3.amazonaws.com/img-thumbs/960w/VV0697QWMS.jpg") no-repeat center center;
114-
background-size: cover;
115-
}
116-
117-
.banner h2 {
118-
margin: 0;
119-
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
120-
font-size: 3em;
121-
}
122-
123-
.banner ul {
124-
margin-bottom: 0;
104+
border-top: 3px solid #e3e3e3;
125105
}
126106

127-
.banner-social-buttons {
128-
float: right;
129-
margin-top: 0;
130-
}
131-
132-
@media (max-width: 1199px) {
133-
ul.banner-social-buttons {
134-
float: left;
135-
margin-top: 15px;
136-
}
137-
}
138-
139-
@media (max-width: 767px) {
140-
.banner h2 {
141-
margin: 0;
142-
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
143-
font-size: 3em;
144-
}
145-
146-
ul.banner-social-buttons > li {
147-
display: block;
148-
margin-bottom: 20px;
149-
padding: 0;
150-
}
151-
152-
ul.banner-social-buttons > li:last-child {
153-
margin-bottom: 0;
154-
}
155-
}
156-
157-
footer {
158-
padding: 50px 0;
159-
background-color: #f8f8f8;
107+
/* Little paragraph snippet sections */
108+
.section-heading {
109+
margin-bottom: 30px;
160110
}
161-
162-
p.copyright {
163-
margin: 15px 0 0;
164-
}

‎Foundation/001_template.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<!--[if IE 9]>
3+
<html class="lt-ie10" lang="en" >
4+
<![endif]-->
5+
<html class="no-js" lang="en" >
6+
<head>
7+
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
10+
<title>thenewboston</title>
11+
12+
<!-- normalize.css and modernizr.js help with browser compatibility -->
13+
<link rel="stylesheet" href="css/normalize.css">
14+
<link rel="stylesheet" href="css/foundation.css">
15+
<script src="js/vendor/modernizr.js"></script>
16+
</head>
17+
<body>
18+
19+
20+
21+
<!-- include before </body> tag -->
22+
<script src="js/vendor/jquery.js"></script>
23+
<script src="js/foundation.min.js"></script>
24+
<script>
25+
$(document).foundation();
26+
</script>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)