Skip to content

Commit 79de726

Browse files
billdevcodebilldevcode
committed
Make home page responsive and reuse CSS codes
1 parent 691ccd8 commit 79de726

File tree

2 files changed

+222
-247
lines changed

2 files changed

+222
-247
lines changed

‎index.html‎

Lines changed: 151 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,163 @@
11
<!DOCTYPE html>
2-
32
<html lang="en">
4-
5-
<head>
6-
<meta charset="utf-8">
7-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8-
<meta name="viewport" content="width=device-width, initial-scale=1">
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
10-
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
11-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
12-
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat">
13-
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
14-
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
15-
<link rel="stylesheet" href="stylesheets/stylesheet.css">
16-
</head>
17-
18-
<body>
19-
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
8+
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
10+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat">
11+
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
12+
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
13+
<link rel="stylesheet" href="stylesheets/stylesheet.css">
14+
</head>
15+
<body>
2016
<nav id="navbar" class="nav navbar-inverse navbar-fixed-top">
21-
<div class="container-fluid">
22-
<div class="navbar-header">
23-
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
24-
</button>
25-
</div>
26-
<div class="navbar-collapse collapse">
27-
<div class="navbar-form navbar-right nav">
28-
<a href="#home" class="btn btn-link btn-lg">Home</a>
29-
<a href="#portfolio" class="btn btn-link btn-lg">Portfolio</a>
30-
<a href="#contact" class="btn btn-link btn-lg">Contact</a>
17+
<div class="container-fluid">
18+
<div class="navbar-header">
19+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false" aria-controls="navbar">
20+
<i class="fa fa-bars" aria-hidden="true"></i>
21+
</button>
3122
</div>
32-
</div>
33-
</div>
23+
<div id="nav" class="navbar-collapse collapse">
24+
<div class="navbar-form navbar-right">
25+
<a href="#home" class="btn btn-link btn-lg">Home</a>
26+
<a href="#portfolio" class="btn btn-link btn-lg">Portfolio</a>
27+
<a href="#contact" class="btn btn-link btn-lg">Contact</a>
28+
</div>
29+
</div>
30+
</div>
3431
</nav>
35-
36-
<div class="home" id="home">
37-
<div class="jumbotron">
38-
<h1>Web Development Portfolio</h1>
39-
<p>Hey I'm Bill. Welcome to my web development portfolio.</p>
40-
</div>
32+
<div class="home container-fluid" id="home">
33+
<h1 class="home__title">Web Development Portfolio</h1>
34+
<p class="home__text">Hey I'm Bill. <br/> Welcome to my web development portfolio.</p>
4135
</div>
42-
4336
<div class="portfolio" id="portfolio">
44-
45-
<div class="container-fluid maps-locations">
46-
<div class="box textbox-maps">
47-
<h2>Google Places API</h2>
48-
<a href="https://billdevcode.github.io/projects/maps-locations/index.html" target="_blank" class="buttons" role="button">See it live <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
49-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/maps-locations" target="_blank" class="buttons right-button" role="button">See codes <i class="fa fa-code" aria-hidden="true"></i></a>
50-
</div>
51-
</div>
52-
53-
<div class="container-fluid zip-quote">
54-
<div class="box textbox-quote">
55-
<h2>Random Quote Machine</h2>
56-
<a href="https://billdevcode.github.io/projects/random-quotes/index.html" target="_blank" class="buttons" role="button">See it live <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
57-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/random-quotes" target="_blank" class="buttons right-button" role="button">See codes <i class="fa fa-code" aria-hidden="true"></i></a>
58-
</div>
59-
</div>
60-
61-
<div class="container-fluid zip-calculator">
62-
<div class="box textbox-calculator">
63-
<h2>JavaScript Calculator</h2>
64-
<a href="https://billdevcode.github.io/projects/javascript-calculator/index.html" target="_blank" class="buttons" role="button">See it live <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
65-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/javascript-calculator" target="_blank" class="buttons right-button" role="button">See codes <i class="fa fa-code" aria-hidden="true"></i></a>
66-
</div>
67-
</div>
68-
69-
<div class="container-fluid zip-clock">
70-
<div class="box textbox-clock">
71-
<h2>Pomodoro Clock</h2>
72-
<a href="https://billdevcode.github.io/projects/pomodoro-clock/index.html" target="_blank" class="buttons" role="button">See it live <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
73-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/pomodoro-clock" target="_blank" class="buttons right-button" role="button">See codes <i class="fa fa-code" aria-hidden="true"></i></a>
74-
</div>
75-
</div>
76-
77-
<div class="container-fluid zip-twitch">
78-
<div class="box textbox-twitch">
79-
<h2>Twitch.tv JSON API</h2>
80-
<a href="https://billdevcode.github.io/projects/twitchTV/index.html" target="_blank" class="buttons" role="button">See it live <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
81-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/twitchTV" target="_blank" class="buttons right-button" role="button">See codes <i class="fa fa-code" aria-hidden="true"></i></a>
82-
</div>
83-
</div>
84-
85-
<div class="container-fluid react-fcc-leaderboard">
86-
<div class="box textbox-fcc-leaderboard">
87-
<h2>Camper Leaderboard</h2>
88-
<a href="https://billdevcode.github.io/projects/fcc-leaderboard/index.html" target="_blank" class="buttons" role="button">See it live <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
89-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/fcc-leaderboard" target="_blank" class="buttons right-button" role="button">See codes <i class="fa fa-code" aria-hidden="true"></i></a>
90-
</div>
91-
</div>
92-
93-
<div class="container-fluid zip-wiki">
94-
<div class="box textbox-wiki">
95-
<h2>Wikipedia Viewer</h2>
96-
<a href="https://billdevcode.github.io/projects/wikipedia-viewer/index.html" target="_blank" class="buttons" role="button">See it live <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
97-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/wikipedia-viewer" target="_blank" class="buttons right-button" role="button">See codes <i class="fa fa-code" aria-hidden="true"></i></a>
98-
</div>
99-
</div>
100-
101-
<div class="container-fluid zip-tic-tac-toe">
102-
<div class="box textbox-tic-tac-toe">
103-
<h2>Tic-Tac-Toe Game</h2>
104-
<a href="https://billdevcode.github.io/projects/tic-tac-toe/index.html" target="_blank" class="buttons" role="button">See it live <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
105-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/tic-tac-toe" target="_blank" class="buttons right-button" role="button">See codes <i class="fa fa-code" aria-hidden="true"></i></a>
106-
</div>
107-
</div>
108-
109-
<div class="container-fluid zip-simon">
110-
<div class="box textbox-simon">
111-
<h2>Simon Game</h2>
112-
<a href="https://billdevcode.github.io/projects/simon-game/index.html" target="_blank" class="buttons" role="button">See it live <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
113-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/simon-game" target="_blank" class="buttons right-button" role="button">See codes <i class="fa fa-code" aria-hidden="true"></i></a>
114-
</div>
115-
</div>
37+
<div class="container-fluid maps-locations image-wrapper">
38+
<div class="text-box-right">
39+
<h2>Google Places API</h2>
40+
<span class="buttons-wrapper">
41+
<a href="https://billdevcode.github.io/projects/maps-locations/index.html" target="_blank" class="buttons" role="button">
42+
See it live <i class="fa fa-chevron-right" aria-hidden="true"></i>
43+
</a>
44+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/maps-locations" target="_blank" class="buttons" role="button">
45+
See codes <i class="fa fa-code" aria-hidden="true"></i>
46+
</a>
47+
</span>
48+
</div>
49+
</div>
50+
<div class="container-fluid zip-quote image-wrapper">
51+
<div class="text-box-left">
52+
<h2>Random Quote Machine</h2>
53+
<span class="buttons-wrapper">
54+
<a href="https://billdevcode.github.io/projects/random-quotes/index.html" target="_blank" class="buttons" role="button">
55+
See it live <i class="fa fa-chevron-right" aria-hidden="true"></i>
56+
</a>
57+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/random-quotes" target="_blank" class="buttons" role="button">
58+
See codes <i class="fa fa-code" aria-hidden="true"></i>
59+
</a>
60+
</span>
61+
</div>
62+
</div>
63+
<div class="container-fluid zip-calculator image-wrapper">
64+
<div class="text-box-right">
65+
<h2>JavaScript Calculator</h2>
66+
<span class="buttons-wrapper">
67+
<a href="https://billdevcode.github.io/projects/javascript-calculator/index.html" target="_blank" class="buttons" role="button">
68+
See it live <i class="fa fa-chevron-right" aria-hidden="true"></i>
69+
</a>
70+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/javascript-calculator" target="_blank" class="buttons" role="button">
71+
See codes <i class="fa fa-code" aria-hidden="true"></i>
72+
</a>
73+
</span>
74+
</div>
75+
</div>
76+
<div class="container-fluid zip-clock image-wrapper">
77+
<div class="text-box-left">
78+
<h2>Pomodoro Clock</h2>
79+
<span class="buttons-wrapper">
80+
<a href="https://billdevcode.github.io/projects/pomodoro-clock/index.html" target="_blank" class="buttons" role="button">
81+
See it live <i class="fa fa-chevron-right" aria-hidden="true"></i>
82+
</a>
83+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/pomodoro-clock" target="_blank" class="buttons" role="button">
84+
See codes <i class="fa fa-code" aria-hidden="true"></i>
85+
</a>
86+
</span>
87+
</div>
88+
</div>
89+
<div class="container-fluid zip-twitch image-wrapper">
90+
<div class="text-box-right">
91+
<h2>Twitch.tv JSON API</h2>
92+
<span class="buttons-wrapper">
93+
<a href="https://billdevcode.github.io/projects/twitchTV/index.html" target="_blank" class="buttons" role="button">
94+
See it live <i class="fa fa-chevron-right" aria-hidden="true"></i>
95+
</a>
96+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/twitchTV" target="_blank" class="buttons" role="button">
97+
See codes <i class="fa fa-code" aria-hidden="true"></i>
98+
</a>
99+
</span>
100+
</div>
101+
</div>
102+
<div class="container-fluid react-fcc-leaderboard image-wrapper">
103+
<div class="text-box-left">
104+
<h2>Camper Leaderboard</h2>
105+
<span class="buttons-wrapper">
106+
<a href="https://billdevcode.github.io/projects/fcc-leaderboard/index.html" target="_blank" class="buttons" role="button">
107+
See it live <i class="fa fa-chevron-right" aria-hidden="true"></i>
108+
</a>
109+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/fcc-leaderboard" target="_blank" class="buttons" role="button">
110+
See codes <i class="fa fa-code" aria-hidden="true"></i>
111+
</a>
112+
</span>
113+
</div>
114+
</div>
115+
<div class="container-fluid zip-wiki image-wrapper">
116+
<div class="text-box-right">
117+
<h2>Wikipedia Viewer</h2>
118+
<span class="buttons-wrapper">
119+
<a href="https://billdevcode.github.io/projects/wikipedia-viewer/index.html" target="_blank" class="buttons" role="button">
120+
See it live <i class="fa fa-chevron-right" aria-hidden="true"></i>
121+
</a>
122+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/wikipedia-viewer" target="_blank" class="buttons" role="button">
123+
See codes <i class="fa fa-code" aria-hidden="true"></i>
124+
</a>
125+
</span>
126+
</div>
127+
</div>
128+
<div class="container-fluid zip-tic-tac-toe image-wrapper">
129+
<div class="text-box-left">
130+
<h2>Tic-Tac-Toe Game</h2>
131+
<span class="buttons-wrapper">
132+
<a href="https://billdevcode.github.io/projects/tic-tac-toe/index.html" target="_blank" class="buttons" role="button">
133+
See it live <i class="fa fa-chevron-right" aria-hidden="true"></i>
134+
</a>
135+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/tic-tac-toe" target="_blank" class="buttons" role="button">
136+
See codes <i class="fa fa-code" aria-hidden="true"></i>
137+
</a>
138+
</span>
139+
</div>
140+
</div>
141+
<div class="container-fluid zip-simon image-wrapper">
142+
<div class="text-box-right">
143+
<h2>Simon Game</h2>
144+
<span class="buttons-wrapper">
145+
<a href="https://billdevcode.github.io/projects/simon-game/index.html" target="_blank" class="buttons" role="button">
146+
See it live <i class="fa fa-chevron-right" aria-hidden="true"></i>
147+
</a>
148+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/simon-game" target="_blank" class="buttons" role="button">
149+
See codes <i class="fa fa-code" aria-hidden="true"></i>
150+
</a>
151+
</span>
152+
</div>
153+
</div>
116154
</div>
117-
118155
<div id="contact" class="container-fluid">
119-
<h3>Contact me: <a href="mailto:[email protected]"><i class="fa fa-envelope"></i> [email protected]</a></h3>
120-
<a href="https://www.linkedin.com/in/billdevcode" target="_blank" alt="LinkedIn"><img src="imgs/linkedin-icon.png" width="50" height="50" class="img-circle"></a>
121-
<a href="https://github.com/billdevcode" target="_blank" alt="Github"><img src="imgs/github-icon.png" width="50" height="50" class="img-circle"></a>
156+
<h3>Contact me: <a href="mailto:[email protected]"><i class="fa fa-envelope"></i> [email protected]</a></h3>
157+
<a href="https://www.linkedin.com/in/billdevcode" target="_blank" alt="LinkedIn"><img src="imgs/linkedin-icon.png" width="50" height="50" class="img-circle"></a>
158+
<a href="https://github.com/billdevcode" target="_blank" alt="Github"><img src="imgs/github-icon.png" width="50" height="50" class="img-circle"></a>
122159
</div>
123160
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
124161
<script src="src/index.js"></script>
125-
</body>
126-
127-
</html>
162+
</body>
163+
</html>

0 commit comments

Comments
 (0)