Skip to content

Commit 27e13d1

Browse files
RakibRahmanRakibRahman
committed
flex-responsive-footer
1 parent 3b49c88 commit 27e13d1

18 files changed

+450
-0
lines changed

‎CSS Flexbox/Projects/flex-responsive-footer/img1/Facebook_white.png

2.07 KB
Loading

‎CSS Flexbox/Projects/flex-responsive-footer/img1/Github_white.png

2.86 KB
Loading

‎CSS Flexbox/Projects/flex-responsive-footer/img1/Outlook_white.png

2.82 KB
Loading

‎CSS Flexbox/Projects/flex-responsive-footer/img1/Patreon_white.png

2.34 KB
Loading

‎CSS Flexbox/Projects/flex-responsive-footer/img1/icons8-location-50.png

2.66 KB
Loading

‎CSS Flexbox/Projects/flex-responsive-footer/img1/icons8-mail-48.png

2.38 KB
Loading

‎CSS Flexbox/Projects/flex-responsive-footer/img1/icons8-phone-48.png

2.11 KB
Loading

‎CSS Flexbox/Projects/flex-responsive-footer/index.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Responsive Footer</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<footer>
13+
<div class="container">
14+
<div class="about-us section">
15+
<h2 class="h2-title">About Us</h2>
16+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam tenetur nulla nisi recusandae
17+
aliquid debitis nihil provident. Temporibus beatae perferendis fuga similique alias ducimus! Eius
18+
libero tenetur at pariatur eum.Autem rerum commodi vero libero ex id veniam velit fugit dolore
19+
vitae.This World Shall Know Pain
20+
<ul class="social-ico">
21+
<li> <img src="img1/Facebook_white.png" alt="s-logo"> </li>
22+
<li> <img src="img1/Github_white.png" alt="s-logo"> </li>
23+
<li> <img src="img1/Outlook_white.png" alt="s-logo"> </li>
24+
<li> <img src="img1/Patreon_white.png" alt="s-logo"> </li>
25+
26+
</ul>
27+
</div>
28+
<div class="q-links section">
29+
<h2 class="h2-title q-h2">Quick Links</h2>
30+
<ul class="ul-links">
31+
<li><a href="#">Back To Top</a></li>
32+
<li><a href="#">F.A.Q</a></li>
33+
<li><a href="#">Site Map</a></li>
34+
<li><a href="#">Privacy Policy</a></li>
35+
<li><a href="#">Partners</a></li>
36+
<li><a href="#">Terms & Conditions</a></li>
37+
</ul>
38+
</div>
39+
<div class="contact-us section">
40+
<h2 class="h2-title"> Contact Us</h2>
41+
<ul class="ul-contact">
42+
<li>
43+
44+
<span><img src="img1/icons8-location-50.png" alt="">
45+
<p> Master Quarter,
46+
<br>
47+
Habiganj Sadar, <br>
48+
Habiganj ,Bangladesh</p>
49+
</span>
50+
51+
</li>
52+
<li>
53+
<span><img src="img1/icons8-phone-48.png" alt="">
54+
<p>
55+
+01289611479 <br>
56+
+55017935664
57+
</p>
58+
</span>
59+
</li>
60+
<li>
61+
<span><img src="img1/icons8-mail-48.png" alt="">
62+
<p>
63+
Mail Us: <br>
64+
support@rrtech.com
65+
</p>
66+
</span>
67+
</li>
68+
</ul>
69+
</div>
70+
</footer>
71+
<div class="copyright">
72+
<p>
73+
Copyright © RR-Tech 2020. All Rights Reserved.
74+
</p>
75+
</div>
76+
</body>
77+
78+
</html>

‎CSS Flexbox/Projects/flex-responsive-footer/style.css

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Ribeye&display=swap");
2+
* {
3+
padding: 0;
4+
margin: 0;
5+
box-sizing: border-box;
6+
}
7+
body {
8+
display: flex;
9+
justify-content: flex-end;
10+
align-items: center;
11+
background: darkgray;
12+
flex-direction: column;
13+
min-height: 100vh;
14+
font-family: "Ribeye", cursive, sans-serif;
15+
font-weight: 300;
16+
17+
/*to position footer at bottom */
18+
}
19+
footer {
20+
position: relative;
21+
width: 100%;
22+
height: auto;
23+
padding: 50px 100px;
24+
background: #000000;
25+
color: #f14e0d;
26+
font-weight: 300;
27+
letter-spacing: 2px;
28+
29+
display: flex;
30+
justify-content: space-between;
31+
flex-wrap: wrap;
32+
}
33+
footer .container {
34+
display: flex;
35+
justify-content: space-between;
36+
flex-flow: row wrap;
37+
}
38+
footer .container .section {
39+
margin-right: 30px;
40+
}
41+
footer .container .about-us {
42+
width: 40%;
43+
}
44+
45+
footer .container .social-ico {
46+
list-style: none;
47+
margin-top: 20px;
48+
}
49+
footer .container .social-ico li {
50+
display: inline-flex;
51+
margin-right: 10px;
52+
}
53+
footer .container .social-ico img {
54+
width: 35px;
55+
cursor: pointer;
56+
transition: 0.2s;
57+
}
58+
footer .container .social-ico img:hover {
59+
background: dodgerblue;
60+
border-radius: 50%;
61+
transform: translateY(-3px) rotate(9deg);
62+
}
63+
footer .container .q-links {
64+
position: relative;
65+
width: 25%;
66+
}
67+
footer .q-links .ul-links {
68+
list-style: none;
69+
margin-top: 20px;
70+
}
71+
footer .q-links .ul-links li {
72+
margin-bottom: 20px;
73+
}
74+
footer .q-links .ul-links li a {
75+
color: whitesmoke;
76+
font-weight: 300;
77+
text-decoration: none;
78+
transition: color 0.3s;
79+
}
80+
81+
footer .q-links .ul-links:hover li a {
82+
color: rgba(219, 6, 6, 0.89);
83+
}
84+
footer .q-links .ul-links li:hover a {
85+
color: springgreen;
86+
}
87+
footer .container .contact-us {
88+
position: relative;
89+
width: calc(35% -60px);
90+
margin-right: 0 !important;
91+
}
92+
footer .container .contact-us .ul-contact {
93+
margin-top: 20px;
94+
list-style: none;
95+
}
96+
footer .container .contact-us .ul-contact li {
97+
margin-bottom: 15px;
98+
}
99+
footer .container .contact-us .ul-contact li img {
100+
width: 35px;
101+
}
102+
footer .container .contact-us .ul-contact li > * {
103+
vertical-align: middle;
104+
}
105+
footer .h2-title {
106+
position: relative;
107+
font-weight: 500;
108+
color: #f5f5f5;
109+
margin-bottom: 15px;
110+
}
111+
footer .container .h2-title::before {
112+
content: "";
113+
position: absolute;
114+
bottom: -5px;
115+
left: 0px;
116+
width: 130px;
117+
height: 1px;
118+
background: #f14e0d;
119+
}
120+
.q-links .q-h2 {
121+
color: #f14e0d;
122+
}
123+
.copyright {
124+
color: whitesmoke;
125+
font-size: 20px;
126+
padding: 20px 100px;
127+
background: #000000;
128+
width: 100%;
129+
text-align: center;
130+
}
131+
@media (max-width: 990px) {
132+
footer {
133+
padding: 40px;
134+
}
135+
footer .container {
136+
flex-flow: column wrap;
137+
}
138+
.footer .container .section {
139+
margin-right: 0;
140+
margin-bottom: 40px;
141+
}
142+
footer .container .section.about-us,
143+
.q-links,
144+
.contact-us {
145+
width: 100%;
146+
}
147+
}

‎CSS-responsive-footer-demo.css

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Ribeye&display=swap");
2+
* {
3+
padding: 0;
4+
margin: 0;
5+
box-sizing: border-box;
6+
}
7+
body {
8+
display: flex;
9+
justify-content: flex-end;
10+
align-items: center;
11+
background: darkgray;
12+
flex-direction: column;
13+
min-height: 100vh;
14+
font-family: "Ribeye", cursive, sans-serif;
15+
font-weight: 300;
16+
17+
/*to position footer at bottom */
18+
}
19+
footer {
20+
position: relative;
21+
width: 100%;
22+
height: auto;
23+
padding: 50px 100px;
24+
background: #000000;
25+
color: #f14e0d;
26+
font-weight: 300;
27+
letter-spacing: 2px;
28+
29+
display: flex;
30+
justify-content: space-between;
31+
flex-wrap: wrap;
32+
}
33+
footer .container {
34+
display: flex;
35+
justify-content: space-between;
36+
flex-flow: row wrap;
37+
}
38+
footer .container .section {
39+
margin-right: 30px;
40+
}
41+
footer .container .about-us {
42+
width: 40%;
43+
}
44+
45+
footer .container .social-ico {
46+
list-style: none;
47+
margin-top: 20px;
48+
}
49+
footer .container .social-ico li {
50+
display: inline-flex;
51+
margin-right: 10px;
52+
}
53+
footer .container .social-ico img {
54+
width: 35px;
55+
cursor: pointer;
56+
transition: 0.2s;
57+
}
58+
footer .container .social-ico img:hover {
59+
background: dodgerblue;
60+
border-radius: 50%;
61+
transform: translateY(-3px) rotate(9deg);
62+
}
63+
footer .container .q-links {
64+
position: relative;
65+
width: 25%;
66+
}
67+
footer .q-links .ul-links {
68+
list-style: none;
69+
margin-top: 20px;
70+
}
71+
footer .q-links .ul-links li {
72+
margin-bottom: 20px;
73+
}
74+
footer .q-links .ul-links li a {
75+
color: whitesmoke;
76+
font-weight: 300;
77+
text-decoration: none;
78+
transition: color 0.3s;
79+
}
80+
81+
footer .q-links .ul-links:hover li a {
82+
color: rgba(219, 6, 6, 0.89);
83+
}
84+
footer .q-links .ul-links li:hover a {
85+
color: springgreen;
86+
}
87+
footer .container .contact-us {
88+
position: relative;
89+
width: calc(35% -60px);
90+
margin-right: 0 !important;
91+
}
92+
footer .container .contact-us .ul-contact {
93+
margin-top: 20px;
94+
list-style: none;
95+
}
96+
footer .container .contact-us .ul-contact li {
97+
margin-bottom: 15px;
98+
}
99+
footer .container .contact-us .ul-contact li img {
100+
width: 35px;
101+
}
102+
footer .container .contact-us .ul-contact li > * {
103+
vertical-align: middle;
104+
}
105+
footer .h2-title {
106+
position: relative;
107+
font-weight: 500;
108+
color: #f5f5f5;
109+
margin-bottom: 15px;
110+
}
111+
footer .container .h2-title::before {
112+
content: "";
113+
position: absolute;
114+
bottom: -5px;
115+
left: 0px;
116+
width: 130px;
117+
height: 1px;
118+
background: #f14e0d;
119+
}
120+
.q-links .q-h2 {
121+
color: #f14e0d;
122+
}
123+
.copyright {
124+
color: whitesmoke;
125+
font-size: 20px;
126+
padding: 20px 100px;
127+
background: #000000;
128+
width: 100%;
129+
text-align: center;
130+
}
131+
@media (max-width: 990px) {
132+
footer {
133+
padding: 40px;
134+
}
135+
footer .container {
136+
flex-flow: column wrap;
137+
}
138+
.footer .container .section {
139+
margin-right: 0;
140+
margin-bottom: 40px;
141+
}
142+
footer .container .section.about-us,
143+
.q-links,
144+
.contact-us {
145+
width: 100%;
146+
}
147+
}

0 commit comments

Comments
 (0)