añado toda la web de cards

abarredaprof · Feb 13, 2024 · 2eb399f · 2eb399f
1 parent 53ce111
commit 2eb399f
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 0 deletions.
diff --git a/estilos.css b/estilos.css
@@ -0,0 +1,67 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ background-color: rgb(200, 198, 198);
+}
+
+body{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: Arial, Helvetica, sans-serif;
+}
+.contenedor{
+ width: 100%;
+ display: flex;
+ max-width: 1100px;
+}
+.card{
+ width: 100%;
+ margin:30px;
+ padding: 10px;
+ border-radius: 15px;
+ overflow: hidden;
+ background: rgb(200, 198, 198);
+ box-shadow: 1px 3px 15px rgba(0,0,0,0.2);
+ cursor:default; /*No cambia a modo insertar texto*/
+ transition: all 400ms ease;/* para que las transiciones sean suaves */
+
+}
+.card:hover{
+ box-shadow: 5px 5px 20px rgba(0,0,0,0.4); 
+ transform:translateY(-5%)
+}
+.card img{
+ border-radius: 5px;
+ box-shadow: 1px 3px 15px rgba(0,0,0,0.4);
+ width: 100%;
+ height: 240px;
+}
+.card .contenido{
+ padding: 15px;
+ text-align: center;
+ }
+.card .contenido p{
+ line-height: 1.3;
+ color: wh;
+ margin-bottom: 25px;
+ }
+.card .contenido h3{
+ font-weight: 400;
+ margin-bottom: 15px;
+}
+.card .contenido a{
+ margin-bottom: 15px;
+ text-decoration: none;
+ padding: 10px;
+ margin-top: 10px;
+ color:brown;
+ border: 1px solid brown;
+ border-radius: 5px;
+ transition: all 400ms ease;
+}
+.card .contenido a:hover{
+ background-color: brown;
+ color: white;
+}
diff --git a/img/img1.jpg b/img/img1.jpg
diff --git a/img/img2.jpg b/img/img2.jpg
diff --git a/img/img3.jpg b/img/img3.jpg
diff --git a/img/rec1.jpg b/img/rec1.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>cards</title>
+ <link rel="stylesheet" type="text/css" href="estilos.css">
+</head>
+<body>
+ <div class="contenedor">
+ <div class="card">
+ <figure>
+ <img src="img/img1.jpg" alt="silent"/> 
+ </figure>
+ <div class="contenido">
+ <h3>Silent guitar</h3>
+ <p>Guitarra electrica desmontable y autoamplificada realizada durante el confinamiento
+ para regalársela a un gran amigo.</p>
+ <a href="https://youtu.be/eOUtsybozjg?si=REn0GMevjkktUxW6">¡Disfuta!</a>
+ </div>
+ </div>
+ <div class="card">
+ <figure>
+ <img src="img/img2.jpg" alt="silent"/> 
+ </figure>
+ <div class="contenido">
+ <h3>Bajo de 5 cuerdas</h3>
+ <p>Bajo de 5 cuerdas tallado y pulido a mano. 
+ El cuerpo es hueco y aun así pesa demasiado. Eso le confiere un gran sustain.</p>
+ <a href="https://youtu.be/Gg9cNGHl-bg?si=hMRZQkeA-mk5HD8d">¡Disfuta!</a>
+ </div>
+ </div>
+ <div class="card">
+ <figure>
+ <img src="img/img3.jpg" alt="silent"/> 
+ </figure>
+ <div class="contenido">
+ <h3>Bajo y guitarra</h3>
+ <p>Proyecto de modificación de un J-Bass y una guitarra Les Paul. Fué un trabajo de montaje, pintura, ajuste y lacado.</p>
+ <a href="https://youtu.be/1w7OgIMMRc4?si=u9HcNuaTLkCJSlcq">¡Disfuta!</a>
+ </div>
+ </div>
+ </div> 
+</body>
+</html>