-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.htm
More file actions
121 lines (114 loc) · 7.26 KB
/
index.htm
File metadata and controls
121 lines (114 loc) · 7.26 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PaperWhite | Minimal Responsive Website Theme by Tinywall</title>
<meta name="description" content="PaperWhite | Minimal Responsive Website Theme by Tinywall" />
<meta name="author" content="Tinywall" />
<meta name="keywords" content="paperwhite, tinywall, minimal theme, responsive theme, minimal responsive theme " />
<link rel="stylesheet" href="css/style.css" media="all" />
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1.0; user-scalable=no"/>
<script src="js/init.js"></script>
<!-- <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<link rel="icon" href="favicon.png" type="image/x-icon" /> -->
</head>
<body>
<a href="https://github.com/tinywall/paperwhite"><img style="position: absolute; top: 0; right: 0; border: 0;width:149px;height:149px;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<div class="container">
<aside class="sidebar">
<div class="col1">
<header class='header'>
<div class='header-img-container header-img-transition'>
<!--<div class='logo-text'>A</div>-->
<img src="images/logo.png" class="header-img toggle-img">
<img src="images/logo2.png" class="header-img toggle-img">
<img src="images/logo3.png" class="header-img toggle-img">
<img src="images/logo4.png" class="header-img toggle-img">
</div>
<a href='#' class='header-text'>Paper White</a>
<div class='desc'>
Some nonsense tagline about your website.
</div>
</header>
<nav>
<ul class="nav-list">
<li><a href="index.htm" class="active nav-link" >Home</a></li>
<li><a href="page.htm" class="nav-link nav-highlight" section-highlight='section-about'>About</a></li>
<li><a href="#interest" class="nav-link nav-highlight" section-highlight='section-interest'>Interests</a></li>
<li><a href="#skills" class="nav-link nav-highlight" section-highlight='section-skills'>Skills</a></li>
<li><a href="#portfolio" class="nav-link nav-highlight" section-highlight='section-portfolio'>Portfolio</a></li>
<li><a href="#contact" class="nav-link nav-highlight noimg-highlight" section-highlight='section-contact'>Contact</a></li>
<div class="clear"></div>
</ul>
</nav>
</div>
</aside>
<main class="content">
<div class='main-title'>Hello World!</div>
<div class="col2">
<div class="col-content">
<section class='section section-about'>
<div class="title"><a name="about">I am,</a></div>
Paperwhite, a minimal responsive theme for your personal website made with love by <a href='http://tinywall.com'>Tinywall</a>. With content first in mind, I provide you with a website as clean as your heart. :p
</section>
<section class='section section-about'>
Cut the crap of doing some trial and error with media queries & fonts; Just <a href='https://github.com/tinywall/paperwhite'>download</a> the paperwhite and create your own minimal responsive website.
</section>
<section class='section section-interest'>
<div class="title"><a name="interest">I like,</a></div>
Open source, So I made myself available to everyone for free. You can fork, clone or whatever you want to do with me. I'm all yours.
<div class='clear'></div>
</section>
</div>
</div>
<div class="col3">
<div class="col-content">
<section class='section section-skills'>
<div class="title"><a name="skills">I know,</a></div>
How to change my look to attract users with different screen sizes whether its mobile or tablet or computer. :) <br/>
Yes, They call this flirty concept as 'RESPONSIVE WEB DESIGN'.
</section>
<section class='section section-portfolio'>
<div class="title"><a name="portfolio" href="#" target="_blank">I use,</a></div>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li><a href='http://jquery.com/' target='_blank'>jQuery</a></li>
<li><a href='http://www.google.com/fonts/specimen/Titillium+Web' target='_blank'>Titillium Web font</a></li>
</ul>
</section>
</div>
</div>
<div class="col4">
<div class="col-content">
<section class='section section-contact'>
<div class="title"><a name="contact">Get in touch</a></div>
<div class="social">
<a target="_blank" href="#"><img src="images/twitter.png"></a>
<a target="_blank" href="#"><img src="images/facebook.png"></a>
<a target="_blank" href="#"><img src="images/linkedin.png"></a>
<a target="_blank" href="#"><img src="images/google.png"></a>
<a target="_blank" href="#"><img src="images/flickr.png"></a>
</div>
</section>
<section class='section section-contact'>
youremail [at] example.com<br/>
+01-23456789
</section>
<footer>
<section class='section'>
Some crapy text or whatever you want in the footer.
</section>
<div class="copyright">Your Name © 2013</div>
</footer>
</div>
</div>
</main>
<div class="clear"></div>
</div>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>