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><htmllang="en"><head><metacharset="UTF-8"><metaname="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: 020px;
z-index: 1000;
}
navul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
navulli {
color: white;
}
navimg {
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><divclass="nav-image"><imgsrc="C:\Users\User\Pictures\cancer1.png"alt="medalla"></div><inputtype="text"placeholder="name"></nav><divclass="container"><divclass="tittle">ONCOLOGIA</div><divclass="tittle">Premio de reconocimiento</div><ahref="/"class="btn">Descubrimientos</a><divclass="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><sectionclass="text-content"><p>Avances</p><ulclass="clasificacion"><li>Genetica avanzada</li><li>AZURE</li><li>IBM</li><li>Microsoft</li></ul><p>Estudios desarrollados</p><ulclass="clasificacion2"><li>Manzanas</li><li>Uvas</li><li>Peras</li><li>Melones</li><p>Sectores en aplicación</p><ulclass="clasificacion3"><li>Manzanas</li><li>Uvas</li><li>Peras</li><li>Melones</li></section><ulclass="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><divclass="search-form"><formaction=""><labelfor="search">Search</label><inputtype="text"id="search"></form></div><divclass="platzi-link"><ahref="https://medu.com/home">Go to medu</a></div></div></body></html>
