CTA TOP
@@ -136,15 +139,57 @@
- CTA BOTTOM
+
+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
+
+
+
+
diff --git a/styles/index.css b/styles/index.css
index 4669dc9..386bdb7 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -41,7 +41,6 @@ LAYOUT
}
.feature {
width: 100%;
- height: 400px;
background-color: var(--grey-bright);
}
.cta-top {
@@ -61,33 +60,122 @@ LAYOUT
}
.cta-bottom {
width: 100%;
- height: 200px;
background-color: var(--yellow-mid);
}
.footer {
width: 100%;
- height: 240px;
+ min-height: 300px;
color: var(--grey-mid);
background-color: var(--black-mid);
}
-
-/* Mobile Styles */
-@media only screen and (max-width: 960px) {
- .container-reader,
- .container-full {
- padding: 40px 20px 80px 20px;
- }
-}
-
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.container-reader {
width: 600px;
margin: 0 auto;
- padding: 40px 20px 80px 20px;
+ padding: 60px 20px 120px 20px;
}
.container-full {
- padding: 40px 80px 80px 80px;
+ padding: 60px 80px 120px 80px;
+ }
+ .footer {
+ padding: 40px 40px 0 40px;
+ }
+}
+/* Tablet Styles */
+@media only screen and (min-width: 600px) and (max-width: 960px) {
+ .container-reader,
+ .container-full {
+ width: 600px;
+ margin: 0 auto;
+ padding: 60px 20px 120px 20px;
+ }
+}
+/* Mobile Styles */
+@media only screen and (max-width: 960px) {
+ .container-reader,
+ .container-full,
+ .footer {
+ padding: 60px 20px 120px 20px;
+ }
+}
+
+
+/* ---------------------------------------------------
+CARDS
+----------------------------------------------------*/
+.card-deck,
+.card,
+.footer-card-deck {
+ display: flex;
+}
+.card {
+ max-width: 400px;
+ color: var(--black-mid);
+}
+.footer-card p {
+ margin: 0 0 4px 0;
+}
+.footer-card:nth-child(1),
+.footer-card:nth-child(2) {
+ margin: 0 0 20px 0;
+}
+/* Mobile Styles */
+@media only screen and (max-width: 960px) {
+ .card-deck,
+ .card,
+ .footer-card-deck {
+ flex-direction: column;
+ }
+ .card {
+ align-self: center;
+ }
+ .card:nth-child(2) {
+ margin: 80px 0 80px 0;
+ }
+ .card-gfx,
+ .card-text,
+ .footer-card {
+ text-align: center;
+ }
+ .card-gfx {
+ margin: 0 0 20px 0;
+ }
+}
+/* Tablet Styles */
+@media only screen and (min-width: 600px) and (max-width: 960px) {
+
+}
+/* Desktop Styles */
+@media only screen and (min-width: 961px) {
+ .card-deck,
+ .card,
+ .footer-card-deck {
+ flex-direction: row;
+ }
+ .card-deck {
+ justify-content: space-evenly;
+ }
+ .card:nth-child(2) {
+ margin: 0 40px 0 40px;
+ }
+ .card-gfx,
+ .card-text {
+ text-align: left;
+ }
+ .card-gfx {
+ margin: 0 20px 0 0;
+ }
+ .footer-card-deck {
+ justify-content: space-between;
+ }
+ .footer-card:nth-child(1),
+ .footer-card:nth-child(2) {
+ flex-grow: 1;
+ }
+ .footer-card:nth-child(3) {
+ text-align: right;
+ flex-grow: 10;
}
}
@@ -383,47 +471,3 @@ nav ul li ul li a {
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
-
-
-/* ---------------------------------------------------
-CARDS
-----------------------------------------------------*/
-.card {
- position: relative;
- display: flex;
- flex-direction: column;
- min-width: 0;
- word-wrap: break-word;
- background-clip: border-box;
-}
-.card-body {
- flex: 1 1 auto;
- text-align: center;
-}
-.card-deck {
- display: flex;
- flex-direction: column;
-}
-.card-deck .card {
- margin: 0 0 15px 0;
-}
-
-/* Mobile Styles */
-@media only screen and (max-width: 960px) {
-
-}
-
-/* Desktop Styles */
-@media only screen and (min-width: 961px) {
- /* Card */
- .card-deck {
- flex-flow: row wrap;
- margin: 0 -15px 0 -15px;
- }
- .card-deck .card {
- display: flex;
- flex: 1 0 0%;
- flex-direction: column;
- margin: 0 15px 0 15px;
- }
-}