Skip to content

Commit f67adfd

Browse files
exrllaexrlla
authored
Add solution folder to Ex. 25
1 parent 23a4228 commit f67adfd

2 files changed

Lines changed: 121 additions & 0 deletions

File tree

‎4-layout/25-art-gallery/solution/index.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!-- Write code below 💖 -->
2+
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link href="styles.css" rel="stylesheet" />
9+
<title>Museum Gallery</title>
10+
</head>
11+
<body>
12+
<div id="gallery-container">
13+
<h1 id="gallery-header">Museum Gallery</h1>
14+
<p>How Will You Arrange Your Visit?</p>
15+
</div>
16+
<hr />
17+
<!-- Add images here -->
18+
<img
19+
src="https://github.com/codedex-io/css-101/blob/main/4-layout/25-art-gallery/images/greek-sculpture.png?raw=true"
20+
alt=""
21+
class="gallery-item"
22+
id="item-1"
23+
/>
24+
<img
25+
src="https://raw.githubusercontent.com/codedex-io/css-101/refs/heads/main/4-layout/25-art-gallery/images/avant-garde-painting.png"
26+
alt=""
27+
class="gallery-item"
28+
id="item-2"
29+
/>
30+
<img
31+
src="https://github.com/codedex-io/css-101/blob/main/4-layout/25-art-gallery/images/dippy-the-dinosaur.png?raw=true"
32+
alt=""
33+
class="gallery-item"
34+
id="item-3"
35+
/>
36+
<img
37+
src="https://github.com/codedex-io/css-101/blob/main/4-layout/25-art-gallery/images/ghibli-museum.png?raw=true"
38+
alt=""
39+
class="gallery-item"
40+
id="item-4"
41+
/>
42+
<img
43+
src="https://github.com/codedex-io/css-101/blob/main/4-layout/25-art-gallery/images/mondrian-composition-with-rby.png?raw=true"
44+
alt=""
45+
class="gallery-item"
46+
id="item-5"
47+
/>
48+
<img
49+
src="https://github.com/codedex-io/css-101/blob/main/4-layout/25-art-gallery/images/morning-at-montrose.png?raw=true"
50+
alt=""
51+
class="gallery-item"
52+
id="item-6"
53+
/>
54+
55+
<!-- More in /images folder -->
56+
</body>
57+
</html>

‎4-layout/25-art-gallery/solution/styles.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
/* box-sizing: border-box; */
5+
}
6+
7+
body {
8+
font-family: Arial, Helvetica, sans-serif;
9+
position: relative;
10+
}
11+
12+
img, .gallery-item > p {
13+
width: 100%;
14+
position: relative;
15+
z-index: 1;
16+
}
17+
18+
hr {
19+
border: 0px solid;
20+
}
21+
22+
h1 {
23+
position: fixed;
24+
z-index: 10;
25+
}
26+
27+
#gallery-header > p {
28+
font-weight: 800;
29+
display: inline; /* Make the paragraph inline */
30+
}
31+
32+
/* Add code here */
33+
34+
#gallery-container {
35+
display: inline-block; /* Make the container an inline-block */
36+
position: absolute; /* Use absolute positioning */
37+
top: 10px;
38+
left: 50px;
39+
z-index: 10;
40+
}
41+
42+
#item-1 {
43+
position: fixed;
44+
top: 50%;
45+
width: 50%;
46+
left: 50%;
47+
transform: translate(-50%, -50%);
48+
z-index: 10;
49+
}
50+
51+
p {
52+
text-align: center;
53+
position: fixed;
54+
z-index: 10;
55+
top: 5%;
56+
left: 10%;
57+
display: inline-block; /* Add inline-block display */
58+
}
59+
60+
#item-4 {
61+
position: sticky;
62+
top: 100px;
63+
}
64+

0 commit comments

Comments
 (0)