-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinput.css
136 lines (124 loc) · 4.63 KB
/
input.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
/* Layout */
.container{
@apply max-w-screen-xl mx-auto w-full grid justify-items-stretch items-start;
}
.margin-resp{
@apply xl:mx-auto mx-hmar;
}
/* Navbar */
.navbar_link {
@apply px-6 py-7 hover:bg-border-grey transition-all;
}
/* Header */
.img-header {
@apply w-full h-auto text-white lg:min-h-[663px] min-h-[200px] flex justify-center items-center bg-no-repeat bg-center bg-cover;
}
/* Buttons */
.btn {
@apply uppercase text-base font-normal rounded-lg md:py-4 md:px-12 px-6 py-4 transition-all sm:w-auto w-[90%] cursor-pointer;
}
.btn-primary{
@apply bg-primary hover:bg-primary-h text-black;
}
.btn-secondary{
@apply bg-black text-primary hover:text-white;
}
.btn-nav{
@apply bg-primary hover:bg-primary-h text-black py-3 px-10;
}
.read-more{
@apply hover:bg-grey rounded-md p-3 transition-all;
}
/* Text */
.heading{
@apply uppercase font-bold text-left;
}
.h1{
@apply text-center lg:text-[64px] text-4xl leading-[1.3];
}
.h2{
@apply lg:text-6xl text-3xl;
}
.h3{
@apply lg:text-5xl text-3xl;
}
.h4{
@apply lg:text-4xl text-2xl;
}
.h5{
@apply text-3xl;
}
.h6{
@apply text-2xl;
}
.p{
@apply text-left;
}
.sub-headline{
@apply uppercase text-center sm:mb-vmar mb-smar;
}
.section-title{
@apply heading h3 text-center sm:mb-vmar mb-smar leading-snug;
}
.card-title{
@apply heading h4 sm:mb-vmar mb-smar;
}
.card-title2{
@apply heading text-xl sm:mb-vmar mb-smar;
}
.orange-title{
@apply uppercase font-bold text-orange-h text-left block text-sm sm:mb-vmar mb-smar
}
.footer-text{
@apply text-grey uppercase text-left leading-8 no-underline text-[12px] font-[300];
}
/* Sections */
.sections{
@apply grid relative mt-sect-m-s md:mt-sect-m md:gap-x-hgap gap-x-5 md:gap-y-vgap gap-y-5;
}
.section-1{
@apply md:grid-rows-card-2 md:grid-cols-3 grid-rows-none grid-cols-none justify-items-center items-stretch;
}
.section-2{
@apply lg:mx-auto grid-rows-card-2 grid-cols-3 justify-items-center items-stretch max-w-screen-lg;
}
.section-3{
@apply md:mx-auto mx-hmar grid-rows-card-3 grid-cols-1 justify-items-center items-center mb-sect-m-s md:mb-sect-m max-w-screen-md mt-sect-m-s ;
}
.section-4{
@apply max-w-screen-xl grid-rows-card-4 md:grid-rows-card-1 sm:grid-rows-card-2 sm:grid-cols-4 grid-cols-card-1 justify-items-center items-center mb-[70px];
}
.section-6{
@apply max-w-screen-xl w-auto mt-0 mb-0 h-auto flex justify-center items-center;
}
/* Cards */
.card-1{
@apply flex flex-col justify-center items-start bg-secondary card-border p-card-pad-s md:p-card-pad col-span-3 md:col-span-1 md:grid-cols-none;
}
.card-2{
@apply col-auto rounded-xl max-w-full relative w-auto justify-self-center h-fit;
}
.card-3{
@apply flex flex-wrap md:col-auto sm:col-span-2 col-span-4 w-full h-auto text-white sm:min-h-[380px] min-h-[300px] content-end justify-center bg-no-repeat bg-center bg-cover;
}
.card-4{
@apply flex flex-col w-full h-full p-card-pad-s xl:p-card-pad bg-secondary justify-start items-start relative;
}
.card-5{
@apply flex flex-col justify-start items-start p-card-pad-s md:p-card-pad bg-white text-black bg-no-repeat bg-right lg:m-sect-m sm:m-sect-m-s m-12 bg-[url('./img/qicon.png')] lg:max-w-[800px];
}
.card-img{
@apply w-full h-auto ;
}
/* elements */
.icon-rounded{
@apply w-[48px] h-[48px] rounded-full flex justify-center items-center bg-primary mb-5 text-lg
}
.card-border{
@apply border-b-[15px] border-b-primary;
}
}