Skip to content

Commit c86a233

Browse files
author
Simon L. Lange
committed
Bellcom theme: Footer and more
1 parent e2c8ca7 commit c86a233

File tree

5 files changed

+217
-1
lines changed

5 files changed

+217
-1
lines changed

‎web/themes/custom/subsites/bellcom_theme/assets/css/bundle.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1060,6 +1060,86 @@ video {
10601060
body.is-fixed {
10611061
position: fixed;
10621062
}
1063+
footer {
1064+
border-top: 1px solid #d7d7d7;
1065+
display: flex;
1066+
justify-content: center;
1067+
align-items: center;
1068+
font-family: "Poppins", sans-serif;
1069+
}
1070+
footer .footer_inner-wrapper {
1071+
max-width: 1440px;
1072+
width: 100%;
1073+
margin: 60px 10px;
1074+
display: flex;
1075+
justify-content: space-between;
1076+
align-items: flex-start;
1077+
gap: 50px;
1078+
}
1079+
footer .footer_inner-wrapper .footer_newsletter {
1080+
width: 30%;
1081+
}
1082+
footer .footer_inner-wrapper .footer_newsletter h2 {
1083+
font-size: 20px;
1084+
font-weight: 600;
1085+
margin-bottom: 20px;
1086+
}
1087+
footer .footer_inner-wrapper .footer_newsletter p {
1088+
margin-bottom: 20px;
1089+
}
1090+
footer .footer_inner-wrapper .footer_newsletter form input {
1091+
padding: 10px 0 10px 10px;
1092+
background-color: #e6e6e6;
1093+
border-top-left-radius: 10px;
1094+
border-bottom-left-radius: 10px;
1095+
outline: none;
1096+
}
1097+
footer .footer_inner-wrapper .footer_newsletter form button {
1098+
display: inline-block;
1099+
padding: 10px 20px;
1100+
background-color: #344E41;
1101+
border-top-right-radius: 10px;
1102+
border-bottom-right-radius: 10px;
1103+
color: white;
1104+
font-weight: 600;
1105+
font-size: 15px;
1106+
}
1107+
footer .footer_inner-wrapper .footer_logo {
1108+
display: flex;
1109+
flex-direction: column;
1110+
gap: 50px;
1111+
}
1112+
footer .footer_inner-wrapper .footer_logo .footer-info-wrapper {
1113+
display: flex;
1114+
flex-direction: column;
1115+
gap: 25px;
1116+
font-size: 13px;
1117+
}
1118+
footer .footer_inner-wrapper .footer_logo .footer-info-wrapper div h2 {
1119+
font-weight: bold;
1120+
color: #2E2E2E;
1121+
}
1122+
footer .footer_inner-wrapper .footer_navigation {
1123+
flex-grow: 1;
1124+
}
1125+
footer .footer_inner-wrapper .footer_navigation .region--footer {
1126+
display: flex;
1127+
gap: 75px;
1128+
margin-left: 20px;
1129+
}
1130+
footer .footer_inner-wrapper .footer_navigation .region--footer nav h2 {
1131+
font-size: 16px;
1132+
font-weight: 500;
1133+
text-transform: uppercase;
1134+
margin-bottom: 15px;
1135+
}
1136+
footer .footer_inner-wrapper .footer_navigation .region--footer nav ul li {
1137+
font-size: 14px;
1138+
margin-bottom: 10px;
1139+
}
1140+
footer .footer_inner-wrapper .footer_navigation .region--footer nav ul li a:hover {
1141+
text-decoration: underline;
1142+
}
10631143
.hero-wrapper {
10641144
min-height: 70vh;
10651145
width: 100%;

‎web/themes/custom/subsites/bellcom_theme/bellcom_theme.info.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ regions:
1313
header__logo: Header logo
1414
header: Header
1515
content: Content
16+
footer__logo: Footer logo
1617
footer: Footer
1718
hidden: Hidden
1819

‎web/themes/custom/subsites/bellcom_theme/src/scss/components/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
@import './header.scss';
2+
@import './footer.scss';

‎web/themes/custom/subsites/bellcom_theme/src/scss/components/footer.scss

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
footer {
2+
border-top: 1px solid #d7d7d7;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
font-family: "Poppins", sans-serif;
7+
8+
.footer_inner-wrapper {
9+
max-width: 1440px;
10+
width: 100%;
11+
margin: 60px 10px;
12+
display: flex;
13+
justify-content: space-between;
14+
align-items: flex-start;
15+
gap: 50px;
16+
17+
.footer_newsletter {
18+
width: 30%;
19+
20+
h2 {
21+
font-size: 20px;
22+
font-weight: 600;
23+
margin-bottom: 20px;
24+
}
25+
26+
p {
27+
margin-bottom: 20px;
28+
}
29+
form {
30+
input {
31+
padding: 10px 0 10px 10px;
32+
background-color: #e6e6e6;
33+
border-top-left-radius: 10px;
34+
border-bottom-left-radius: 10px;
35+
outline: none;
36+
}
37+
button {
38+
display: inline-block;
39+
padding: 10px 20px;
40+
background-color: #344E41;
41+
border-top-right-radius: 10px;
42+
border-bottom-right-radius: 10px;
43+
color: white;
44+
font-weight: 600;
45+
font-size: 15px;
46+
}
47+
}
48+
}
49+
50+
.footer_logo {
51+
display: flex;
52+
flex-direction: column;
53+
gap: 50px;
54+
55+
.footer-info-wrapper {
56+
display: flex;
57+
flex-direction: column;
58+
gap: 25px;
59+
font-size: 13px;
60+
61+
div {
62+
h2 {
63+
font-weight: bold;
64+
color: #2E2E2E;
65+
}
66+
}
67+
}
68+
}
69+
70+
71+
.footer_navigation {
72+
flex-grow: 1;
73+
74+
.region--footer {
75+
display: flex;
76+
gap: 75px;
77+
margin-left: 20px;
78+
79+
nav {
80+
h2 {
81+
font-size: 16px;
82+
font-weight: 500;
83+
text-transform: uppercase;
84+
margin-bottom: 15px;
85+
}
86+
ul {
87+
li {
88+
font-size: 14px;
89+
margin-bottom: 10px;
90+
91+
a {
92+
&:hover {
93+
text-decoration: underline;
94+
}
95+
}
96+
}
97+
}
98+
}
99+
}
100+
}
101+
}
102+
}

‎web/themes/custom/subsites/bellcom_theme/templates/pages/page.html.twig

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,39 @@
2828

2929
{% if page.footer %}
3030
<footer class="footer" role="contentinfo">
31-
{{ page.footer }}
31+
<div class="footer_inner-wrapper">
32+
<div class="footer_logo">
33+
{{ page.footer__logo }}
34+
<div class="footer-info-wrapper">
35+
<div>
36+
<h2>Adresse</h2>
37+
<p>Bredgade 20, 6000 Kolding</p>
38+
</div>
39+
<div>
40+
<h2>Telefon</h2>
41+
<p>70 26 00 85</p>
42+
</div>
43+
<div>
44+
<h2>Åbningstider</h2>
45+
<p>Mandag - Fredag</p>
46+
<p><strong>09:00 - 17:00</strong></p>
47+
</div>
48+
</div>
49+
</div>
50+
<div class="footer_navigation">
51+
{{ page.footer }}
52+
</div>
53+
<div class="footer_newsletter">
54+
<h2>Tilmeld dig vores nyhedsbrev</h2>
55+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
56+
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
57+
<form>
58+
<input type="email" placeholder="Skriv din e-mail her...">
59+
<button type="submit" value="Abonnér">Abonnér</button>
60+
</form>
61+
62+
</div>
63+
</div>
3264
</footer>
3365
{% endif %}
3466

0 commit comments

Comments
 (0)