-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.scss
129 lines (129 loc) · 2.59 KB
/
style.scss
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
$theme-colors:(
"primary":#ff6d6d
);
@import "node_modules/bootstrap/scss/bootstrap";
*{
font-family: 'Poppins';
}
//Fonts
@font-face {
font-family: 'Poppins';
src: url('fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Poppins-Regular.woff') format('woff'), url('fonts/Poppins-Regular.ttf') format('truetype'), url('fonts/Poppins-Regular.svg#Poppins-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Khand-Regular';
src: url('fonts/Khand-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Khand-Regular.woff') format('woff'), url('fonts/Khand-Regular.ttf') format('truetype'), url('fonts/Khand-Regular.svg#Khand-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
// mixins
@mixin bg(){
background-repeat: no-repeat;
background-size: cover;
background-position:center;
}
//variables and general classes
$pt-10:10rem;
$pb-10:10rem;
.pt-10{
padding-top: $pt-10;
}
.pb-10{
padding-bottom: $pb-10;
}
header{
background:url(img/header.png);
@include bg();
background-attachment: fixed;
#try{
color:#fff;
padding-left: 2rem;
padding-right: 2rem;
}
h1{
letter-spacing: .2rem;
font-weight: lighter;
color:#282828;
}
.w-50{
margin: auto;
}
}
section{
h3{
font-size: 1rem;
}
h2{
color:#282828;
}
}
.design{
color: #8a8a8a;
.d-flex{
background: #ececec;
}
}
.features{
background-color:#f6f5f3;
background-image: url(img/Pen-holder.png),url(img/Earphones.png),url(img/Coffee-Cup.png);
background-position: left,right top,right bottom;
background-repeat: no-repeat;
h4{
font-size: 1.5rem;
}
.col-4{
font-size: .9rem;
}
}
.partners{
background:url(img/bg.png) repeat top;
background-size: cover;
color:#fff;
img{
height: 5rem;
}
}
.contact{
background:#323969;
h2,button{
color:#fff;
}
}
footer{
.nav-link{
padding: 0.5rem 0;
color:#282828;
}
}
@media (max-width:1440px){
.features{
background-position: left top,bottom center, bottom center;
}
}
@media (max-width:768px){
header{
h1{
font-size: 2rem;
}
}
.contact{
input{
margin-bottom:3rem;
}
}
footer{
text-align: center;
.col-md-3{
margin-bottom: 1.5rem;
}
}
}
@media (max-width:425px){
header{
h1{
font-size: 1.3rem;
}
}
}