2
respuestas

por Estudiante

| 19.5k xp | 15 posts

index.html

<!DOCTYPE html>
<html lang="en-co">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header></header>
    <main>
        <div class="con-titulo">
            <div class="titulo">
                <h1>Eleva tu negocio digital a otro nivel <strong> con un Front - end de calidad!</strong> </h1>
            </div>
        </div>
        
        <div>
            <p>
                <strong class="Nombre">Hola! Soy Ana García, </strong> desarrolladora Front-end con especialización en
                React, HTML y CSS. Ayudo a pequeños
                negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
            </p>
        </div>

        <div class="con-img">
            <img src="Imagem.png" alt="Imagen de Ana Garcia trabajando">
        </div>

        <div>
            <a href="https://www.instagram.com">Instagram</a>
            <a href="https://www.GitHub.com">GitHub</a>
        </div>

    </main>
    <footer></footer>
</body>

</html>

style.css

body {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}
h1 {
    font-size: 300%;
    text-align: center;
}

p{
    font-size: 140%;
}

img{
    width: 20%;
}
.con-img{
    display: flex;
    justify-content: center;

}
strong {
    color: #a8babe
}
.con-titulo {
    margin: 2% 5% 2% 5%;

}
.titulo {
    background-color: rgb(209, 81, 81);
    justify-content: center;
    display: flex;
}
.Nombre{
    color: rgb(91, 219, 130);
}

a {
    display: inline-block;
    background-color: #007bff; /* Color de fondo */
    color: #fff; /* Color del texto */
    text-decoration: none; /* Quita el subrayado del enlace */
    padding: 10px 20px; /* Espacio interno del botón */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 2s ease; /* Transición suave al pasar el mouse */
  }
  
a:hover {
    background-color: #e0e5eb; /* Color de fondo al pasar el mouse */
  }

2 respuestas

por Daysibel.pitter

| 343k xp | 1197 posts

Instructor

hace 2 semanas

Hola , espero que estés muy bien.

Gracias por tu aporte en el foro. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Te recomiendo que puedas interactuar con el resto de nuestros compañeros por nuestro Discord.

En virtud de que en Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

De esa manera si tienes algún comentario, opinión, recomendación o algún consejo, o para compartir los desafios, sea por el Discord, con certeza por ahí llegará a más personas.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios

por Germaini33

| 39.9k xp | 72 posts

Tecnico

hace 2 semanas

index.html

Desafio de formacion

Este es mi primer proyecto german

    <img src ="imagen.png.jpg" alt="Diseño realizado por German" style="height: 50%"><br>
    <button>Instagram</button>
    <button>facebook</button>
    <p>Este ejercicio es para presentar la informacion de mi primer paguina wed dejo mis redes sociales </p>
</main>
<footer>
    <p style="color: white">Autor: German muñoz / HTML y CSS: ambientes de desarrollo, estructura de archivos y tags</p>
</footer>

 /*Fondo con degradado azul a blanco*/
 body {
    background: linear-gradient(to bottom,#643AE0, #3A7BE0);
    font-family: "Poppins", sans-serif;
    font-style: italic;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
 }

 /* Estilo para el header */
 header{
   background-color: #9C85E0;
   color:#3A47E0 ;
   font-weight: bold;
   padding: 20px;
   font-size: 24px;
   width: 100%;
   text-align: center;
 }

 /* Estilo para los botones */
 button {
   background: linear-gradient(45des,#E03A4D,#E06F3A ) ;
   color: #E0523A;
   border: none;
   padding: 10px 20px;
   margin: 10px;
   font-size: 18px;
   border-radius: 5px;
   cursor: pointer;
   transition: 10s;
 }
 
 button hover {
   opacity: 0.2;
 }

 /* Estilo para la imagen con sonbras descargadas */
 img {
  width:300px;
  height: auto;
  box-shadow: 10px 10px 20px rgba(128, 128green, 128blue, 0.5alpha);
  border-radius: 10px;
  margin-top: 20; 
 }

 /* Estilo para los parrafos */

 p {
  font-family: "popping", sans- serif;
  font-style: italic;
  font-size: 18px;
  color: #E08C64;
  padding: 10px;
  max-width: 800;
  margin: auto;
 }

 /* Estilo para el footer */
 footer{
 background-color:#E0A53A ;
 color:#E03A6F ;
 padding: 15px;
 width: 100%;
 text-align: center;
 position: absolute;
 bottom:0
 }