-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (90 loc) · 8.39 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<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+Display:wght@300;500;900&family=Outfit:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/global.css">
<link rel="stylesheet" href="css/home/header.css">
<link rel="stylesheet" href="css/home/main.css">
<link rel="stylesheet" href="css/home/footer.css">
<title>Art gallery website</title>
</head>
<body>
<header class="header">
<div class="header-card">
<div class="blackBackgrund">
</div>
<!-- Title Modern art galery svg code-->
<div class="header-title">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 111 40">
<defs>
<linearGradient id="grad">
<stop offset="63%" style="stop-color:rgb(255,255,255);" />
<stop offset="0%" style="stop-color:rgb(0,0,0);"/>
</linearGradient>
</defs>
<path d="M3.916 18.656V12.99L3.27 3.27h.598l.99 9.95 1.406 5.436h3.708l1.428-5.435.968-9.95h.621l-.668 9.72v5.665h3.455V.23H10.25L8.706 7.21l-.276 8.406H7.83l-.3-8.407L6.012.23H.462v18.426h3.455Zm18.61.23c1.689 0 2.902-.356 3.64-1.07.736-.714 1.135-1.9 1.197-3.559.061-1.505.092-3.105.092-4.802 0-1.697-.03-3.313-.092-4.848-.062-1.643-.46-2.822-1.198-3.536C25.428.357 24.215 0 22.525 0c-1.688 0-2.913.357-3.673 1.071-.76.714-1.155 1.893-1.186 3.536a237.22 237.22 0 0 0-.046 4.825v.365c.002 1.576.018 3.063.046 4.46.03 1.659.426 2.845 1.186 3.559s1.985 1.07 3.674 1.07Zm0-2.81c-.906 0-1.374-.39-1.405-1.174-.03-.783-.054-1.643-.07-2.58a176.449 176.449 0 0 1 0-5.78c.016-.937.04-1.797.07-2.58.03-.768.499-1.152 1.405-1.152.89 0 1.351.384 1.382 1.152.03.783.057 1.643.08 2.58a117.65 117.65 0 0 1 0 5.78c-.023.937-.05 1.797-.08 2.58-.03.783-.491 1.175-1.382 1.175Zm11.447 2.58c1.735 0 2.987-.368 3.754-1.105.768-.737 1.167-1.95 1.198-3.64.03-1.074.05-2.091.058-3.051.007-.96.007-1.92 0-2.88-.008-.959-.027-1.968-.058-3.028-.03-1.689-.43-2.898-1.198-3.628C36.96.595 35.708.23 33.973.23h-4.675v18.426h4.675Zm0-3.04h-1.22V3.271h1.22c.967 0 1.467.422 1.497 1.266.092 3.256.092 6.519 0 9.79-.03.86-.53 1.29-1.497 1.29Zm14.81 3.04v-3.04H44.27v-4.814h4.284v-3.04h-4.284V3.271h4.514V.23h-7.97v18.425h7.97Zm4.837 0v-6.218h.783l1.75 6.218h3.663l-2.165-6.794a3.199 3.199 0 0 0 1.405-1.463c.307-.637.476-1.455.506-2.453.016-.43.027-.806.035-1.128.008-.323.008-.645 0-.968a96.42 96.42 0 0 0-.035-1.128c-.061-1.597-.472-2.745-1.232-3.444C57.57.58 56.33.23 54.61.23h-4.445v18.426h3.455Zm.99-9.259h-.99V3.271h.99c.952 0 1.451.422 1.497 1.266a28.055 28.055 0 0 1 0 3.594c-.046.844-.545 1.266-1.497 1.266Zm9.927 9.26-.299-7.072-.599-8.337h.645l.944 9.374 1.382 6.034h5.252V.23h-3.34l.276 7.9.645 7.486h-.598l-1.267-9.512L66.196.23h-4.998v18.426h3.34ZM3.547 39.77l.392-3.847H6.61l.392 3.847h3.547L7.992 21.344H2.557L0 39.77h3.547Zm2.74-6.887H4.262l.415-4.077.276-4.422h.645l.276 4.422.415 4.077Zm9.099 6.887v-6.22h.783l1.75 6.22h3.663l-2.165-6.795a3.199 3.199 0 0 0 1.404-1.463c.308-.637.477-1.454.507-2.452.016-.43.027-.807.035-1.13.007-.322.007-.644 0-.966-.008-.323-.02-.7-.035-1.13-.061-1.596-.472-2.744-1.232-3.442-.76-.7-2-1.048-3.72-1.048h-4.445V39.77h3.455Zm.99-9.26h-.99v-6.126h.99c.952 0 1.451.422 1.497 1.267a28.055 28.055 0 0 1 0 3.593c-.046.844-.545 1.267-1.497 1.267Zm12.553 9.26V24.384h2.948v-3.04h-9.374v3.04h2.971V39.77h3.455Zm14.326.23c1.643 0 2.841-.357 3.593-1.071.753-.714 1.167-1.9 1.244-3.559.03-.706.05-1.474.058-2.303.007-.829-.004-1.597-.035-2.303h-4.63v2.994h1.267a16.197 16.197 0 0 1 0 2.257c-.03.384-.176.676-.437.876-.261.2-.614.299-1.06.299-.89 0-1.359-.392-1.405-1.175a90.954 90.954 0 0 1-.126-3.535 107.71 107.71 0 0 1 0-3.858c.023-1.29.065-2.472.126-3.547.046-.768.515-1.152 1.405-1.152.845 0 1.29.384 1.336 1.152.03.43.046.96.046 1.59 0 .629-.015 1.158-.046 1.588h3.455c.03-.353.046-.775.046-1.266 0-.492-.015-.914-.046-1.267-.107-1.643-.53-2.822-1.267-3.536-.737-.714-1.911-1.07-3.524-1.07-1.136 0-2.053.157-2.752.471a3.032 3.032 0 0 0-1.543 1.532c-.33.706-.519 1.643-.565 2.81-.015.614-.03 1.328-.046 2.142a135.078 135.078 0 0 0 0 5.102c.016.821.031 1.555.046 2.2.046 1.105.23 1.996.553 2.671a3.01 3.01 0 0 0 1.532 1.486c.699.315 1.624.472 2.775.472Zm9.375-.23.391-3.847h2.672l.391 3.847h3.547l-2.556-18.426h-5.436L49.083 39.77h3.547Zm2.74-6.887h-2.026l.414-4.077.277-4.422h.644l.277 4.422.414 4.077Zm13.636 6.887v-3.04h-4.538V21.343h-3.455V39.77h7.993Zm9.374 0v-3.04h-4.537V21.343h-3.455V39.77h7.992Zm9.351 0v-3.04h-4.514v-4.814H87.5v-3.04h-4.284v-4.492h4.514v-3.04h-7.969V39.77h7.97Zm4.837 0v-6.22h.783l1.75 6.22h3.663l-2.165-6.795a3.199 3.199 0 0 0 1.405-1.463c.307-.637.476-1.454.507-2.452.015-.43.026-.807.034-1.13.008-.322.008-.644 0-.966a96.42 96.42 0 0 0-.034-1.13c-.062-1.596-.473-2.744-1.233-3.442-.76-.7-2-1.048-3.72-1.048h-4.445V39.77h3.455Zm.99-9.26h-.99v-6.126h.99c.953 0 1.452.422 1.498 1.267a28.055 28.055 0 0 1 0 3.593c-.046.844-.545 1.267-1.497 1.267Zm13.037 9.26v-4.4l.253-1.06 3.202-12.966h-3.524l-.99 4.468-.346 5.413h-.645l-.345-5.413-.99-4.468h-3.525l3.202 12.99.253 1.036v4.4h3.455Z" fill=""/></svg>
</div>
<!-- End of title Modern art galery svg code-->
<div class="heroImg" role="img" aria-label="image with a couple looking at a picture with an image of an elderly
woman wearing glasses">
</div>
<div class="header-content">
<h1 class="text-m">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.</h1>
<a class="buttom-anchor" href="location.html"><div class="buttom title-s">Our location</div>
<div class="buttom-arrow">
<img src="./assets/icon-arrow-right.svg" alt="white right arrow icon">
</div>
</a>
</div>
</div>
</header>
<main>
<section class="galery">
<div class="galeryContent">
<h2 class="title-m">Your day <span class="breakline">at the gallery</span></h2>
<p class="text-m">Wander through our distinct collections and find new insights about
our artists. Dive into the details of their creative process.
</p>
</div>
<div class="galery-img1" role="img" aria-label="image of an art gallery with a sculpture in the center of the room
and with 8 paintings displayed on the walls, 5 of them on the back wall and 3 on the side wall"></div>
<div class="galery-img2" role="img" aria-label="image showing an art gallery room that has a white and checkered
ceiling, a gray wall with a centralized frame on which a modern black spiral staircase is painted, the floor of the
room is checkered in the color of burnt cement and has a center backless sea bench"></div>
<div class="finalGrid">
<div class="galery-img3" role="img" aria-label="image showing a corridor in the art gallery with a white parapet
on the right side and a steel handrail that allows a view to the lower floor, where it is possible to see two
cylindrical and white pillars rising to the ceiling, the ceiling is white with round niches with natural light
and has a row of spots positioned to illuminate the paintings on the white wall on the left side, the wall has 5
rooms, 3 small paintings and two large ones, it is possible to see a part of another room, which contains 4 more
paintings small two on the back wall and two on the side, the floor is made of hardwood">
</div>
<div class="galeryContent2">
<h2 class="title-m">Come & be inspired</h2>
<p class="text-m">We’re excited to welcome you to our gallery and see how our collections
influence you.</p>
</div>
</div>
</section>
</main>
<footer>
<h2 class="title-s">Modern Art Gallery</h2>
<p class="text-s">The Modern Art Gallery is free to all visitors and open seven days a week
from 8am to 9pm. Find us at 99 King Street, Newport, USA.
</p>
<div class="social-media">
<a href="#"><img src="./assets/icon-facebook.svg" alt="facebook icon"></a>
<a href="#"><img src="./assets/icon-instagram.svg" alt="instagram icon"></a>
<a href="#"><img src="./assets/icon-twitter.svg" alt="twitter icon"></a>
</div>
</footer>
</body>
</html>