Created
April 10, 2025 16:11
-
-
Save JCervantesB/4ddd468dadf211a76b24c4139c85ec18 to your computer and use it in GitHub Desktop.
corrección AntonioF. Diaz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CEO Digital Manager</title> | |
| <link rel="preload" href="css/style.css" as="style"> | |
| <link href="css/style.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header> | |
| <h3>AntonyD.CEO Digital Manager</h3> | |
| <section> | |
| <h1>Educacion & Freelance</h1> | |
| <div class="nav-bg"> | |
| <nav class="navegacion-principal contenedor"> | |
| <a href="#">Inicio</a> | |
| <a href="#">Nosotros</a> | |
| <a href="#">Soluciones Portafolio</a> | |
| <a href="#">Contactos</a> | |
| </nav> | |
| </div> | |
| </section> | |
| </header> | |
| <main class="contenedor sombra"> | |
| <h2>Mis Servicios</h2> | |
| <div class="servicios"> | |
| <section class="servicio"> | |
| <div class="iconos"> | |
| <h3>Documentacion Digital Estandares Habilitacion</h3> | |
| <img src="img/Docdigit.png" alt="Documentación Digital"> | |
| </div> | |
| </section> | |
| <section class="servicio"> | |
| <div class="iconos"> | |
| <h3>RIPS - Generacion y Reporte</h3> | |
| <img src="img/RIPS.png" alt="RIPS"> | |
| </div> | |
| </section> | |
| <section class="servicio"> | |
| <div class="iconos"> | |
| <h3>Cursos en linea</h3> | |
| <img src="img/Cursos.png" alt="Cursos"> | |
| </div> | |
| </section> | |
| </div> <!-- .servicios --> | |
| <section> | |
| <h2>Contacto</h2> | |
| <form class="formulario"> | |
| <fieldset> | |
| <legend>Contactános llenando todos los campos</legend> | |
| <div class="contenedor-campos"> | |
| <div class="campo"> | |
| <label>Nombre</label> | |
| <input class="input-text" type="text" placeholder="Nombre"> | |
| </div> | |
| <div class="campo"> | |
| <label>Teléfono</label> | |
| <input class="input-text" type="tel" placeholder="Teléfono"> | |
| </div> | |
| <div class="campo"> | |
| <label>Correo</label> | |
| <input class="input-text" type="email" placeholder="Email"> | |
| </div> | |
| <div class="campo"> | |
| <label>Mensaje</label> | |
| <textarea class="input-text"></textarea> | |
| </div> | |
| </div> <!-- .contenedor-campos --> | |
| <div class="enviar"> | |
| <input class="input-text" type="submit" value="Enviar"> | |
| </div> | |
| </fieldset> | |
| </form> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>Todos los Derechos reservados Antony D. CEO</p> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --blanco: #ffffff; | |
| --oscuro: #212121; | |
| --primario: #FFC107; | |
| --azul-color: #000; | |
| --gris: #757575; | |
| --grisClaro: #DFE9F3; | |
| } | |
| html { | |
| font-size: 62.5%; | |
| } | |
| body { | |
| font-size: 16px; /* 1rem = 10px */ | |
| font-family: 'Krub', sans-serif; | |
| background-image: linear-gradient(to top, var(--grisclaro) 0%, var(--blanco) 100%); | |
| } | |
| .titulo { | |
| text-align: center; | |
| font-size: 3,8rem | |
| } | |
| .sombra{ | |
| -webkit-box-shadow: 0px 5px 15px 0px rgba(112,112,112,1); | |
| -moz-box-shadow: 0px 5px 15px 0px rgba(112,112,112,1); | |
| box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54); | |
| background-color: var(--blanco); | |
| padding: 2rem; | |
| } | |
| .titulo span { | |
| text-align: center; | |
| font-size: 2rem | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 3.8rem; | |
| } | |
| span { | |
| font-size: 2rem; | |
| } | |
| .contenedor { | |
| width: 120rem; | |
| margin: 0 auto; | |
| } | |
| .nav-bg { | |
| background-color: var(--secundario); | |
| } | |
| .navegacion-principal { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .navegacion-principal a { | |
| color: var(--blanco); | |
| text-decoration: none; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| padding: 1rem; | |
| } | |
| .navegacion-principal a:hover { | |
| background-color: var(--primario); | |
| color: var(--oscuro); | |
| } | |
| .hero { | |
| background-image: url(../img/imageneduc.jpg); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| position: relative; | |
| } | |
| .contenido-hero { | |
| position: absolute; | |
| background-color: rgba( 0, 0, 0 .07 ); /** Anterior **/ | |
| background-color: rgb( 0 0 0 / 70% ); | |
| width: 100%; | |
| height: 100%; | |
| text-align: center; | |
| } | |
| /**servicios **/ | |
| .servicios{ | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| column-gap: 1rem; | |
| } | |
| .servicio { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align:center; | |
| } | |
| .servicio h3 { | |
| } | |
| .servicio .iconos { | |
| display: flex; | |
| flex-direction: column-reverse; | |
| height: 15rem; | |
| width: 15rem; | |
| justify-content: space-evenly; | |
| align-items: center; | |
| background-color: var(--primario); | |
| border-radius: 50%; | |
| } | |
| /**contacto **/ | |
| .formulario { | |
| background-color: var(--gris); | |
| width: min(60rem, 100%); /** utilizar el valor mas pequeño **/ | |
| } | |
| .formulario fieldset { | |
| border: none; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| border-radius: 1rem; | |
| } | |
| .formulario fieldset { | |
| border: none; | |
| } | |
| .formulario legend { | |
| text-align: center; | |
| font-size: 1.8rem; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| margin-bottom: 2rem; | |
| color: var(--primario); | |
| } | |
| .contenedor-campos { | |
| } | |
| .campo { | |
| margin-bottom: 1rem; | |
| } | |
| .campo label { | |
| color: var(--blanco); | |
| font-weight: bold; | |
| margin-bottom: 5rem; | |
| display: block; | |
| } | |
| .imput-text { | |
| width: 100%; | |
| border: none; | |
| padding: 1.5rem; | |
| border-radius: 5rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment