Como primer paso quise buscar un diseño de una pagina web, por esta razón busque una plantilla para obtener inspiración. La plantilla original que escogí fue la siguiente:
(https://arcade-fluid-demo-es.squarespace.com/)
Dividí en dos el desarrollo de esta pagina: el header y el cuerpo
A. Texto en el lado izquierdo del header
B. La imagen “Arcade” centrada en el header
C. El botón "Ver en vivo"
D. Finalmente, en la parte superior derecha, los logos de redes sociales.
En el caso de A y D fueron desarrollados como listas no ordenadas “ul”.
El código para el inciso A fue el siguiente:
<ulstyle="display: flex; gap: 1rem;list-style-type: none;"><li>Inicio</li><li>Programa</li><li>Tienda</li><li>Blog</li>Sin embargo pasa algo diferente en el caso de las imágenes de los logos (inciso D) en esta ocasión agregue el link para que redireccionara a las redes sociales:
<ulstyle="display: flex; gap: 1rem;"><ulstyle="display: flex; gap: 1rem;list-style-type: none;"><li><ahref="https://www.instagram.com"><imgsrc="https://cdn-icons-png.flaticon.com/512/87/87390.png"style="height: 50px; width: 50px;"></a></li><li><ahref="https://www.twitter.com"><imgsrc="https://about.twitter.com/content/dam/about-twitter/x/brand-toolkit/logo-black.png.twimg.1920.png"style="height: 50px; width: 50px;"></a></li><li><ahref="https://www.facebook.com"><imgsrc="https://i.pinimg.com/1200x/1c/0f/5a/1c0f5aa867d76987fd9758d892bbc8eb.jpg"style="height: 50px; width: 50px;"></a></li><li><ahref="https://www.tusitio.com/carrito"><imgsrc="https://w7.pngwing.com/pngs/225/984/png-transparent-computer-icons-shopping-cart-encapsulated-postscript-shopping-cart-angle-black-shopping.png"style="height: 50px; width: 50px;"></a></li></ul>Nótese que en ambos casos use el “list-style-type: none” para así eliminar el punto que agrega HTML a los listados
B. La imagen arcade el código fue el siguiente:
< <img style="width: 20%;
height: 50%;
display: block;
margin-left: auto;
margin-right: 50px;"
id="img1" src="https://images.squarespace-cdn.com/content/v1/5ef4d3d11f62b221542f09cc/1614099302678-1N6Y7RVYHT2E605I0EAK/ARCADE-DEMO.png?format=1500w"
alt="Arcade;">>C. Para el botón de “Ver en Vivo” le agregue un borde con la propiedad border, también se agrego bordes redondos con la propiedad border-radius:0. El código fue el siguiente:
<button style="width: 150px;
height: 50px;
border-radius: 0;
border: 2px solid blue;
color: blue;"
type="button">Ver en vivo</button>
Para el cuerpo del código se agrego un div que contiene la imagen de fondo, en este caso también se uso diseño flex-box para poder alinear el titulo, el párrafo y el botón.
El código completo de la pagina fue le siguiente:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><headerstyle="display: flex;
justify-content: space-between;
flex-direction: row-reverse;"><div></div><nav><ulstyle="display: flex; gap: 1rem;list-style-type: none;"><li>Inicio</li><li>Programa</li><li>Tienda</li><li>Blog</li><imgstyle="width: 20%;
height: 50%;
display: block;
margin-left: auto;
margin-right: 50px;"id="img1"src="https://images.squarespace-cdn.com/content/v1/5ef4d3d11f62b221542f09cc/1614099302678-1N6Y7RVYHT2E605I0EAK/ARCADE-DEMO.png?format=1500w"alt="Arcade;"><buttonstyle="width: 150px;
height: 50px;
border-radius: 0;
border: 2px solid blue;
color: blue;"type="button">Ver en vivo</button><nav><ulstyle="display: flex; gap: 1rem;"><ulstyle="display: flex; gap: 1rem;list-style-type: none;"><li><ahref="https://www.instagram.com"><imgsrc="https://cdn-icons-png.flaticon.com/512/87/87390.png"style="height: 50px; width: 50px;"></a></li><li><ahref="https://www.twitter.com"><imgsrc="https://about.twitter.com/content/dam/about-twitter/x/brand-toolkit/logo-black.png.twimg.1920.png"style="height: 50px; width: 50px;"></a></li><li><ahref="https://www.facebook.com"><imgsrc="https://i.pinimg.com/1200x/1c/0f/5a/1c0f5aa867d76987fd9758d892bbc8eb.jpg"style="height: 50px; width: 50px;"></a></li><li><ahref="https://www.tusitio.com/carrito"><imgsrc="https://w7.pngwing.com/pngs/225/984/png-transparent-computer-icons-shopping-cart-encapsulated-postscript-shopping-cart-angle-black-shopping.png"style="height: 50px; width: 50px;"></a></li></ul></nav></ul></nav></header><divstyle="background-image: url('https://images.pexels.com/photos/7046979/pexels-photo-7046979.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: contain;
background-repeat: no-repeat;
height: 850px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;"><h1style="color: white; text-align: center;">GAMER LEAGUE</h1><pstyle="color: white; text-align: center;">Transmisión en vivo a las 16:00 h, EST todos los martes</p><buttonstyle="height: 8%; width: 12% ; border-radius: 0;border: 2px solid white;background-color: transparent;color:white">Ver</button></div></body></html>```
