source: imaps-frontend/src/pages/IMaps/components/Footer.css@ 79a0317

main
Last change on this file since 79a0317 was 79a0317, checked in by stefan toskovski <stefantoska84@…>, 3 days ago

F4 Finalna Verzija

  • Property mode set to 100644
File size: 2.4 KB
Line 
1.footer-container {
2 background-color: #242424;
3 padding: 4rem 0 2rem 0;
4 display: flex;
5 flex-direction: column;
6 justify-content: center;
7 align-items: center;
8}
9
10.footer-subscription {
11 display: flex;
12 flex-direction: column;
13 justify-content: center;
14 align-items: center;
15 text-align: center;
16
17 margin-bottom: 24px;
18 padding: 24px;
19 color: #fff;
20}
21
22.footer-subscription > p {
23 font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
24}
25
26.footer-subscription-heading {
27 margin-bottom: 24px;
28 font-size: 24px;
29}
30
31.footer-subscription-text {
32 margin-bottom: 24px;
33 font-size: 20px;
34}
35
36.footer-input {
37 padding: 8px 20px;
38 border-radius: 2px;
39 margin-right: 10px;
40 outline: none;
41 border: none;
42 font-size: 18px;
43 margin-bottom: 16px;
44 border: 1px solid #fff;
45}
46
47.footer-links {
48 width: 100%;
49 display: flex;
50 justify-content: space-evenly;
51}
52.footer-link-wrapper a {
53 margin-top: 1em;
54}
55.footer-link-wrapper h2 {
56 width: 100%;
57}
58
59
60.footer-link-items {
61 display: flex;
62 flex-direction: column;
63 align-items: center;
64 margin: 16px;
65 text-align: left;
66 width: 160px;
67 box-sizing: border-box;
68}
69
70.footer-link-items h2 {
71 margin-bottom: 16px;
72}
73
74.footer-link-items > h2 {
75 color: #fff;
76}
77
78.footer-link-items a {
79 color: #fff;
80 text-decoration: none;
81 margin-bottom: 0.5rem;
82}
83
84.footer-link-items a:hover {
85 color: #e9e9e9;
86 transition: 0.3s ease-out;
87}
88
89.footer-email-form h2 {
90 margin-bottom: 2rem;
91}
92
93.footer-input::placeholder {
94 color: #b1b1b1;
95}
96
97/* Social Icons */
98.social-icon-link {
99 color: #fff;
100 font-size: 24px;
101}
102
103.social-media {
104}
105
106.social-media-wrap {
107 display: flex;
108 flex-direction: column;
109 align-items: center;
110}
111
112.social-icons {
113 display: flex;
114 justify-content: space-between;
115 align-items: center;
116 width: 240px;
117}
118
119.social-logo {
120 color: #fff;
121 justify-self: start;
122 cursor: pointer;
123 text-decoration: none;
124 font-size: 2rem;
125 display: flex;
126 align-items: center;
127 margin-bottom: 16px;
128}
129.social-media-wrap img {
130 width: 25%;
131}
132
133.website-rights {
134 color: #fff;
135 align-content: flex-end;
136 width: 50%;
137 margin-top: 2em;
138}
139
140@media screen and (max-width: 820px) {
141 .footer-links {
142 padding-top: 2rem;
143 }
144
145 .footer-input {
146 width: 100%;
147 }
148
149 .btn {
150 width: 100%;
151 }
152
153 .footer-link-wrapper {
154 flex-direction: column;
155 }
156
157 .social-media-wrap {
158 flex-direction: column;
159 }
160}
161
162@media screen and (max-width: 768px) {
163}
Note: See TracBrowser for help on using the repository browser.