diff --git a/homepage/theme/templates/base.html b/homepage/theme/templates/base.html index 5cf2cea..4dab771 100644 --- a/homepage/theme/templates/base.html +++ b/homepage/theme/templates/base.html @@ -81,35 +81,38 @@ +
-
-
-
+
+ +
+
Feature Text 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. -
-
-
+
+ +
+
Feature Text 2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. -
-
-
+
+ +
+
Feature Text 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. -
-
+
CTA TOP @@ -136,15 +139,57 @@
- CTA BOTTOM +
+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + +
+
+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
+ Status +
+
+
+
+
+ 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; - } -}