Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Img #4

Open
wants to merge 32 commits into
base: main
Choose a base branch
from
Open
Changes from 2 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
fffe8ec
Agregamos paquete Json
Lina-1985-cloud Jan 14, 2022
8445efb
realizamos maquetado en html y comenzamos con estilos
Lina-1985-cloud Jan 14, 2022
ac79b17
Merge pull request #1 from nathaly-creat/maquetado
nathaly-creat Jan 14, 2022
de7c2f2
agregamos estilos al html
Lina-1985-cloud Jan 17, 2022
25c528a
Merge pull request #2 from nathaly-creat/css
Lina-1985-cloud Jan 17, 2022
7161d80
index_js_DOM
Lina-1985-cloud Jan 18, 2022
dac9442
Merge pull request #3 from nathaly-creat/funtion
Lina-1985-cloud Jan 18, 2022
848ab44
validación del form
Lina-1985-cloud Jan 20, 2022
3d882e9
Merge pull request #4 from nathaly-creat/cardFuntion
Lina-1985-cloud Jan 20, 2022
ce3195d
algoritmo Lunh
Lina-1985-cloud Jan 21, 2022
feeaa92
Merge pull request #5 from nathaly-creat/validator
Lina-1985-cloud Jan 21, 2022
06f1ca1
fin del algoritmo Lunh
Lina-1985-cloud Jan 24, 2022
c8e35f9
Merge pull request #6 from nathaly-creat/lunh
Lina-1985-cloud Jan 24, 2022
4d5ce42
terminamos maskify y Readme
Lina-1985-cloud Jan 25, 2022
000e13d
Merge pull request #7 from nathaly-creat/maskify
Lina-1985-cloud Jan 25, 2022
8cbaa9d
del
Lina-1985-cloud Jan 26, 2022
2172447
Merge pull request #8 from nathaly-creat/readme
Lina-1985-cloud Jan 26, 2022
2b2ea4d
foto logo
Lina-1985-cloud Jan 26, 2022
26db9e0
Merge pull request #9 from nathaly-creat/Readme2
Lina-1985-cloud Jan 26, 2022
2833fec
Terminamos el Readme
Lina-1985-cloud Jan 26, 2022
ea6a4cb
Merge pull request #10 from nathaly-creat/imagenes
Lina-1985-cloud Jan 26, 2022
1d79109
correción imagenes
Lina-1985-cloud Jan 26, 2022
674df00
Merge pull request #11 from nathaly-creat/correcion
Lina-1985-cloud Jan 26, 2022
bb83816
prototipo papel
Lina-1985-cloud Jan 26, 2022
8c17e89
Merge pull request #12 from nathaly-creat/correcion
Lina-1985-cloud Jan 26, 2022
e64c781
Arreglo cards y form
Lina-1985-cloud Jan 27, 2022
65a803d
Merge pull request #13 from nathaly-creat/estilos
Lina-1985-cloud Jan 27, 2022
4003610
alert corregido
Lina-1985-cloud Jan 27, 2022
db6c88e
Merge pull request #14 from nathaly-creat/alert
Lina-1985-cloud Jan 27, 2022
fdd9015
eliminar comentarios
Lina-1985-cloud Jan 28, 2022
c762bf6
Merge pull request #15 from nathaly-creat/comentatios
Lina-1985-cloud Jan 28, 2022
7d6fd6d
images-delete
Lina-1985-cloud Jan 28, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@
## 1. Titulo del Proyecto:

PetShop.
<img src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642432139/logopng_raq7he.png" alt="Logotipo de Pet Shop" width = "200px" height ="200px">
<img src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642432139/logopng_raq7he.png" alt="Logotipo de Pet Shop" width = "200px" height ="100px">

## 2. Resumen del proyecto

25 changes: 13 additions & 12 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Open+Sans:wght@300;400;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Indie+Flower&family=Mochiy+Pop+P+One&family=Montserrat+Alternates:wght@300;400;500&family=Open+Sans:wght@300;400;700;800&display=swap" rel="stylesheet">

<script src="https://kit.fontawesome.com/4de09098c3.js" crossorigin="anonymous"></script>
</head>
@@ -36,16 +36,16 @@

<!-- Section cards productos -->

<h1 id="saludo"></h1>
<h1 id="saludo">Hola 👋 Bienvenid@ a Pet Shop la mejor tienda para tú mascota 🐾</h1>
<main class="screen_cards">
<!-- card producto 1 -->
<div class="cards">
<figure>
<img src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642434623/consulta_dqh7vy.jpg" alt="Atencion Medica">
</figure>
<div class="description">
<h2 class="titulo">Atención Médica</h2><br>
<p>Chat y videollamada 24/7 de forma ilimitada y consultas a domicilio bajo criterio<br> médico y previo agendamiento.</p>
<h2 class="titulo">Atención Médica</h2>
<p>Chat y videollamada 24/7 de forma ilimitada y consultas a domicilio bajo criterio médico y previo agendamiento.</p>
<p class="precio_titulo">Precio:</p>
<span class="precio"><b> 60.000 $</b></span>
</div>
@@ -58,7 +58,7 @@ <h2 class="titulo">Atención Médica</h2><br>
<img src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642435343/alimentos_x8djx5.jpg" alt="imagen del producto">
</figure>
<div class="description">
<h2 class="titulo">Alimentos</h2><br>
<h2 class="titulo">Alimentos</h2>
<p>Pensando en la alimentación de tus mascotas, acá encuentras gran variedad.</p>
<p class="precio_titulo">Precio:</p>
<span class="precio"> 40.000 $</span>
@@ -72,12 +72,13 @@ <h2 class="titulo">Alimentos</h2><br>
<img class="img" src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642435343/accesorios_ehh7ov.jpg" alt="imagen del producto">
</figure>
<div class="description">
<h2 class="titulo">Accesorios y Juguetes</h2><br>
<p>Pasar más tiempo con tu mascota los hará<br> muy felices a los dos. Encuentra en Pet Shop <br>una fantástica variedad de juguetes novedosos y divertidos para entretener al consentido de la casa.</p>
<h2 class="titulo">Accesorios y Juguetes</h2>
<p>Encuentra en Pet Shop una fantástica variedad de juguetes novedosos y divertidos para entretener al consentido de la casa.</p>
<p class="precio_titulo">Precio:</p>
<span class="precio">10.000$</span>
<span class="agotado">Producto no disponible</span>
</div>
<button name ="btn_3" class="btn_3" id="btn_3" disabled>Comprar</button><span class="agotado">Producto no disponible</span>
<button name ="btn_3" class="btn_3" id="btn_3" disabled>Comprar</button>
</div>
</main>

@@ -89,16 +90,16 @@ <h2 class="titulo">Accesorios y Juguetes</h2><br>
<img class="img" src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642435343/accesorios_ehh7ov.jpg" alt="imagen del producto">
</figure>
<div class="description">
<h2 class="titulo">Accesorios y Juguetes</h2><br>
<p>Pasar más tiempo con tu mascota los hará<br> muy felices a los dos. Encuentra en Pet Shop <br>una fantástica variedad de juguetes novedosos y divertidos para entretener al consentido de la casa.</p>
<h2 class="titulo">Accesorios y Juguetes</h2>
<p>Encuentra en Pet Shop una fantástica variedad de juguetes novedosos y divertidos para entretener al consentido de la casa.</p>
<p class="precio_titulo">Precio:</p>
<span class="precio">10.000$</span>
</div>
</div>

<!-- Crear formulario para imprimir datos en la tarjeta de crédito-->
<div class="container_creditCard">
<form class="creditCard " action="">
<form class="creditCard" action="">
<label><input class="number" type="text" id="numberCard" placeholder="#### #### #### ####"></label>
<label><input class="name" type="text" id="nameCard"></label>
</form>
@@ -124,7 +125,7 @@ <h2 class="titulo">Accesorios y Juguetes</h2><br>
</div>
</div>

<!-- footer-->
<!-- footer-->
<footer>
<figure>
<img class="logoFooter" src="https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642432139/logopng_raq7he.png" alt="Logotipo de Pet Shop">
142 changes: 79 additions & 63 deletions src/style.css
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ h2{
}

.container_menu img{
width: 200px;
width: 150px;
margin-left: 10px;
margin-top: 10px;
}
@@ -54,7 +54,7 @@ h2{
}

.menu li a{
font-size: 20px;
font-size: 16px;
text-decoration: none;
color: black;
padding: 10px;
@@ -91,27 +91,31 @@ h2{
/* main */

main{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
margin-top: 100px;
margin-bottom: 50px;
width: 100%;
height: 500px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-content: center;
align-items: center;
padding: 20px;
}


main .cards{
padding: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 2px 16px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 16px -2px rgba(0,0,0,0.75);
box-shadow: 0px 2px 16px -2px rgba(0,0,0,0.75);
margin: 20px;
margin: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
padding: 10px;
}
h1{
font-size: 25px;
font-size: 18px;
font-family: 'Montserrat Alternates', sans-serif;
text-align: center;
padding: 30px;
background-color: #d8ddef;
@@ -123,28 +127,29 @@ h1{
}

.cards img{
width: 200px;
height: 200px;
width: 80px;
height: 80px;
border-radius: 10px;
}


.cards p{
font-size: 20px;
font-size: 12px;
font-weight: 400;
}

.cards button{
background-color: var(--btn);
color: white;
border-style: none;
padding: 20px 30px;
font-size: 20px;
padding: 10px 20px;
font-size: 16px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 10px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 10px -3px rgba(0,0,0,0.75);
box-shadow: 0px 3px 10px -3px rgba(0,0,0,0.75);
cursor: pointer;
margin-top: 20px;
/* margin-top: 20px; */
}

.cards .btn_2:hover{
@@ -157,22 +162,23 @@ h1{
}

.cards .agotado{
padding: 15px;
padding: 10px;
color: #a31621;
font-weight: 700;
font-size: 12px;
}

.precio{
color: #009DAE;
font-size: 25px;
font-size: 16px;
font-weight: 700;
}

p.precio_titulo{
color: black;
font-weight: 700;
font-size: 25px;
margin-top: 15px;
font-size: 16px;
margin-top: 10px;
}


@@ -184,46 +190,63 @@ p.precio_titulo{
max-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;


}
.container_form .cards{
width: 400px;
padding: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 2px 16px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 16px -2px rgba(0,0,0,0.75);
box-shadow: 0px 2px 16px -2px rgba(0,0,0,0.75);;
margin: 20px;
box-shadow: 0px 2px 16px -2px rgba(0,0,0,0.75);
margin: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 350px;
width: 300px;
margin-left: 150px;
padding: 10px;
}

.container_form img{
width: 200px;
height: 200px;
width: 150px;
height: 150px;
}

.container_creditCard{
padding: 20px;
width: 600px;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.container_creditCard input{
width: 50%;
}
.container_form .tarjetas{
display: flex;
justify-content: center;
align-items: center;

}

.container_form .tarjeta{
width: 150px;
width: 100px;
height: 80px;
}

.container_form .visa{
background-color: #222c69;
border-radius: 20px;
width: 80px;
height: 50px;
}
.container_form .master{
background-color: #003664;
border-radius: 20px;
width: 80px;
height: 50px;
}

form label{
@@ -250,71 +273,64 @@ form label{
}

.creditCard{
padding: 50px;
background-image: url("https://res.cloudinary.com/dtaq1ip2g/image/upload/v1642442817/credi-card_oh6ezf.png");
background-repeat: no-repeat;
background-size: 30vw;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

margin-bottom: 20px;

}
.creditCard label{
margin-top: 20px;
background-size: contain;
margin-bottom: 10px;
height: 200px;
}

.creditCard input{
margin-top: 100px;
margin-top: 110px;
margin-bottom: 10px;

}
input.number{
width: 20vw;
padding: 5px;
border: none;
background: transparent;
font-size:20px
font-size:14px;
margin-left: 180px;
}

input.name{
margin-top: 0px;
width: 20vw;
padding: 5px;
margin-bottom: 10px;
border: none;
background: transparent;
font-size:30px;
font-family: 'Caveat', cursive;;
font-size:20px;
font-family: 'Caveat', cursive;
margin-left: 180px;

}

.formulario{
height: 200px;
margin-top: 20px;
width: 50%;
}


.formulario input{
width:80%;
width:100%;
border-radius: 10px;
display: block;
justify-content: center;
align-items: center;
padding: 10px;
margin-left: 40px;
padding: 8px;
margin-bottom: 5px;

}

.formulario .pagar{
width: 80%;
margin-left: 40px;
width: 50%;
margin-left: 30%;
}

section{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
width: 100%;
width: 60%;
}



/* footer*/

footer{
@@ -334,11 +350,11 @@ footer ul{

footer ul li{
padding: 15px;
font-size: 30px;
font-size: 20px;
}

.mail{
font-size: 25px;
font-size: 20px;
}

i{