-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (135 loc) · 5.92 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portifólio de Diêgo Bolina - Front-End Developer">
<title>Portifólio de Diêgo Bolina - Front-End Developer</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
<link rel="stylesheet" href="css.css">
<script src="http://use.typekit.net/gis6vng.js"></script>
</head>
<body>
<div class="content">
<div class="header">
<div class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
<a class="pure-menu-heading" href="">Portifólio de Diêgo Bolina</a>
<ul>
<li class="pure-menu-selected"><a href="#">Home</a></li>
<li><a href="#">Tour</a></li>
<li><a href="#">API</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
<div class="splash">
<div class="pure-g-r">
<div class="pure-u-1-3">
<div class="l-box splash-image">
<img src="http://placehold.it/500x350"
alt="Placeholder image for example.">
</div>
</div>
<div class="pure-u-2-3">
<div class="l-box splash-text">
<h2 class="splash-subhead">
The HTML and CSS for this layout show how you can make a modern, responsive landing page for your next product. Browse through the source to see how we use menus and responsive grids to create this layout. Shrink your browser width and watch the layout transform and play nice with small screens.
</h2>
<p>
<a href="#" class="pure-button primary-button">Get Started</a>
</p>
</div>
</div>
</div>
</div>
<div class="content">
<div class="pure-g-r content-ribbon">
<div class="pure-u-2-3">
<div class="l-box">
<h4 class="content-subhead">Some small text</h4>
<h3>Lorem ipsum dolor sit amet.</h3>
<p>
Pellentesque hendrerit lobortis ornare. Fusce luctus imperdiet consequat. Nullam quis nunc quis ligula luctus vestibulum non quis libero. Suspendisse tristique nisl ut velit facilisis sit amet lobortis nulla pharetra.
</p>
</div>
</div>
<div class="pure-u-1-3">
<div class="l-box">
<img src="http://placehold.it/400x250"
alt="Placeholder image for example.">
</div>
</div>
</div>
<div class="pure-g-r content-ribbon">
<div class="pure-u-1-3">
<div class="l-box">
<img src="http://placehold.it/400x250"
alt="Placeholder image for example.">
</div>
</div>
<div class="pure-u-2-3">
<div class="l-box">
<h4 class="content-subhead">Some more small text</h4>
<h3>Etiam iaculis iaculis lobortis.</h3>
<p>
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. Morbi fermentum dui sit amet libero tincidunt rutrum. Nam sodales consequat metus sed accumsan.
</p>
</div>
</div>
</div>
<div class="pure-g-r">
<div class="pure-u-1-4">
<div class="l-box">
<h3>Subheading</h3>
<p>
Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
</p>
</div>
</div>
<div class="pure-u-1-4">
<div class="l-box">
<h3>Subheading</h3>
<p>
Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
</p>
</div>
</div>
<div class="pure-u-1-4">
<div class="l-box">
<h3>Subheading</h3>
<p>
Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
</p>
</div>
</div>
<div class="pure-u-1-4">
<div class="l-box">
<h3>Subheading</h3>
<p>
Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
</p>
</div>
</div>
</div>
<div class="l-box ribbon">
<h2>Get started now.</h2>
<a href="#" class="pure-button primary-button">Sign up</a>
</div>
</div>
<div class="footer">
View the source of this layout to learn more. Made with love by the YUI Team.
</div>
</div>
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node-base', 'node-event-delegate', function (Y) {
// This just makes sure that the href="#" attached to the <a> elements
// don't scroll you back up the page.
Y.one('body').delegate('click', function (e) {
e.preventDefault();
}, 'a[href="#"]');
});
</script>
</body>
</html>