Skip to content

Commit 6048331

Browse files
akshithagunupatiakshithagunupati
committed
FixedIssue_Overlap_webdesign_#431
#431
1 parent b9f3259 commit 6048331

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)