-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (122 loc) · 5.54 KB
/
index.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Barbara Donnini</title>
<!-- attach CSS styles -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Indie+Flower|Poiret+One|Pacifico|Quicksand|Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Tangerine|La+Belle+Aurore|Dancing+Script|Qwigley' rel='stylesheet' type='text/css'>
<link rel="icon"
type="image/png"
href="images/flower-icon.png">
</head>
<body>
<div id="topofpage"></div>
<!-- BODY PAGE CONTENT -->
<!-- FIRST SECTION -->
<div id="home" class="home">
<!-- Signature -->
<div class="hidden-sm hidden-xs">
<div style="position:absolute; top: 5px; left: 5px;">
<img src="images/signature-white.png" style="padding-left:15px; z-index:99">
</div>
</div>
<div class="hidden-lg hidden-md">
<div style="position:absolute; top: 5px; left: 5px;">
<img src="images/signature-white.png" class="img-responsive" style="padding-left:15px; z-index:3">
</div>
</div>
<div class="text-vcenter container">
<h1 style="font-size:28pt">This Website</h1>
<br><br>
<h2 style="color: #C6DEFF; text-shadow: 2px 2px 8px #FFF;">My portfolio of sites that display my web development skills. </h2>
<div id="divider"> </div>
<h3 style="color:white">This is a simple site that I custom-coded using the Bootstrap framework. It's completely repsonsive and has a parallax effect. I am a coder not an artist - this site is for demonstrating coding skills. I did not have influence on the design of the other sites. </h3>
</div>
</div>
<!-- second section - About -->
<div id="about" class="pad-section">
<div class="row hideme">
<div class="container vcenter" style="text-align:center; ">
<h3 style="color:white;">I've been working on remote teams for the past several years and have experience using Slack, Asana, and Trello. I'm an excellent communicator.</h3>
</div>
</div>
</div>
<!-- height: 300px; -->
<!-- /second section -->
<!-- third section - Services -->
<div id="services">
<div class="row container text-vcenter">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="text-align:center; ">
<h1 style="font-size: 28pt">Sweet Fields</h1>
<h2>An organic farm and sustainabiltiy center serving the suburbs of Philadelphia. </h2>
<div id="divider"> </div>
<h3 style="color: white">I made a custom responsive WordPress theme from scratch, as well as a custom plugin from scratch to personalize the login process for this site. I also customized the code for the plugin CiviCRM, which is used to manage contacts, accept donations, and track event registrations. </h3>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="text-align:center; ">
<a href="http://www.sweetfields.org" target="_blank"><img class=" img-responsive" style="text-align:center" src="images/sf.png" ></a>
<!--margin-top: 50px -->
</div>
</div>
</div>
<!-- /third section -->
<!-- fourth section - Information -->
<div id="information" class="pad-section">
<div class="row hideme">
<div class="container vcenter" style="text-align:center;">
<h3 style="color:white;">I use Gimp daily and know how to use Photoshop. I'm used to receiving Photoshop files from a designer to re-create on the web with pixel perfection. I've also been dabbling with Ruby on Rails and AngularJS. Examples of these to come soon. </h3>
</div>
</div>
</div>
<!-- height: 300px-->
<!-- /fourth section -->
<div id="pats">
<div class="row container text-vcenter">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="text-align:center; ">
<h1 style="font-size: 28pt">Pat's Hair Styling</h1>
<br><br>
<h2>The best cuts from an Italian barber with over 40 years of experience.</h2>
<h3 style="color: black">This is a simple site that I custom-coded using the Bootstrap framework. It's completely repsonsive. </h3>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="text-align:center; ">
<a href="http://www.patshairstyling.com" target="_blank"><img class=" img-responsive" style="text-align:center" src="images/pats.png" ></a>
<!--margin-top: 50px-->
</div>
</div>
</div>
<!-- large footer -->
<div class="row" style="background-color: #e3c77b;">
<div class="col-lg-4 col-md-4 hidden-sm hidden-xs" style="text-align:left; ">
<!---->
<p style="padding-left: 15px"> © Barbara Donnini, 2016</p>
</div>
<div class="col-lg-4 col-md-4 hidden-sm hidden-xs" style="text-align:center; ">
<div style="text-align:center">
<div onclick="scrollTo()" style="text-decoration:underline;">Back to Top</div>
</div>
</div>
<div class="col-lg-4 col-md-4 hidden-sm hidden-xs" style="text-align:right;">
<p style= "padding-right: 15px"> Images are original or from unsplash.com</p>
</div>
</div>
<!-- Small Footer -->
<div class="row" style="background-color: #e3c77b; text-align:center;">
<div class="hidden-lg hidden-md col-sm-12 col-xs-12">
<p> © Barbara Donnini, 2016</p>
</div>
<div class="hidden-lg hidden-md col-sm-12 col-xs-12">
<div onclick="scrollTo()" style="text-decoration:underline;">Back to Top</div>
</div>
<div class="hidden-lg hidden-md col-sm-12 col-xs-12">
<p> Images are original or from unsplash.com</p>
</div>
</div>
<!-- attach JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>