├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # HTML-CSS-Simple-Footer
2 |
3 |
4 | 
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Test
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
108 |
109 |
110 |
111 |
112 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | *, *:before, *:after {
2 | box-sizing: border-box;
3 | }
4 |
5 | html {
6 | font-size: 100%;
7 | }
8 |
9 | body {
10 | font-family: acumin-pro, system-ui, sans-serif;
11 | margin: 0;
12 | display: grid;
13 | grid-template-rows: auto 1fr auto;
14 | font-size: 14px;
15 | background-color: #f4f4f4;
16 | align-items: start;
17 | min-height: 100vh;
18 | }
19 |
20 | .footer {
21 | display: flex;
22 | flex-flow: row wrap;
23 | padding: 30px 30px 20px 30px;
24 | color: #2f2f2f;
25 | background-color: #f2eee3;
26 | border-top: 1px solid #e5e5e5;
27 | }
28 |
29 | .footer > * {
30 | flex: 1 100%;
31 | }
32 |
33 | .footer__addr {
34 | margin-right: 1.25em;
35 | margin-bottom: 2em;
36 | }
37 |
38 | .footer__logo {
39 | font-family: 'Pacifico', cursive;
40 | font-weight: 400;
41 | text-transform: lowercase;
42 | font-size: 2rem;
43 | }
44 |
45 | .footer__addr h2 {
46 | margin-top: 1.3em;
47 | font-size: 15px;
48 | font-weight: 400;
49 | }
50 |
51 | .nav__title {
52 | font-weight: 400;
53 | font-size: 15px;
54 | }
55 |
56 | .footer address {
57 | font-style: normal;
58 | color: #999;
59 | }
60 |
61 | .footer__btn {
62 | display: flex;
63 | align-items: center;
64 | justify-content: center;
65 | height: 36px;
66 | max-width: max-content;
67 | background-color: rgb(33, 33, 33, 0.07);
68 | border-radius: 100px;
69 | color: #2f2f2f;
70 | line-height: 0;
71 | margin: 0.6em 0;
72 | font-size: 1rem;
73 | padding: 0 1.3em;
74 | }
75 |
76 | .footer ul {
77 | list-style: none;
78 | padding-left: 0;
79 | }
80 |
81 | .footer li {
82 | line-height: 2em;
83 | }
84 |
85 | .footer a {
86 | text-decoration: none;
87 | }
88 |
89 | .footer__nav {
90 | display: flex;
91 | flex-flow: row wrap;
92 | }
93 |
94 | .footer__nav > * {
95 | flex: 1 50%;
96 | margin-right: 1.25em;
97 | }
98 |
99 | .nav__ul a {
100 | color: #999;
101 | }
102 |
103 | .legal {
104 | display: flex;
105 | flex-wrap: wrap;
106 | color: #999;
107 | }
108 |
109 | @media screen and (min-width: 24.375em) {
110 | .legal .legal__links {
111 | margin-left: auto;
112 | }
113 | }
114 |
115 | @media screen and (min-width: 40.375em) {
116 | .footer__nav > * {
117 | flex: 1;
118 | }
119 |
120 | .footer__addr {
121 | flex: 1 0px;
122 | }
123 |
124 | .footer__nav {
125 | flex: 2 0px;
126 | }
127 | }
128 |
--------------------------------------------------------------------------------