basic-website-main/index.html at main · myKalling/basic-website-main · 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
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>

<head>
    <title>Basic Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bogle&family=Oswald&display=swap');
    </style>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <header>
        <!-- Navigation Menu -->
        <nav id="nav-list">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
        <button type="button" onclick="toggleMenu(event)">=</button>
    </header>
    <h1>Home</h1>
    <section>
        <h2>
            Section 1
        </h2>
        <p>
            <img src="./assets/img/big-mood-spa.jpg" alt="Image of soap bar and lotion." width="500" height="600"/>
            <br />
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget dignissim ante. Pellentesque volutpat commodo mauris ac molestie. Duis accumsan accumsan arcu, nec ullamcorper nisl tincidunt et. Etiam nec fringilla purus. Nam at justo pulvinar, suscipit nisl in, faucibus dolor. Cras interdum orci eget purus vehicula ultricies. Vestibulum quis enim a tellus ornare interdum. Phasellus vehicula imperdiet feugiat. Aenean ornare rutrum pellentesque. Ut sed ligula justo. In a elit at eros iaculis suscipit a non risus. Duis pharetra fringilla scelerisque. Sed at tellus ac magna dictum fringilla quis ac tortor. Ut tempor luctus leo id molestie. Sed in ullamcorper justo.
        </p>
    </section>
    <section>
        <h2>
            Section 2
        </h2>
        <figure>
            <img src="https://www.w3schools.com/tags/pic_trulli.jpg" alt="Trulli" width="500" height="333">
            <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
        </figure>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget dignissim ante. Pellentesque volutpat commodo mauris ac molestie. Duis accumsan accumsan arcu, nec ullamcorper nisl tincidunt et. Etiam nec fringilla purus. Nam at justo pulvinar, suscipit nisl in, faucibus dolor. Cras interdum orci eget purus vehicula ultricies. Vestibulum quis enim a tellus ornare interdum. Phasellus vehicula imperdiet feugiat. Aenean ornare rutrum pellentesque. Ut sed ligula justo. In a elit at eros iaculis suscipit a non risus. Duis pharetra fringilla scelerisque. Sed at tellus ac magna dictum fringilla quis ac tortor. Ut tempor luctus leo id molestie. Sed in ullamcorper justo.
        </p>
    </section>
    <section id="desktop-section">
        <h2>
            Section 3
        </h2>
        <p>
            <a href="https://www.sportico.com/leagues/baseball/2025/mlb-abolish-intentional-walk-1234875344/?utm_source=firefox-newtab-en-us"
                target="_blank">
                <img src="https://www.sportico.com/wp-content/uploads/2025/10/shohei.png?w=1280&h=720&crop=1"
                    alt="Shohei Ohtani swinging a baseball bat" width="500" height="281" />
            </a>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget dignissim ante. Pellentesque volutpat commodo mauris ac molestie. Duis accumsan accumsan arcu, nec ullamcorper nisl tincidunt et. Etiam nec fringilla purus. Nam at justo pulvinar, suscipit nisl in, faucibus dolor. Cras interdum orci eget purus vehicula ultricies. Vestibulum quis enim a tellus ornare interdum. Phasellus vehicula imperdiet feugiat. Aenean ornare rutrum pellentesque. Ut sed ligula justo. In a elit at eros iaculis suscipit a non risus. Duis pharetra fringilla scelerisque. Sed at tellus ac magna dictum fringilla quis ac tortor. Ut tempor luctus leo id molestie. Sed in ullamcorper justo.
        </p>
    </section>
    <footer>
        <p>Copyright 2024</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>