-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjoseph.html
109 lines (108 loc) · 5.8 KB
/
joseph.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>lopezbesteiro - joseph </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="hootmobi.html"><span class="chevron-left"></span>Proyecto anterior</a></li>
<li><a class="animsition-link" href="basebone.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>Joseph<a href="josephlab/index.html" target="_blank"><span class="hidden-xs external-link"></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>
Joseph es un artista único. Multidisciplinar y atrevido en todo lo que hace, por lo que cuando se decidió a la creación de su site personal sabía de antemano que debía tener un diseño que rompiese moldes y que reflejase de una forma directa la cantidad y variedad de trabajos hechos hasta la fecha.
</p>
<p class="work-title"><strong>La solución</strong></p>
<p>
El diseño de este site iba a girar en torno a los proyectos, tanto su visualización como su clasificación. El componente visual está muy presente en todos los trabajos de Joseph, por lo que debían de ser ellos los que hablasen por sí mismos reduciendo los componentes de interfaz a su mínima expresión.
Se optó por la implementación de un filtro por el que el usuario puede conocer al completo las categorías y acceder de una manera sencilla a los proyectos de individualmente.
</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_joseph_01.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_joseph_02.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_joseph_03.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_joseph_04.jpg" alt="Alejandro Lopez Trabajos">
</div>
<div class="item">
<img src="images/works/alejandro_lopez_joseph_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="josephlab/index.html" 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_joseph_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_joseph_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_joseph_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_joseph_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_joseph_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>