forked from eddiesigner/liebling
-
Notifications
You must be signed in to change notification settings - Fork 38
/
page-butonul-rosu.hbs
149 lines (127 loc) · 4.16 KB
/
page-butonul-rosu.hbs
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
{{!--
This template is used for the posts that are marked as pages.
--}}
{{!-- This block preloads specific assets for the post page --}}
{{#contentFor "preload"}}
<link rel="preload" href="{{asset "css/post.css"}}" as="style" />
<link rel="preload" href="{{asset "js/page.js"}}" as="script" />
{{/contentFor}}
{{!-- This block loads specific styles for the post page --}}
{{#contentFor "styles"}}
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
{{/contentFor}}
{{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!< default}}
{{!-- Special header.hbs partial to generate the <header> tag --}}
{{#post}}
{{> header background=feature_image}}
{{/post}}
<style>
.contact-container {
display: flex;
height: 90vh; /* Full viewport height */
color: white;
background-image: url('/assets/images/map.png'); /* Shared background image */
background-size: cover;
background-position: center;
position: relative;
}
.map-section {
flex: 2; /* Take up more space on the right */
position: relative;
}
.map-overlay {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
background: rgba(0, 0, 0, 0.6);
padding: 10px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
}
.form-section {
flex: 1; /* Form takes up less space on the left */
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #000;
border-radius: 8px;
width: 70%; /* Normal width */
max-width: 90%; /* Prevents overflow on smaller screens */
}
.form-section iframe {
width: 50vw;
height: 100%;
border: none;
}
.help-text {
text-align: center;
margin: 20px 0;
color: red;
background-color: rgba(255, 255, 255, 0.6);
font-size: 24px;
padding: 10px;
border-radius: 5px;
margin-top: 40vh;
}
@media (max-width: 768px) {
.contact-container {
flex-direction: column; /* Stacks the sections vertically */
align-items: center; /* Centers the content horizontally */
justify-content: flex-start; /* Aligns content at the top */
}
.help-text {
order: 1; /* Ensure the text appears first */
width: 100%; /* Make it responsive */
font-size: 20px; /* Adjust font size for smaller screens */
margin-top: 0;
}
.form-section {
order: 2; /* Form appears after the text */
width: 90%; /* Takes almost full width on smaller screens */
align-self: center; /* Centers the form section */
}
.form-section iframe {
width: 100%; /* Makes iframe responsive */
height: 80vh; /* Adjust height based on content */
}
.map-section {
order: 3;
width: 100%; /* Adjust map-section to take full width */
height: 50%; /* Optional: Adjust height of map-section */
}
}
</style>
<main class="main-wrap">
<br>
<br>
<br>
<br>
<body>
<div class="contact-container">
<div class="map-section">
<h1 class="help-text">We Want To Help!
<BR>
Let Us Do It!
</h1>
<div class="map-overlay">
<a href="https://www.google.com/maps/place/OSUT+Cluj-Napoca/@46.7564001,23.5883981,17z/data=!4m6!3m5!1s0x47490dd37411dee7:0x37af0fc996d79c6e!8m2!3d46.7561754!4d23.5883412!16s%2Fg%2F11c2km93dk?entry=ttu&g_ep=EgoyMDI0MTIwNC4wIKXMDSoASAFQAw%3D%3D" target="_blank">
<p>Look at Google Maps →</p>
</a>
</div>
</div>
<div class="form-section">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSehM0INGphPT-FWfki5BWW9x4OVpqT_oLeXTv_jTy-jH1RDZg/viewform?embedded=true" class="google-form"></iframe>
</div>
</div>
</body>
</main>
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script defer src="{{asset "js/page.js"}}"></script>
{{/contentFor}}