-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (129 loc) · 5.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stephanie</title>
<link rel="icon" href="img/slices/favicon@2x.png" type="image/png" sizes="16x12">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="bootstrap/3.3.5/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'></head>
<body>
<div class="container-fluid">
<div class="section-1 ">
<div class="row">
<div class="col-md-2">
</div><!-- /col-md-2 -->
<div class="col-md-8 col-sm-12">
<h1 class="wow fadeIn">Stephanie</h1>
<h2 class="wow fadeInUp">Front End Developer</h2>
<h4 class="wow fadeInUp">Bangalore, India</h4>
<div class="skill-sets">
<div class="col-md-7 col-xs-7">
<div class="col-md-4 col-xs-4 html">
<img src = "img/slices/HTML-logo Copy@2x.png"class="img-responsive wow slideInLeft">
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4 css">
<img src = "img/slices/CSS-logo Copy@2x.png"class="img-responsive wow slideInDown">
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4 js">
<img src = "img/slices/JS-logo Copy@2x.png"class="img-responsive wow slideInUp">
</div><!-- /.col-md-4 -->
<div class="col-md-12 col-xs-12 front-end">
<img src = "img/slices/front-end-icon copy@2x.png"class="img-responsive wow slideInLeft">
</div><!-- /.col-md-12 -->
</div><!-- /.col-md-7 -->
<div class="col-md-5 col-xs-4 no-padding">
<div class="col-md-12 col-xs-12 web-design no-padding">
<img src = "img/slices/web-design-icon @2x.png"class="img-responsive wow slideInRight">
</div><!-- /.col-md-12 web-design -->
<div class="col-md-6 col-xs-6 sketch">
<img src = "img/slices/Sketch-logo Copy@2x.png"class="img-responsive wow slideInUp">
</div><!-- /.sketch -->
<div class="col-md-6 col-xs-6 ai">
<img src = "img/slices/illustrator-logo alt copy@2x.png"class="img-responsive wow slideInRight">
</div><!-- /.ai -->
<div class="col-md-6 col-xs-6 bootstrap">
<img src = "img/slices/twitter-bootstrap copy@2x.png"class="img-responsive wow slideInUp">
</div><!-- /.bootstrap -->
</div><!-- /.col-md-5 -->
</div><!-- /.skill-sets -->
</div><!-- /.col-md-8 -->
<div class="col-md-2 hidden-xs">
<p>contact details below<img src="img/slices/arrow.png" class="img-responsive pull-right"></p>
</div><!-- /.col-md-2 -->
</div><!-- /.row -->
</div><!-- /.section-1 -->
<div class="section-2">
<div class="row">
<h2 class="wow fadeInUpBig">Design and Development</h2>
<div class="col-md-2 col-xs-4 text ">
<img src = "img/slices/wireframes@2x.png"class="img-responsive wow fadeInDown">
</div><!-- /.col-md-2 -->
<div class="col-md-4 col-xs-8 wireframe">
<img src = "img/slices/wireframe.png"class="img-responsive ">
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-8">
<img src = "img/slices/High-Fidelity.png"class="img-responsive ">
</div><!-- /.col-md-4 -->
<div class="col-md-2 col-xs-4 text">
<img src = "img/slices/high-fidelity-designs@2x.png"class="img-responsive wow fadeInDown">
</div><!-- /.col-md-2 -->
<div class="col-md-12 col-xs-12">
<div class="col-md-offset-7 col-md-1 col-xs-2 plus-icon">
<img src = "img/slices/plus-icon@2x.png"class="img-responsive">
</div>
<div class="col-md-4">
<p class="sec-2-text wow fadeInLeft">Coded end product using<br> HTML, CSS and JavaScript</p>
</div>
</div><!-- /.col-md-2 -->
</div><!-- /.row -->
</div><!-- /.section-2 -->
<div class="section-3">
<div class="row">
<h2>Mobile App Design</h2>
<div class="col-md-4 scrn-1">
<img src = "img/slices/mobile-screen-1@2x.png"class="img-responsive wow fadeInLeft">
</div><!-- /.col-md-4 -->
<div class="col-md-4 scrn-2">
<img src = "img/slices/mobile-screen-2@2x.png"class="img-responsive wow fadeInUp">
</div><!-- /.col-md-4 -->
<div class="col-md-4 scrn-3">
<img src = "img/slices/mobile-screen-3@2x.png"class="img-responsive wow fadeInRight">
</div><!-- /.col-md-4 -->
</div><!-- /.row -->
</div><!-- /.section-3 -->
<div class="section-4">
<div class="row">
<div class="col-md-6 col-xs-12 contact-me wow fadeInLeft">
<p><b>contact me</b></p>
<p>Send me a message to discuss work opportunities</p>
<p><span>stephaniebrne[at]gmail.com</span></p>
</div><!-- /.col-md-6 -->
<div class="col-md-6 col-xs-12 social-media wow fadeInRight">
<p>made with <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> thanks to jaaga farm</p>
<div class="col-md-2 col-xs-3 col-md-offset-2">
<a href="https://github.com/StephanieBr" target="_blank"><img src="img/slices/github-icon@2x.png" class="img-responsive hvr-grow-shadow"></a>
</div><!-- /.col-md-2 -->
<div class="col-md-2 col-xs-3">
<a href="https://twitter.com/stephaniebrne" target="_blank"><img src="img/slices/twitter-icon@2x.png" class="img-responsive hvr-grow-shadow"></a>
</div><!-- /.col-md-2 -->
<div class="col-md-2 col-xs-3">
<a href="http://teamtreehouse.com/stephaniebrowne" target="_blank"><img src="img/slices/treehouse-icon@2x.png" class="img-responsive hvr-grow-shadow"></a>
</div><!-- /.col-md-2 -->
<div class="col-md-2 col-xs-3">
<a href="https://instagram.com/stephaniebrne/" target="_blank"><img src="img/slices/instagram-icon@2x.png" class="img-responsive hvr-grow-shadow"></a>
</div><!-- /.col-md-2 -->
</div><!-- /.col-md-6 -->
</div><!-- /.row -->
</div><!-- /.section-4 -->
</div><!-- /.container -->
<script src="js/script.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>