-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanthony.html
171 lines (166 loc) · 11.7 KB
/
anthony.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
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="frFR">
<head>
<title>BLUEASY</title>
<!-- Connection au CSS -->
<link rel="stylesheet" href="css/css-as.css" type="text/css">
<!-- Les typo -->
<link rel="stylesheet" href="css/font-awesome.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- LES META -->
<meta charset="utf-8"/>
</head>
<body>
<header id="b-header">
<div id="b-nav">
<div class="content">
<div id="logo"><p>BLU<span id="c-logo">E</span>ASY</p></div>
<nav>
<ul>
<li><a href="#b-header" class="active">HOME</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#features">FEATURES</a></li>
<li><a href="#b-contact">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
<div class="title">
<h2>Im looking for the unexpected.</h2>
<h2>I'm looking for things I've never seen before.</h2>
</div>
</header>
<section>
<article id="services" class="b-bleu">
<div class="content">
<h3><span class="line-b">Ser</span>vices</h3>
<div class="flex">
<div id="coffee">
<i class="coffee"> </i>
<h4>COFFEE</h4h>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis ullamcorper dui, eu vulputate ex sagittis vitae. Suspendisse potenti. Sed pretium nunc a faucibus feugiat. Morbi elementum auctor turpis, sed consequat nunc bibendum id. Aliquam dictum eu ligula et dictum. Cras blandit elit tincidunt elit congue, et vulputate nunc iaculis. Integer elit metus, scelerisque ut fermentum quis, tincidunt vel dolor. Suspendisse potenti.</p>
</div>
<div id="instant">
<i class="instant"> </i>
<h4>INSTANT</h4h>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis ullamcorper dui, eu vulputate ex sagittis vitae. Suspendisse potenti. Sed pretium nunc a faucibus feugiat. Morbi elementum auctor turpis, sed consequat nunc bibendum id. Aliquam dictum eu ligula et dictum. Cras blandit elit tincidunt elit congue, et vulputate nunc iaculis. Integer elit metus, scelerisque ut fermentum quis, tincidunt vel dolor. Suspendisse potenti.</p>
</div>
<div id="serious">
<i class="serious"> </i>
<h4>SERIOUS</h4h>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis ullamcorper dui, eu vulputate ex sagittis vitae. Suspendisse potenti. Sed pretium nunc a faucibus feugiat. Morbi elementum auctor turpis, sed consequat nunc bibendum id. Aliquam dictum eu ligula et dictum. Cras blandit elit tincidunt elit congue, et vulputate nunc iaculis. Integer elit metus, scelerisque ut fermentum quis, tincidunt vel dolor. Suspendisse potenti.</p>
</div>
<div id="frame">
<i class="frame"> </i>
<h4>FRAME</h4h>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis ullamcorper dui, eu vulputate ex sagittis vitae. Suspendisse potenti. Sed pretium nunc a faucibus feugiat. Morbi elementum auctor turpis, sed consequat nunc bibendum id. Aliquam dictum eu ligula et dictum. Cras blandit elit tincidunt elit congue, et vulputate nunc iaculis. Integer elit metus, scelerisque ut fermentum quis, tincidunt vel dolor. Suspendisse potenti.</p>
</div>
</div>
</div>
</article>
<article id="portfolio" class="b-blanc">
<div class="content">
<h3><span class="line-g">Po</span>rtfolio</h3>
<nav>
<ul>
<li><a href="" class="active">ALL</a></li>
<li><a href="">PANORAMAS</a></li>
<li><a href="">PORTRAITS</a></li>
<li><a href="">MACRO</a></li>
<li><a href="">JOURNAL</a></li>
</ul>
<div class="flex">
<div class="img"><img src="images/portfolio1.jpg"></div>
<div class="img"><img src="images/portfolio2.jpg"></div>
<div class="img"><img src="images/portfolio3.jpg"></div>
<div class="img"><img src="images/portfolio4.jpg"></div>
<div class="img"><img src="images/portfolio5.jpg"></div>
<div class="img"><img src="images/portfolio6.jpg"></div>
<div class="img"><img src="images/portfolio7.jpg"></div>
<div class="img"><img src="images/portfolio8.jpg"></div>
</div>
</nav>
</div>
</article>
<article id="features" class="b-gris">
<div class="content">
<h3><span class="line-b">Jus</span>t default section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis ullamcorper dui, eu vulputate ex sagittis vitae. Suspendisse potenti. Sed pretium nunc a faucibus feugiat. Morbi elementum auctor turpis, sed consequat nunc bibendum id. Aliquam dictum eu ligula et dictum. Cras blandit elit tincidunt elit congue, et vulputate nunc iaculis. Integer elit metus, scelerisque ut fermentum quis, tincidunt vel dolor. Suspendisse potenti.</p>
<p class="bouton"><a href="">VISIT ME</a></p>
<!-- <video width="560" height="315" controls>
<source src="video/Beached.mp4" type="video/mp4">
<source src="video/Beached.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> -->
<iframe src="https://player.vimeo.com/video/1785993" width="560" height="314" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</article>
<article class="b-bleu">
<div class="content">
<h3><span class="line-b">Twi</span>tter</h3>
<div class="icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>
<p>Underware cookie liquorice. Cake donut cupcake lollipop soufflé candy. Chocolate oat cake <br/> <a href="https://twitter.com/cheesecake" target="_blank">@cheesecake</a> tootsie roll.</p>
</div>
</article>
<article id="b-pres">
<div class="content">
<h3><span class="line-b">Wh</span>o is John Doe?</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis ullamcorper dui, eu vulputate ex sagittis vitae. Suspendisse potenti. Sed pretium nunc a faucibus feugiat. Morbi elementum auctor turpis, sed consequat nunc bibendum id. Aliquam dictum eu ligula et dictum. Cras blandit elit tincidunt elit congue, et vulputate nunc iaculis. Integer elit metus, scelerisque ut fermentum quis, tincidunt vel dolor. Suspendisse potenti. <br/><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis ullamcorper dui, eu vulputate ex sagittis vitae. Suspendisse potenti. Sed pretium nunc a faucibus feugiat. Morbi elementum auctor turpis, sed consequat nunc bibendum id. Aliquam dictum eu ligula et dictum. Cras blandit elit tincidunt elit congue, et vulputate nunc iaculis. Integer elit metus, scelerisque ut fermentum quis, tincidunt vel dolor. Suspendisse potenti</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis ullamcorper dui, eu vulputate ex sagittis vitae. Suspendisse potenti. Sed pretium nunc a faucibus feugiat. Morbi elementum auctor turpis, sed consequat nunc bibendum id. Aliquam dictum eu ligula et dictum. Cras blandit elit tincidunt elit congue, et vulputate nunc iaculis. Integer elit metus, scelerisque ut fermentum quis, tincidunt vel dolor. Suspendisse potenti.</p>
<nav>
<ul>
<li><a href="" class="social"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="" class="social"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="" class="social"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
<li><a href="" class="social"><i class="fa fa-coffee" aria-hidden="true"></i></a></li>
</ul>
</nav>
</div>
</div>
</article>
<article class="b-blanc">
<div class="content">
<h3><span class="line-g">Tes</span>timonials</h3>
<div class="icon"><i class="fa fa-quote-right" aria-hidden="true"></i></div>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis ullamcorper dui, eu vulputate ex sagittis vitae. Suspendisse potenti.</blockquote>
<p id="author">-Walter White</p>
</div>
</article>
<article id="b-contact">
<div class="content">
<h3><span class="line-b">Co</span>ntact</h3>
<form action="mailto:[email protected]" method="post">
<div class="flex">
<div><label>FULL NAME</label><br/><input type="text" name="full name"></div>
<div><label>EMAIL</label><br/><input type="text" name="email"></div>
<div id="text-contact"><p>Jujubes bear claw croissant wafer sweet lemon drops brownie chocolate bar. Sweet lollipop halvah tootsie roll cake fruitcake. Chocolate cake chocolate bar gingerbread lollipop tart. Jujubes bear claw donut chupa chups.</p>
<p>Linda Newman<br/>
W325 State Road 123<br/>
Mondovi, WI(Wisconsin) 98746-54321<br/>
(715) 946 - 1234</p>
</div>
<div><label>MESSAGE</label><br/><textarea type="text" name="message"></textarea></div>
<input type="submit" value="MESSAGE"/>
</form>
</div>
</article>
</section>
<footer>
<div class="content">
<nav>
<ul>
<li><a href="#b-header">HOME</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#b-contact">CONTACT</a></li>
</ul>
</nav>
<div id="copy"><p>2013 ©</p></div>
</div>
</footer>
</body>
</html>