From 3d194c46beb57e9c5f0000c16ec911e7a42adae7 Mon Sep 17 00:00:00 2001 From: Carlos Arango Date: Mon, 1 Jan 2018 23:14:10 -0500 Subject: [PATCH 1/2] Practice 015 - Carlos --- src/015-flex/example/example.css | 211 +++++++++++++++++++++++++++++++ src/015-flex/example/index.html | 198 +++++++++++++++++++++++++++++ src/015-flex/example/reset.css | 48 +++++++ 3 files changed, 457 insertions(+) create mode 100644 src/015-flex/example/reset.css diff --git a/src/015-flex/example/example.css b/src/015-flex/example/example.css index 1e6ea79..fce3800 100644 --- a/src/015-flex/example/example.css +++ b/src/015-flex/example/example.css @@ -2,4 +2,215 @@ .trash{ color: black; +} + +.page-content { + padding: 0; +} + +.main-content::before { + content: ''; + display: block; + position: relative; + width: 100%; + height: 300px; + background: url(../solved/css/images/image.jpg) no-repeat center -50% fixed; + background-size: 100% 100%; + z-index: -1; +} + +.card-wrapper { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + max-width: 1200px; + width: 100%; + margin: -50px auto 0; +} + +.card { + width: 350px; + border-radius: 5px; + border: 2px solid #DDDDDD; + margin-bottom: 50px; + cursor: pointer; +} + +.card img { + transition: all 0.5s; +} + +.card:hover img { + transform: scale(1.2); +} + +.card p { + color: #787878; + padding: 10px; + line-height: 1.3em; +} + +.img-frame { + width: 100%; + overflow: hidden; +} + +.info { + border-top: 2px solid #DDDDDD; + display: flex; + justify-content: space-between; + padding: 10px 10px 5px 10px; +} + +.info ul, .info .button { + display: inline-block; +} + +.info ul li { + display: inline-block; +} + +.info ul li:not(:last-child):after { + content: ','; + color: #AAAAAA; +} + +.info ul a { + text-decoration: none; + color: #AAAAAA; +} + +.info ul a:hover { + color: #888888; +} + +.info .button { + text-decoration: none; + display: inline-block; + padding: 10px 5px 0; + transition: all 1s; +} + +.info .button:hover { + background-color: #eee; +} + +.info > .button, .info > ul { + align-self: baseline; +} + +footer { + padding-top: 30px; + padding-bottom: 30px; + background-color: #9370DB; + font-size: 0.8em; + font-family: sans-serif; +} + +footer .content { + display: none; +} + +footer input[type='checkbox'] { + position: absolute; + top: 0; + left: 0; + width: 0; + opacity: 0; +} + +footer label { + padding: 40px 50px; +} + +footer .content { + padding-left: 50px; + padding-right: 80px; +} + +footer label { + cursor: pointer; + position: relative; + width: 100%; + display: block; + color: #FFFFFF; + box-sizing: border-box; + text-align: center; +} + +.content ul { + max-width: 350px; +} + +.content .day { + width: 70%; +} + +.content .hours { + width: 30%; + min-width: 110px; +} + +.content p { + color: #FFFFFF; + line-height: 1.5em; +} + +.content .icons, .content table { + color: #FFFFFF; + width: 100%; +} + +.content td:first-child { + padding-right: 20px; +} + +.content td { + padding-bottom: 10PX; + padding-top: 10PX; + font-weight: lighter; +} + +.content tr { + border-bottom: 1px solid rgba(255,255,255,0.2); + +} + +.content li { + display: inline-block; + margin-bottom: 5px; +} + +@media (min-width: 992px) { + footer { + display: flex; + flex-wrap: wrap; + padding: 30px 10px; + } + + footer label { + padding: 0 0 40px; + text-align: left; + } + + footer label::after { + display: none; + } + + footer .content { + display: block; + padding-left: 0; + padding-right: 40px; + margin-bottom: 50px; + } + + footer .dropdown { + width: 50%; + } +} + +@media (min-width: 1200px) { + footer .dropdown { + width: 25%; + } } \ No newline at end of file diff --git a/src/015-flex/example/index.html b/src/015-flex/example/index.html index 19e1974..d17e7ae 100644 --- a/src/015-flex/example/index.html +++ b/src/015-flex/example/index.html @@ -12,6 +12,7 @@ + @@ -32,6 +33,203 @@
+
+
+
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris.

+
+ + Lorem +
+
+
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris.

+
+ + Lorem +
+
+
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris.

+
+ + Lorem +
+
+
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris.

+
+ + Lorem +
+
+
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris.

+
+ + Lorem +
+
+
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris.

+
+ + Lorem +
+
+
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris.

+
+ + Lorem +
+
+
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris.

+
+ + Lorem +
+
+
+
+ +
+
+ + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut nisl ullamcorper, consectetur lectus at, dignissim dolor. Quisque ultrices laoreet lacus non interdum. Donec ut dictum metus.

+
+
+
+ + +
+ + + + + + + + + + + + + + + + + +
Lorem9:00AM - 7:00PM
Ipsum9:00AM - 7:00PM
Dolor9:00AM - 7:00PM
Sit9:00AM - 7:00PM
+
+
+
+ + +
+
    +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
+
+
+
+ + +
+

Consectetur adipiscing elit.

+

Proin ut nisl ullamcorper

+

Consectetur lectus at, dignissim dolor.

+

Quisque ultrices laoreet lacus non interdum.

+

Donec ut dictum metus.

+
+
+
diff --git a/src/015-flex/example/reset.css b/src/015-flex/example/reset.css new file mode 100644 index 0000000..9ff51eb --- /dev/null +++ b/src/015-flex/example/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file From 565a43e08d47e8f4349bc1a60fb2bcf5a5dd94ed Mon Sep 17 00:00:00 2001 From: Carlos Arango Date: Fri, 26 Jan 2018 11:12:03 -0500 Subject: [PATCH 2/2] Corrections practice 015 --- src/015-flex/example/example.css | 23 ++++++++------------- src/015-flex/example/index.html | 34 ++++++++++++++------------------ 2 files changed, 23 insertions(+), 34 deletions(-) diff --git a/src/015-flex/example/example.css b/src/015-flex/example/example.css index fce3800..37b194b 100644 --- a/src/015-flex/example/example.css +++ b/src/015-flex/example/example.css @@ -111,15 +111,7 @@ footer .content { display: none; } -footer input[type='checkbox'] { - position: absolute; - top: 0; - left: 0; - width: 0; - opacity: 0; -} - -footer label { +footer span.footer-title { padding: 40px 50px; } @@ -128,7 +120,7 @@ footer .content { padding-right: 80px; } -footer label { +footer span.footer-title { cursor: pointer; position: relative; width: 100%; @@ -136,6 +128,7 @@ footer label { color: #FFFFFF; box-sizing: border-box; text-align: center; + font-size: 1.1em; } .content ul { @@ -181,19 +174,19 @@ footer label { margin-bottom: 5px; } -@media (min-width: 992px) { +@media (min-width: 769px) { footer { display: flex; flex-wrap: wrap; padding: 30px 10px; } - footer label { + footer span.footer-title { padding: 0 0 40px; text-align: left; } - footer label::after { + footer span.footer-title::after { display: none; } @@ -204,13 +197,13 @@ footer label { margin-bottom: 50px; } - footer .dropdown { + footer .footer-block { width: 50%; } } @media (min-width: 1200px) { - footer .dropdown { + footer .footer-block { width: 25%; } } \ No newline at end of file diff --git a/src/015-flex/example/index.html b/src/015-flex/example/index.html index d17e7ae..37dc1cc 100644 --- a/src/015-flex/example/index.html +++ b/src/015-flex/example/index.html @@ -34,7 +34,7 @@
-
+
@@ -163,20 +163,18 @@ Lorem
-
-
+ +