Skip to content

Commit 804ba75

Browse files
Arsen-agaArsen-aga
committed
adaptive footer, and all blocks on index page
1 parent 4427deb commit 804ba75

File tree

10 files changed

+245
-63
lines changed

10 files changed

+245
-63
lines changed

‎app.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ watch(pathPage, (newPath) => {
4848
<NuxtPage :btnColor="btnColor" class="section__content" />
4949
</div>
5050
</div>
51-
<!-- <FooterBlock /> -->
51+
<FooterBlock />
5252
</template>
5353
<style>
5454
.block__header {

‎assets/css/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,11 @@ textarea {
132132
width: 100%;
133133
margin: 0 auto;
134134
padding: 0 20px;
135+
136+
@media (max-width: 991.98px) {
137+
padding: 0 15px;
138+
overflow: hidden;
139+
}
135140
}
136141

137142
.container {

‎components/CallBackBlock.vue

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@
22
import { defineProps } from "vue";
33
import CallBackBtn from "./UI/CallBackBtn.vue";
44
5-
65
const props = defineProps({
7-
btnColor:{
6+
btnColor: {
87
type: String,
9-
default: 'orange'
10-
}
11-
})
8+
default: "orange",
9+
},
10+
});
1211
13-
const title = ref('Мы рады работать с ')
12+
const title = ref("Мы рады работать с ");
1413
const info = ref([
1514
"компаниями и людьми,<br>",
1615
"которые вдохновлены своими идеями<br>",
@@ -25,15 +24,18 @@ const info = ref([
2524
<span>{{ title }}</span>
2625
<p v-for="(str, index) in info" :key="index" v-html="str"></p>
2726
</div>
28-
<CallBackBtn :color="btnColor" >Связаться с нами</CallBackBtn>
27+
<CallBackBtn :color="btnColor">Связаться с нами</CallBackBtn>
2928
</div>
3029
</section>
3130
</template>
3231

3332
<style lang="scss" scoped>
3433
.callback {
3534
padding: 100px 0;
36-
.container{
35+
@media (max-width: 991.98px) {
36+
padding: 40px 0;
37+
}
38+
.container {
3739
margin-left: 0;
3840
}
3941
@@ -44,27 +46,76 @@ const info = ref([
4446
letter-spacing: -0.05em;
4547
margin-bottom: 62px;
4648
49+
@media (max-width: 1230px) {
50+
margin-bottom: 40px;
51+
}
52+
@media (max-width: 991.98px) {
53+
margin-bottom: 30px;
54+
}
55+
56+
@media (max-width: 767.98px) {
57+
margin-bottom: 20px;
58+
}
59+
@media (max-width: 575.98px) {
60+
display: inline-block;
61+
br {
62+
display: none;
63+
}
64+
}
65+
4766
p {
4867
font-weight: 700;
4968
font-size: 38px;
5069
line-height: 120%;
5170
text-transform: uppercase;
5271
color: #333333;
5372
73+
@media (max-width: 1230px) {
74+
font-size: 32px;
75+
}
76+
@media (max-width: 991.98px) {
77+
font-size: 28px;
78+
}
79+
@media (max-width: 767.98px) {
80+
font-size: 24px;
81+
}
82+
@media (max-width: 575.98px) {
83+
br {
84+
display: none;
85+
}
86+
}
5487
5588
&:nth-child(2) {
5689
display: inline-block;
5790
}
5891
&:nth-child(3) {
5992
margin-left: 180px;
93+
@media (max-width: 991.98px) {
94+
margin-left: 100px;
95+
}
96+
@media (max-width: 767.98px) {
97+
margin-left: 40px;
98+
}
99+
@media (max-width: 575.98px) {
100+
margin-left: 0;
101+
}
60102
}
61103
}
62104
span {
63105
font-weight: 400;
64106
font-size: 38px;
65107
color: #a1a1a1;
108+
109+
@media (max-width: 1230px) {
110+
font-size: 32px;
111+
}
112+
@media (max-width: 991.98px) {
113+
font-size: 28px;
114+
}
115+
@media (max-width: 767.98px) {
116+
font-size: 24px;
117+
}
66118
}
67119
}
68-
69120
}
70121
</style>

‎components/Clients.vue

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -85,42 +85,8 @@ const widthClientBefoore = () => {
8585
}
8686
};
8787
88-
// async function postNewFetch() {
89-
// let url =
90-
// "https://api.xn--b1agnepfhjfgc3i.fun/web/index.php?r=api-theme/post-list";
91-
// let params = {
92-
// name: "Роман",
93-
// tel: "+7 (999) 999-99-99",
94-
// text: "У меня есть вопрос",
95-
// };
96-
// try {
97-
// await fetch(
98-
// url,
99-
// {
100-
// method: "POST",
101-
// body: JSON.stringify(params),
102-
// },
103-
// {
104-
// headers: {
105-
// "Content-Type": "application/json",
106-
// Bearer: "123132132165456465",
107-
// },
108-
// }
109-
// )
110-
// .then((response) => {
111-
// console.log(response);
112-
// })
113-
// .catch((error) => {
114-
// console.log(error);
115-
// });
116-
// } catch (error) {
117-
// console.log(error);
118-
// }
119-
// }
120-
12188
onMounted(async () => {
12289
widthClientBefoore();
123-
// await postNewFetch();
12490
});
12591
</script>
12692

@@ -151,6 +117,11 @@ onMounted(async () => {
151117
position: relative;
152118
z-index: 1;
153119
120+
@media (max-width: 991.98px) {
121+
padding: 40px 0;
122+
margin-top: 40px;
123+
}
124+
154125
&::before {
155126
content: "";
156127
position: absolute;
@@ -165,7 +136,7 @@ onMounted(async () => {
165136
width: var(--before-width, 100%);
166137
z-index: -1;
167138
}
168-
.container{
139+
.container {
169140
margin-left: 0;
170141
}
171142
@@ -184,11 +155,19 @@ onMounted(async () => {
184155
justify-content: space-between;
185156
align-items: start;
186157
gap: 15px;
158+
159+
@media (max-width: 991.98px) {
160+
flex-direction: column;
161+
}
187162
}
188163
189164
&__right {
190165
max-width: 670px;
191166
width: 100%;
167+
168+
@media (max-width: 991.98px) {
169+
max-width: none;
170+
}
192171
}
193172
194173
&__subtitle {
@@ -198,6 +177,20 @@ onMounted(async () => {
198177
line-height: calc(20 / 16 * 100%);
199178
color: #7b769d;
200179
margin-bottom: 50px;
180+
181+
@media (max-width: 1230px) {
182+
margin-bottom: 40px;
183+
}
184+
@media (max-width: 991.98px) {
185+
margin-bottom: 30px;
186+
}
187+
188+
@media (max-width: 767.98px) {
189+
margin-bottom: 20px;
190+
}
191+
@media (max-width: 575.98px) {
192+
margin-bottom: 15px;
193+
}
201194
}
202195
203196
&__items {
@@ -206,6 +199,14 @@ onMounted(async () => {
206199
display: flex;
207200
flex-wrap: wrap;
208201
gap: 10px;
202+
203+
@media (max-width: 991.98px) {
204+
margin: 0 auto;
205+
}
206+
207+
@media (max-width: 767.98px) {
208+
justify-content: space-around;
209+
}
209210
}
210211
211212
&__item {

‎components/Expertise.vue

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ onMounted(() => {
3131
if (span === spans[spans.length - 1]) {
3232
tl.to(span, { color: "#333", duration: 1, ease: "none" });
3333
} else {
34-
tl.to(span, { color: "#333", duration: 1, ease: "none" })
34+
tl.to(span, { color: "#333", duration: 1, ease: "none" });
3535
}
3636
});
3737
});
@@ -49,8 +49,10 @@ onMounted(() => {
4949
<style lang="scss" scoped>
5050
.expertise {
5151
padding-top: 100px;
52-
53-
.container{
52+
@media (max-width: 991.98px) {
53+
padding-top: 40px;
54+
}
55+
.container {
5456
margin-left: 0;
5557
}
5658
@@ -73,5 +75,17 @@ onMounted(() => {
7375
letter-spacing: -0.05em;
7476
color: #333333;
7577
}
78+
&__title,
79+
&__subtitle {
80+
@media (max-width: 1230px) {
81+
font-size: 32px;
82+
}
83+
@media (max-width: 991.98px) {
84+
font-size: 28px;
85+
}
86+
@media (max-width: 767.98px) {
87+
font-size: 24px;
88+
}
89+
}
7690
}
7791
</style>

0 commit comments

Comments
 (0)