* {
box-sizing: border-box;
}
html body {
font-family: 'Roboto', sans-serif;
max-width: 100vw;
overflow-x: hidden;
scroll-behavior: smooth;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
nav {
height: 80px;
display: flex;
}
img {
width: 100%;
height: 100%;
max-height: 50vh;
}
p {
line-height: 1.3;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav__container {
width: 100%;
max-width: 1200px;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
}
.purple {
color: #7342d6;
}
.logo {
width: 160px;
}
ul {
display: flex;
}
li {
list-style-type: none;
}
.nav__link {
margin-left: 16px;
text-decoration: none;
font-size: 22px;
color: #7342d6;
font-weight: bold;
padding: 10px ;
}
.nav__link:hover {
text-decoration: underline;
}
.nav__link--primary {
border: 2px solid #7342d6;
border-radius: 4px;
}
.nav__link--primary:hover {
text-decoration: none;
}
.btn__menu {
background-color: transparent;
color: #7342d6;
font-size: 40px;
text-align: center;
border: none;
display: none;
}
.menu__backdrop {
position: absolute;
background-color: #242424;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
transition: all 300ms ease;
opacity: 0;
visibility: hidden;
}
.menu--open .menu__backdrop {
visibility: visible;
opacity: 1;
}
.menu--open {
max-height: 100vh;
overflow-y: hidden;
}
.menu__links {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px;
}
.menu__list {
padding: 32px 0;
}
.menu__link {
font-size: 40px;
color: white;
}
.btn__menu--close {
position: absolute;
right: 20px;
top: 10px;
padding: 8px;
color: white;
}
/*
LANDING
*/
#landing {
background-color: rgba(115, 66, 214, 0.1);
}
header {
height: calc(100vh - 88px);
}
.header__container {
width: 100%;
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.header__desc {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 56px;
color: #7342d6;
margin-bottom: 24px;
text-align: center;
}
h2 {
text-align: center;
font-size: 32px;
margin-bottom: 32px;
}
button {
cursor: pointer;
}
button:active {
transform: translateY(1px);
}
.btn {
background-color: #7342d6;
color: white;
padding: 12px 24px;
font-size: 20px;
border-radius: 4px;
border: none;
}
.header__img--wrapper {
padding: 20px;
z-index: 2;
}
.container {
padding: 56px 0;
}
.row {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.row__column {
display: flex;
flex-direction: column;
align-items: center;
}
.no-cursor {
cursor: not-allowed;
}
/*
HIGHLIGHTS
*/
#highlights {
position: relative;
max-width: 100vw;
}
#highlights::after,
#highlights::before {
background: url('/assets/wave.svg');
content: "";
position: absolute;
width: 101vw;
height: 12vw;
left: 0;
z-index: 1;
background-size: cover;
background-repeat: no-repeat;
}
#highlights::before {
transform: translateY(-100%);
top: 1px;
}
#highlights::after {
bottom: 1px;
transform: translateY(100%) rotate(180deg);
}
.highlight__wrapper {
display: flex;
justify-content: center;
}
.highlight {
padding: 0 24px;
width: calc(100% / 3);
display: flex;
align-items: center;
flex-direction: column;
}
.highlight__para {
text-align: center;
position: relative;
bottom: 12px;
max-width: 280px;
}
.highlight__img {
border: 2px solid #7342d65d;
color: #7342d6;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 32px;
margin-bottom: 6px;
}
.highlight__subtitle {
font-size: 20px;
margin-bottom: 20px;
text-align: center;
}
/* FEATURES */
#features {
padding-top: 8vw;
background-color: rgba(115, 66, 214, 0.1);
}
.books {
display: flex;
flex-wrap: wrap;
}
.book {
width: 25%;
}
.book__img {
max-height: 380px;
transition: all 300ms ease;
cursor: no-drop;
}
.book__img--wrapper {
margin-bottom: 8px;
border-radius: 4px;
overflow: hidden;
display: flex;
}
.book:hover .book__img {
transform: scale(1.03);
}
.book__title {
font-size: 20px;
margin-bottom: 8px;
display: flex;
justify-content: center;
}
.book__title:hover {
text-decoration: underline;
cursor: no-drop;
}
.book__ratings {
margin-bottom: 8px;
color: #fabf2a;
display: flex;
justify-content: center;
}
.book__price {
display: flex;
justify-content: center;
}
.book__price--normal {
text-decoration: line-through;
padding-right: 10px;
color: #bfbfbf;
display: flex;
justify-content: center;
}
#explore {
background-color: rgba(115, 66, 214, 0.1);
}
.container__explore {
padding: 56px;
}
/* Explore */
.btn__container {
display: flex;
justify-content: center;
}
/* FOOTER */
footer {
background-color: #242424;
}
.footer__logo {
display: flex;
}
.footer__logo--img {
width: 160px;
filter: grayscale(1) invert(1);
}
.footer__link,
.footer__copyright {
color: #fff;
}
.footer__list {
margin: 20px 0 24px 0;
}
.footer__link {
padding: 0 8px;
}
/* SMALL PHONES, TABLETS, LARGE SMARTPHONES */
@media (max-width: 768px) {
.header__desc {
padding: 0 24px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 26px;
}
button {
font-size: 18px;
}
.book {
width: 50%;
}
}
/* SMALL PHONES, LARGE SMARPHONES */
@media (max-width: 550px) {
.nav__links {
display: none;
}
.btn__menu {
display: block;
}
.highlight {
width: 100%;
margin-bottom: 24px;
}
.highlight__wrapper {
flex-wrap: wrap;
}
.highlight:not(:last-child) {
margin-bottom: 24px;
}
.book__title {
font-size: 16px;
}