Para crear tu página web se crean primero las divisiones de tu sitio:
<body><header><h1>Headerh1>
header>
<nav><ul><li><ahref="#">Inicioa>li>
<li><ahref="#">Acerca dea>li>
<li><ahref="#">Contactoa>li>
ul>
nav>
<main><sectionclass="main-content"><h2>Contenido Principalh2>
<p>Este es el contenido principal de nuestra página.p>
<divclass="container"><divclass="card"><imgsrc="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&w=600"alt="User Image"><divclass="info"><h2>User Nameh2>
<p>Email: [email protected]>
<p>Phone: +123456789p>
<buttontype="button"name="seguir">Seguir ->button>
div>
div>
<divclass="card"><imgsrc="https://media.istockphoto.com/id/1306406393/es/foto/border-collie-retrato-de-perro-con-un-gato-escondido-detr%C3%A1s.jpg?b=1&s=612x612&w=0&k=20&c=DirNzP3XEq5SJIamsFjn-hQgSkgbuZAlq5SsttQorDU="alt="User Image"><divclass="info"><h2>User Nameh2>
<p>Email: [email protected]>
<p>Phone: +123456789p>
<buttontype="button"name="seguir">Seguir ->button>
div>
div>
<divclass="card"><imgsrc="https://images.pexels.com/photos/104373/pexels-photo-104373.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="User Image"><divclass="info"><h2>User Nameh2>
<p>Email: [email protected]>
<p>Phone: +123456789p>
<buttontype="button"name="seguir">Seguir ->button>
div>
div>
div>
section>
<asideclass="sidebar"><h2>Barra lateralh2>
<p>Esta es la barra lateral de nuestra página.p>
aside>
main>
<footer><p>Pie de páginap>
footer>
body>
Una vez hecho las divisiones de tu pagina web se procede a realizar la estilizacion del mismo:
<span class="hljs-comment">/* styles.css */</span>
<span class="hljs-selector-tag">body</span> {
<span class="hljs-attribute">font-family</span>: Arial, sans-serif;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">background-color</span>: azure;
}
<span class="hljs-selector-tag">header</span>, <span class="hljs-selector-tag">nav</span>, main, <span class="hljs-selector-tag">footer</span> {
<span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>;
}
<span class="hljs-selector-tag">header</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#333</span>;
<span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
<span class="hljs-attribute">text-align</span>: center;
}
<span class="hljs-selector-tag">nav</span> {
<span class="hljs-attribute">background</span>: slateblue;
<span class="hljs-attribute">color</span>:whitesmoke;
}
<span class="hljs-selector-tag">nav</span><span class="hljs-selector-tag">ul</span> {
<span class="hljs-attribute">list-style-type</span>: none;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
}
<span class="hljs-selector-tag">nav</span><span class="hljs-selector-tag">li</span> {
<span class="hljs-attribute">display</span>: inline;
<span class="hljs-attribute">margin-right</span>: <span class="hljs-number">20px</span>;
}
<span class="hljs-selector-tag">nav</span><span class="hljs-selector-tag">a</span> {
<span class="hljs-attribute">text-decoration</span>: none;
<span class="hljs-attribute">color</span>: white;
}
main {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">flex-wrap</span>: wrap;
}
<span class="hljs-selector-class">.main-content</span> {
<span class="hljs-attribute">flex</span>: <span class="hljs-number">70%</span>;
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">flex-direction</span>: column;
</fieldset>
}
<span class="hljs-selector-class">.sidebar</span> {
<span class="hljs-attribute">flex</span>: <span class="hljs-number">30%</span>;
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f2f2f2</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>;
}
<span class="hljs-selector-tag">footer</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#333</span>;
<span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
<span class="hljs-attribute">text-align</span>: center;
}
<span class="hljs-comment">/* styles.css */</span>
<span class="hljs-comment">/* Estilos para pantallas más pequeñas */</span>
@media screen and (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">768px</span>) {
<span class="hljs-selector-tag">nav</span> {
<span class="hljs-attribute">text-align</span>: center;
}
<span class="hljs-selector-tag">nav</span><span class="hljs-selector-tag">ul</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">justify-content</span>: center;
<span class="hljs-attribute">flex-wrap</span>: wrap;
}
<span class="hljs-selector-tag">nav</span><span class="hljs-selector-tag">li</span> {
<span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span>;
}
main {
<span class="hljs-attribute">flex-direction</span>: column;
}
<span class="hljs-selector-class">.main-content</span>, <span class="hljs-selector-class">.sidebar</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
}
}
<span class="hljs-selector-class">.card</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f0f0f0</span>;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span><span class="hljs-number">0</span><span class="hljs-number">10px</span> rgba(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.1</span>);
<span class="hljs-attribute">overflow</span>: hidden;
<span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">20px</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">530px</span>;
<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">30px</span>;
}
<span class="hljs-selector-class">.card</span><span class="hljs-selector-tag">img</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">height</span>:<span class="hljs-number">300px</span>;
<span class="hljs-attribute">display</span>: block;
}
<span class="hljs-selector-class">.info</span> {
<span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-number">150px</span>;
}
<span class="hljs-selector-tag">button</span> {
<span class="hljs-attribute">background</span>: <span class="hljs-number">#5DADE2</span>;
<span class="hljs-attribute">color</span>: white;
<span class="hljs-attribute">border-color</span>: <span class="hljs-number">#5DADE2</span>;
<span class="hljs-attribute">padding</span>:<span class="hljs-number">6px</span>;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
}
.container{
<span class="hljs-attribute">display</span>: flex;
}
En el codigo css anterios se pueden evaluar los distintos tipos de posicionamiento quese pueden utilizar en tu sitio web para acomodar tus elementos.