Realicé el diseño html y CSS de 2 páginas web en codepen, quería que el diseño con sus colores se asemejara al diseño del blog así que le incorporé los mismos colores, quise también poner la misma tipografía pero no la encontre en Google Fonts.
A continuación el link de mi primer página :)
Y aquí el link a mi segunda página :)
Para la primer página utilicé este código html:
<!DOCTYPE html>
<html lang="es">
<head> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kulim+Park:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600;1,700&family=Poetsen+One&display=swap" rel="stylesheet">
<h1 >¡BIENVENIDOS A MI WEB!</h1>
<h2>Mi primer pagina web</h2>
<p>Esta es mi primer pagina web, asi que paciencia, ya mejoraré! Ahora voy a intentar pegar un enlace externo a mi blog y una imagen o video, a ver como resulta.</p>
<a href="https://saramsaramsaram.blogspot.com/" target="_blank">mi blog:)</a>
<p>A contunuación mi cancion favorita del momento!</p>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/QU9c0053UAU"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
<a href="https://codepen.io/Angelica-Ines-Lovaiza/full/qEEWpMR">Mi otra pagina web:)</a>
</head>
Y este código CSS:
/* Fondo azul noche */
body {
background-color: #0a0a23; /* azul noche */
margin: 0;
padding: 20px;
font-family: sans-serif;
color: #f5f5f5; /* color blanco tiza por defecto */
}
/* Título principal (h1) */
h1 {
color: #f8c8dc; /* rosa pastel */
text-align: center;
font-family: 'Hello Minimalist', sans-serif;
font-size: 36px; /* tamaño grande */
margin-top: 50px;
}
/* Subtítulo (h2) */
h2 {
color: #f5f5f5; /* blanco tiza */
font-family: Arial, sans-serif;
font-size: 20px; /* tamaño 14px */
text-align: left;
}
/* Texto de párrafo (p) */
p {
color: #f5f5f5; /* blanco tiza */
font-size: 16px;
line-height: 1.6;
}
/* Enlace */
a {
color: #f8c8dc; /* rosa pastel */
font-family: Calibri, sans-serif;
text-decoration: none;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
a:hover {
text-decoration: underline;
}
/* Centrar el video */
iframe {
display: block;
margin: 30px auto;
width: 80%;
max-width: 900px;
height: 500px;
}
h1 {
font-family: "Poetsen One", sans-serif;
font-weight: 400;
font-style: normal;
}
p {
font-family: "Kulim Park", sans-serif;
font-weight: 200
font-style: normal;
}
Para la segunda página utilicé este código html:
<!DOCTYPE html>
<html lang="es">
<head> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Coiny&family=Kulim+Park:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600;1,700&family=Poetsen+One&display=swap" rel="stylesheet">
<h1>¡BIENVENIDOS A MI SEGUNDA WEB!</h1>
<h2>Mi segunda pagina web :)</h2>
<p>Esta es mi segunda pagina web para seguir practicando y enlazarla a mi primer pagina.
A contunuacion el link de mi blog!</p>
<a href="https://saramsaramsaram.blogspot.com/" target="_blank">mi blog:)</a>
<p>A contunuación mi cancion favorita del momento!</p>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/ECqGCH1TfLY"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
Comentarios
Publicar un comentario