DESAFIO | HTML y CSS: header, footer y variables CSS | Alura Latam

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About me</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="header">
        <nav class="header__menu">
            <a href="index.html" class="header__menu-link">Home</a>
            <a href="about.html" class="header__aboutme-link">About me</a>
        </nav>
    </header> <!--First site-->
    <main class="starting-point"> <!--Second division -->
        <section class="starting-point__content">
    
            <h1 class="starting-point__title-blog">Education</h2>
            <ul class="arrow-list">
                <li > Bachelor of Science: Systems Engineering</strong><br>
                    Universidad El Bosque - Bogotá<br> </li>
                        <li>Completed University-level Coursework: Training Camp Colombia 2022 ICPC, Politecnico Gran Colombiano</li>
                        <li>Completed University-level Coursework: Primera maratón interna de programación UEB 2022, Universidad el Bosque</li>
                        <li>COMPETENCIA CCPL2022, 2022</li>
                        <li>Professional Development Studies: Formación Desarrollo Personal, 2024</li>
                    </ul>
                </li>
            </ul>
            <br>
            <h1 class="starting-point__title-blog"> Skills </h1>
            <ul class="skills-list">
                <li >Hibernate</li>
                <li>Springboot</li>
                <li>JAVA</li>
                <li>MySQL</li>
                <li>PL/SQL</li>
                <li>JDBC</li>
                <li>JSF</li>
                <li>JavaScript</li>
            </ul>
        </section>
        <img src="./assets/icon_UEB.png" alt="University el Bosque">
    </main>
    <footer class="footer">
        <p>Made by Sofia Morales</p>
    </footer>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
    padding: 0;
    margin: 0;
}
.header{
    padding: 2% 0% 0% 10%;
}
.header__menu{display: flex;
gap: 80px;}
.header__menu-link{
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #e49042;
    text-decoration: none;

}
.header__aboutme-link{
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #e49042;
    text-decoration: none;

}
.footer{
    background-color: #e49042;
    padding: 23.6px;
    color: #000600;
    text-align: center;
    font-family: "Montserrat", sans-serif;

}
.arrow-list {
    list-style-type: none;
    padding: 0;

    font-family: "Montserrat", sans-serif;
}

.arrow-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.arrow-list li::before {
    content: '►';
    position: absolute;
    left: 0;
    color: #e49042;
    border-width: -1em;
}
.skills-list{
    font-family: "Montserrat", sans-serif;
    list-style-type: none;
    padding: 0;
}
.skills-list li{
    transition: #e49042 0.2s ease;
}

.skills-list :hover{
    background-color: #e49042;
}