Buenas noches. Terminé esta práctica pero no me quedó igual que en los videos. Copié el código de los compañeros que lo compartieron y obtengo lo mismo.
Como se ve en la imagen, lo que está en fieldset me quedó con ese borde y la tabla con los bordes así en blanco.
Hola José, espero que estés bien.
Bueno... te pido por favor para que comparta tu código con nosotros, así podemos ver lo que sucedió.
Comparto un video para ayudarte a compartir tu código en nuestro foro: https://youtu.be/tevEdARFxGU
Continúa con tus estudios y cualquier duda estaremos aquí!!
Hola como estás? Gracias por responder. Ahí lo comparto.
contacto.html
<html>
<head>
<meta charset="UTF-8">
<title>Contacto - Barbería Alura</title>
<link rel = "stylesheet" href = "reset.css">
<link rel = "stylesheet" href = "../Clase 2/style.css">
</head>
<body>
<header>
<div class = "caja">
<h1><img src = "../Clase 2/imagenes/logo.png" alt ="Logo de Barbería Alura"></h1>
<nav>
<ul>
<li><a href = "../Clase 1/index.html">Home</a></li>
<li><a href = "../Clase 2/productos.html">Productos</a></li>
<li><a href = "../Clase 3/contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main>
<form>
<label for = "nombreapellido">Nombre y Apellido</label>
<input type="text" id = "nombreapellido" class = "input-padron" required>
<label for = "correoelectronico"> Correo Electrónico</label>
<input type="email" id = "correoelectronico" class = "input-padron" required placeholder="email@dominio.com">
<label for = "telefono">Teléfono</label>
<input type = "tel" id = "telefono" class = "input-padron" required placeholder="(xx) xxxx xxxx">
<label for = "mensaje">Mensaje</label>
<textarea cols = "70" rows = "10" id = "mensaje" class = "input-padron" required></textarea>
<fieldset>
<legend>¿Cómo le gustaría que lo contactemos?</legend>
<label for = "radio-emal"><input type = "radio" name = "contacto" value = "email" id = "radio-email">Email</label>
<label for = "radio-telefono"><input type = "radio" name = "contacto" value = "telefono" id = "radio-telefono">Teléfono</label>
<label for = "radio-whatsapp"><input type = "radio" name = "contacto" value = "whatsapp" id = "radio-whatsapp" checked>Whatsapp</label>
</fieldset>
<fieldset>
<legend>¿En cuál horario prefiere ser atendido?</legend>
<select>
<option>Mañana</option>
<option>Tarde</option>
<option>Noche</option>
</select>
</fieldset>
<label class = "checkbox"><input type = "checkbox" checked>¿Le gustaría recibir novedades de la Barbería Alura?</label>
<input type = "submit" value = "Enviar formulario" class = "enviar">
</form>
<table>
<thead>
<tr>
<th>Día</th>
<th>Horario</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lunes</td>
<td>08h - 20h</td>
</tr>
<tr>
<td>Miércoles</td>
<td>08h - 20h</td>
</tr>
<tr>
<td>Viernes</td>
<td>08h - 20h</td>
</tr>
</tbody>
</table>
</main>
<footer>
<img src="../Clase 2/imagenes/logo-blanco.png" alt ="Logo de Barbería Alura">
<p class = "copyright">© Copyright Barbería Alura - 2022</p>
</footer>
</body>
</html>style.css
body{
font-family: 'Montserrat', sans-serif;
}
header{
background-color: #BBBBBB;
padding: 20px 0;
}
.caja{
position: relative;
width: 940px;
margin: 0 auto;
}
nav{
position: absolute;
top: 110px;
right: 0;
}
nav li{
display: inline;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover{
color: #c78c19;
text-decoration: underline;
}
.productos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding : 30px 20px;
box-sizing: border-box;
border: 4px solid #000000;
border-radius: 10px;
}
.productos li:hover{
border-color:#c78c19;
}
.productos li:hover h2{
font-size: 33px;
}
.productos li:active{
border-color: #088c19;
}
.productos{
width: 940px;
margin: 0 auto;
padding: 50px;
}
.productos h2{
font-size: 30px;
font-weight: bold;
}
.producto-descripcion{
font-size: 18px;
}
.producto-precio{
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
footer{
text-align: center;
background: url(imagenes/bg.jpg);
padding: 40px;
}
.copyright{
color: #FFFFFF;
font-size: 13px;
margin: 20px;
}
form{
margin: 40px 0;
}
form label, form legend{
display: block;
font-size: 20px;
margin: 0 0 10px;
}
.input-padron{
display: block;
margin: 0 0 20px;
padding: 10px 25px;
width: 50%;
}
.checkbox{
margin: 20px 0;
}
.enviar{
width: 40%;
padding: 15px 0;
font-size: 18px;
font-weight: bold;
color: white;
background-color: orange;
border: none;
border-radius: 5px;
transition: 1s all;
cursor:pointer;
}
.enviar:hover{
background: darkorange;
transform: scale(1.2);
}
table{
margin: 40px 40px;
}
thead{
background: #555555;
color: white;
font-weight: bold;
}
td, th{
border: 1px solid #000000;
padding: 8px 15px;
}
/*CSS para nuestra home*/
.banner{
width: 100%;
}
.principal{
padding: 3em 0;
background: #FEFEFE;
width: 940px;
margin: 0 auto;
}
.titulo-principal{
text-align: center;
font-size: 2em;
margin: 0 0 1em;
clear: left;
}
.principal p{
margin: 0 0 1em;
}
.principal strong{
font-weight: bold;
}
.principal em{
font-style: italic;
}
.utensillos{
width: 120px;
float: left;
margin: 0 20px 20px 0;
}
.mapa{
padding: 3em 0;
background: linear-gradient(#FEFEFE, #888888);
}
.diferenciales{
padding: 3em 0;
background: #888888;
}
.mapa p{
margin: 0 0 2em;
text-align: center;
}
.mapa-contenido{
width: 940px;
margin: 0 auto;
}
.contenido-diferenciales{
width: 640px;
margin: 0 auto;
}
.lista-diferenciales{
width: 40%;
display: inline-block;
vertical-align: top;
}
.items{
line-height: 1.5;
}
.items:first-child{
font-weight: bold;
}
.items:before{
content:"★"
}
.imagen-diferenciales{
width: 60%;
transition: 400ms;
box-shadow: 10px 10px 30px 15px black;
}
.imagen-diferenciales:hover{
opacity:0.3;
}
.video{
width: 560px;
margin: 3em auto;
}
@media screen and (max-width:480px){
h1{
text-align: center;
}
nav{
position: static;
}
.lista-diferenciales, .imagen-diferenciales{
width: 100%;
}
.caja, .principal, .mapa-contenido, .contenido-diferenciales, .video{
width: auto;
}
}
Hola José Matías Flores, me pasó lo mismo. El fieldset en CSS lo puse así:
fieldset {
border: none;
}
El código CSS de las tablas lo deje de esta manera y también lo solucione.
table {
margin: 40px 40px;
border-collapse: collapse;
}
thead {
background-color: #5d5d5d;
color: #ffffff;
font-weight: bold;
}
td,th {
border: 1px solid #000000;
padding: 8px 20px;
}Saludos, que estés bien.