-
Notifications
You must be signed in to change notification settings - Fork 0
/
malber.html
110 lines (109 loc) · 5.9 KB
/
malber.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>lopezbesteiro - malber </title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Belgrano" rel="stylesheet">
<!-- Custom css -->
<link rel="stylesheet" href="css/customstyles.css">
</head>
<body>
<!-- Main container -->
<div class="animsition home container-fluid nopadding">
<!-- Navigaton -->
<nav class="navbar-fixed">
<a href="index.html"><div class="nav-logo"></div></a>
<div class="hidden-xs nav-actions">
<ul class="nopadding project-selector">
<li class="navlink-separator project-selector-inactive"><a class="animsition-link" href="index.html"><span class="chevron-left"></span></a>Proyecto anterior</li>
<li><a class="animsition-link" href="connects.html">Proyecto siguiente<span class="chevron-right"></span></a></li>
</ul>
</div>
<button class="button"><a class="animsition-link" href="index.html#work-section">Volver</a></button>
</nav><!--End of Navigaton -->
<!-- Landing screen -->
<section id="home" class="section landing landing-works">
<div class="row">
<div class="col-md-4">
<h1>Macarena y Alberto<a href="https://enlacemarbel.github.io/website/" target="_blank"><span class="external-link hidden-xs"></span></a></h1>
<h3>
<span class="label">UX</span>
<span class="label">UI</span>
<span class="label">HTML</span>
<span class="label">CSS</span>
<span class="label">JS</span>
</h3>
<p class="work-title"><strong>El problema</strong></p>
<p>
Macarena y Alberto iban a celebrar su boda en un pequeño pueblo de Córdoba. Prácticamente la totalidad de los invitados visitaban por primera vez la zona por lo que necesitaban un site donde centralizar la mayor cantidad de información posible, así como crear un sistema de confirmación de asistencia online.
</p>
<p class="work-title"><strong>La solución</strong></p>
<p>
Partiendo de dichas premisas, se ideó una página de llegada donde la navegación se dividía en grandes áreas separadas por colores ayudando al usuario a decidir en función de sus necesidades.
Una vez pasada la página de aterrizaje, la composición horizontal produce que el usuario, siguiendo su dirección natural de lectura, observe en un primer término el header, pudiendo desde ahí acceder a todas la secciones y acciones principales.
Con todo ello conseguimos un website con información muy útil y de fácil uso.
</p>
</div>
<!-- Carousel -->
<div class="hidden-xs col-md-7 col-md-push-1">
<div id="carousel-example-generic" class="carousel slide carousel-custom" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/works/alejandro_lopez_malber_01.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_malber_02.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_malber_03.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_malber_04.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_malber_05.jpg" alt="Alejandro Lopez Trabajos">
</div>
</div>
</div>
</div> <!-- End of Carousel -->
<!-- Images for small devices -->
<div class="visible-xs col-xs-12 img-margin-bottom">
<h3><a href="https://enlacemarbel.github.io/website/" target="_blank">Visita la web<span class="chevron-right"></span></a></h3>
</div>
<div class="visible-xs col-xs-12 block-shadow img-margin-bottom">
<img class="img-responsive" src="images/works/alejandro_lopez_malber_01.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="visible-xs col-xs-12 block-shadow img-margin-bottom">
<img class="img-responsive" src="images/works/alejandro_lopez_malber_02.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="visible-xs col-xs-12 block-shadow img-margin-bottom">
<img class="img-responsive" src="images/works/alejandro_lopez_malber_03.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="visible-xs col-xs-12 block-shadow img-margin-bottom">
<img class="img-responsive" src="images/works/alejandro_lopez_malber_04.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="visible-xs col-xs-12 block-shadow img-margin-bottom">
<img class="img-responsive" src="images/works/alejandro_lopez_malber_05.jpg" alt="Alejandro Lopez Trabajos">
</div>
<!-- End ofImages for small devices -->
</div>
</section>
</div><!-- End of main container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/works-min.js"></script>
<!-- Custom scripts for this template -->
</body>
</html>