Desafio | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

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>&copy; 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;
}