-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
123 lines (118 loc) · 5.53 KB
/
index.html
File metadata and controls
123 lines (118 loc) · 5.53 KB
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
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/assets/themes/twitter/bootstrap/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body{font-size: 12px;font-family: 'Source Sans Pro', sans-serif;}
.item{float:left; margin: 25px;}
.greeting{text-align: center; padding-top: 30px; padding-bottom: 30px}
.greeting p{font-size: 3em; line-height: 1.5em;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 100px;
margin-right: 100px;
font-family: 'Fredoka One', cursive;
color:#4B90BB;
text-shadow: 1.7px 1.7px 5px #FFFFFF,
-1.5px -1.5px 1px #000000;
}
.header{margin-top:20px; margin-bottom: 25px;}
.blue{background: #87e0fd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4N2UwZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNjZiNmZjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #87e0fd 0%, #66b6fc 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#87e0fd), color-stop(100%,#66b6fc)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #87e0fd 0%,#66b6fc 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #87e0fd 0%,#66b6fc 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #87e0fd 0%,#66b6fc 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #87e0fd 0%,#66b6fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#66b6fc',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
.work{margin-top: 50px;}
.o3-logo {
font-family: 'Fredoka One', cursive;
font-size: 3em;
letter-spacing: -0.04em;
color: #66b6fc;
}
.three{font-size: 25px; margin-right: 5px;position: relative; bottom: -0.25em;}
.line1{font-size: 78px;}
.line2{font-size: 54px;}
.line3{font-size: 40px;}
.o3-logo-svg{position: relative; bottom: -0.25em;}
h2{font-weight: bold; letter-spacing: -0.03em; font-size: 2.5em;}
.nav-top{font-size: 1.5em; margin-top: 10px; letter-spacing: -0.05em;}
.nav-top a{margin-right: 15px;}
.hide{display: none;}
.about{margin-top: 20px;}
.nav-top a{color:#4D4E53;}
.nav-top a:hover{color:#4D4E53; text-decoration: none;}
</style>
</head>
<body>
<div class="container">
<div class="row header">
<div class="pull-right nav-top">
<a href="#" class="hide">My Work</a>
<a href="#" class="hide">About Me</a>
<a href="#" class="hide">Blog</a>
<a href="/resume.html">Resume</a>
</div>
<div class="o3-logo">
O<span class="three">3</span><span class="o3-design">Design</span><span class="o3-logo-svg">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="0.9em" height="0.9em" viewBox="0 0 303 303" enable-background="new 0 0 300 300" xml:space="preserve">
<ellipse fill="#66B6FC" cx="150.483" cy="149.824" rx="144.145" ry="145.824"/>
<ellipse fill="#FFFFFF" stroke="#66B6FC" stroke-width="10" cx="152.314" cy="100.55" rx="60.349" ry="60.349"/>
<ellipse fill="#FFFFFF" stroke="#66B6FC" stroke-width="10" cx="205.67" cy="187.698" rx="60.349" ry="60.349"/>
<ellipse fill="#FFFFFF" stroke="#66B6FC" stroke-width="10" cx="98.33" cy="187.699" rx="60.349" ry="60.349"/>
</svg>
</span>
</div>
</div>
</div>
<div class="blue greeting">
<div class="row">
<p>
<span class="line1">Hello, my name is Owen</span> <br>
<span class="line2">I am a web designer and developer</span><br>
<span class="line3">I have a passion for crafting clean UI and code</span>
</p>
</div>
</div>
<div class="container">
<div class="row work hide">
<h2>My Work</h2>
<div class="projects">
<div class="item">
<a href="/danbury-tattoo.html"><img src="http://placehold.it/250x150"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/250x150"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/250x150"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/250x150"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/250x150"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/250x150"></a>
</div>
</div>
</div>
<div class="row about hide">
<h2>About Me</h2>
<p>I believe "simplicity is the ultimate sophistication". I apply this philosophy to the code I write and user experiences I design. I bring honesty, empathy, and a strong work ethic to whatever project I am working on.</p>
</div>
<div class="row contact">
</div>
</div>
</body>
</html>