He realizado algunas clasificaciones y correcciones con ayuda de ChatGPT. También analicé el código y adapté algunas secciones de las cajas impuestas allí. Acomodé una imagen en el nav superior y la anclé. Además, extendí el cuadro para que fuera más definido y pudiera servir como superficie organizativa de las cajas. Agregué animaciones al ingresar a la página (’@keyframes fadeIn’). Utilicé ‘grid-column: span’ para definir claramente la ubicación de la información de manera organizada. Adapté los colores y dejé algunos efectos en los títulos correspondientes. También ajusté las dos barras de búsqueda para que se vieran más estéticas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 62.5%;
}
body {
margin: 0;
padding-top: 70px; /* Añade espacio para la barra de navegación */
background-color: #000000;
}
.container {
display: grid;
width: 100vw;
height: calc(100vh - 70px); /* Resta la altura de la barra de navegación */
background: rgb(10, 164, 235);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 1fr auto;
gap: 20px;
padding: 20px;
box-sizing: border-box;
}
.item {
background: rgb(43, 241, 199);
}
.nav-image {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
nav {
width: 100%;
height: 70px;
background: rgb(15, 100, 100);
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 1000;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
nav ul li {
color: white;
}
nav img {
height: 60px;
width: auto;
}
.tittle {
grid-column: span 2;
background: rgb(238, 231, 238);
text-align: center;
padding: 20px;
box-sizing: border-box;
border: 1px solid hotpink;
animation: fadeIn 2s ease-out;
}
.btn {
background: slategray;
text-align: center;
padding: 20px;
color: white;
text-decoration: none;
}
.btn:hover {
background: darkslategray;
}
p {
font-size: 1rem;
color: rgb(5, 3, 0);
margin: 0;
}
p::first-letter {
color: blue;
}
p::before {
content: "🧠";
}
p::after {
content: "🧬";
}
p:hover {
color: rgb(43, 61, 226);
}
::placeholder {
color: chocolate;
}
.master {
color: azure;
}
a {
background: skyblue;
text-align: center;
padding: 20px;
text-decoration: none;
color: inherit;
}
button {
background: slategray;
width: 100px;
height: 100px;
}
.es {
background: orangered;
}
.search-form {
grid-column: span 4;
text-align: center;
}
.platzi-link {
grid-column: span 4;
text-align: center;
}
.text-content {
grid-column: span 4;
background: rgb(248, 245, 245);
padding: 20px;
box-sizing: border-box;
border: 1px solid rgb(238, 223, 231);
overflow: auto;
animation: fadeIn 2s ease-out;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.imagen1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #F8C471;
width: 100px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 20px;
-webkit-box-shadow: 0px0px81px15pxrgba(248, 196, 113, 0.6);
-moz-box-shadow: 0px0px81px15pxrgba(248, 196, 113, 0.6);
box-shadow: 0px0px81px15pxrgba(248, 196, 113, 0.6);
}
.imagen1 {
box-shadow: 0px0px10px#F8C471;
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
</style>
</head>
<body>
<nav>
<ul>
<li>About you</li>
<li>Contact us</li>
</ul>
<div class="nav-image">
<img src="C:\Users\User\Pictures\cancer1.png" alt="medalla">
</div>
<input type="text" placeholder="name">
</nav>
<div class="container">
<div class="tittle">ONCOLOGIA</div>
<div class="tittle">Premio de reconocimiento</div>
<a href="/" class="btn">Descubrimientos</a>
<div class="text-content">
<h3>
La oncología es la rama de la medicina que se especializa en el estudio, diagnóstico y tratamiento del cáncer. Los oncólogos son los médicos especializados en esta área, y trabajan en equipo con otros profesionales de la salud para ofrecer el mejor tratamiento posible a los pacientes con cáncer.
</h3>
</div>
<section class="text-content">
<p>Avances</p>
<ul class="clasificacion">
<li>Genetica avanzada</li>
<li>AZURE</li>
<li>IBM</li>
<li>Microsoft</li>
</ul>
<p>Estudios desarrollados</p>
<ul class="clasificacion2">
<li>Manzanas</li>
<li>Uvas</li>
<li>Peras</li>
<li>Melones</li>
<p>Sectores en aplicación</p>
<ul class="clasificacion3">
<li>Manzanas</li>
<li>Uvas</li>
<li>Peras</li>
<li>Melones</li>
</section>
<ul class="text-content">
<p>Aplicaciones</p>
<li>Oncologia pediatrica</li>
<li>Oncologia obstetrica</li>
<li>Genetica</li>
<li>CRISPR</li>
<li>Alteraciones geneticas</li>
<li>Dermatitis</li>
<li>ETS</li>
<li>Bacteriologia</li>
<li>Quimica</li>
<li>Farmaceutica</li>
<li>Reumatologia</li>
</ul>
<div class="search-form">
<form action="">
<label for="search">Search</label>
<input type="text" id="search">
</form>
</div>
<div class="platzi-link">
<a href="https://medu.com/home">Go to medu</a>
</div>
</div>
</body>
</html>
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
