Skip to content

Commit cb82b5d

Browse files
author
Simon L. Lange
committed
Bellcom: Footer
1 parent c86a233 commit cb82b5d

File tree

4 files changed

+353
-72
lines changed

4 files changed

+353
-72
lines changed

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

Lines changed: 151 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1065,20 +1065,35 @@ footer {
10651065
display: flex;
10661066
justify-content: center;
10671067
align-items: center;
1068+
flex-direction: column;
10681069
font-family: "Poppins", sans-serif;
10691070
}
10701071
footer .footer_inner-wrapper {
10711072
max-width: 1440px;
10721073
width: 100%;
1073-
margin: 60px 10px;
1074+
margin: 60px 0;
10741075
display: flex;
10751076
justify-content: space-between;
1076-
align-items: flex-start;
1077-
gap: 50px;
10781077
}
1078+
@media only screen and (max-width: 1164px) {
1079+
footer .footer_inner-wrapper {
1080+
flex-direction: column
1081+
}
1082+
}
10791083
footer .footer_inner-wrapper .footer_newsletter {
10801084
width: 30%;
1085+
margin: 0 10px;
1086+
}
1087+
@media only screen and (max-width: 1164px) {
1088+
footer .footer_inner-wrapper .footer_newsletter {
1089+
width: 50%
1090+
}
1091+
}
1092+
@media only screen and (max-width: 768px) {
1093+
footer .footer_inner-wrapper .footer_newsletter {
1094+
width: 95%
10811095
}
1096+
}
10821097
footer .footer_inner-wrapper .footer_newsletter h2 {
10831098
font-size: 20px;
10841099
font-weight: 600;
@@ -1087,12 +1102,16 @@ footer .footer_inner-wrapper .footer_newsletter h2 {
10871102
footer .footer_inner-wrapper .footer_newsletter p {
10881103
margin-bottom: 20px;
10891104
}
1105+
footer .footer_inner-wrapper .footer_newsletter form {
1106+
display: flex;
1107+
}
10901108
footer .footer_inner-wrapper .footer_newsletter form input {
10911109
padding: 10px 0 10px 10px;
10921110
background-color: #e6e6e6;
10931111
border-top-left-radius: 10px;
10941112
border-bottom-left-radius: 10px;
10951113
outline: none;
1114+
width: 100%;
10961115
}
10971116
footer .footer_inner-wrapper .footer_newsletter form button {
10981117
display: inline-block;
@@ -1104,42 +1123,149 @@ footer .footer_inner-wrapper .footer_newsletter form button {
11041123
font-weight: 600;
11051124
font-size: 15px;
11061125
}
1107-
footer .footer_inner-wrapper .footer_logo {
1126+
footer .footer_inner-wrapper .footer_logo_links {
11081127
display: flex;
1109-
flex-direction: column;
11101128
gap: 50px;
1129+
flex-grow: 1;
1130+
margin: 0 10px;
1131+
}
1132+
@media only screen and (max-width: 1164px) {
1133+
footer .footer_inner-wrapper .footer_logo_links {
1134+
margin-bottom: 50px
1135+
}
1136+
}
1137+
@media only screen and (max-width: 640px) {
1138+
footer .footer_inner-wrapper .footer_logo_links {
1139+
flex-direction: column
11111140
}
1112-
footer .footer_inner-wrapper .footer_logo .footer-info-wrapper {
1141+
}
1142+
footer .footer_inner-wrapper .footer_logo_links .footer_logo {
11131143
display: flex;
11141144
flex-direction: column;
1115-
gap: 25px;
1116-
font-size: 13px;
1145+
gap: 50px;
1146+
}
1147+
@media only screen and (max-width: 640px) {
1148+
footer .footer_inner-wrapper .footer_logo_links .footer_logo {
1149+
width: 100%
1150+
}
1151+
}
1152+
footer .footer_inner-wrapper .footer_logo_links .footer_logo .footer-info-wrapper {
1153+
display: flex;
1154+
flex-direction: column;
1155+
gap: 25px;
1156+
font-size: 13px;
1157+
}
1158+
footer .footer_inner-wrapper .footer_logo_links .footer_logo .footer-info-wrapper div h2 {
1159+
font-weight: bold;
1160+
color: #2E2E2E;
1161+
}
1162+
footer .footer_inner-wrapper .footer_logo_links .footer_navigation {
1163+
flex-grow: 1;
11171164
}
1118-
footer .footer_inner-wrapper .footer_logo .footer-info-wrapper div h2 {
1119-
font-weight: bold;
1120-
color: #2E2E2E;
1165+
footer .footer_inner-wrapper .footer_logo_links .footer_navigation .region--footer {
1166+
display: flex;
1167+
justify-content: space-around;
1168+
}
1169+
@media only screen and (max-width: 768px) {
1170+
footer .footer_inner-wrapper .footer_logo_links .footer_navigation .region--footer {
1171+
flex-wrap: wrap
1172+
}
11211173
}
1122-
footer .footer_inner-wrapper .footer_navigation {
1123-
flex-grow: 1;
1174+
@media only screen and (max-width: 768px) {
1175+
footer .footer_inner-wrapper .footer_logo_links .footer_navigation .region--footer nav {
1176+
width: 50%;
1177+
margin-bottom: 40px
1178+
}
1179+
}
1180+
@media only screen and (max-width: 640px) {
1181+
footer .footer_inner-wrapper .footer_logo_links .footer_navigation .region--footer nav {
1182+
width: 100%
1183+
}
1184+
}
1185+
footer .footer_inner-wrapper .footer_logo_links .footer_navigation .region--footer nav h2 {
1186+
font-size: 16px;
1187+
font-weight: 600;
1188+
text-transform: uppercase;
1189+
margin-bottom: 15px;
1190+
}
1191+
footer .footer_inner-wrapper .footer_logo_links .footer_navigation .region--footer nav ul li {
1192+
font-size: 14px;
1193+
margin-bottom: 10px;
1194+
}
1195+
footer .footer_inner-wrapper .footer_logo_links .footer_navigation .region--footer nav ul li a:hover {
1196+
text-decoration: underline;
1197+
}
1198+
footer .bottom__footer {
1199+
width: 100%;
1200+
display: flex;
1201+
justify-content: center;
1202+
align-items: center;
1203+
padding-bottom: 20px;
1204+
font-size: 14px;
1205+
margin: 0 10px;
1206+
}
1207+
footer .bottom__footer .bottom__footer-inner {
1208+
max-width: 1440px;
1209+
display: flex;
1210+
justify-content: space-between;
1211+
width: 100%;
1212+
border-top: 1px solid #D7D7D7;
1213+
padding-top: 15px;
1214+
margin: 0 10px;
1215+
}
1216+
@media only screen and (max-width: 675px) {
1217+
footer .bottom__footer .bottom__footer-inner {
1218+
flex-direction: column;
1219+
font-size: 12px
11241220
}
1125-
footer .footer_inner-wrapper .footer_navigation .region--footer {
1221+
}
1222+
footer .bottom__footer .bottom__footer-inner .left-side {
11261223
display: flex;
1127-
gap: 75px;
1128-
margin-left: 20px;
1224+
align-items: center;
11291225
}
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;
1226+
@media only screen and (max-width: 675px) {
1227+
footer .bottom__footer .bottom__footer-inner .left-side {
1228+
margin-bottom: 20px;
1229+
justify-content: space-between
1230+
}
1231+
}
1232+
footer .bottom__footer .bottom__footer-inner .left-side p {
1233+
margin-right: 30px;
1234+
}
1235+
@media only screen and (max-width: 675px) {
1236+
footer .bottom__footer .bottom__footer-inner .left-side p {
1237+
margin-right: 0
1238+
}
11351239
}
1136-
footer .footer_inner-wrapper .footer_navigation .region--footer nav ul li {
1137-
font-size: 14px;
1138-
margin-bottom: 10px;
1240+
footer .bottom__footer .bottom__footer-inner .left-side .region--footer__bottom nav ul {
1241+
display: flex;
1242+
gap: 30px;
1243+
align-items: center;
11391244
}
1140-
footer .footer_inner-wrapper .footer_navigation .region--footer nav ul li a:hover {
1245+
footer .bottom__footer .bottom__footer-inner .left-side .region--footer__bottom nav ul li a:hover {
11411246
text-decoration: underline;
11421247
}
1248+
footer .bottom__footer .bottom__footer-inner .right-side {
1249+
display: flex;
1250+
align-items: center;
1251+
1252+
}
1253+
footer .bottom__footer .bottom__footer-inner .right-side p {
1254+
margin-right: 30px;
1255+
}
1256+
footer .bottom__footer .bottom__footer-inner .right-side .footer-socials {
1257+
display: flex;
1258+
gap: 20px;
1259+
}
1260+
footer .bottom__footer .bottom__footer-inner .right-side .footer-socials .footer-icon {
1261+
width: 40px;
1262+
height: 40px;
1263+
display: flex;
1264+
justify-content: center;
1265+
align-items: center;
1266+
border: 1px solid #d7d7d7;
1267+
border-radius: 50%;
1268+
}
11431269
.hero-wrapper {
11441270
min-height: 70vh;
11451271
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
@@ -15,6 +15,7 @@ regions:
1515
content: Content
1616
footer__logo: Footer logo
1717
footer: Footer
18+
footer__bottom: Footer bottom
1819
hidden: Hidden
1920

2021
ckeditor_stylesheets:

0 commit comments

Comments
 (0)