-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhootmobi.html
117 lines (116 loc) · 6 KB
/
hootmobi.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>lopezbesteiro - hootmobi </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"><a class="animsition-link" href="connects.html"><span class="chevron-left"></span>Proyecto anterior</a></li>
<li><a class="animsition-link" href="joseph.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">
<!-- Landing Scroll -->
<div class="hidden-xs landing-scroll landing-scroll-work">
<span class="scroll-icon"></span><p>Scroll Down</p>
</div><!-- End of Landing Scroll -->
<div class="row">
<div class="col-md-4">
<h1>Hootmobi<a href="index.html"></a></h1>
<h3>
<span class="label">UX</span>
<span class="label">UI</span>
</h3>
<p class="work-title"><strong>El problema</strong></p>
<p>
Para el rediseño de la página de esta empresa malagueña de affiliate marketing, la premisa era clara, actualizar el diseño para acercarlo hacia los valores corporativos. Juventud, dinamismo y frescura eran los puntos clave en torno a los cuales giraría todo el proyecto.
</p>
<p class="work-title"><strong>La solución</strong></p>
<p>
La primera decisión que se tomó fue la de ampliar la paleta de colores, añadiendo al color corporativo una gama de tonos vivos que sirvieran de base para todo el proyecto.
Gradientes, patrones lineales e ilustraciones con un toque juvenil, que el diseño hable por sí solo, que comunique todo aquello que la empresa pretende ser, sin perder en seriedad y profesionalidad.
</p>
<!-- Carousel -->
</div>
<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_hootmobi_01.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_hootmobi_02.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_hootmobi_03.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_hootmobi_04.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_hootmobi_05.jpg" alt="Alejandro Lopez Trabajos">
</div>
</div>
</div>
</div> <!-- End of Carousel -->
<!-- Images for small devices -->
<div class="visible-xs col-xs-12 block-shadow img-margin-bottom">
<img class="img-responsive" src="images/works/alejandro_lopez_hootmobi_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_hootmobi_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_hootmobi_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_hootmobi_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_hootmobi_05.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_hootmobi_07.jpg" alt="Alejandro Lopez Trabajos">
</div>
<!-- End ofImages for small devices -->
</div>
</section>
<section id="work-section" class="hidden-xs work-section">
<div class="row">
<div class="col-md-9 img-vert-padding-right">
<img class="img-responsive block-shadow" src="images/works/alejandro_lopez_hootmobi_07.jpg" alt="Alejandro Lopez Trabajos">
</div>
</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>