.wrap
.card
img(src="https://placeimg.com/400/480/nature")
.card-content
h1.card-content_title Title is Lorem ipsum
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio arcu, venenatis sit amet eros id, lobortis iaculis nulla. Duis sagittis euismod auctor. Morbi ac odio orci.
.card-content_btns
button.btn.btn--ok(type="button") Yes
button.btn.btn--no(type="button") No
View Compiled
// GLOBAL VALUES IN SASS VARIABLES
$fontRoboto: "Roboto", sans-serif;
$fontVidaloka: "Vidaloka", serif;
$fontSizeMobile: 18px;
$fontSizeDesktop: 16px;
$colorBlue: #1c1b34;
$mediaMobile: 46.875rem;
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* General */
:root {
/* Global variables */
--GL-FONT-ROBOTO: #{$fontRoboto};
--GL-FONT-VIDALOKA: #{$fontVidaloka};
--GL-FONT-SIZE: #{$fontSizeMobile};
--GL-BLUE: #{$colorBlue};
@media (min-width: $mediaMobile) {
--GL-FONT-SIZE: #{$fontSizeDesktop};
}
font-size: var(--GL-FONT-SIZE);
}
body {
background-color: #cccccc;
font-family: var(--GL-FONT-ROBOTO);
}
.wrap {
--padding: 2rem;
aling-itens: center;
display: flex;
height: 100%;
justify-content: center;
padding-top: var(--padding);
padding-bottom: var(--padding);
}
/* Buttons */
.btn {
--btn-bgColor: #cccccc;
--btn-bdColor: transparent;
--btn-color: #ffffff;
--btn-transition: all ease-in 150ms;
&:hover {
--btn-bgColor: transparent;
--btn-bdColor: #cccccc;
--btn-color: #cccccc;
--btn-transition: all ease-out 300ms;
}
&--ok {
--btn-bgColor: var(--GL-BLUE);
&:hover {
--btn-bdColor: var(--GL-BLUE);
--btn-color: var(--GL-BLUE);
}
}
&--no {
--btn-bgColor: #f51711;
&:hover {
--btn-bdColor: #f51711;
--btn-color: #f51711;
}
}
background-color: var(--btn-bgColor);
border: 0.125rem solid var(--btn-bdColor);
border-radius: 0.313rem;
color: var(--btn-color);
cursor: pointer;
font-size: 1rem;
padding: 0.625rem 1.25rem;
transition: var(--btn-transition);
}
/* Card */
.card {
--card-flow: column;
@media (min-width: $mediaMobile) {
--card-flow: row;
}
background-color: #ffffff;
display: flex;
flex-flow: var(--card-flow);
width: 80%;
&-content {
font-size: 0.875rem;
padding: 1.25rem;
&_title {
--title-font-size: 2.2rem;
@media (min-width: $mediaMobile) {
--title-font-size: 3rem;
}
color: #1c1b34;
font: normal var(--title-font-size) var(--GL-FONT-VIDALOKA);
line-height: 1;
margin-bottom: 1.875rem;
&:after {
background-color: #1c1b34;
content: "";
display: block;
height: 0.313rem;
margin-top: 0.75rem;
width: 5rem;
}
}
&_btns {
margin-top: 2rem;
.btn:first-child {
margin-right: 0.5rem;
}
}
@media (min-width: $mediaMobile) {
font-size: 1rem;
}
}
img {
width: 100%;
}
@media (min-width: $mediaMobile) {
max-width: 740px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.