Final-Project/index.html at main · rRubedog/Final-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Ruben</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section style="display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 0; width: 100%;">
            <div id="links" style="border: 1px solid #ccc; padding: 10px; flex: 1; text-align: center;">
            <h2>Links</h2>
            <ul>
                <li><a href="https://example.com">Example Link 1</a></li>
                <li><a href="https://example.com">Example Link 2</a></li>
                <li><a href="https://example.com">Example Link 3</a></li>
            </ul>
            </div>
            <div id="photos" style="border: 1px solid #ccc; padding: 10px; flex: 1; text-align: center;">
            <h2>Photos</h2>
            <img src="photo1.jpg" alt="Photo 1" style="width: 100%; max-width: 300px;">
            <img src="photo2.jpg" alt="Photo 2" style="width: 100%; max-width: 300px;">
            </div>
            <div id="articles" style="border: 1px solid #ccc; padding: 10px; flex: 1; text-align: center;">
            <h2>Articles</h2>
            <article>
            <h3>Article Title 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </article>
            <article>
            <h3>Article Title 2</h3>
            <p>Quisque vel turpis a quam tincidunt tincidunt.</p>
            </article>
            </div>
        </section>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 About Me. All rights reserved.</p>
    </footer>
</body>
</html>