Skip to content

Commit 75054ce

Browse files
NtemKenyorNtemKenyor
authored
Merge pull request #757 from akshithagunupati/IssueFixed_Overlap_webdesign_#431
FixedIssue_Overlap_webdesign_#431
2 parents 1bd2e5f + 6048331 commit 75054ce

5 files changed

Lines changed: 137 additions & 0 deletions

File tree

‎modules/overlapblock/images_and_icons/cali.png‎

373 KB
Loading

‎modules/overlapblock/images_and_icons/cheese.png‎

249 KB
Loading

‎modules/overlapblock/images_and_icons/fish.png‎

16.4 KB
Loading

‎modules/overlapblock/images_and_icons/veggies.jpeg‎

162 KB
Loading

‎modules/overlapblock/overlapblock_22_AkshithaGunupati.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Raleway:wght@400;700&display=swap">
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap">
8+
<style>
9+
body {
10+
margin: 0;
11+
font-family: 'Arial', sans-serif;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
flex-direction: column;
16+
height: 100vh;
17+
}
18+
19+
.about-us {
20+
color: black;
21+
font-family: 'Alex Brush', cursive;
22+
text-align: center;
23+
font-size: 90px;
24+
}
25+
26+
.content {
27+
text-align: justify;
28+
font-family: 'Open Sans', sans-serif;
29+
padding: 0px;
30+
max-width: 800px;
31+
}
32+
33+
.image-container {
34+
position: relative;
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
}
39+
40+
.image {
41+
max-width: 100%;
42+
}
43+
44+
.tiles {
45+
position: absolute;
46+
display: grid;
47+
grid-template-columns: repeat(3, 1fr);
48+
gap: 10px;
49+
text-align: center;
50+
width: 100%;
51+
margin-top: 280px; /* Adjusted margin to place the tiles somewhat lower */
52+
}
53+
54+
.tile {
55+
background-color: rgba(255, 255, 255, 0.9); /* Increased opacity */
56+
padding: 10px;
57+
border-radius: 0px;
58+
}
59+
60+
.green-circle {
61+
background-color: #6ba413;
62+
width: 50px;
63+
height: 50px;
64+
border-radius: 50%;
65+
display: inline-block;
66+
position: relative;
67+
}
68+
69+
.green-circle img {
70+
width: 90%;
71+
height: 90%;
72+
border-radius: 10%;
73+
}
74+
75+
.green-circle2 img {
76+
width: 90%;
77+
height: 90%;
78+
border-radius: 10%;
79+
}
80+
81+
.special-offers,
82+
.special-deals,
83+
.special-promotions {
84+
color: #6ba413;
85+
font-weight: bold;
86+
}
87+
88+
.additional-text {
89+
font-family: 'Open Sans', sans-serif;
90+
color: black;
91+
margin-top: 10px;
92+
font-style: italic;
93+
}
94+
95+
.enlarge-image {
96+
width: 150%;
97+
height: 150%;
98+
}
99+
</style>
100+
<title>Text and Image</title>
101+
</head>
102+
<body>
103+
104+
<div>
105+
<p class="about-us">About Us</p>
106+
<p class = "content"><i>Buy seasonal organic recipe boxes, fruit & veg online at Riverford & order fresh organic meat from our expert butchers. Organic farming is an alternative food production method which prioritizes sustainable production practices, respectful use of the countryside and concern for animal welfare.</i></p>
107+
</div>
108+
109+
<div class="image-container">
110+
<img class="image" src="./images_and_icons/veggies.jpeg" alt="Your Image Description">
111+
<div class="tiles">
112+
<div class="tile">
113+
<div class="green-circle">
114+
<img src="./images_and_icons/cali.png" alt="Cali Image">
115+
</div>
116+
<p class="special-offers">Special Offers</p>
117+
<p class="additional-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam nunc justo sagittis suscipit ultrices.</p>
118+
</div>
119+
<div class="tile">
120+
<div class="green-circle">
121+
<img src="./images_and_icons/fish.png" alt="Fish Image">
122+
</div>
123+
<p class="special-deals">Frozen Food</p>
124+
<p class="additional-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam nunc justo sagittis suscipit ultrices.</p>
125+
</div>
126+
<div class="tile">
127+
<div class="green-circle">
128+
<img src="./images_and_icons/cheese.png" alt="Cheese Image" class="enlarge-image">
129+
</div>
130+
<p class="special-promotions">Eggs and Cheese</p>
131+
<p class="additional-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam nunc justo sagittis suscipit ultrices.</p>
132+
</div>
133+
</div>
134+
</div>
135+
136+
</body>
137+
</html>

0 commit comments

Comments
 (0)