Haga lo que hicimos | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

Código HTML

<!DOCTYPE html>
<html lang="en-col">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEWS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1 class="titulo-blog">NEWS-TECH
        <br>
        <strong class="sub-tl">In the present. Into the future</strong></h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="articles.html">Articles</a></li>
                <li><a href="ebooks.html">Ebooks</a></li>
            </ul>
        <h2>Neurocomputing</h2>
        <p>Neuromorphic computing involves designing computer chips that mimic the human brain's neural structures and processing methods. These chips process information in ways that are fundamentally different from traditional computers, leading to more efficient handling of tasks like pattern recognition and sensory data processing. <strong class="Texto.destacado">This technology can produce substantial energy efficiency and computational power improvements, particularly in applications requiring real-time learning and adaptation.</strong></p>
        <img src="img.webp" alt="Neurocomputing image" width="400" height="300" class="brain-image">
    </header>
    <br>
    <footer>
        <div>Copyright&copy; 2024 - Created by Diego H. All Rights Reserved</div>
    </footer>
</body>
</html>

Código CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: rgb(233, 241, 247);
}
.titulo-blog {
    margin: 1cap;
    color: #0d1b2a;
    font-family: 'Courier New', Courier, monospace;
    text-align: center; 
    font-size: 40px;
}
.sub-tl {
    color: #15618d;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    font-weight: bold;
    font-size: 25px;
}
nav ul {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    background-color: #5b48ad;
}
nav ul li {
    display: inline;
    margin: 15px;
}
nav ul li a {
    color: white;
    text-decoration: none;
}
h2 {
    margin-top: 2cap;
    color: #1a5679;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 0.5cap;
}
p {
    color: rgb(5, 61, 83);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    text-align: justify;
    padding: 17px;
    padding-top: 0;
}
.brain-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
footer {
    font-size: 10px;
    text-align: center;
}