├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # HTML-CSS-Footer-Design
2 |
3 |
4 | 
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Footer Design
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | line-height: 1.5;
3 | font-family: 'Poppins', sans-serif;
4 | }
5 | *{
6 | margin:0;
7 | padding:0;
8 | box-sizing: border-box;
9 | }
10 | .container{
11 | max-width: 1170px;
12 | margin:auto;
13 | }
14 | .row{
15 | display: flex;
16 | flex-wrap: wrap;
17 | }
18 | ul{
19 | list-style: none;
20 | }
21 | .footer{
22 | background-color: #24262b;
23 | padding: 70px 0;
24 | }
25 | .footer-col{
26 | width: 25%;
27 | padding: 0 15px;
28 | }
29 | .footer-col h4{
30 | font-size: 18px;
31 | color: #ffffff;
32 | text-transform: capitalize;
33 | margin-bottom: 35px;
34 | font-weight: 500;
35 | position: relative;
36 | }
37 | .footer-col h4::before{
38 | content: '';
39 | position: absolute;
40 | left:0;
41 | bottom: -10px;
42 | background-color: #e91e63;
43 | height: 2px;
44 | box-sizing: border-box;
45 | width: 50px;
46 | }
47 | .footer-col ul li:not(:last-child){
48 | margin-bottom: 10px;
49 | }
50 | .footer-col ul li a{
51 | font-size: 16px;
52 | text-transform: capitalize;
53 | color: #ffffff;
54 | text-decoration: none;
55 | font-weight: 300;
56 | color: #bbbbbb;
57 | display: block;
58 | transition: all 0.3s ease;
59 | }
60 | .footer-col ul li a:hover{
61 | color: #ffffff;
62 | padding-left: 8px;
63 | }
64 | .footer-col .social-links a{
65 | display: inline-block;
66 | height: 40px;
67 | width: 40px;
68 | background-color: rgba(255,255,255,0.2);
69 | margin:0 10px 10px 0;
70 | text-align: center;
71 | line-height: 40px;
72 | border-radius: 50%;
73 | color: #ffffff;
74 | transition: all 0.5s ease;
75 | }
76 | .footer-col .social-links a:hover{
77 | color: #24262b;
78 | background-color: #ffffff;
79 | }
80 |
81 | /*responsive*/
82 | @media(max-width: 767px){
83 | .footer-col{
84 | width: 50%;
85 | margin-bottom: 30px;
86 | }
87 | }
88 | @media(max-width: 574px){
89 | .footer-col{
90 | width: 100%;
91 | }
92 | }
93 |
--------------------------------------------------------------------------------