src/components/HomePage/call.scss
@import '../../assets/sass/main.scss';
.call{
background-color: red;
padding: 3em;
background-image: linear-gradient(to bottom right, $color-light-blue, $color-dark-blue);
display: flex;
flex-direction: column;
align-items: center;
padding: 4rem 0;
color: $color-white;
&__p {
font-weight: 600;
}
&__bar{
padding: .3em;
background-color: $color-yellow;
width: 40%;
border-radius: .5em;
margin: .5em;
}
&__title {
font-size: 4rem;
font-weight: 700;
margin-bottom: 2rem;
}
}
@media (min-width:320px) {
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
.call {
&__title {
font-size: 1.8rem;
margin-bottom: 1rem;
}
&__p {
margin-top: 1rem;
font-size: 1.3rem;
}
&__bar {
padding: .15em;
}
}
}
@media (min-width:480px) {
/* smartphones, Android phones, landscape iPhone */
.call {
&__title {
font-size: 2.8rem;
}
&__p {
font-size: 1.8rem;
}
&__bar {
padding: .2em;
}
}
}
@media (min-width:600px) {
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
.call {
&__title {
font-size: 3rem;
}
&__p {
font-size: 2rem;
}
&__bar {
padding: .2em;
}
}
}
@media (min-width:801px) {
/* tablet, landscape iPad, lo-res laptops ands desktops */
.call {
&__title {
font-size: 3.3rem;
}
&__p {
font-size: 2.2rem;
}
}
}
@media (min-width:1025px) {
/* big landscape tablets, laptops, and desktops */
.call {
&__title {
font-size: 3.5rem;
}
&__p {
font-size: 2.8rem;
}
}
}