Project_2_Web/attractions.html at main · grishiev/Project_2_Web · 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Visit Dun Laoghaire</title>


    <link rel="stylesheet" type="text/css" href="css/style.css">


    </head>

    <body>
        <header>
            <div class="banner">
                <div class="banner-text">
                    <h1>Dun Laoghaire</h1>
                </div>
                <!-- <section class="r-section"> -->

                <div id="sailboat" class="r-container">
                    <img src="images/boat.png" alt="Sailboat" class="sailboat-image">
                </div>
            <!-- </section> -->
            </div>


        </header>
        <nav>
            <div class="nav-container">
                <a class="item" href="index.html">Home</a>
                <a class="item" href="gallery.html">Gallery</a>
                <a class="item active" href="attractions.html">Attractions</a>
                <a class="item" href="food.html">Food</a>
                <a class="item" href="contact.html">Contact</a>
            </div>
        </nav>

        <div class="image-container">
            <h3>Pier</h3>
                <div class="o-container">
                    <img src="images/Pier.jpg" alt="Dun Laoghaire Pier" class="image">
                    <div class="overlay">
                        <div class="o-text">
                            Dun Laoghaire pier today is ... Lorem ipsum dolor, sit
                            amet consectetur adipisicing elit. Ipsum dignissimos
                            inventore molestiae reiciendis sequi nihil facere unde
                            quas temporibus aliquid atque, possimus dicta. Facere a
                             eligendi incidunt ipsam illo dolor.
                        </div>
                    </div>
                </div>

                <div class="seagul-image-container">
                    <a href="#"><img src="images/seagull.png" alt="Seagul" class="seagul-image"></a>
                </div>


            <h3>Lexicon Library</h3>
            <div class="o-container">
                <img src="images/Library.jpg" alt="Lexicon Library" class="image">
                <div class="overlay">
                    <div class="o-text">
                        Lexicon library is certainly one of the pearls of modern-day Dun Laoghaire.
                         Lorem ipsum dolor, sit
                        amet consectetur adipisicing elit. Ipsum dignissimos
                        inventore molestiae reiciendis sequi nihil facere unde
                        quas temporibus aliquid atque, possimus dicta. Facere a
                         eligendi incidunt ipsam illo dolor.
                    </div>
                </div>
            </div>

            <div class="seagul-image-container">
                <a href="#"><img src="images/seagull.png" alt="Seagul" class="seagul-image"></a>
            </div>

            <h3>People's Park</h3>
            <div class="o-container">
                <img src="images/People's_park.jpg" alt="People's Park" class="image">
                <div class="overlay">
                    <div class="o-text">
                        People's Park is truly one of the favourite places for the residents and visitor's of Dun Laoghaire.
                        Founded in 1898, lorem ipsum dolor, sit
                        amet consectetur adipisicing elit. Ipsum dignissimos
                        inventore molestiae reiciendis sequi nihil facere unde
                        quas temporibus aliquid atque, possimus dicta. Facere a
                         eligendi incidunt ipsam illo dolor.
                    </div>
                </div>
            </div>

            <div class="seagul-image-container">
                <a href="#"><img src="images/seagull.png" alt="Seagul" class="seagul-image"></a>
            </div>

            <h3>The Forty Foot</h3>
            <div class="o-container">
                <img src="images/40foot.jfif" alt="The Forty Foot" class="image">
                <div class="overlay">
                    <div class="o-text">
                        The swimming spot known under the name of Forty Foot attracts cold-water swimmers and dippers all year round. Lorem ipsum dolor, sit
                        amet consectetur adipisicing elit. Ipsum dignissimos
                        inventore molestiae reiciendis sequi nihil facere unde
                        quas temporibus aliquid atque, possimus dicta. Facere a
                         eligendi incidunt ipsam illo dolor.
                    </div>
                </div>
            </div>

            <div class="seagul-image-container">
                <a href="#"><img src="images/seagull.png" alt="Seagul" class="seagul-image"></a>
            </div>
                </div>

            </body>

        <footer>
                <p>Copyright &copy; 2022, By Evgenij G. <br>
                &#9743 089 6791234 <br>
                <a href="mailto:someone@somemail.com">&#9993 someone@somemail.com</a>
                </p>
        </footer>


</html>