Skip to content

Commit 27e76fe

Browse files
buckyrobertsbuckyroberts
committed
Working.
1 parent 8a81b8d commit 27e76fe

File tree

5 files changed

+424
-0
lines changed

5 files changed

+424
-0
lines changed

‎Bootstrap/landing/index.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
11+
<!-- Custom CSS -->
12+
<link href="landing.css" rel="stylesheet">
13+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
14+
</head>
15+
<body>
16+
17+
18+
19+
20+
<!-- This is code from the previous tutorial with the following changes -->
21+
22+
<!-- navbar-fixed-top topnav -->
23+
<nav class="navbar navbar-default navbar-fixed-top topnav">
24+
25+
<!-- topnav -->
26+
<div class="container topnav">
27+
28+
<!-- Logo -->
29+
<div class="navbar-header">
30+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
31+
<span class="icon-bar"></span>
32+
<span class="icon-bar"></span>
33+
<span class="icon-bar"></span>
34+
</button>
35+
<a href="#" class="navbar-brand">THENEWBOSTON</a>
36+
</div>
37+
38+
<!-- Menu Items -->
39+
<div class="collapse navbar-collapse" id="mainNavBar">
40+
<ul class="nav navbar-nav">
41+
<li class="active"><a href="#">Home</a></li>
42+
<li><a href="#">About</a></li>
43+
<li><a href="#">Contact</a></li>
44+
</ul>
45+
</div>
46+
47+
</div>
48+
</nav>
49+
50+
51+
<!-- Banner header section -->
52+
<div class="intro-header">
53+
<div class="container">
54+
<div class="row">
55+
56+
<div class="col-lg-12">
57+
<div class="intro-message">
58+
<h1>Welcome to thenewboston</h1>
59+
<h3>Social Network for Programmers</h3>
60+
<hr class="intro-divider">
61+
<ul class="list-inline intro-social-buttons">
62+
63+
<li>
64+
<a href="#" class="btn btn-default btn-lg">
65+
<i class="fa fa-comment fa-fw"></i>
66+
<span class="network-name">Forum</span>
67+
</a>
68+
</li>
69+
70+
<li>
71+
<a href="#" class="btn btn-default btn-lg">
72+
<i class="fa fa-user fa-fw"></i>
73+
<span class="network-name">Profile</span>
74+
</a>
75+
</li>
76+
77+
<li>
78+
<a href="#" class="btn btn-default btn-lg">
79+
<i class="fa fa-youtube-play fa-fw"></i>
80+
<span class="network-name">Videos</span>
81+
</a>
82+
</li>
83+
84+
</ul>
85+
</div>
86+
</div>
87+
88+
</div>
89+
</div>
90+
</div>
91+
92+
93+
<!-- Content row 1 -->
94+
<div class="content-section-a">
95+
<div class="container">
96+
<div class="row">
97+
98+
<div class="col-lg-5 col-sm-6">
99+
<hr class="section-heading-spacer">
100+
101+
<!-- clearfix makes it so elements are not side by side -->
102+
<div class="clearfix"></div>
103+
104+
<h2 class="section-heading">Write and Drink Tea with Sweaters</h2>
105+
<p class="lead">
106+
A special thanks to <a href="#">Death to the Stock Photo</a> for providing the photographs that
107+
you see in this template. Visit their website to become a member.
108+
</p>
109+
</div>
110+
111+
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
112+
<img class="img-responsive img-rounded" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/8Y0EDX4VP9.jpg">
113+
</div>
114+
115+
</div>
116+
</div>
117+
</div>
118+
119+
<!-- Content row 1 -->
120+
<div class="content-section-b">
121+
<div class="container">
122+
<div class="row">
123+
124+
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
125+
<hr class="section-heading-spacer">
126+
<div class="clearfix"></div>
127+
<h2 class="section-heading">This Girl is Hot</h2>
128+
129+
<p class="lead">
130+
A special thanks to <a href="#">Death to the Stock Photo</a> for providing the photographs that
131+
you see in this template. Visit their website to become a member.
132+
</p>
133+
</div>
134+
<div class="col-lg-5 col-sm-pull-6 col-sm-6">
135+
<img class="img-responsive img-rounded" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/EH83G44K4G.jpg">
136+
</div>
137+
</div>
138+
139+
</div>
140+
<!-- /.container -->
141+
142+
</div>
143+
<!-- /.content-section-b -->
144+
145+
</body>
146+
</html>

‎Bootstrap/landing/landing.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
body,
2+
html {
3+
width: 100%;
4+
height: 100%;
5+
}
6+
7+
body,
8+
h1,
9+
h2,
10+
h3,
11+
h4,
12+
h5,
13+
h6 {
14+
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
15+
font-weight: 700;
16+
}
17+
18+
.topnav {
19+
font-size: 14px;
20+
}
21+
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! */
29+
padding-bottom: 50px;
30+
text-align: center;
31+
color: #f8f8f8;
32+
background: url("wood.jpg") no-repeat center center;
33+
background-size: cover;
34+
}
35+
36+
.intro-message {
37+
position: relative;
38+
padding-top: 20%;
39+
padding-bottom: 20%;
40+
}
41+
42+
.intro-message > h1 {
43+
margin: 0;
44+
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
45+
font-size: 5em;
46+
}
47+
48+
.intro-divider {
49+
width: 400px;
50+
border-top: 1px solid #f8f8f8;
51+
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
52+
}
53+
54+
.intro-message > h3 {
55+
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
56+
}
57+
58+
@media (max-width: 767px) {
59+
.intro-message {
60+
padding-bottom: 15%;
61+
}
62+
63+
.intro-message > h1 {
64+
font-size: 3em;
65+
}
66+
67+
ul.intro-social-buttons > li {
68+
display: block;
69+
margin-bottom: 20px;
70+
padding: 0;
71+
}
72+
73+
ul.intro-social-buttons > li:last-child {
74+
margin-bottom: 0;
75+
}
76+
77+
.intro-divider {
78+
width: 100%;
79+
}
80+
}
81+
82+
.network-name {
83+
text-transform: uppercase;
84+
font-size: 14px;
85+
font-weight: 400;
86+
letter-spacing: 2px;
87+
}
88+
89+
.content-section-a {
90+
padding: 50px 0;
91+
background-color: #f8f8f8;
92+
}
93+
94+
.content-section-b {
95+
padding: 50px 0;
96+
border-top: 1px solid #e7e7e7;
97+
border-bottom: 1px solid #e7e7e7;
98+
}
99+
100+
.section-heading {
101+
margin-bottom: 30px;
102+
}
103+
104+
.section-heading-spacer {
105+
float: left;
106+
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;
125+
}
126+
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;
160+
}
161+
162+
p.copyright {
163+
margin: 15px 0 0;
164+
}

‎Bootstrap/landing/wood.jpg‎

5.33 MB
Loading

‎Bootstrap/testing/multipleColumns.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
<div class="container-fluid">
14+
15+
16+
<h3>Entire with on larger devices, 1/2 on small ones</h3>
17+
<div class="row">
18+
<div class="col-md-12 col-xs-6">
19+
<p>Curabitur tellus diam, pharetra quis libero sit amet, finibus suscipit diam. Etiam felis dui, fermentum in est congue, tempus efficitur enim. Donec vitae venenatis neque, vel commodo ipsum. Etiam quis tellus tortor. Morbi porttitor tempor mauris in facilisis. Aliquam eget sapien consequat, finibus lectus nec, pulvinar justo. Mauris in consectetur lacus, in luctus turpis. Aenean eget velit ipsum. Sed elit enim, ullamcorper ac orci ac, fringilla interdum est. Praesent nec nisi ultrices lorem ullamcorper congue. Vivamus sed gravida metus, ut auctor nisl. Aliquam sollicitudin fringilla justo id facilisis.</p>
20+
</div>
21+
</div>
22+
23+
24+
<h3>Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop</h3>
25+
<div class="row">
26+
<div class="row">
27+
<div class="col-md-4 col-xs-6" style="background-color: #7cafc2">1/3 desktop, 1/2 mobile</div>
28+
<div class="col-md-4 col-xs-6" style="background-color: #79ff83">1/3 desktop, 1/2 mobile</div>
29+
<div class="col-md-4 col-xs-6" style="background-color: #ab4642">1/3 desktop, 1/2 mobile</div>
30+
</div>
31+
</div>
32+
33+
34+
<h3>Offsetting Columns</h3>
35+
<div class="row">
36+
<div class="col-md-4" style="background-color: #7cafc2">4 wide</div>
37+
</div>
38+
<div class="row">
39+
<div class="col-md-4 col-md-offset-2" style="background-color: #ab4642">4 wide offset 2</div>
40+
</div>
41+
42+
43+
<h3>Offsetting Columns</h3>
44+
<div class="row">
45+
<div class="col-md-9" style="background-color: #8c8bc2; padding: 30px;">
46+
47+
I am the main parent
48+
49+
<!-- to nest, add a new row (don't exceed 12 columns) -->
50+
<div class="row">
51+
<div class="col-md-8" style="background-color: #93da6b">
52+
child 1
53+
</div>
54+
<div class="col-md-4" style="background-color: #c26f6a">
55+
child 2
56+
</div>
57+
</div>
58+
59+
</div>
60+
</div>
61+
62+
63+
</div>
64+
65+
</body>
66+
</html>

0 commit comments

Comments
 (0)