Skip to content

Commit 0c926c9

Browse files
juangralargjuangralarg
committed
005
1 parent ae5162f commit 0c926c9

17 files changed

+602
-0
lines changed

‎Entregas/Proyecto/css/estilosCarrito.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
:root{
2+
--color-acento: rgb(124, 20, 16);
3+
--color-link: red;
4+
--color-text: rgb(26, 23, 56);
5+
--color-acento-claro: rgb(18, 18, 236);
6+
}
7+
html{
8+
font-family: 'Lucida Sans', 'Lucida Grande';
9+
}
10+
a{
11+
text-decoration: none;
12+
color: var(--color-text);
13+
}
14+
a:hover:not(carrito:hover){
15+
color: var(--color-acento);
16+
font-weight: bold;
17+
}
18+
header nav{
19+
display: flex; /* Nodo al lado del otro */
20+
justify-content: space-between;
21+
margin: 0 30px;
22+
}
23+
header nav div{
24+
display: flex; /* Nodo al lado del otro */
25+
align-items: center;
26+
gap: 30px;/* Separa iconos NAV */
27+
position: relative; /* Relatico al numerode items del carrito (numero-carrito) */
28+
}
29+
#numero-carrito{
30+
background-color: var(--color-link);
31+
border-radius: 100%; /* Redondea el fondo */
32+
display:inline-block;
33+
width: 20px;
34+
line-height: 20px;
35+
aspect-ratio: 1;
36+
text-align: center;
37+
position: absolute;
38+
top:30%; /* Sube o baja en numero del carrito */
39+
right: 26%; /* acomoda numero a la derecha del carrito */
40+
transform: translate(-50%, -50%);
41+
z-index: 1; /* Hace que el texto este encima de la imagen del carrito */
42+
}
43+
#logoHeader{
44+
height: 50px;
45+
}
46+
header nav img{
47+
height: 40px;
48+
}

‎Entregas/Proyecto/css/estilosMain.css‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-size: cover;
9+
background-attachment: fixed;
10+
font-family: sans-serif;
11+
font-weight: normal;
12+
font-size: 100%;
13+
color: #a6d6ef;
14+
margin: 0;
15+
background-color: #0f4c75;
16+
/* AJUSTE DE IMAGEN BACKGROUND*/
17+
background-image: url("../img/1329.jpg") ;
18+
background-size:cover;
19+
background-repeat: no-repeat;
20+
background-position: center center;
21+
background-attachment: fixed;
22+
}
23+
#mensajeLogin {
24+
25+
font-family: sans-serif;
26+
color:burlywood;
27+
margin: 0;
28+
padding: 0;
29+
font-weight:lighter;
30+
font-size:smaller;
31+
font-size: smaller;
32+
text-align: center;
33+
-webkit-animation-duration: 2s;
34+
animation-duration: 2s;
35+
-webkit-animation-fill-mode: both;
36+
animation-fill-mode: both;
37+
38+
}
39+
40+
41+
.formuser {
42+
display: none;
43+
}
44+
45+
.btnLogin, .btnRegistro {
46+
/*border: 5px solid #eeeff1; /*anchura, estilo y color borde*/
47+
/*padding: 2px; /*espacio alrededor texto*/
48+
/*background-color: #2e518b; /*color botón*/
49+
/*color: #ffffff; /*color texto*/
50+
text-decoration: none; /*decoración texto*/
51+
text-transform: uppercase; /*capitalización texto*/
52+
font-family: 'Helvetica', sans-serif; /*tipografía texto*/
53+
/*border-radius: 50px; /*bordes redondos*/
54+
}
55+
56+
/*
57+
* FORMATEO DE CUADRO DE LOGUIN
58+
*/
59+
60+
#formContainer {
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
margin: 0;
65+
padding: 0;
66+
min-width: 100vw;
67+
min-height: 100vh;
68+
width: 100%;
69+
height: 100%;
70+
}
71+
#formlogin img {
72+
73+
padding: 0;
74+
margin: 0;
75+
max-width: 80%; /* Asegura que la imagen no exceda el ancho del contenedor */
76+
max-height: 80%; /* Asegura que la imagen no exceda la altura del contenedor */
77+
display: block; /* Asegura que la imagen se comporte como bloque */
78+
margin: auto; /* Centra la imagen dentro del contenedor */
79+
border-radius: 10px 0px 10px 0px ; /*Redondea borde de la imagen*/
80+
}
81+
82+
83+
#contenido {
84+
max-width: 320px;
85+
width: 100%;
86+
position: absolute;
87+
top: 50%;
88+
left: 50%;
89+
transform: translate(-50%, -50%);
90+
}
91+
92+
.formlogin {
93+
font-size: 200%;
94+
color:#bbe1fa;
95+
text-align: center;
96+
margin-bottom: 20px;
97+
}
98+
99+
#formlogin {
100+
width: 100%;
101+
padding: 50px 30px;
102+
background-color: #3282b8;
103+
border-radius: 3px;
104+
-moz-border-radius: 3px;
105+
-webkit-border-radius: 3px ;
106+
107+
box-sizing: border-box;
108+
}
109+
110+
#formlogin input {
111+
font-family: sans-serif;
112+
font-size: 110%;
113+
color: #1b262c;
114+
115+
display: block;
116+
width: 100%;
117+
height: 40px;
118+
119+
margin-bottom: 10px;
120+
padding: 5px 5px 5px 10px;
121+
122+
box-sizing: border-box;
123+
124+
border: none;
125+
border-radius: 3px 3px 3px 3px;
126+
-moz-border-radius: 3px 3px 3px 3px;
127+
-webkit-border-radius: 3px 3px 3px 3px;
128+
}
129+
130+
#formlogin input::placeholder {
131+
font-family: sans-serif;
132+
color: #E4E4E4;
133+
}
134+
135+
#formlogin button {
136+
font-family: sans-serif;
137+
font-size: 110%;
138+
color:#1b262c;
139+
width: 100%;
140+
height: 40px;
141+
border: none;
142+
143+
border-radius: 3px 3px 3px 3px;
144+
-moz-border-radius: 3px 3px 3px 3px;
145+
-webkit-border-radius: 3px 3px 3px 3px;
146+
147+
background-color: #bbe1fa;
148+
149+
margin-top: 10px;
150+
}
151+
152+
#formlogin button:hover {
153+
background-color: #0f4c75;
154+
color:#bbe1fa;
155+
}

‎Entregas/Proyecto/img/1329.jpg‎

7.84 MB
Loading

‎Entregas/Proyecto/img/busqueda.png‎

38 KB
Loading

‎Entregas/Proyecto/img/carrito-de-compras.png‎

60.2 KB
Loading

‎Entregas/Proyecto/img/cerrar-sesion red.png‎

14.8 KB
Loading

‎Entregas/Proyecto/img/cerrar-sesion.png‎

18.5 KB
Loading

‎Entregas/Proyecto/img/logo - copia.jpg‎

10.7 KB
Loading

‎Entregas/Proyecto/img/logo.jpg‎

35.9 KB
Loading

‎Entregas/Proyecto/img/shopping-cart.png‎

11.9 KB
Loading

0 commit comments

Comments
 (0)