Skip to content

Commit

Permalink
completed
Browse files Browse the repository at this point in the history
  • Loading branch information
Rafael Barea committed Sep 14, 2020
1 parent b394466 commit 504d5e2
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 53 deletions.
122 changes: 76 additions & 46 deletions src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,3 @@
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.whole {
padding-block: 10em;
}

/*############ HEADER #################*/
/*Estilos propios*/
h1 {
Expand All @@ -50,10 +7,9 @@ h1 {
white-space: nowrap;
}
.header2 {
background-image: url("https://translate.googleapis.com/translate_static/img/te_ctrl3.gif");
background-position: -65px 0px;
width: 1.2em;
}
.heaser3 {
.header3 {
vertical-align: middle;
}
.header4 {
Expand Down Expand Up @@ -167,6 +123,16 @@ img {
.goog-te-gadget {
}
.goog-te-gadget-simple {
background-color: #fff;
border-left: 1px solid #d5d5d5;
border-top: 1px solid #9b9b9b;
border-bottom: 1px solid #e8e8e8;
border-right: 1px solid #d5d5d5;
font-size: 10pt;
display: inline-block;
padding-top: 1px;
padding-bottom: 2px;
cursor: pointer;
}
.goog-te-gadget-icon {
}
Expand Down Expand Up @@ -436,6 +402,67 @@ input[type="text"] {
.margin {
margin-bottom: 1.2em;
}

/*############ CAROUSEL #################*/

.margin-carouselSuperior {
width: 40%;
margin-left: 21%;
margin-bottom: 50px;
margin-top: -1%;
}

.small-box {
flex: 0 0 24%;
-ms-flex: 0 0 20%;
margin: 0 1% 1em 0;
display: flex;
align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
margin-left: 5%;
border: 7px solid #f3f3f3;
padding: 1em;
}

.small-box .procedure-image img {
width: 70px;
}

.procedure-link {
max-width: 175px;
color: #125d82 !important;
}
.link {
color: #004488;
font-weight: bold;
font-size: 1.2em;
}

.carousel {
margin-top: 2em;
margin-bottom: 20px;
line-height: 1;
display: flex;
flex-flow: row;
justify-content: space-between;
}
.carousel-inner {
overflow: hidden;
width: 100%;
}
.flex {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.carousel-control {
background: rgba(0, 0, 0, 0) !important;
color: black;
width: 1%;
margin-top: 3%;
}

/*############ FOOTER #################*/
.pie {
height: 30px;
Expand All @@ -452,3 +479,6 @@ input[type="text"] {
.marginright10 {
margin-right: 10px;
}
.colorBlack{
color:black !important;
}
156 changes: 149 additions & 7 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
import React from "react";
import "./App.css";
import help from "./assets/img/system_help.png";
import alta from "./assets/img/alta-vehiculo.png";
import pago from "./assets/img/pagodemultas.png";
import pago2 from "./assets/img/pagoydevoluciontasas.png";
import permiso from "./assets/img/permisoxpuntos.png";
import dot from "./assets/img/g.png"

function App() {
return (
<div id="contenedor" className="whole">
<div id="contenedor" className="whole">
<div id="cabecera">
<div id="j_id5" className="central central-borde">
<a
Expand All @@ -25,15 +31,14 @@ function App() {
className="goog-te-gadget-simple header1"
>
<img
src="./Solicitar Cita Paso2_files/cleardot.gif"
src={dot}
className="goog-te-gadget-icon header2"
alt=""
/>
<span className="header3">
<a
aria-haspopup="true"
className="goog-te-menu-value"
href="javascript:void(0)"
>
<span>Seleccionar idioma</span>
<img
Expand Down Expand Up @@ -79,7 +84,7 @@ function App() {
target="_blank"
>
<img
src="./Solicitar Cita Paso2_files/system_help.png"
src={help}
alt="Ayuda en ventana nueva"
title="Ayuda en ventana nueva"
/>
Expand Down Expand Up @@ -115,7 +120,10 @@ function App() {
className="saltobr"
></div>
</div>
<div id="publicacionesForm:j_id55" className="cuadroBlanco98por cuadroBlanco98porMain sinBorde">
<div
id="publicacionesForm:j_id55"
className="cuadroBlanco98por cuadroBlanco98porMain sinBorde"
>
<strong id="publicacionesForm:j_id56">
Datos del interesado
</strong>
Expand Down Expand Up @@ -371,7 +379,7 @@ function App() {
</div>
</fieldset>
</div>

<div
id="publicacionesForm:j_id2016"
className="buscIntCamposGral"
Expand Down Expand Up @@ -422,12 +430,146 @@ function App() {
className="separacion7em"
></div>
</div>
<div id="publicacionesForm:j_id2036" className="separacion5em"></div>
<div
id="publicacionesForm:j_id2036"
className="separacion5em"
></div>
<div id="publicacionesForm:mensajeserror"></div>
<input type="hidden" name="javax.faces.ViewState" />
</form>
<div id="j_id2038" className="separacion5em"></div>
</div>
<div id="myCarouselInferior" className="carousel">
<a
id="anguloIzquierdo"
className="left carousel-control"
href="https://sedeapl.dgt.gob.es:7443/WEB_NCIT_CONSULTA/solicitarCitaPaso1.faces#myCarouselInferior"
data-slide="prev"
>
<svg
className="svg-inline--fa fa-angle-left fa-w-8"
aria-hidden="true"
focusable="false"
data-prefix="fa"
data-icon="angle-left"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
></path>
</svg>
</a>
<div id="j_id2039:0:j_id2040" className="carousel-inner flex">
<div
id="j_id2039:0:j_id2041"
className="col-md-3 col-sm-6 col-xs-12"
>
<div id="j_id2039:0:j_id2042" className="small-box">
<div id="j_id2039:0:j_id2043" className="procedure-image">
<img src={alta} alt="Alta de vehículo." />
</div>
<div id="j_id2039:0:j_id2045" className="procedure-link">
<a
href="https://sede.dgt.gob.es/es/vehiculos/altas-bajas-y-rehabilitacion-de-vehiculos/index.shtml"
target="_blank"
title="Acceder a Alta de vehículo."
className="link"
>
Alta de vehículo.
</a>
</div>
</div>
</div>
<div
id="j_id2039:1:j_id2041"
className="col-md-3 col-sm-6 col-xs-12"
>
<div id="j_id2039:1:j_id2042" className="small-box">
<div id="j_id2039:1:j_id2043" className="procedure-image">
<img src={pago} alt="Pago de multas." />
</div>
<div id="j_id2039:1:j_id2045" className="procedure-link">
<a
href="https://sede.dgt.gob.es/es/multas/paga-tu-multa/index.shtml"
target="_blank"
title="Acceder a Pago de multas."
className="link"
>
Pago de multas.
</a>
</div>
</div>
</div>
<div
id="j_id2039:2:j_id2041"
className="col-md-3 col-sm-6 col-xs-12"
>
<div id="j_id2039:2:j_id2042" className="small-box">
<div id="j_id2039:2:j_id2043" className="procedure-image">
<img src={pago2} alt="Pago y devolución de tasas." />
</div>
<div id="j_id2039:2:j_id2045" className="procedure-link">
<a
href="https://sede.dgt.gob.es/es/otros-tramites/pago-de-tasas/"
target="_blank"
title="Acceder a Pago y devolución de tasas."
className="link"
>
Pago y devolución de tasas.
</a>
</div>
</div>
</div>
<div
id="j_id2039:3:j_id2041"
className="col-md-3 col-sm-6 col-xs-12"
>
<div id="j_id2039:3:j_id2042" className="small-box">
<div id="j_id2039:3:j_id2043" className="procedure-image">
<img src={permiso} alt="Permiso por puntos." />
</div>
<div id="j_id2039:3:j_id2045" className="procedure-link">
<a
href="https://sede.dgt.gob.es/es/permisos-de-conducir/consulta-tus-puntos/index.shtml"
target="_blank"
title="Acceder a Permiso por puntos."
className="link"
>
Permiso por puntos.
</a>
</div>
</div>
</div>
</div>

<a
id="anguloDerecho"
className="right carousel-control"
href="https://sedeapl.dgt.gob.es:7443/WEB_NCIT_CONSULTA/solicitarCitaPaso1.faces#myCarouselInferior"
data-slide="next"
>
<svg
className="svg-inline--fa fa-angle-right fa-w-8"
aria-hidden="true"
focusable="false"
data-prefix="fa"
data-icon="angle-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
></path>
</svg>
</a>
</div>
</div>
</div>
</div>
Expand Down
Binary file added src/assets/img/g.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 504d5e2

Please sign in to comment.