-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
161 lines (130 loc) · 4.76 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>CROOP UI | A Flat UI Made with Compass & Sass</title>
<script src="js/modernizr.js"></script>
<!-- BLACK MAGIC FOR IE -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
<!-- WEBFONTS -->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<h1 class="title">CROOP UI</h1>
<!-- HORIZONTAL NAVIGATION -->
<h3>Navigation</h3>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a>
<ul class="submenu">
<li><a href="#">Web</a></li>
<li><a href="#">Graphics</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- VERTICAL NAVIGATION -->
<ul class="vnav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- HORIZONTAL LINK LIST -->
<ul class="hllist">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- ICON CIRCLE BUTTONS -->
<ul class="icons">
<li><a href="#">S</a></li>
<li><a href="#">A</a></li>
<li><a href="#">g</a></li>
<li><a href="#">5</a></li>
</ul>
<!-- ICON BUTTONS -->
<ul class="iconsquare">
<li><a href="#">S<b>Skype</b></a></li>
<li><a href="#">A <b>Apple</b></a></li>
<li><a href="#">g<b>GitHub</b></a></li>
<li><a href="#">5 <b>Html5</b></a></li>
</ul>
<!-- SOCIAL NETWORKS -->
<ul class="snetwork">
<li><a href="#" class="tw">T<b>Twitter</b></a></li>
<li><a href="#" class="fb">f<b>Facebook</b></a></li>
<li><a href="#" class="plus">+<b>Google +</b></a></li>
<li><a href="#" class="igram">I<b>Instagram</b></a></li>
</ul>
<!-- IMAGE CAPTION -->
<h3>Image Caption</h3>
<div id="gallery">
<img src="img/frog.jpg" alt="A nice & Little Frog" >
<div class="caption">
s
<b>A nice & little frog</b>
</div>
</div>
<!-- FORM ELEMENTS -->
<h3>Forms</h3>
<div class="form">
<input type="text" placeholder="Type Your Name" class="half"><input type="text" placeholder="Type Your Email" class="half">
<input type="text" placeholder="Type Your Twitter Username">
<textarea name="comment" id="" cols="30" rows="10" placeholder="Type Your Message"></textarea>
<a href="#">Cancel</a><input type="submit" value="Submit" class="button">
</div>
<!-- TEXT ELEMENTS -->
<h3>Text Elements</h3>
<!-- CONTENT SLIDER -->
<div class="contentslider">
<ul>
<li>
<h3>Samuel L. Ipsum</h3>
<p>
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
</p>
</li>
</ul>
<div class="next"> > </div>
<div class="prev"> < </div>
</div>
<!-- HEADINGS -->
<div class="headings">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<!-- TEXT PANEL -->
<div class="panel">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio error tempora adipisci aspernatur assumenda dicta quidem! <a href="#">ipsum</a>, modi quia dolorem temporibus maxime quo vitae veritatis perferendis neque delectus. Deleniti, distinctio!
</div>
<!-- BLOCKQUOTE -->
<blockquote>
And the raven, never flitting, still is sitting, still is sitting
On the pallid bust of Pallas just above my chamber door;
And his eyes have all the seeming of a demon's that is dreaming,
And the lamp-light o'er him streaming throws his shadow on the floor;
And my soul from out that shadow that lies floating on the floor
Shall be lifted - nevermore!
</blockquote>
</div>
<!-- ANALITYCS -->
<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">var pageTracker = _gat._getTracker("UA-5205250-1");pageTracker._trackPageview();</script>
<!-- /ANALITYCS -->
</body>
</html>