forked from dohinaf/basic-icecream-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
new menu page
84 lines (82 loc) · 5.35 KB
/
new menu page
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
<style>
.hero-section { display: flex; flex-direction: column; overflow: hidden; }
.hero-background { border-radius: 200px; background-color: #B26175; min-height: 353px; width: 100%; }
.hero-content { z-index: 10; margin-top: -46px; width: 100%; }
.content-wrapper { gap: 20px; display: flex; }
.text-column { display: flex; flex-direction: column; width: 72%; }
.text-content { display: flex; width: 100%; flex-direction: column; }
.hero-title { color: #6D2714; margin: 0 85px 0 50px; font: 700 96px 'Lobster Two', sans-serif; }
.subtitle-wrapper { display: flex; margin-top: 11px; width: 100%; align-items: start; gap: 40px 65px; color: #6D2714; flex-wrap: wrap; font: 500 37px 'Inter', sans-serif; }
.subtitle-content { display: flex; margin-top: 20px; gap: 17px; flex-wrap: wrap; flex-grow: 1; flex-basis: auto; }
.accent-circle-pink { background-color: #FD9485; border-radius: 50%; align-self: start; display: flex; margin-top: 4px; width: 40px; height: 40px; }
.subtitle-text { flex-basis: auto; flex-grow: 1; }
.accent-circle-red { background-color: #D2717A; border-radius: 50%; display: flex; width: 40px; height: 40px; }
.description-wrapper { display: flex; margin-top: 27px; width: 100%; flex-direction: column; padding: 0 57px; }
.description-text { color: #51140A; margin-right: 26px; font: 300 20px 'Poppins', sans-serif; }
.cta-wrapper { align-self: end; margin-top: 52px; width: 758px; max-width: 100%; }
.cta-content { gap: 20px; display: flex; }
.cta-button-column { display: flex; flex-direction: column; width: 60%; }
.cta-button { border-radius: 100px; background-color: #6D2714; color: #FFF; text-align: center; width: 100%; padding: 34px 45px; font: 400 33px 'Inter', sans-serif; }
.accent-column { display: flex; flex-direction: column; width: 40%; margin-left: 20px; }
.accent-circles { display: flex; margin-top: 32px; flex-grow: 1; flex-direction: column; }
.accent-circle-yellow { background-color: #FFC368; border-radius: 50%; display: flex; width: 40px; height: 40px; }
.accent-circle-red-bottom { background-color: #D2717A; border-radius: 50%; align-self: end; display: flex; margin-top: 72px; width: 40px; height: 40px; }
.image-column { display: flex; flex-direction: column; width: 28%; margin-left: 20px; }
.image-wrapper { display: flex; margin-top: 56px; flex-grow: 1; flex-direction: column; }
.accent-circle-orange { background-color: #FDC672; border-radius: 50%; display: flex; margin-left: 118px; width: 40px; height: 40px; }
.hero-image { aspect-ratio: 0.73; object-fit: contain; object-position: center; width: 100%; margin-top: 123px; }
@media (max-width: 991px) {
.hero-background, .hero-content, .text-content, .description-wrapper, .cta-wrapper, .image-wrapper { max-width: 100%; }
.content-wrapper, .cta-content { flex-direction: column; align-items: stretch; gap: 0; }
.text-column, .cta-button-column, .accent-column, .image-column { width: 100%; margin-left: 0; }
.text-content, .image-wrapper { margin-top: 40px; }
.hero-title { margin-right: 10px; font-size: 40px; }
.description-wrapper { padding: 0 20px; }
.description-text { margin-right: 10px; }
.cta-button { margin-top: 40px; padding: 0 20px; }
.accent-circles, .accent-circle-red-bottom { margin-top: 40px; }
.accent-circle-orange { margin-left: 10px; }
.hero-image { margin-top: 40px; }
}
</style>
<section class="hero-section">
<div class="hero-background"></div>
<div class="hero-content">
<div class="content-wrapper">
<div class="text-column">
<div class="text-content">
<h1 class="hero-title">Taste the Joy: Indulge in Our Heavenly Ice Cream!</h1>
<div class="subtitle-wrapper">
<div class="subtitle-content">
<div class="accent-circle-pink" aria-hidden="true"></div>
<p class="subtitle-text">"Discover the Creamiest, Dreamiest Ice Cream Flavors <br /> Crafted Just for You!"</p>
</div>
<div class="accent-circle-red" aria-hidden="true"></div>
</div>
<div class="description-wrapper">
<p class="description-text">"At Arcticdelights, we believe that every scoop tells a story. From classic favorites to adventurous concoctions, our artisan ice cream is made with the finest ingredients and a whole lot of love. Whether you're treating yourself to a delicious dessert or looking for the perfect gift, we have something for everyone!"</p>
<div class="cta-wrapper">
<div class="cta-content">
<div class="cta-button-column">
<button class="cta-button">Explore Our Flavors</button>
</div>
<div class="accent-column">
<div class="accent-circles">
<div class="accent-circle-yellow" aria-hidden="true"></div>
<div class="accent-circle-red-bottom" aria-hidden="true"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="image-column">
<div class="image-wrapper">
<div class="accent-circle-orange" aria-hidden="true"></div>
<img src="https://cdn.builder.io/api/v1/image/assets/TEMP/2285215a23e1edaf4c302ca5f666a039729a9d875a812fc8eb209f2a792c8ee4?placeholderIfAbsent=true&apiKey=fa22c26009ce45f18ff293ca0a4356fa" alt="Delicious ice cream cone" class="hero-image" />
</div>
</div>
</div>
</div>
</section>