-
Notifications
You must be signed in to change notification settings - Fork 0
/
newport.html
121 lines (116 loc) · 5.58 KB
/
newport.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Maitree|Suranna" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">R. Wilson</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="newport.html#About">About Me</a></li>
<li><a href="newport.html#Projects">Projects</a></li>
<li><a href="newport.html#Skills">Professional Skills</a></li>
<li><a href="newport.html#Contact">Contact Me</a></li>
</ul>
</div>
</nav>
<div id="About" class="container-fluid">
<img src="http://lorempixel.com/output/people-q-c-640-480-6.jpg">
<h1>About Me</h1>
<p>I'm a fairy princess that wants to make a beautiful website for you!
My focus is on helping small businesses and non-profits.</p>
</div>
<div id="Projects">
<!--Projects will be in a single row, split into 3 columns. Need to think about/design
specialty bullets for these three categories -->
<div style="max-width: 1200px; margin: 0 auto; padding: 10px;">
<div class= "container-fluid">
<h1> Here are some of my magical projects</h1>
<div class="row" style = "margin-top: 20px;">
<div class = "col-xs-12 col-sm-6 col-md-4" style= "margin-top: 20px;">
<img src="project1.jpg">
<h2>Project 1</h2>
<p>Aliquam laoreet lacinia libero, vitae sollicitudin dolor sodales at. Fusce id mi
euismod ex faucibus tempus a nec lacus. Proin eget tincidunt justo. Fusce ac enim sit
amet mi viverra sollicitudin. Ut nec posuere leo. Etiam vehicula ipsum a elit gravida
placerat. Proin accumsan metus et pulvinar congue. Donec varius mi vel elit ullamcorper,
eget efficitur urna eleifend. Donec vehicula dignissim ligula vitae laoreet. Duis dapibus
dictum maximus.</p>
</div>
<div class = "col-xs-12 col-sm-6 col-md-4" style= "margin-top: 20px;">
<img src="project1.jpg">
<h2>Project 2</h2>
<p>Aliquam laoreet lacinia libero, vitae sollicitudin dolor sodales at. Fusce id mi
euismod ex faucibus tempus a nec lacus. Proin eget tincidunt justo. Fusce ac enim sit
amet mi viverra sollicitudin. Ut nec posuere leo. Etiam vehicula ipsum a elit gravida
placerat. Proin accumsan metus et pulvinar congue. Donec varius mi vel elit ullamcorper,
eget efficitur urna eleifend. Donec vehicula dignissim ligula vitae laoreet. Duis dapibus
dictum maximus.</p>
</div>
<div class = "col-xs-12 col-sm-offset-3 col-sm-6 col-md-offset-0 col-md-4" style= "margin-top: 20px;">
<img src="project1.jpg">
<h2>Project 3</h2>
<p>Aliquam laoreet lacinia libero, vitae sollicitudin dolor sodales at. Fusce id mi
euismod ex faucibus tempus a nec lacus. Proin eget tincidunt justo. Fusce ac enim sit
amet mi viverra sollicitudin. Ut nec posuere leo. Etiam vehicula ipsum a elit gravida
placerat. Proin accumsan metus et pulvinar congue. Donec varius mi vel elit ullamcorper,
eget efficitur urna eleifend. Donec vehicula dignissim ligula vitae laoreet. Duis dapibus
dictum maximus.</p>
</div>
</div>
</div>
</div>
</div>
<div id="Skills">
<h1>Tech Skills</h1>
<ul>
<li>robots</li>
<li>encryption</li>
<li>email</li>
<li>clicking</li>
<li>right-clicking</li>
</ul>
<h1>Other Professional Skills</h1>
<ul>
<li>corporate training</li>
<li>curriculum design</li>
<li>multilingual: English, Spanish, German, Arabic</li>
<li>HIPAA and release of medical information</li>
<li>business administration</li>
</ul>
<h1>Personal Projects and Interests</h1>
<ul>
<li>ice cream</li>
<li>coffee</li>
<li>ice cream</li>
<li>coffee</li>
<li>ice cream</li>
</ul>
</div>
<div id="Contact" class="container-fluid">
<!--text should be centered and take up about 1/3 of the screen on a desktop.s
social media links will be in a single row. Email icon will be larger and one
row below the social media icons -->
<h1>Contact Me</h1>
<p>Find out more about my work and background, or simply reach out to me via email by using the links below.</p>
<div id="icons">
<a href="http://www.freecodecamp.com"><img class="img-circle" "img-responsive" src="fcclogo.png" title="FreeCodeCamp Profile"></a>
<a href="https://www.github.com"><img class="img-circle" "img-responsive" src="github-icon.png" title="Github Repos"></a>
<a href="http://www.linkedin.com"><img class="img-circle" "img-responsive" src="linkedin.jpg" alt="LinkedIn Profile"></a>
<a href="https://www.twitter.com"><img class="img-circle" "img-responsive" src="twitter-bird.jpg" alt="Twitter Profile"></a>
</div>
<div id="email">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-envelope"></span>
<a href="mailto:[email protected]" target="_blank">Email me!</a>
</button>
</div>
</div>
</body>
</html>