/******************
GENERAL
******************/
/* * {
margin: 0;
padding: 0;
box-sizing: border-box;
} */
header *,
.free-pdf-section *,
.free-materials-section *,
.testimonials-section *,
.contact-details-section *,
.footer *,
.courses-section *,
.system-section *,
.inside-the-courses-section *,
.exercise-section *,
.explanation-section *,
.image-text-section *,
.subscription-section *,
.faq-section *,
footer * {
box-sizing: border-box;
}
button {
margin: 0;
}
.bottom-bar {
z-index: 10;
}
body {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-style: normal;
color: #282224;
margin: 0;
}
:root {
--beige: #D2C6BF;
--light-teal: #ACCCCD;
--teal: #009999;
--dark-teal: #045865;
--purple: #7988D3;
--coral: #E68867;
--light-coral: #E5A78F;
--bubble-svg: url('data:image/svg+xml,\');
--breakpoint-medium: 768px;
--breakpoint-large: 992px;
/* --breakpoint-small: 480px;
--breakpoint-medium: 768px;
--breakpoint-large: 1024px; */
}
.bg-white {
background-color: #FFFFFF !important;
}
.bg-beige {
background-color: var(--beige) !important;
}
.bg-light-teal {
background-color: var(--light-teal) !important;
}
.bg-teal {
background-color: var(--teal) !important;
}
.bg-dark-teal {
background-color: var(--dark-teal) !important;
}
.bg-light-coral {
background-color: var(--light-coral) !important;
}
.bg-coral {
background-color: var(--coral) !important;
}
.bg-purple {
background-color: var(--purple) !important;
}
.text-dark {
color: #282224 !important;
}
.text-white {
color: #FFFFFF !important;
}
h1, h2, h3, h5, h5, h6 {
font-family: "Gotu", sans-serif;
font-weight: 400;
font-style: normal;
}
p, span, input, input::placeholder, button, ul li, ol li {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-style: normal;
}
.custom-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.custom-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.custom-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.custom-container {
max-width: 860px;
}
}
@media (min-width: 1200px) {
.custom-container {
max-width: 1020px;
}
}
@media (min-width: 1400px) {
.custom-container {
max-width: 1200px;
}
}
/* @media (min-width: 576px) {
.custom-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.custom-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.custom-container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.custom-container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.custom-container {
max-width: 1320px;
}
} */
.custom-container .custom-row {
display: flex;
flex-wrap: wrap;
margin-right: -15px !important;
margin-left: -15px !important;
flex-direction: row;
padding: 0 !important;
}
@media (max-width: 767px) {
.mobile-reverse .custom-row {
flex-direction: column-reverse !important;
}
}
.pb-0 {
padding-bottom: 0 !important;
}
/******************
NAVBAR
******************/
.navbar {
background-color: var(--dark-teal);
display: flex;
align-items: center;
padding: 10px 20px;
position: relative;
}
.navbar .custom-row {
flex-wrap: nowrap;
}
.navbar-logo {
display: flex;
align-items: center;
margin-right: 20px;
}
.navbar-logo img {
width: 40px;
height: 40px;
margin-right: 10px;
}
.navbar-search {
display: flex;
align-items: center;
margin-right: 20px;
}
.navbar-search,
.navbar-search form {
width: 100%;
max-width: 300px;
}
.navbar-search .search-container {
display: flex;
align-items: center;
background-color: #fff;
padding: 5px;
border-radius: 20px;
}
.navbar-search .search-icon {
color: #2d6c74;
margin-right: 8px;
display: flex;
align-items: center;
}
.navbar-search input[type="text"] {
border: none;
background: none;
outline: none;
font-size: 14px;
color: #2d6c74;
width: 100%;
margin: 0;
padding: 0;
}
.navbar-search input::placeholder {
color: #2d6c74;
font-size: 16px;
}
.navbar-links {
display: none;
gap: 20px;
align-items: center;
flex-grow: 1;
justify-content: flex-end;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 14px;
}
.navbar-links a:hover {
color: #a9c1c0;
}
.navbar-toggle {
display: block;
background: none;
border: none;
cursor: pointer;
margin-left: auto;
padding: 0;
}
.navbar-toggle {
display: block;
background: none;
border: none;
cursor: pointer;
margin-left: auto;
padding: 0;
}
.navbar-toggle span {
display: block;
width: 25px;
height: 3px;
background-color: white;
margin: 4px 0;
transition: 0.4s;
}
.navbar-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.navbar-toggle.active span:nth-child(2) {
opacity: 0;
}
.navbar-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.mobile-menu {
display: none;
position: absolute;
bottom: 1px;
transform: translateY(100%);
left: 0;
width: 100%;
background-color: var(--dark-teal);
flex-direction: column;
align-items: flex-end;
padding: 20px;
z-index: 1000;
}
.mobile-menu a {
color: white;
text-decoration: none;
font-size: 18px;
padding: 10px 0;
width: 100%;
text-align: right;
}
.mobile-menu a:hover {
background-color: #a9c1c0;
}
@media (min-width: 768px) {
.navbar-links {
display: flex;
}
.navbar-toggle {
display: none;
}
.mobile-menu {
display: none;
}
.navbar-search,
.navbar-search form {
max-width: 200px;
}
}
/******************
FREE PDF SUBSCRIPTION BOX HOMEPAGE
******************/
.free-pdf-section {
background-color: #fff;
padding: 100px 0;
position: relative;
}
.free-pdf-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-teal.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.free-pdf-section .custom-container {
z-index: 1;
position: relative;
}
.subscription-box {
background-color: var(--coral);
padding: 50px 16px;
width: 100%;
max-width: 800px;
margin: 0 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.subscription-box h2 {
color: #333;
font-size: 32px;
line-height: 1.4;
margin-bottom: 20px;
width: 80%;
}
.subscription-box input[type="text"],
.subscription-box input[type="email"] {
width: 100%;
padding: 12px;
margin: 10px 0;
border-radius: 20px;
border: none;
font-size: 16px;
text-align: center;
}
@media (min-width: 768px) {
.subscription-box {
margin: 0 auto;
padding: 100px 40px;
}
}
/******************
FREE MATERIALS HOMEPAGE
******************/
.free-materials-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--dark-teal);
}
.free-materials-section h2 {
font-size: 32px;
line-height: 1.4;
color: #fff;
text-align: center;
margin: 0 auto;
width: 100%;
}
.free-material-cards {
max-width: 1200px;
width: 100%;
margin: 50px auto 0;
display: grid;
grid-gap: 20px;
color: #fff;
padding: 16px;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.free-material-card {
width: 100%;
height: 100%;
max-width: 360px;
max-height: 360px;
position: relative;
aspect-ratio: 1 / 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.free-material-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background: #000000;
}
.free-material-card a {
text-decoration: none;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
z-index: 1;
}
.free-material-card h4 {
margin: 0;
font-size: 20px;
line-height: 1.2;
font-weight: 300;
text-transform: uppercase;
text-align: center;
color: #fff;
font-weight: 400;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 992px) {
.free-material-cards {
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
}
.free-material-card h4 {
font-size: 24px;
}
}
/******************
TESTIMONIALS
******************/
.testimonials-section {
padding: 100px 16px 100px;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-color: #fff;
position: relative;
}
.white-pattern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.03;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-white.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.light-teal-pattern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-teal.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.coral-pattern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-coral.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.testimonials-section .custom-container {
position: relative;
z-index:1;
}
.testimonials-section h2 {
font-size: 32px;
line-height: 1.4;
color: #333;
margin-bottom: 40px;
width: 100%;
text-align: center;
text-transform: uppercase;
}
.testimonial-cards {
max-width: 900px;
width: 100%;
display: grid;
grid-gap: 50px;
margin: 0 auto;
place-items: center;
}
.testimonial-card {
width: 100%;
height: 100%;
max-width: 300px;
max-height: 3000px;
-webkit-mask: var(--bubble-svg);
mask: var(--bubble-svg);
background-color: var(--coral);
position: relative;
aspect-ratio: 1 / 1;
margin: 0 auto;
}
.testimonial-content {
position: absolute;
font-size: 16px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 600;
text-align: center;
}
.testimonial-content .author {
margin-top: 30px;
}
.testimonial-button-container {
margin: 100px auto 50px;
}
.testimonial-button {
display: inline-block;
background-color: var(--dark-teal);
color: white;
padding: 10px 50px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
}
@media (min-width: 768px) {
.testimonial-cards {
grid-template-columns: repeat(3, 1fr);
}
.testimonial-card {
max-width: 366px;
max-height: 366px;
}
.testimonial-content {
font-size: 14px;
}
.testimonial-content .author {
margin-top: 15px;
}
}
@media (min-width: 1200px) {
.testimonial-cards {
grid-template-columns: repeat(3, 1fr);
}
.testimonial-card {
max-width: 366px;
max-height: 366px;
}
.testimonial-content {
font-size: 14px;
}
}
/******************
CONTACT DETAILS HOMEPAGE
******************/
.contact-details-section {
background-color: var(--light-teal);
padding: 100px 16px 100px;
position: relative;
}
.contact-details-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-white.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.contact-details-section .custom-container {
z-index: 1;
position: relative;
}
.contact-details-section h2 {
width: 100%;
font-size: 40px;
color: #fff;
margin-bottom: 20px;
text-align: center;
}
.contact-info {
font-size: 16px;
line-height: 1.8;
width: fit-content;
margin: 20px auto;
}
.contact-info p {
display: flex;
margin-bottom: 10px;
}
.contact-info span {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
border-radius: 5px;
}
.contact-info span img {
width: 100%;
height: auto;
max-width: 18px;
height: 18px;
}
.contact-info a {
color: white;
text-decoration: none;
font-size: 16px;
color: #fff;
margin-left: 20px;
}
.contact-info a:hover {
text-decoration: underline;
}
/******************
FOOTER
******************/
.footer {
background-color: var(--dark-teal);
padding: 100px 16px 100px;
text-align: center;
width: auto;
height: auto;
float: none;
}
.footer-logo {
width: 100px;
margin: 0 auto;
}
.footer-logo img {
width: 100%;
height: auto;
}
.footer-text {
font-size: 18px;
color: #fff;
margin: 50px 0;
width: 100%;
}
.footer-text span {
width: 25px;
display: inline-block;
margin-left: 5px;
}
.footer-links {
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
margin: 0 auto;
}
.footer-links a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 200;
padding:0;
}
.footer-links a:hover {
text-decoration: underline;
}
@media (min-width: 768px) {
.footer-links {
flex-direction: row;
}
}
/******************
COURSES
******************/
.courses-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--grey);
}
.courses-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto;
width: 100%;
text-transform: uppercase;
}
.courses-cards {
max-width: 1200px;
width: 100%;
margin: 50px auto 0;
display: grid;
place-items: center;
grid-gap: 20px;
color: #fff;
padding: 16px;
grid-template-columns: repeat(1, 1fr);
}
.courses-card {
width: 100%;
height: 100%;
max-width: 364px;
max-height: 305px;
position: relative;
aspect-ratio: 16/9;
background-color: var(--teal);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.courses-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.courses-card a {
text-decoration: none;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
z-index: 1;
}
.courses-card h4 {
margin: 0;
font-size: 20px;
line-height: 1.2;
font-weight: 300;
text-transform: uppercase;
text-align: center;
color: #fff;
font-weight: 400;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 992px) {
.courses-cards {
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
}
.courses-card h4 {
font-size: 24px;
}
}
/******************
SYSTEM
******************/
.system-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--beige);
}
.system-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto 30px;
width: 100%;
text-transform: uppercase;
}
.system-list {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.system-item {
display: flex;
align-items: center;
gap: 20px;
}
.system-icon {
width: 25px;
height: 25px;
-webkit-mask: var(--bubble-svg);
mask: var(--bubble-svg);
background-color: var(--coral);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
flex-shrink: 0;
}
.system-item p {
font-size: 16px;
color: #282224;
margin: 0;
text-align: left;
}
@media (min-width: 768px) {
.system-icon {
width: 50px;
height: 50px;
}
.system-item p {
font-size: 25px;
}
}
/******************
INSIDE THE COURSES
******************/
.inside-the-courses-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--grey);
}
.inside-the-courses-section .custom-container {
position: relative;
}
.inside-the-courses-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto 50px;
width: 100%;
text-transform: uppercase;
}
.inside-the-courses-list {
max-width: 1200px;
margin: 0 auto;
width: 100%;
list-style-type: disc;
margin-left: 20px;
margin-right: 20px;
}
.inside-the-courses-list li {
margin-bottom: 10px;
font-size: 16px;
text-align: left;
}
.inside-the-courses-image {
margin: 0 auto 100px;
}
.inside-the-courses-image img {
width: 100%;
height: auto;
}
.inside-the-courses-section .floating-bubble {
display: none;
width: 100%;
height: 100%;
max-width: 400px;
max-height: 400px;
-webkit-mask: var(--bubble-svg);
mask: var(--bubble-svg);
background-color: var(--light-teal);
position: relative;
aspect-ratio: 1 / 1;
position: absolute;
bottom: 0;
left: -10%;
z-index: -1;
}
@media (min-width: 1200px) {
.inside-the-courses-list {
padding-bottom: 100px;
}
.inside-the-courses-section .floating-bubble {
display: block;
}
}
/******************
EXERCISE
******************/
.exercise-section #main-content {
line-height: 1.5;
text-align: left;
font-weight: 300;
padding: 100px 16px 100px;
width: 100%;
font-weight: 200;
}
.exercise-section #sidebar {
display: none;
}
.exercise-section #exercise {
margin: 50px 0;
}
.exercise-section #exercise .exercise {
width: 100%;
flex-direction: column;
display: flex;
align-items: center;
}
.exercise-section #main-content table {
max-width: 1000px;
width: 100%;
padding: 10px;
}
.exercise-section #main-content .userInput {
background: none !important;
}
.exercise-section #main-content input {
min-width: 150px;
border-radius: 0 !important;
border-style: solid !important;
border-width: 1px !important;
border-color: #000 !important;
outline: none !important;
padding: 5px;
}
.exercise-section #main-content button.exerciseButton {
background-color: var(--coral);
border: none;
color: #282224;
padding: 10px 30px;
margin: 10px;
text-decoration: none;
border-radius: 50px;
}
.exercise-section #main-content button {
background-color: #000;
border: none;
color: #FFF;
padding: 25px;
margin: 30px;
text-decoration: none;
}
.exercise-section #main-content h1 {
margin: 10px;
color: #282224;
font-size: 24px;
text-align: center;
line-height: 24px;
text-transform: uppercase;
}
.exercise-section #main-content h2,
.exercise-section #main-content h3 {
margin: 10px;
color: #282224;
font-size: 16px;
text-align: center;
line-height: 16px;
text-transform: uppercase;
}
.exercise-section #main-content p {
margin: 0 0 20px 0;
line-height: 32px;
}
.exercise-section #main-content ul li,
.exercise-section #main-content ol li {
line-height: 32px;
}
.exercise-section #main-content a {
color: #0a4049;
text-decoration: underline;
}
.exercise-section #main-content ul {
display: block;
list-style-type: disc;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
.exercise-section #main-content ol {
display: block;
list-style-type: decimal;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
@media (min-width: 768px) {
.exercise-section #main-content table tr td:nth-child(2) {
width: 245px;
}
.exercise-section #main-content table tr td:nth-child(2) > br {
display: none;
}
.exercise-section #main-content table tr td > button.exerciseButton {
display: inline-block;
margin-right: 10px;
text-align: center;
text-transform: uppercase;
}
.exercise-section #main-content table tr td > button.exerciseButton:last-child {
margin-right: 0;
}
}
/******************
EXPLANATION
******************/
.explanation-section #main-content {
line-height: 1.5;
text-align: left;
font-weight: 300;
padding: 70px 16px 70px;
width: 100%;
font-weight: 200;
}
.explanation-section #sidebar {
display: none;
}
.explanation-section #main-content table {
max-width: 1000px;
width: 100%;
padding: 10px;
margin: 0;
table-layout: fixed;
/* margin: auto; */
/* border-collapse: collapse; */
}
/* .explanation-section #main-content table td,
.explanation-section #main-content table th {
text-align: left;
padding: 3px;
} */
/* @media (min-width: 768px) {
.explanation-section #main-content table th,
.explanation-section #main-content table td {
width: 50%;
}
} */
.explanation-section #main-content h1 {
margin: 10px;
color: #282224;
font-size: 24px;
text-align: center;
line-height: 24px;
text-transform: uppercase;
}
.explanation-section #main-content h2 {
margin: 20px 0;
color: #282224;
font-weight: 300;
font-size: 20px;
text-align: center;
text-transform: uppercase;
}
.explanation-section #main-content h3 {
margin: 20px 0;
color: #282224;
font-weight: 300;
font-size: 16px;
text-align: center;
text-transform: uppercase;
}
.explanation-section #main-content p {
margin: 0 0 20px 0;
line-height: 32px;
}
.explanation-section #main-content ul li,
.explanation-section #main-content ol li {
line-height: 32px;
}
.explanation-section #main-content button {
background-color: #000;
border: none;
color: #fff;
padding: 25px;
margin: 30px;
text-decoration: none;
}
.explanation-section #main-content a {
color: #0a4049;
text-decoration: underline;
}
.explanation-section #main-content ul {
display: block;
list-style-type: disc;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
.explanation-section #main-content ol {
display: block;
list-style-type: decimal;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
/******************
IMAGE TEXT
******************/
.image-text-section {
/* background-color: var(--light-teal); */
padding: 50px 16px 50px;
text-align: center;
position: relative;
}
.image-text-section .image-text--image,
.image-text-section .image-text--text {
flex: 1 1 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.image-text-section .custom-container {
z-index: 1;
position: relative;
}
.image-text--text {
text-align: left;
padding-top: 30px;
padding-bottom: 30px;
}
.image-text--text.text-center {
text-align: center !important;
}
.image-text--text h1 {
font-size: 50px;
color: #282224;
line-height: 1.2;
margin: 0 0 20px;
text-align: left;
}
.image-text--text h1 span {
margin-top: 30px;
font-size: 40px;
line-height: 44px;
font-family: "Poppins", sans-serif;
font-weight: 200;
display: block;
}
.image-text--text h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
margin: 0 auto;
width: 100%;
margin-bottom: 20px;
text-align: left;
}
.image-text--text h2.h1 {
font-size: 40px;
}
.image-text--text p {
font-size: 20px;
line-height: 1.6;
margin-bottom: 20px;
}
.image-text--button-container {
margin-top: 10px;
align-self: start;
}
.image-text--button {
display: inline-block;
background-color: #d6865a;
color: white;
padding: 10px 70px;
border-radius: 25px;
text-decoration: none;
font-size: 22px;
}
.image-text--image img {
width: 100%;
height: auto;
margin: 0 auto;
}
.image-text--image.align-end {
align-self: flex-end !important;
}
@media (min-width: 768px) {
.image-text-section {
padding: 50px 16px 50px;
}
.image-text-section.image-text--button {
padding: 18px 40px;
font-size: 18px;
}
.image-text-section.guarantee-section {
padding: 100px 16px;
}
.image-text-section .image-text--image,
.image-text-section .image-text--text {
flex: 1 1 50%;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* .image-text-section.image-text-section-60-40 .image-text--image {
flex: 1 1 40%;
width: 40%;
}
.image-text-section.image-text-section-60-40 .image-text--text {
flex: 1 1 60%;
width: 60%;
} */
.image-text--text,
.image-text--image {
padding-right: 3%;
padding-left: 3%;
}
.image-text--text h2.h1 {
font-size: 62px;
}
}
@media (min-width: 992px) {
.hero-section--home .image-text--text h1 {
font-size: 70px;
}
/* .image-text--text {
padding-top: 50px;
padding-bottom: 100px;
} */
}
/******************
HERO EXERCISE
******************/
@media (min-width: 768px) {
.hero-section--exercise.image-text-section {
background-color: var(--beige);
/* background: linear-gradient(to right, var(--beige) 50%, var(--teal) 50%); */
position: relative;
overflow: hidden
}
.hero-section--exercise.image-text-section:after {
content: "";
position: absolute;
top: 0;
left: 50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.4;
background-color: var(--teal);
z-index: 0;
}
.hero-section--exercise.image-text-section:before {
content: "";
position: absolute;
top: 0;
left: 50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.6;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-teal.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
z-index: 1;
}
/* .hero-section--exercise.image-text-section .image-text--image {
padding: 0 5%;
} */
.hero-section--exercise.image-text-section .image-text--image,
.hero-section--exercise.image-text-section .image-text--text {
flex: 1 1 50%;
width: 50%;
}
.hero-section--exercise.image-text-section h1 {
font-size: 36px;
}
}
@media (min-width: 992px) {
.hero-section--explanation.image-text-section h1 {
font-size: 50px;
}
}
/******************
HERO EXPLANATION
******************/
@media (min-width: 768px) {
.hero-section--explanation.image-text-section {
background: var(--coral);
/* background: linear-gradient(to right, var(--light-coral) 50%, var(--coral) 50%); */
position: relative;
overflow: hidden
}
.hero-section--explanation.image-text-section:after {
content: "";
position: absolute;
top: 0;
left: -50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.9;
background-color: var(--light-coral);
z-index: 0;
/* background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-coral.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center; */
}
.hero-section--explanation.image-text-section:before {
content: "";
position: absolute;
top: 0;
left: -50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-coral.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
z-index: 1;
}
/* .hero-section--explanation.image-text-section .image-text--image {
padding: 0 5%;
} */
.hero-section--explanation.image-text-section .image-text--image,
.hero-section--explanation.image-text-section .image-text--text {
flex: 1 1 50%;
width: 50%;
}
.hero-section--explanation.image-text-section h1 {
font-size: 36px;
}
}
@media (min-width: 992px) {
.hero-section--explanation.image-text-section h1 {
font-size: 50px;
}
}
/******************
SUBSCRIPTION
******************/
.subscription-section {
background-color: var(--coral);
padding: 100px 16px 100px;
text-align: center;
}
.subscription-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto;
width: 100%;
text-transform: uppercase;
margin-bottom: 30px;
}
.subscription-cards {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
width: 100%;
}
.subscription-card {
background-color: #fff;
border-radius: 10px;
padding: 40px 20px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 250px;
width: 100%;
display: flex;
flex-direction: column;
}
.subscription-card h3 {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.subscription-card .price {
font-size: 32px;
color: #333;
margin: 10px 0;
}
.subscription-card p {
font-size: 14px;
color: #555;
margin-bottom: 20px;
}
.subcription-card-button-container {
flex-grow: 1;
display: flex;
align-items: flex-end;
}
.subscription-card-button {
background-color: var(--teal);
border: none;
color: white;
padding: 10px 50px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
margin: 0 auto;
}
.subscription-card-button:hover {
background-color: #3a796f;
}
/* New styles for single subscription card */
.subscription-cards.single-card {
justify-content: center;
}
.subscription-cards.single-card .subscription-card {
max-width: 500px;
padding: 60px 50px;
}
.subscription-cards.single-card .subscription-card h3 {
font-size: 28px;
margin-bottom: 20px;
}
.subscription-cards.single-card .subscription-card .price-container {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 15px 0 25px;
}
.subscription-cards.single-card .subscription-card .price {
font-size: 48px;
font-weight: bold;
margin: 0;
font-family: "Gotu", sans-serif;
}
.subscription-cards.single-card .subscription-card .price-text {
font-size: 24px;
font-weight: 400;
margin: 0;
font-family: "Gotu", sans-serif;
}
.subscription-cards.single-card .subscription-card p {
font-size: 18px;
margin-bottom: 5px;
line-height: 1.3;
}
.subscription-cards.single-card .subscription-card .terms-group {
margin-bottom: 25px;
}
.subscription-cards.single-card .subscription-card-button {
padding: 15px 30px;
font-size: 18px;
margin-top: 20px;
}
@media (max-width: 768px) {
.subscription-cards.single-card .subscription-card {
max-width: 100%;
padding: 40px 30px;
}
.subscription-cards.single-card .subscription-card .price-container {
flex-direction: column;
gap: 0;
}
.subscription-cards.single-card .subscription-card .price-text {
font-size: 20px;
}
}
/******************
FAQ
******************/
.faq-section {
background-color: #FEFEFE;
padding: 100px 16px 100px;
text-align: center;
}
.faq-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto;
width: 100%;
text-transform: uppercase;
margin-bottom: 30px;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 850px;
}
.faq-item {
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
.faq-header {
background-color: #FEFEFE;
padding: 15px 20px;
width: 100%;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border: none;
font-size: 18px;
font-weight: 400;
line-height: normal;
gap: 15px;
}
.faq-header:hover {
background-color: #accccd;
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
/* transition: max-height 0.3s ease; */
background-color: #f9f9f9;
padding: 0 15px;
font-size: 18px;
line-height: normal;
color: #282224;
text-align: left;
}
.faq-content p {
color: #282224;
margin: 0;
}
.faq-item input[type="checkbox"] {
display: none;
}
.faq-item input[type="checkbox"]:checked ~ .faq-content {
max-height: 100%;
padding: 15px;
}
.faq-item input[type="checkbox"] + .faq-header::after {
content: "+";
font-size: 18px;
margin-left: auto;
}
.faq-item input[type="checkbox"]:checked + .faq-header::after {
content: "-";
}
.faq-item input[type="checkbox"]:checked + .faq-header {
background-color: #accccd;
}
/******************
CARD GRIDS FOR SYSTEM SECTION
******************/
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.system-section .card {
background-color: var(--beige);
border-radius: 10px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.system-section .icon-container {
width: 70px;
height: 70px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.system-section .card img {
max-width: 50px;
height: auto;
}
.system-section .card p {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-size: 18px;
color: #282224;
margin: 0;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.card-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/******************
BOTTOM BAR TEAL
******************/
.bottom-bar.bottom-bar--teal {
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--light-teal);
color: #282224;
box-sizing: border-box;
}
.bottom-bar.bottom-bar--teal .bottom-bar__content {
max-width: 700px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.bottom-bar.bottom-bar--teal .bottom-bar__content > * {
display: flex;
align-items: center;
}
.bottom-bar.bottom-bar--teal .bottom-bar__text {
padding-right: 10px;
font-size: 2vw;
font-weight: 400;
}
.bottom-bar.bottom-bar--teal a {
text-decoration: none;
color: #282224;
font-weight: 400;
}
.bottom-bar.bottom-bar--teal .bottom-bar__button {
background-color: var(--coral);
color: #282224 !important;
text-align: center;
padding: 5px 50px;
border-radius: 25px;
text-decoration: none;
cursor: pointer;
font-weight: 400;
transition: color 0.3s ease;
}
.bottom-bar.bottom-bar--teal .bottom-bar__button:hover {
color: #fff !important;
}
@media (min-width: 576px) {
.bottom-bar.bottom-bar--teal .bottom-bar__text {
font-size: 14px;
}
}
/******************
GENERAL
******************/
/* * {
margin: 0;
padding: 0;
box-sizing: border-box;
} */
header *,
.free-pdf-section *,
.free-materials-section *,
.testimonials-section *,
.contact-details-section *,
.footer *,
.courses-section *,
.system-section *,
.inside-the-courses-section *,
.exercise-section *,
.explanation-section *,
.image-text-section *,
.subscription-section *,
.faq-section *,
footer * {
box-sizing: border-box;
}
button {
margin: 0;
}
.bottom-bar {
z-index: 10;
}
body {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-style: normal;
color: #282224;
margin: 0;
}
:root {
--beige: #D2C6BF;
--light-teal: #ACCCCD;
--teal: #009999;
--dark-teal: #045865;
--purple: #7988D3;
--coral: #E68867;
--light-coral: #E5A78F;
--bubble-svg: url('data:image/svg+xml,\');
--breakpoint-medium: 768px;
--breakpoint-large: 992px;
/* --breakpoint-small: 480px;
--breakpoint-medium: 768px;
--breakpoint-large: 1024px; */
}
.bg-white {
background-color: #FFFFFF !important;
}
.bg-beige {
background-color: var(--beige) !important;
}
.bg-light-teal {
background-color: var(--light-teal) !important;
}
.bg-teal {
background-color: var(--teal) !important;
}
.bg-dark-teal {
background-color: var(--dark-teal) !important;
}
.bg-light-coral {
background-color: var(--light-coral) !important;
}
.bg-coral {
background-color: var(--coral) !important;
}
.bg-purple {
background-color: var(--purple) !important;
}
.text-dark {
color: #282224 !important;
}
.text-white {
color: #FFFFFF !important;
}
h1, h2, h3, h5, h5, h6 {
font-family: "Gotu", sans-serif;
font-weight: 400;
font-style: normal;
}
p, span, input, input::placeholder, button, ul li, ol li {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-style: normal;
}
.custom-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.custom-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.custom-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.custom-container {
max-width: 860px;
}
}
@media (min-width: 1200px) {
.custom-container {
max-width: 1020px;
}
}
@media (min-width: 1400px) {
.custom-container {
max-width: 1200px;
}
}
/* @media (min-width: 576px) {
.custom-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.custom-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.custom-container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.custom-container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.custom-container {
max-width: 1320px;
}
} */
.custom-container .custom-row {
display: flex;
flex-wrap: wrap;
margin-right: -15px !important;
margin-left: -15px !important;
flex-direction: row;
padding: 0 !important;
}
@media (max-width: 767px) {
.mobile-reverse .custom-row {
flex-direction: column-reverse !important;
}
}
.pb-0 {
padding-bottom: 0 !important;
}
/******************
NAVBAR
******************/
.navbar {
background-color: var(--dark-teal);
display: flex;
align-items: center;
padding: 10px 20px;
position: relative;
}
.navbar .custom-row {
flex-wrap: nowrap;
}
.navbar-logo {
display: flex;
align-items: center;
margin-right: 20px;
}
.navbar-logo img {
width: 40px;
height: 40px;
margin-right: 10px;
}
.navbar-search {
display: flex;
align-items: center;
margin-right: 20px;
}
.navbar-search,
.navbar-search form {
width: 100%;
max-width: 300px;
}
.navbar-search .search-container {
display: flex;
align-items: center;
background-color: #fff;
padding: 5px;
border-radius: 20px;
}
.navbar-search .search-icon {
color: #2d6c74;
margin-right: 8px;
display: flex;
align-items: center;
}
.navbar-search input[type="text"] {
border: none;
background: none;
outline: none;
font-size: 14px;
color: #2d6c74;
width: 100%;
margin: 0;
padding: 0;
}
.navbar-search input::placeholder {
color: #2d6c74;
font-size: 16px;
}
.navbar-links {
display: none;
gap: 20px;
align-items: center;
flex-grow: 1;
justify-content: flex-end;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 14px;
}
.navbar-links a:hover {
color: #a9c1c0;
}
.navbar-toggle {
display: block;
background: none;
border: none;
cursor: pointer;
margin-left: auto;
padding: 0;
}
.navbar-toggle {
display: block;
background: none;
border: none;
cursor: pointer;
margin-left: auto;
padding: 0;
}
.navbar-toggle span {
display: block;
width: 25px;
height: 3px;
background-color: white;
margin: 4px 0;
transition: 0.4s;
}
.navbar-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.navbar-toggle.active span:nth-child(2) {
opacity: 0;
}
.navbar-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.mobile-menu {
display: none;
position: absolute;
bottom: 1px;
transform: translateY(100%);
left: 0;
width: 100%;
background-color: var(--dark-teal);
flex-direction: column;
align-items: flex-end;
padding: 20px;
z-index: 1000;
}
.mobile-menu a {
color: white;
text-decoration: none;
font-size: 18px;
padding: 10px 0;
width: 100%;
text-align: right;
}
.mobile-menu a:hover {
background-color: #a9c1c0;
}
@media (min-width: 768px) {
.navbar-links {
display: flex;
}
.navbar-toggle {
display: none;
}
.mobile-menu {
display: none;
}
.navbar-search,
.navbar-search form {
max-width: 200px;
}
}
/******************
FREE PDF SUBSCRIPTION BOX HOMEPAGE
******************/
.free-pdf-section {
background-color: #fff;
padding: 100px 0;
position: relative;
}
.free-pdf-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-teal.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.free-pdf-section .custom-container {
z-index: 1;
position: relative;
}
.subscription-box {
background-color: var(--coral);
padding: 50px 16px;
width: 100%;
max-width: 800px;
margin: 0 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.subscription-box h2 {
color: #333;
font-size: 32px;
line-height: 1.4;
margin-bottom: 20px;
width: 80%;
}
.subscription-box input[type="text"],
.subscription-box input[type="email"] {
width: 100%;
padding: 12px;
margin: 10px 0;
border-radius: 20px;
border: none;
font-size: 16px;
text-align: center;
}
@media (min-width: 768px) {
.subscription-box {
margin: 0 auto;
padding: 100px 40px;
}
}
/******************
FREE MATERIALS HOMEPAGE
******************/
.free-materials-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--dark-teal);
}
.free-materials-section h2 {
font-size: 32px;
line-height: 1.4;
color: #fff;
text-align: center;
margin: 0 auto;
width: 100%;
}
.free-material-cards {
max-width: 1200px;
width: 100%;
margin: 50px auto 0;
display: grid;
grid-gap: 20px;
color: #fff;
padding: 16px;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.free-material-card {
width: 100%;
height: 100%;
max-width: 360px;
max-height: 360px;
position: relative;
aspect-ratio: 1 / 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.free-material-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background: #000000;
}
.free-material-card a {
text-decoration: none;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
z-index: 1;
}
.free-material-card h4 {
margin: 0;
font-size: 20px;
line-height: 1.2;
font-weight: 300;
text-transform: uppercase;
text-align: center;
color: #fff;
font-weight: 400;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 992px) {
.free-material-cards {
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
}
.free-material-card h4 {
font-size: 24px;
}
}
/******************
TESTIMONIALS
******************/
.testimonials-section {
padding: 100px 16px 100px;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-color: #fff;
position: relative;
}
.white-pattern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.03;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-white.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.light-teal-pattern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-teal.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.coral-pattern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-coral.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.testimonials-section .custom-container {
position: relative;
z-index:1;
}
.testimonials-section h2 {
font-size: 32px;
line-height: 1.4;
color: #333;
margin-bottom: 40px;
width: 100%;
text-align: center;
text-transform: uppercase;
}
.testimonial-cards {
max-width: 900px;
width: 100%;
display: grid;
grid-gap: 50px;
margin: 0 auto;
place-items: center;
}
.testimonial-card {
width: 100%;
height: 100%;
max-width: 300px;
max-height: 3000px;
-webkit-mask: var(--bubble-svg);
mask: var(--bubble-svg);
background-color: var(--coral);
position: relative;
aspect-ratio: 1 / 1;
margin: 0 auto;
}
.testimonial-content {
position: absolute;
font-size: 16px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 600;
text-align: center;
}
.testimonial-content .author {
margin-top: 30px;
}
.testimonial-button-container {
margin: 100px auto 50px;
}
.testimonial-button {
display: inline-block;
background-color: var(--dark-teal);
color: white;
padding: 10px 50px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
}
@media (min-width: 768px) {
.testimonial-cards {
grid-template-columns: repeat(3, 1fr);
}
.testimonial-card {
max-width: 366px;
max-height: 366px;
}
.testimonial-content {
font-size: 14px;
}
.testimonial-content .author {
margin-top: 15px;
}
}
@media (min-width: 1200px) {
.testimonial-cards {
grid-template-columns: repeat(3, 1fr);
}
.testimonial-card {
max-width: 366px;
max-height: 366px;
}
.testimonial-content {
font-size: 14px;
}
}
/******************
CONTACT DETAILS HOMEPAGE
******************/
.contact-details-section {
background-color: var(--light-teal);
padding: 100px 16px 100px;
position: relative;
}
.contact-details-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-white.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.contact-details-section .custom-container {
z-index: 1;
position: relative;
}
.contact-details-section h2 {
width: 100%;
font-size: 40px;
color: #fff;
margin-bottom: 20px;
text-align: center;
}
.contact-info {
font-size: 16px;
line-height: 1.8;
width: fit-content;
margin: 20px auto;
}
.contact-info p {
display: flex;
margin-bottom: 10px;
}
.contact-info span {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
border-radius: 5px;
}
.contact-info span img {
width: 100%;
height: auto;
max-width: 18px;
height: 18px;
}
.contact-info a {
color: white;
text-decoration: none;
font-size: 16px;
color: #fff;
margin-left: 20px;
}
.contact-info a:hover {
text-decoration: underline;
}
/******************
FOOTER
******************/
.footer {
background-color: var(--dark-teal);
padding: 100px 16px 100px;
text-align: center;
width: auto;
height: auto;
float: none;
}
.footer-logo {
width: 100px;
margin: 0 auto;
}
.footer-logo img {
width: 100%;
height: auto;
}
.footer-text {
font-size: 18px;
color: #fff;
margin: 50px 0;
width: 100%;
}
.footer-text span {
width: 25px;
display: inline-block;
margin-left: 5px;
}
.footer-links {
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
margin: 0 auto;
}
.footer-links a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: 200;
padding:0;
}
.footer-links a:hover {
text-decoration: underline;
}
@media (min-width: 768px) {
.footer-links {
flex-direction: row;
}
}
/******************
COURSES
******************/
.courses-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--grey);
}
.courses-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto;
width: 100%;
text-transform: uppercase;
}
.courses-cards {
max-width: 1200px;
width: 100%;
margin: 50px auto 0;
display: grid;
place-items: center;
grid-gap: 20px;
color: #fff;
padding: 16px;
grid-template-columns: repeat(1, 1fr);
}
.courses-card {
width: 100%;
height: 100%;
max-width: 364px;
max-height: 305px;
position: relative;
aspect-ratio: 16/9;
background-color: var(--teal);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.courses-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.courses-card a {
text-decoration: none;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
z-index: 1;
}
.courses-card h4 {
margin: 0;
font-size: 20px;
line-height: 1.2;
font-weight: 300;
text-transform: uppercase;
text-align: center;
color: #fff;
font-weight: 400;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 992px) {
.courses-cards {
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
}
.courses-card h4 {
font-size: 24px;
}
}
/******************
SYSTEM
******************/
.system-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--beige);
}
.system-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto 30px;
width: 100%;
text-transform: uppercase;
}
.system-list {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.system-item {
display: flex;
align-items: center;
gap: 20px;
}
.system-icon {
width: 25px;
height: 25px;
-webkit-mask: var(--bubble-svg);
mask: var(--bubble-svg);
background-color: var(--coral);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
flex-shrink: 0;
}
.system-item p {
font-size: 16px;
color: #282224;
margin: 0;
text-align: left;
}
@media (min-width: 768px) {
.system-icon {
width: 50px;
height: 50px;
}
.system-item p {
font-size: 25px;
}
}
/******************
INSIDE THE COURSES
******************/
.inside-the-courses-section {
text-align: center;
padding: 100px 16px 100px;
background-color: var(--grey);
}
.inside-the-courses-section .custom-container {
position: relative;
}
.inside-the-courses-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto 50px;
width: 100%;
text-transform: uppercase;
}
.inside-the-courses-list {
max-width: 1200px;
margin: 0 auto;
width: 100%;
list-style-type: disc;
margin-left: 20px;
margin-right: 20px;
}
.inside-the-courses-list li {
margin-bottom: 10px;
font-size: 16px;
text-align: left;
}
.inside-the-courses-image {
margin: 0 auto 100px;
}
.inside-the-courses-image img {
width: 100%;
height: auto;
}
.inside-the-courses-section .floating-bubble {
display: none;
width: 100%;
height: 100%;
max-width: 400px;
max-height: 400px;
-webkit-mask: var(--bubble-svg);
mask: var(--bubble-svg);
background-color: var(--light-teal);
position: relative;
aspect-ratio: 1 / 1;
position: absolute;
bottom: 0;
left: -10%;
z-index: -1;
}
@media (min-width: 1200px) {
.inside-the-courses-list {
padding-bottom: 100px;
}
.inside-the-courses-section .floating-bubble {
display: block;
}
}
/******************
EXERCISE
******************/
.exercise-section #main-content {
line-height: 1.5;
text-align: left;
font-weight: 300;
padding: 100px 16px 100px;
width: 100%;
font-weight: 200;
}
.exercise-section #sidebar {
display: none;
}
.exercise-section #exercise {
margin: 50px 0;
}
.exercise-section #exercise .exercise {
width: 100%;
flex-direction: column;
display: flex;
align-items: center;
}
.exercise-section #main-content table {
max-width: 1000px;
width: 100%;
padding: 10px;
}
.exercise-section #main-content .userInput {
background: none !important;
}
.exercise-section #main-content input {
min-width: 150px;
border-radius: 0 !important;
border-style: solid !important;
border-width: 1px !important;
border-color: #000 !important;
outline: none !important;
padding: 5px;
}
.exercise-section #main-content button.exerciseButton {
background-color: var(--coral);
border: none;
color: #282224;
padding: 10px 30px;
margin: 10px;
text-decoration: none;
border-radius: 50px;
}
.exercise-section #main-content button {
background-color: #000;
border: none;
color: #FFF;
padding: 25px;
margin: 30px;
text-decoration: none;
}
.exercise-section #main-content h1 {
margin: 10px;
color: #282224;
font-size: 24px;
text-align: center;
line-height: 24px;
text-transform: uppercase;
}
.exercise-section #main-content h2,
.exercise-section #main-content h3 {
margin: 10px;
color: #282224;
font-size: 16px;
text-align: center;
line-height: 16px;
text-transform: uppercase;
}
.exercise-section #main-content p {
margin: 0 0 20px 0;
line-height: 32px;
}
.exercise-section #main-content ul li,
.exercise-section #main-content ol li {
line-height: 32px;
}
.exercise-section #main-content a {
color: #0a4049;
text-decoration: underline;
}
.exercise-section #main-content ul {
display: block;
list-style-type: disc;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
.exercise-section #main-content ol {
display: block;
list-style-type: decimal;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
@media (min-width: 768px) {
.exercise-section #main-content table tr td:nth-child(2) {
width: 245px;
}
.exercise-section #main-content table tr td:nth-child(2) > br {
display: none;
}
.exercise-section #main-content table tr td > button.exerciseButton {
display: inline-block;
margin-right: 10px;
text-align: center;
text-transform: uppercase;
}
.exercise-section #main-content table tr td > button.exerciseButton:last-child {
margin-right: 0;
}
}
/******************
EXPLANATION
******************/
.explanation-section #main-content {
line-height: 1.5;
text-align: left;
font-weight: 300;
padding: 70px 16px 70px;
width: 100%;
font-weight: 200;
}
.explanation-section #sidebar {
display: none;
}
.explanation-section #main-content table {
max-width: 1000px;
width: 100%;
padding: 10px;
margin: 0;
table-layout: fixed;
/* margin: auto; */
/* border-collapse: collapse; */
}
/* .explanation-section #main-content table td,
.explanation-section #main-content table th {
text-align: left;
padding: 3px;
} */
/* @media (min-width: 768px) {
.explanation-section #main-content table th,
.explanation-section #main-content table td {
width: 50%;
}
} */
.explanation-section #main-content h1 {
margin: 10px;
color: #282224;
font-size: 24px;
text-align: center;
line-height: 24px;
text-transform: uppercase;
}
.explanation-section #main-content h2 {
margin: 20px 0;
color: #282224;
font-weight: 300;
font-size: 20px;
text-align: center;
text-transform: uppercase;
}
.explanation-section #main-content h3 {
margin: 20px 0;
color: #282224;
font-weight: 300;
font-size: 16px;
text-align: center;
text-transform: uppercase;
}
.explanation-section #main-content p {
margin: 0 0 20px 0;
line-height: 32px;
}
.explanation-section #main-content ul li,
.explanation-section #main-content ol li {
line-height: 32px;
}
.explanation-section #main-content button {
background-color: #000;
border: none;
color: #fff;
padding: 25px;
margin: 30px;
text-decoration: none;
}
.explanation-section #main-content a {
color: #0a4049;
text-decoration: underline;
}
.explanation-section #main-content ul {
display: block;
list-style-type: disc;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
.explanation-section #main-content ol {
display: block;
list-style-type: decimal;
margin-block-start: 16px;
margin-block-end: 16px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
/******************
IMAGE TEXT
******************/
.image-text-section {
/* background-color: var(--light-teal); */
padding: 50px 16px 50px;
text-align: center;
position: relative;
}
.image-text-section .image-text--image,
.image-text-section .image-text--text {
flex: 1 1 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.image-text-section .custom-container {
z-index: 1;
position: relative;
}
.image-text--text {
text-align: left;
padding-top: 30px;
padding-bottom: 30px;
}
.image-text--text.text-center {
text-align: center !important;
}
.image-text--text h1 {
font-size: 50px;
color: #282224;
line-height: 1.2;
margin: 0 0 20px;
text-align: left;
}
.image-text--text h1 span {
margin-top: 30px;
font-size: 40px;
line-height: 44px;
font-family: "Poppins", sans-serif;
font-weight: 200;
display: block;
}
.image-text--text h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
margin: 0 auto;
width: 100%;
margin-bottom: 20px;
text-align: left;
}
.image-text--text h2.h1 {
font-size: 40px;
}
.image-text--text p {
font-size: 20px;
line-height: 1.6;
margin-bottom: 20px;
}
.image-text--button-container {
margin-top: 10px;
align-self: start;
}
.image-text--button {
display: inline-block;
background-color: #d6865a;
color: white;
padding: 10px 70px;
border-radius: 25px;
text-decoration: none;
font-size: 22px;
}
.image-text--image img {
width: 100%;
height: auto;
margin: 0 auto;
}
.image-text--image.align-end {
align-self: flex-end !important;
}
@media (min-width: 768px) {
.image-text-section {
padding: 50px 16px 50px;
}
.image-text-section.image-text--button {
padding: 18px 40px;
font-size: 18px;
}
.image-text-section.guarantee-section {
padding: 100px 16px;
}
.image-text-section .image-text--image,
.image-text-section .image-text--text {
flex: 1 1 50%;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* .image-text-section.image-text-section-60-40 .image-text--image {
flex: 1 1 40%;
width: 40%;
}
.image-text-section.image-text-section-60-40 .image-text--text {
flex: 1 1 60%;
width: 60%;
} */
.image-text--text,
.image-text--image {
padding-right: 3%;
padding-left: 3%;
}
.image-text--text h2.h1 {
font-size: 62px;
}
}
@media (min-width: 992px) {
.hero-section--home .image-text--text h1 {
font-size: 70px;
}
/* .image-text--text {
padding-top: 50px;
padding-bottom: 100px;
} */
}
/******************
HERO EXERCISE
******************/
@media (min-width: 768px) {
.hero-section--exercise.image-text-section {
background-color: var(--beige);
/* background: linear-gradient(to right, var(--beige) 50%, var(--teal) 50%); */
position: relative;
overflow: hidden
}
.hero-section--exercise.image-text-section:after {
content: "";
position: absolute;
top: 0;
left: 50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.4;
background-color: var(--teal);
z-index: 0;
}
.hero-section--exercise.image-text-section:before {
content: "";
position: absolute;
top: 0;
left: 50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.6;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-teal.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
z-index: 1;
}
/* .hero-section--exercise.image-text-section .image-text--image {
padding: 0 5%;
} */
.hero-section--exercise.image-text-section .image-text--image,
.hero-section--exercise.image-text-section .image-text--text {
flex: 1 1 50%;
width: 50%;
}
.hero-section--exercise.image-text-section h1 {
font-size: 36px;
}
}
@media (min-width: 992px) {
.hero-section--explanation.image-text-section h1 {
font-size: 50px;
}
}
/******************
HERO EXPLANATION
******************/
@media (min-width: 768px) {
.hero-section--explanation.image-text-section {
background: var(--coral);
/* background: linear-gradient(to right, var(--light-coral) 50%, var(--coral) 50%); */
position: relative;
overflow: hidden
}
.hero-section--explanation.image-text-section:after {
content: "";
position: absolute;
top: 0;
left: -50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.9;
background-color: var(--light-coral);
z-index: 0;
/* background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-coral.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center; */
}
.hero-section--explanation.image-text-section:before {
content: "";
position: absolute;
top: 0;
left: -50%;
/* transform: translateX(-50%); */
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url("https://www.perfect-english-grammar.com/image-files/bubble-pattern-coral.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
z-index: 1;
}
/* .hero-section--explanation.image-text-section .image-text--image {
padding: 0 5%;
} */
.hero-section--explanation.image-text-section .image-text--image,
.hero-section--explanation.image-text-section .image-text--text {
flex: 1 1 50%;
width: 50%;
}
.hero-section--explanation.image-text-section h1 {
font-size: 36px;
}
}
@media (min-width: 992px) {
.hero-section--explanation.image-text-section h1 {
font-size: 50px;
}
}
/******************
SUBSCRIPTION
******************/
.subscription-section {
background-color: var(--coral);
padding: 100px 16px 100px;
text-align: center;
}
.subscription-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto;
width: 100%;
text-transform: uppercase;
margin-bottom: 30px;
}
.subscription-cards {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
width: 100%;
}
.subscription-card {
background-color: #fff;
border-radius: 10px;
padding: 40px 20px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 250px;
width: 100%;
display: flex;
flex-direction: column;
}
.subscription-card h3 {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.subscription-card .price {
font-size: 32px;
color: #333;
margin: 10px 0;
}
.subscription-card p {
font-size: 14px;
color: #555;
margin-bottom: 20px;
}
.subcription-card-button-container {
flex-grow: 1;
display: flex;
align-items: flex-end;
}
.subscription-card-button {
background-color: var(--teal);
border: none;
color: white;
padding: 10px 50px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
margin: 0 auto;
}
.subscription-card-button:hover {
background-color: #3a796f;
}
/* New styles for single subscription card */
.subscription-cards.single-card {
justify-content: center;
}
.subscription-cards.single-card .subscription-card {
max-width: 500px;
padding: 60px 50px;
}
.subscription-cards.single-card .subscription-card h3 {
font-size: 28px;
margin-bottom: 20px;
}
.subscription-cards.single-card .subscription-card .price-container {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 15px 0 25px;
}
.subscription-cards.single-card .subscription-card .price {
font-size: 48px;
font-weight: bold;
margin: 0;
font-family: "Gotu", sans-serif;
}
.subscription-cards.single-card .subscription-card .price-text {
font-size: 24px;
font-weight: 400;
margin: 0;
font-family: "Gotu", sans-serif;
}
.subscription-cards.single-card .subscription-card p {
font-size: 18px;
margin-bottom: 5px;
line-height: 1.3;
}
.subscription-cards.single-card .subscription-card .terms-group {
margin-bottom: 25px;
}
.subscription-cards.single-card .subscription-card-button {
padding: 15px 30px;
font-size: 18px;
margin-top: 20px;
}
@media (max-width: 768px) {
.subscription-cards.single-card .subscription-card {
max-width: 100%;
padding: 40px 30px;
}
.subscription-cards.single-card .subscription-card .price-container {
flex-direction: column;
gap: 0;
}
.subscription-cards.single-card .subscription-card .price-text {
font-size: 20px;
}
}
/******************
FAQ
******************/
.faq-section {
background-color: #FEFEFE;
padding: 100px 16px 100px;
text-align: center;
}
.faq-section h2 {
font-size: 32px;
line-height: 1.4;
color: #282224;
text-align: center;
margin: 0 auto;
width: 100%;
text-transform: uppercase;
margin-bottom: 30px;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 850px;
}
.faq-item {
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
.faq-header {
background-color: #FEFEFE;
padding: 15px 20px;
width: 100%;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border: none;
font-size: 18px;
font-weight: 400;
line-height: normal;
gap: 15px;
}
.faq-header:hover {
background-color: #accccd;
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
/* transition: max-height 0.3s ease; */
background-color: #f9f9f9;
padding: 0 15px;
font-size: 18px;
line-height: normal;
color: #282224;
text-align: left;
}
.faq-content p {
color: #282224;
margin: 0;
}
.faq-item input[type="checkbox"] {
display: none;
}
.faq-item input[type="checkbox"]:checked ~ .faq-content {
max-height: 100%;
padding: 15px;
}
.faq-item input[type="checkbox"] + .faq-header::after {
content: "+";
font-size: 18px;
margin-left: auto;
}
.faq-item input[type="checkbox"]:checked + .faq-header::after {
content: "-";
}
.faq-item input[type="checkbox"]:checked + .faq-header {
background-color: #accccd;
}
/******************
CARD GRIDS FOR SYSTEM SECTION
******************/
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.system-section .card {
background-color: var(--beige);
border-radius: 10px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.system-section .icon-container {
width: 70px;
height: 70px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.system-section .card img {
max-width: 50px;
height: auto;
}
.system-section .card p {
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-size: 18px;
color: #282224;
margin: 0;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.card-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/******************
BOTTOM BAR TEAL
******************/
.bottom-bar.bottom-bar--teal {
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--light-teal);
color: #282224;
box-sizing: border-box;
}
.bottom-bar.bottom-bar--teal .bottom-bar__content {
max-width: 700px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.bottom-bar.bottom-bar--teal .bottom-bar__content > * {
display: flex;
align-items: center;
}
.bottom-bar.bottom-bar--teal .bottom-bar__text {
padding-right: 10px;
font-size: 2vw;
font-weight: 400;
}
.bottom-bar.bottom-bar--teal a {
text-decoration: none;
color: #282224;
font-weight: 400;
}
.bottom-bar.bottom-bar--teal .bottom-bar__button {
background-color: var(--coral);
color: #282224 !important;
text-align: center;
padding: 5px 50px;
border-radius: 25px;
text-decoration: none;
cursor: pointer;
font-weight: 400;
transition: color 0.3s ease;
}
.bottom-bar.bottom-bar--teal .bottom-bar__button:hover {
color: #fff !important;
}
@media (min-width: 576px) {
.bottom-bar.bottom-bar--teal .bottom-bar__text {
font-size: 14px;
}
}
body {
font-family: 'Poppins', sans-serif;
margin: 0;
}
/*This is the topnav on desktop*/
.topnav {
overflow: hidden;
background-color: #fff;
}
.topnav a {
float: right;
display: block;
color: black;
padding: 15px 15px;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
}
.topnav a.logo-image {
float:left;
}
.topnav a:hover {
color: #009999;
}
.topnav .search-container {
float: left;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 14px;
font-size: 12px;
text-transform: uppercase;
border: 1px solid #000;
}
.topnav input[type="text"]:focus {
outline : none;
background-color: #fff;
}
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, this hides all links, except for the search bar + hamburger icon */
@media screen and (max-width: 800px) {
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav .search-container {
float: left;
}
}
/* The "responsive" class is added to the topnav with JavaScript (in the html) when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
.topnav.responsive {
position: relative;
background-color: #fff;
display: block;
}
.topnav.responsive a.icon {
float: none;
display: block;
text-align: center;
width: 100vw;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
width: 100vw;
}
.topnav.responsive .search-container {
float: none;
display: block;
text-align: center;
margin-bottom: 3%;
}
}
/*hero image and title */
.hero-banner {
height: 200px;
background-size: cover;
background-position:center center;
background-color: #414141;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
width: 100%;
}
.hero-banner--title h1 {
color: white;
font-size: 3em;
}
.hero-banner--subtitle h2 {
color: white;
font-size: 0.8em;
}
@media screen and (max-width: 800px) {
.hero-banner {
height: 100px;
background-size: cover;
background-position:center center;
width: 100%;
}
.hero-banner--title h1 {
color: white;
font-size: 1em;
}
.hero-banner--subtitle h2 {
color: white;
font-size: 0.5em;
}
}
/*main content*/
#content {
line-height: 1.5;
margin: auto;
text-align: left;
font-weight: 300;
padding: 0 5%;
}
button {
background-color: #000;
border: none;
color: white;
padding: 25px;
margin: 30px;
text-decoration: none;
}
img {
max-width: 100%;
}
a
{color:#0A4049; text-decoration:none;}
a:hover
{color:#009999; text-decoration:underline;}
strong {
color:#ff6600;
}
table {
max-width: 100%;
padding: 10px;
margin: auto;
}
p
{margin:0 0 20px 0; line-height:2em;}
h1
{margin:10px; color:#009999; font-weight: 300; font-size:1.5em; text-align:center; line-height:1.5em;}
h2
{margin:10px; color:#808080; font-weight: 300; font-size:1.3em; text-align:center;}
h3
{clear:both; margin:10px; font-weight: 300; color:#009999; font-size: 1.1em;}
.button {
background-color: #000 !important;
width: 100% !important;
border: none !important;
color: white !important;
padding: 5px !important;
text-decoration: none !important;
text-transform: uppercase !important;
font-size: 12px !important;
}
@media screen and (max-width: 800px) {
li {
padding-bottom: 10px;
padding-top: 10px;
}
}
/*sidebar*/
#sidebar {
padding: 30px 0 0 0;
}
.profile-photo {
display: block;
margin: auto;
max-width: 200px;
padding: 25px;
border-radius: 100%;
}
.signup-image {
display: block;
margin: auto;
max-width: 225px;
padding: 25px;
}
#sidebar h3 {
text-align: center;
}
.newsletter-input {
margin: 10px;
text-align: center;
width: 90%
}
/*makes the sidebar go below the main content on small screens */
@media screen and (min-width: 800px) {
/*was 480 */
#main-content {
width: 65%;
float: left;
padding: 2.5%;
}
#sidebar {
width: 30%;
float: right;
}
}
/* exercises */
.userInput input { width: 150px!important; }
.exerciseButton { width: 75px; }
.exerciseButton {
width: 100px;
background-color: #000;
border: none;
color: white;
padding: 5px;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
outline: 2px solid white;
outline-offset: 2px;
}
#exercise h1 {
margin:10px;
color:#808080;
font-size:1.5em;
text-align:center;
line-height:1.5em;
}
#exercise h3 {
margin:10px;
color:#808080;
font-size:1em;
text-align:center;
line-height:1em;
}
.userInput input {
min-width: 50px;
border-radius: 0px !important;
border-style: solid !important;
border-width: 1px !important;
border-color: #000 !important;
outline: none !important;
padding: 5px; !important;
margin-color: #fff !important;
}
.userInput {
background: #fff !important;
}
.correctnessIndicator {
padding: 2px;
}
#exercise table {
max-width: 90%;
}
/* footer */
footer {
background: black;
width: 100%;
height: 200px;
padding-top: 60px;
padding-bottom: 140px;
display: flex;
float: right;
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
font-weight: 300;
font-size: 0.8em;
color: white;
}
footer a {
color: white;
padding: 30px;
}
.footer--logo {
padding-bottom: 30px;
}
@media screen and (max-width: 800px) {
footer {
background: black;
width: 100%;
display: block;
text-align: center;
}
footer a {
color: white;
display: block;
padding: 5px;
}
.footer--logo {
padding-bottom: 10px;
padding-top:40px;
}
}
/*bottom bar (sticks to the bottom when you scroll */
.bottom-bar {
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #de6b07; /*brand orange*/
color: #ffffff;
box-sizing: border-box;
}
.bottom-bar__content {
max-width: 700px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.bottom-bar__content > * {
display: flex;
align-items: center;
}
.bottom-bar__text {
padding-right: 10px;
}
.bottom-bar a {
color: #fff;
text-decoration: none;
font-weight: 300;
text-align: center;
}
.bottom-bar a:hover {
color: #000;
}
/*this css allows you to put in a top bar as well if you like */
.top-bar {
padding: 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000000;
color: #ffffff;
box-sizing: border-box;
}
.top-bar__content {
max-width: 600px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.top-bar__content > * {
display: flex;
align-items: center;
}
.top-bar__text {
padding-right: 10px;
}
.top-bar a {
color: #fff;
text-decoration: none;
font-weight: 300;
text-align: center;
}
.top-bar a:hover {
color: #009999;
}