-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcrear.html
100 lines (95 loc) · 4.97 KB
/
crear.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gifos</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="author" content="Ana Julia Velez Rueda">
<link rel="stylesheet" type="text/css" href="style/index.css">
<link rel="stylesheet" type="text/css" href="style/index_nocturno.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;1,100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.5.6/RecordRTC.js"></script>
<script src="assets/js/general_functions.js" type="text/javascript" charset="utf-8" defer></script>
<script src="assets/js/crear.js" type="text/javascript" charset="utf-8" defer></script>
</head>
<body id="body">
<header id="header" class="main active">
<nav class="nav-bar">
<figure class="logo">
<a href="index.html"><img src="assets/images/logo-mobile.svg" alt="logo-mobile" class="logo-mobile"></a>
<a href="index.html"><img src="assets/images/logo-desktop.svg" alt="logo-desck" class="logo-desck"></a>
</figure>
<div class="ham-menu">
<input type="checkbox" id="toggle" class="menu" />
<label for="toggle" class="menu">
<i class="fas fa-bars"></i>
</label>
<ul class="main-menu menu-ul">
<li></li>
<li><a href="#" class="opciones" id="boton-nocturno">MODO NOCTURNO</a></li>
<li><a href="favorites.html" class="opciones">FAVORITOS</a></li>
<li><a href="index.html#mis-gifos-section" class="opciones">MIS GIFOS</a></li>
<li>
<a href="crear.html" class="opciones"><img src="assets/images/button-crear-gifo.svg" alt="crear" class="crear"></a>
</li>
</ul>
</div>
</nav>
</header>
<main class="main-crear">
<section class="camara-viewer">
<img src="assets/images/camara.svg" alt="camara">
<img src="assets/images/element-luz-camara.svg" class="element-luz-camara" alt="element-luz-camara">
<div class="camera-window" id="camera-window">
<div class="camera-container" id="camera-container">
<div class="text-container active" id="text-container">
<h2 class="camera-container-title">Aquí podrás <br>crear tus propios <span class="gifos-text">GIFOS<span></h2>
<p id="text-camera" class="text-camera">¡Crea tu GIFO en sólo 3 pasos! <br>(sólo necesitas una cámara para grabar un video)</p>
</div>
<video src="#" class="video" id="video"></video>
</div>
</div>
</section>
<section class="pasos">
<ul class="pasos-list">
<li class="step-position" id="button-paso1">1</li>
<li class="step-position" id="button-paso2">2</li>
<li class="step-position" id="button-paso3">3</li>
<li class="repetir-captura" id="repetir-captura">REPETIR CAPTURA</li>
<li class="recording-time" id="recording-time">00:00</li>
</ul>
<figure class="element-cinta">
<img src="assets/images/pelicula.svg" alt="element-cinta">
</figure>
<div class="violet-line" id="violet-line">
<button class="step-button active" id="comenzar">COMENZAR</button>
<button class="step-button" id="grabar">GRABAR</button>
<button class="step-button" id="finalizar">FINALIZAR</button>
<button class="step-button" id="subir">SUBIR</button>
</div>
</section>
</main>
<footer class="footer active" id="footer">
<section class="footer" id="footer">
<div class="socialnets">
<p class="compartir-text" id="compartir-text">Compartir en:</p>
<ul class="contac-icons">
<li class="nav-item">
<a id="nav-link" class="nav-link" href="#"><i class="fab fa-instagram"></i></a>
</li>
<li class="nav-item">
<a id="nav-link" class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="nav-item">
<a id="nav-link" class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
</li>
</ul>
</div>
<p class="footer-text" id="footer-text">© GIFOS 2020 All Rights Reserved</p>
</section>
</footer>
</body>
</html>