LiamLoewen.github.io/lab1.html at master · LiamLoewen/LiamLoewen.github.io · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset="utf-8">
        <title>
            COSC 264 - Lab 1
        </title>
        <link rel="stylsheet" href="css/lab1-style.css"/>
    </head>

    <body>
        <!-- Header -->
        <header>
            <h1>
                COSC 264 - Lab 1
            </h1>
            <nav>
                <a href="index.html">Home</a> | <a href="#">Artists</a> | <a href="#">Artworks</a> | <a href="#">About Us</a> | <a href="#">Search</a>
            </nav>
        </header>

        <!-- Rivière portrait -->
        <section>
            <h2>
                Mademoiselle Caroline Rivière
            </h2>
            <p>
                by <a href="images/06010-large.jpg">Jean-Auguste-Dominique Ingres</a>
            </p>
            <a href="images/06010-large.jpg">
                <img src="images/06010-medium.jpg" alt="by Jean-Auguste-Dominique Ingres" title="by Jean-Auguste-Dominique Ingres" />
            </a>
            <p>
                The portrait of Mademoiselle Caroline Rivière was painted in 1806 by the French Neoclassical artist Jean Auguste Dominique Ingres, and today hangs in the Louvre. It is the third of three portraits of the Rivière family the artist painted that year.
            </p>
            <P>
                Date: <em>1806</em><br>
                Medium: <em>Oil on Canvas</em><br>
                Dimensions: <em>100 x 70 cm</em><br>
                Home: <em>Musèe du Louvre, Paris</em>
            </P>
            <p>
                <a href="#"><img src="images/cart.png" alt="Add to Cart"/></a>
                <a href="#">Add to Cart</a>
                <a href="#"><img src="images/favorites.png" alt="Add to Favorites"/></a>
                <a href="#">Add to Favorites</a>
            </p>
        </section>

        <!-- Related Paintings -->
        <section>
            <h3>
                Related Paintings
            </h3>
            <div>
                <a href="images/06020.jpg"><img src="images/06020.jpg" alt="related image"/></a>
                <a href="images/07020.jpg"><img src="images/07020.jpg" alt="related image"/></a>
                <a href="images/13030.jpg"><img src="images/13030.jpg" alt="related image"/></a>
                <a href="images/05030.jpg"><img src="images/05030.jpg" alt="related image"/></a>
            </div>
        </section>

        <!-- Reviews -->
        <section>
            <h3>
                Reviews
            </h3>
            <div>
                <strong>Love this painting</strong><br>
                John Smith
                <img src="images/star-orange.png" alt="orange star"/>
                <img src="images/star-orange.png" alt="orange star"/>
                <img src="images/star-orange.png" alt="orange star"/>
                <img src="images/star-orange.png" alt="orange star"/>
                <img src="images/star-white.png" alt="blank star"/>
                <p>
                    <small>This is one of my favorites!</small>
                </p>
            </div>
            <!--
                <div>
                    <strong>Meh</strong><br>
                    Lyric Stewart
                    <img src="images/star-orange.png" alt="orange star"/>
                    <img src="images/star-white.png" alt="blank star"/>
                    <img src="images/star-white.png" alt="blank star"/>
                    <img src="images/star-white.png" alt="blank star"/>
                    <img src="images/star-white.png" alt="blank star"/>
                    <p>
                        <small>I've done better</small>
                    </p>
                </div>
            -->
        </section>

        <!-- Footer -->
        <footer>
            <hr>
            <nav>
                <a href="#">Home</a> | <a href="#">Art Works</a> | <a href="#">Artists</a> | <a href="#">About Us</a>
            </nav>
            <p>
                <em>
                    Copyright &copy; 2020 My First HTML Page
                </em>
            </p>
        </footer>
    </body>
</html>