Skip to content

Commit

Permalink
Proyecto Terminado
Browse files Browse the repository at this point in the history
  • Loading branch information
@Deaf-Web-Admin
Deaf-Web-Admin committed Jul 4, 2023
1 parent 3f5b8c1 commit e09a858
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 67 deletions.
119 changes: 93 additions & 26 deletions Base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,53 @@ a:hover {
main,article {
background-color: var(--Color2);
min-height: 100vh;
padding: 20px;
}


article img{
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
}

form {
width: 500px;
margin: 0 auto;
text-align: left;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

input,textarea {
width: 100%;
padding: 12px 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}

input[type="submit"] {
background-color: #4caf50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type="submit"]:hover {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}

input[type="reset"]:hover {
background-color: red;
}

.animacion1 {
animation: efectoanimado 2s 2.5;
}
Expand Down Expand Up @@ -92,28 +137,32 @@ footer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: normal;
align-items: normal;
align-content: normal;
border:1px solid black;
justify-content: center;
align-items: center;
align-content: center;
}

.flex-container img {
height: 250px;
object-fit: cover;
}

.flex-items:nth-child(1) {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
align-self: center;
order: 0;
border:1px solid black;}
margin: 0 auto;
}
.flex-container2 {
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: center;
border:1px solid black;}}
}

.flex-items2:nth-child(1) {
display: block;
Expand All @@ -122,15 +171,16 @@ border:1px solid black;}}
flex-basis: auto;
align-self: center;
order: 0;
border:1px solid black;}}
}

.flex-items2:nth-child(2) {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: center;
order: 0;
border:1px solid black;}}
}

/* ----------------------------------------------
* Generated by Animista on 2023-7-3 9:59:9
Expand All @@ -144,7 +194,8 @@ border:1px solid black;}}
* animation heartbeat
* ----------------------------------------
*/
@-webkit-keyframes heartbeat {

@-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
Expand Down Expand Up @@ -234,22 +285,38 @@ border:1px solid black;}}
}

/* 320px */
@media only screen and (min-width: 320px) {

@media only screen and (max-width: 800px) {
article img{
width: 100%;
}


/* 540px */
@media only screen and (min-width: 540px) {

main,article {
min-height: 50vh;
padding: 0px;
}
nav{
display:none;
}
header {
height: 15vh;
}
form {
width: auto;
margin: 0 auto;
text-align: center;
padding: 5px;
border: 1px solid #ccc;
border-radius: 1px;
}
input,
textarea {
width: 80%;
padding: 5px;
margin-bottom: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 10px;
}

/* px */
@media only screen and (min-width: 800) {

}

/* px */
@media only screen and (min-width: 1024px) {

}
107 changes: 66 additions & 41 deletions Base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,60 +43,85 @@ <h1>Beethovens Nightmare</h1>
<article>
<img
src="https://i.ytimg.com/vi/C7dbcV5Atoc/maxresdefault.jpg"
class="animacion1"
class="animacion1" alt="integrantes de la banda"
/>
</article>

<!-- primero el grid luego flex en columnas -->
<a name="venta"></a>
<h1>Featured Collection</h1>
<div>
<div class="flex-container">
<div class="flex-items">
<div class="flex-container2">
<div class="flex-items2">
<img src="https://camisetasfutbolybaloncesto.com/wp-content/uploads/2022/08/camiseta-japon-anime-2022-2023.jpg" alt="camiseta" width="250px"/>
</div>
<div class="flex-items2"><button class="heartbeat">Comprar</button></div>
</div>
<div class="flex-container2">
<div class="flex-items2">
<img src="https://www.brildor.com/media/catalog/product/cache/974c34425da90e66a0188f0522978d98/c/a/camiseta-unisex-100_-algodon-165g-d6.jpg" alt="camiseta" width="250px"/>
</div>
<div class="flex-items2"><button class="heartbeat">Comprar</button></div>
</div>
<div class="flex-container2">
<div class="flex-items2">
<img src="https://casadelasbatas.com/21736-large_default/camiseta-basica-negra-rossini.jpg" alt="camiseta" width="250px"/>
</div>
<div class="flex-items2"><button class="heartbeat">Comprar</button></div>
</div>
<div class="flex-container2">
<div class="flex-items2">
<img src="https://www.friking.es/7549-large_default/camisetas-manga-corta-hombre-stranger-friends.jpg" alt="camiseta" width="250px"/>
</div>
<div class="flex-items2"><button class="heartbeat">Comprar</button></div>
</div>
<div class="flex-container2">
<div class="flex-items2">
<img src="https://mrpersonalizados.com/wp-content/uploads/2020/06/camiseta-barata-verde.jpg" alt="camiseta" width="250px"/>
</div>
<div class="flex-items2"><button class="heartbeat">Comprar</button></div>
</div>
<div class="flex-container2">
<div class="flex-items2">
<img src="https://www.regalopublicidad.com/images/fc4at/00831d63daa4efcf6754776d06b1/210-210/camiseta-165-gr-de-roly-modelo-dogo-azul.jpg" alt="camiseta" width="250px"/>
</div>
<div class="flex-items2"><button class="heartbeat">Comprar</button></div>
</div>
<div class="flex-container2">
<div class="flex-items2">
<img src="https://unonueveocho.es/3642-large_default/camiseta-seleccion-republicana.jpg" alt="camiseta" width="250px"/>
</div>
<div class="flex-items2"><button class="heartbeat">Comprar</button></div>
</div>
<div class="flex-container2">
<div class="flex-items2">
<img src="https://m.media-amazon.com/images/I/61re5U-CrnS._AC_UY1100_.jpg" alt="camiseta" width="250px"/>
</div>
<div class="flex-items2"><button class="heartbeat">Comprar</button></div>
</div>
</div>
</div>
<div>
<div>
<img src="https://camisetasfutbolybaloncesto.com/wp-content/uploads/2022/08/camiseta-japon-anime-2022-2023.jpg" alt="camiseta" class="areagridimagen"/>
</div>
<div>
<button class="heartbeat">Comprar</button>
</div>
</div>
<div>
<!--
<img src="https://www.brildor.com/media/catalog/product/cache/974c34425da90e66a0188f0522978d98/c/a/camiseta-unisex-100_-algodon-165g-d6.jpg" alt="camiseta" class="areagridimagen"/>
<button class="heartbeat">Comprar</button>
<img src="https://casadelasbatas.com/21736-large_default/camiseta-basica-negra-rossini.jpg" alt="camiseta" class="areagridimagen"/>
<button class="heartbeat">Comprar</button>
<img src="https://www.friking.es/7549-large_default/camisetas-manga-corta-hombre-stranger-friends.jpg" alt="camiseta" class="areagridimagen"/>
<button class="heartbeat">Comprar</button>
<img src="https://mrpersonalizados.com/wp-content/uploads/2020/06/camiseta-barata-verde.jpg" alt="camiseta" class="areagridimagen"/>
<button class="heartbeat">Comprar</button>
<img src="https://www.regalopublicidad.com/images/fc4at/00831d63daa4efcf6754776d06b1/210-210/camiseta-165-gr-de-roly-modelo-dogo-azul.jpg" alt="camiseta" class="areagridimagen"/>
<button class="heartbeat">Comprar</button>
<img src="https://unonueveocho.es/3642-large_default/camiseta-seleccion-republicana.jpg" alt="camiseta" class="areagridimagen"/>
<button class="heartbeat">Comprar</button>
<img src="https://m.media-amazon.com/images/I/61re5U-CrnS._AC_UY1100_.jpg" alt="camiseta" class="areagridimagen"/>
<button class="heartbeat">Comprar</button>
-->
</article>
<article>
<a name="video"></a>


<!-- codigo extraido de -->
<!-- https://cybmeta.com/como-hacer-un-iframe-responsive#:~:text=B%C3%A1sicamente%20la%20soluci%C3%B3n%20consiste%20en,en%20funci%C3%B3n%20del%20aspect%20ratio.-->
<div class="embed-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2WkfI9GH_AI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </article>
</div>
<article>
<a name="video"></a>
<!-- codigo extraido de -->
<!-- https://cybmeta.com/como-hacer-un-iframe-responsive#:~:text=B%C3%A1sicamente%20la%20soluci%C3%B3n%20consiste%20en,en%20funci%C3%B3n%20del%20aspect%20ratio.-->
<div class="embed-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2WkfI9GH_AI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</div>
</article>

<article>
<a name="contactar"> </a>
<h1>Gracias por contactar con Nosotros</h1>
<form>
<input type="text" placeholder="Su Nombre" />
<input type="text" placeholder="Su correo" />
<input type="textarea" placeholder="Su mensaje" />
<input type="reset" Value="Limpiar" />
<input type="Submit" Value="Enviar" />
<input type="text" placeholder="Su Nombre" required />
<input type="email" placeholder="Su correo" required />
<input type="textarea" placeholder="Su mensaje" required/>
<input type="reset" Value="Limpiar" />
<input type="Submit" Value="Enviar" class="heartbeat" />
</form>
</article>

Expand Down

0 comments on commit e09a858

Please sign in to comment.