ConquerBlocks-CSS-P3-Moderm-Gallery/index.html at main · Frozmiz/ConquerBlocks-CSS-P3-Moderm-Gallery · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,900&family=Outfit:wght@300&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" type="image/svg+xml" href="favicon.ico" />
    <title>ConquerBlocks-CSS-P3-Moderm-Gallery</title>
  </head>

  <body>
    <main>
      <section class="hero">
        <div class="hero__content">
          <div class="container-full hero__content">
            <div class="desktop_container">
              <h1 class="desktop_container hero__title--desktop">
                MODERN <br />
                ART GALLERY
              </h1>
            </div>
            <div class="hero__content__img">
              <figure>
                <img
                  class="hero__content__img-mobile"
                  src="/img/header.png"
                  alt="People admiring art"
                />
                <img
                  class="hero__content__img-tablet"
                  src="/img/header2.png"
                  alt="People admiring art"
                />
              </figure>
            </div>
            <div class="hero__content__text">
              <h1 class="hero__title">
                MODERN <br />
                ART GALLERY
              </h1>
              <p class="hero__subtitle">
                The arts in the collection of the Modern Art Gallery all started
                from a spark of inspiration. Will these pieces inspire you?
                Visit us and find out.
              </p>
              <p>
                <a href="location.html" class="hero__button button1"
                  ><span class="hero__button-text">OUR LOCATION</span>
                  <span class="hero__button-icon">⟩</span>
                </a>
              </p>
            </div>
          </div>
        </div>
      </section>

      <section class="gallery">
        <div class="container">
          <div class="first-container">
            <figure>
              <img src="/img/gallery1.png" alt="Contemporary art exhibition" />
            </figure>
            <div class="first-container_text">
              <h1 class="gallery__title">
                YOUR DAY <br />
                AT THE GALLERY
              </h1>
              <p class="gallery__subtitle">
                Wander through our distinct collections <br />
                and find new insights about our artists. <br />
                Dive into the details of their creative <br />
                process.
              </p>
            </div>
          </div>
          <div class="second-container">
            <div class="third-container">
              <figure>
                <img
                  class="gallery2-img"
                  src="/img/gallery2.png"
                  alt="bench in front of a painting"
                />
                <img
                  class="gallery2-long-img"
                  src="/img/gallery2-long.png"
                  alt="bench in front of a painting"
                />
              </figure>
            </div>

            <div class="fourth-container">
              <figure>
                <img
                  class="gallery3-img"
                  src="/img/gallery3.png"
                  alt="Beautiful corridor with paintings on the wall"
                />
                <img
                  class="gallery3-long-img"
                  src="/img/gallery3-long.png"
                  alt="Beautiful corridor with paintings on the wall"
                />
              </figure>
            </div>

            <div class="fiveth-container">
              <div class="gallery__cta">
                <h2 class="gallery__cta__title">
                  COME & BE <br />
                  INSPIRED
                </h2>
                <p class="gallery__cta__subtitle">
                  We’re excited to welcome you to our <br />
                  gallery and see how our collections <br />
                  influence you.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="hero__footer">
      <div class="container-full">
        <h2 class="footer__title">
          MODERN <br />
          ART GALLERY
        </h2>
        <p class="footer__subtitle">
          The Modern Art Gallery is free to all visitors <br />
          and open seven days a week from 8am to <br />
          9pm. Find us at 99 King Street, Newport, <br />
          USA.
        </p>
        <aside class="footer__media">
          <a href="#"><img src="/img/fb.svg" alt="" /></a>
          <a href="#"><img src="/img/insta.svg" alt="" /></a>
          <a href="#"><img src="/img/x.svg" alt="" /></a>
        </aside>
      </div>
    </footer>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>