Skip to content

Commit 3a90dde

Browse files
ob1ob1
committed
Initial content and design
1 parent d6d97e6 commit 3a90dde

File tree

4 files changed

+354
-9
lines changed

4 files changed

+354
-9
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
MySite.sublime-project
2+
MySite.sublime-workspace

‎all.css‎

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
/*******************************************************************************
2+
MeyerWeb Reset
3+
*******************************************************************************/
4+
5+
html, body, div, span, applet, object, iframe,
6+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7+
a, abbr, acronym, address, big, cite, code,
8+
del, dfn, em, img, ins, kbd, q, s, samp,
9+
small, strike, strong, sub, sup, tt, var,
10+
b, u, i, center,
11+
dl, dt, dd, ol, ul, li,
12+
fieldset, form, label, legend,
13+
table, caption, tbody, tfoot, thead, tr, th, td,
14+
article, aside, canvas, details, embed,
15+
figure, figcaption, footer, header, hgroup,
16+
menu, nav, output, ruby, section, summary,
17+
time, mark, audio, video {
18+
margin: 0;
19+
padding: 0;
20+
border: 0;
21+
font: inherit;
22+
vertical-align: baseline;
23+
}
24+
25+
/* HTML5 display-role reset for older browsers */
26+
article, aside, details, figcaption, figure,
27+
footer, header, hgroup, menu, nav, section {
28+
display: block;
29+
}
30+
31+
ol, ul {
32+
list-style: none;
33+
}
34+
35+
blockquote, q {
36+
}
37+
38+
table {
39+
border-collapse: collapse;
40+
border-spacing: 0;
41+
}
42+
43+
a:focus {
44+
outline: none;
45+
}
46+
47+
/*******************************************************************************
48+
Theme Styles
49+
*******************************************************************************/
50+
51+
body {
52+
box-sizing: border-box;
53+
color:#373737;
54+
background: #212121;
55+
font-size: 16px;
56+
font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
57+
line-height: 1.5;
58+
-webkit-font-smoothing: antialiased;
59+
}
60+
61+
h1, h2, h3, h4, h5, h6 {
62+
margin: 10px 0;
63+
font-weight: 700;
64+
color:#222222;
65+
font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
66+
letter-spacing: -1px;
67+
}
68+
69+
h1 {
70+
font-size: 36px;
71+
font-weight: 700;
72+
}
73+
74+
h2 {
75+
padding-bottom: 10px;
76+
font-size: 32px;
77+
background: url('../images/bg_hr.png') repeat-x bottom;
78+
}
79+
80+
h3 {
81+
font-size: 24px;
82+
}
83+
84+
h4 {
85+
font-size: 21px;
86+
}
87+
88+
h5 {
89+
font-size: 18px;
90+
}
91+
92+
h6 {
93+
font-size: 16px;
94+
}
95+
96+
p {
97+
margin: 10px 0 15px 0;
98+
}
99+
100+
footer p {
101+
color: #f2f2f2;
102+
}
103+
104+
a {
105+
text-decoration: none;
106+
color: #007edf;
107+
text-shadow: none;
108+
109+
transition: color 0.5s ease;
110+
transition: text-shadow 0.5s ease;
111+
-webkit-transition: color 0.5s ease;
112+
-webkit-transition: text-shadow 0.5s ease;
113+
-moz-transition: color 0.5s ease;
114+
-moz-transition: text-shadow 0.5s ease;
115+
-o-transition: color 0.5s ease;
116+
-o-transition: text-shadow 0.5s ease;
117+
-ms-transition: color 0.5s ease;
118+
-ms-transition: text-shadow 0.5s ease;
119+
}
120+
121+
#main_content a:hover {
122+
color: #0069ba;
123+
text-shadow: #0090ff 0px 0px 2px;
124+
}
125+
126+
footer a:hover {
127+
color: #43adff;
128+
text-shadow: #0090ff 0px 0px 2px;
129+
}
130+
131+
em {
132+
font-style: italic;
133+
}
134+
135+
strong {
136+
font-weight: bold;
137+
}
138+
139+
pre, code {
140+
width: 100%;
141+
color: #222;
142+
background-color: #fff;
143+
144+
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
145+
font-size: 14px;
146+
147+
border-radius: 2px;
148+
-moz-border-radius: 2px;
149+
-webkit-border-radius: 2px;
150+
}
151+
152+
pre {
153+
width: 100%;
154+
padding: 10px;
155+
box-shadow: 0 0 10px rgba(0,0,0,.1);
156+
overflow: auto;
157+
}
158+
159+
code {
160+
padding: 3px;
161+
margin: 0 3px;
162+
box-shadow: 0 0 10px rgba(0,0,0,.1);
163+
}
164+
165+
pre code {
166+
display: block;
167+
box-shadow: none;
168+
}
169+
170+
blockquote {
171+
color: #666;
172+
margin-bottom: 20px;
173+
padding: 0 0 0 20px;
174+
border-left: 3px solid #bbb;
175+
}
176+
177+
ul, ol, dl {
178+
margin-bottom: 15px
179+
}
180+
181+
ul li {
182+
list-style: inside;
183+
padding-left: 20px;
184+
}
185+
186+
ol li {
187+
list-style: decimal inside;
188+
padding-left: 20px;
189+
}
190+
191+
dl dt {
192+
font-weight: bold;
193+
}
194+
195+
dl dd {
196+
padding-left: 20px;
197+
font-style: italic;
198+
}
199+
200+
dl p {
201+
padding-left: 20px;
202+
font-style: italic;
203+
}
204+
205+
/*******************************************************************************
206+
Full-Width Styles
207+
*******************************************************************************/
208+
209+
.outer {
210+
width: 100%;
211+
}
212+
213+
.inner {
214+
position: relative;
215+
max-width: 640px;
216+
padding: 20px 10px;
217+
margin: 0 auto;
218+
}
219+
220+
#header_wrap {
221+
background: #212121;
222+
background: -moz-linear-gradient(top, #373737, #212121);
223+
background: -webkit-linear-gradient(top, #373737, #212121);
224+
background: -ms-linear-gradient(top, #373737, #212121);
225+
background: -o-linear-gradient(top, #373737, #212121);
226+
background: linear-gradient(top, #373737, #212121);
227+
}
228+
229+
#header_wrap .inner {
230+
padding: 50px 10px 30px 10px;
231+
}
232+
233+
#main_content_wrap {
234+
background: #f2f2f2;
235+
border-top: 1px solid #111;
236+
border-bottom: 1px solid #111;
237+
}
238+
239+
#main_content {
240+
padding-top: 40px;
241+
}
242+
243+
#footer_wrap {
244+
background: #212121;
245+
}
246+
247+
#title {
248+
margin: 0;
249+
color: #fff;
250+
font-size: 42px;
251+
font-weight: 700;
252+
text-shadow: #111 0px 0px 10px;
253+
}
254+
255+
#tagline {
256+
color: #fff;
257+
font-size: 24px;
258+
font-weight: 300;
259+
background: none;
260+
text-shadow: #111 0px 0px 10px;
261+
}
262+
263+
#mypic {
264+
display: block;
265+
position: absolute;
266+
right: 50px;
267+
transform:rotate(350deg);
268+
-ms-transform:rotate(350deg); /* IE 9 */
269+
-moz-transform:rotate(350deg); /* Firefox */
270+
-webkit-transform:rotate(350deg); /* Safari and Chrome */
271+
-o-transform:rotate(350deg); /* Opera */
272+
}
273+
274+
/*******************************************************************************
275+
Small Device Styles
276+
*******************************************************************************/
277+
278+
@media screen and (max-width: 480px) {
279+
body {
280+
font-size:14px;
281+
}
282+
283+
.inner {
284+
min-width: 320px;
285+
max-width: 480px;
286+
}
287+
288+
h1 {
289+
font-size: 28px;
290+
}
291+
292+
h2 {
293+
font-size: 24px;
294+
}
295+
296+
h3 {
297+
font-size: 21px;
298+
}
299+
300+
h4 {
301+
font-size: 18px;
302+
}
303+
304+
h5 {
305+
font-size: 14px;
306+
}
307+
308+
h6 {
309+
font-size: 12px;
310+
}

‎images/Ofer_Square.jpg‎

5.87 KB
Loading

‎index.html‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<head>
55
<meta charset='utf-8' />
66
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
7-
<meta name="description" content="ob1.github.com : Personal Page" />
7+
<meta name="description" content="Ofer Belinsky's Personal Page" />
88

9-
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
9+
<link rel="stylesheet" type="text/css" media="screen" href="all.css">
1010

1111
<title>Ofer Belinsky</title>
1212
</head>
@@ -16,20 +16,41 @@
1616
<!-- HEADER -->
1717
<div id="header_wrap" class="outer">
1818
<header class="inner">
19-
<!--a id="forkme_banner" href="https://github.com/ob1">View on GitHub</a>
20-
21-
<h1 id="project_title">Ob1.github.com</h1>
22-
<h2 id="project_tagline">Personal Page</h2-->
19+
<h1 id="title">Ofer Belinsky's</h1>
20+
<h2 id="tagline">Personal Page</h2>
2321

2422
</header>
2523
</div>
2624

2725
<!-- MAIN CONTENT -->
2826
<div id="main_content_wrap" class="outer">
27+
<img id="mypic" src="images/Ofer_Square.jpg" />
28+
2929
<section id="main_content" class="inner">
30-
<h3>Ofer Belinsky</h3>
30+
<h5>Hi, I'm Ofer :-)</h5>
31+
32+
Welcome to my humble abode on the web !
33+
<p>
34+
I am (in no particular order) a:
35+
<ul>
36+
<li>Software Engineer</li>
37+
<li>Residing in Israel</li>
38+
<li>Father of 3 adorable boys and Husband to their beautiful Mom :-)</li>
39+
</ul>
40+
</p>
3141

32-
<p>TBD ...</p>
42+
<!-- LinkedIn -->
43+
<p>
44+
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
45+
Connect with me on LinkedIn:
46+
<script type="IN/MemberProfile" data-id="http://www.linkedin.com/in/oferbelinsky" data-format="hover" data-text="Ofer Belinsky" data-related="false"></script>
47+
</p>
48+
49+
<!-- Twitter -->
50+
<p>
51+
Follow me on Twitter: <a href="https://twitter.com/oferbel" class="twitter-follow-button" data-lang="en">Follow @oferbel</a>
52+
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
53+
</p>
3354
</section>
3455
</div>
3556

@@ -40,7 +61,19 @@ <h3>Ofer Belinsky</h3>
4061
</footer>
4162
</div>
4263

43-
64+
<!-- Google Analytics - Start -->
65+
<script type="text/javascript">
66+
var _gaq = _gaq || [];
67+
_gaq.push(['_setAccount', 'UA-32597760-1']);
68+
_gaq.push(['_trackPageview']);
69+
70+
(function() {
71+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
72+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
73+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
74+
})();
75+
</script>
76+
<!-- Google Analytics - End -->
4477

4578
</body>
4679
</html>

0 commit comments

Comments
 (0)