-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathannabelle.html
94 lines (90 loc) · 3.22 KB
/
annabelle.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
<!DOCTYPE html>
<html lang="fr-BE">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="./script/script.js"></script>
<title>Marc-Marino: Annabelle</title>
</head>
<body id="annabelle">
<nav class="top wrapper">
<a href="index.html">Marco Marino</a>
<a href="projects.html">+Projects</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="splash">
<div class="content">
<div>
<h1>Annabelle</h1>
<p>Visual identity</p>
</div>
</div>
</div>
<div class="hider"></div>
<div class="content wrapper">
<div id="challenge">
<h3 class="scrollerstart">CHALLENGE</h3>
<div class="scrollerstart">
<p>Annabelle is a new-borned wedding planner agency. The mission of the founders is to give to every wedding a strong touch of style and elegance. For this reason, the main idea is to mix tradition and innovation perfectly.</p>
<p>We have applied to Annabelle this concept, making timeless its visual identity, focusing on the attentive choice of soft colours and typography, that could fit with the romantic images and the idea of sweetness.</p>
</div>
</div>
<div id="firstimages" class="scrollerstart">
<div></div>
<div></div>
</div>
<div class="textdata scrollerstart">
<p>Corporate identity</p>
<strong>Great typography and a minimal and cool color palette.</strong>
</div>
<div id="caroussel" class="scrollerstart">
<div class="swiper-button-prev"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/1-min_1.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/2-min.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/4-min.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/3-min_1.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/5-min.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/6-min.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-next"></div>
</div>
<div id="secondimages" class="scrollerstart">
<img src="./img/03.-min_1.png" alt="">>
</div>
<div class="textdata scrollerstart">
<p>Web design & UI</p>
<strong>An impact white landing page with a simple navigation.</strong>
</div>
<div id="lastimages">
<img src="./img/fonts.svg" alt="" class="scrollerstart">
<img src="./img/1-min.jpg" alt="" class="scrollerstart">
</div>
</div>
<footer class="wrapper">
<div class="content">
<div>
<p>See next project</p>
<h1>Decathlon</h1>
</div>
<a href="#">→</a>
</div>
<nav class="bottom scrollable">
<a href="#">Dribbble</a>
<a href="#">Instagram</a>
<a href="#">Linkedin</a>
<a href="#">Tumblr</a>
<small>Best experience on modern browsers</small>
</nav>
</footer>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>