HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portafolio de Juan camilo</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header>
<h1 class="titulo-blog">PORTAFOLIO</h1>
</header>
<main>
<div class="parrafo">
<p>
Hola un gusto, soy Juan Camilo estudiante de Ingenierías De Sistemas, estoy enfocado
en la parte <strong class="texto-destacado">backend en el manejo de base de datos</strong>. Me gusta la
programación y seria un placer trabajar
contigo.
</p>
</div>
<img src="img/perfil.JPG" alt="Imagen perfil">
<div class="container">
<a href="https://github.com/Dark-ss">Github</a>
<a href="https://instagram.com">Instagram</a>
</div>
</main>
<footer>
<p>© Todos los derechos reservados a Juan camilo Calderón</p>
</footer>
</body>
</html>
CSS
*{
padding: 0;/*reset*/
margin: 0;
}
body{
background-color: rgb(16,0,46);
color: white;
margin: 0;
padding: 0;
}
.texto-destacado{
color: rgb(255,87,34);/*destacar texto*/
}
.titulo-blog{ /*clase titulo*/
text-align: center;/*centrar el texto*/
margin-right: 190px;
font-weight: bold;
color: rgb(246,174,45);
}
.parrafo{
font-size: 25px;/*agrandar la letra*/
text-align: center;
margin: 80px 250px;
width: 49%;
}
footer p{
font-size: 20px;
text-align: center;
}
a{
padding: 20px;/*agrega espacios para agrandar el enlace*/
font-size: 20px;
border-radius: 10px;
background-color: aqua;
text-decoration: none;/*quita el subrayado del enlace*/
margin: 20px;
}
img{
position: absolute;
top: 15%;
right: 10%;
height: 300px;
width: 300px;
border-radius: 15px;
}
.container{
margin-top: 50px;
margin-right: 14%;
text-align: center;
}
footer p{
color: blanchedalmond;
margin-top: 50px;
margin-right: 210px;
}
HTML Noticias urgentes
<p class="Urgente">Noticias Urgentes Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
assumenda dignissimos recusandae nulla soluta corrupti modi reiciendis quaerat, ducimus natus quibusdam
cumque veritatis obcaecati corporis sint distinctio dolorem consequuntur blanditiis!</p>
CSS Noticias urgentes
.Urgente{/*clase noticias urgentes*/
color: red;
margin: 20px;
padding: 20px;
width: 500px;
height: 100px;
}