From ea637c92cee1a7b9d62f2039f78a50c1a1483050 Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Sat, 3 Mar 2018 10:59:06 -0600 Subject: [PATCH 01/13] made changes to index.html in 01week foler --- 01week/helloworld/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/01week/helloworld/index.html b/01week/helloworld/index.html index e69de29bb2..27a4aeb953 100644 --- a/01week/helloworld/index.html +++ b/01week/helloworld/index.html @@ -0,0 +1 @@ +

~*~Hello, world!~*~

\ No newline at end of file From a63266b9fc8a62cc0c041ac6ea73313d0cf3b309 Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Tue, 13 Nov 2018 12:05:36 -0600 Subject: [PATCH 02/13] add first changes --- 01week/helloworld/index.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/01week/helloworld/index.html b/01week/helloworld/index.html index 27a4aeb953..5616f453b7 100644 --- a/01week/helloworld/index.html +++ b/01week/helloworld/index.html @@ -1 +1,11 @@ -

~*~Hello, world!~*~

\ No newline at end of file + + + + + + Juan's Resume + + +

Hello, World!

+ + \ No newline at end of file From 9a0909a81098b86012733c4a990ae59c3674e9b9 Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Tue, 13 Nov 2018 12:19:38 -0600 Subject: [PATCH 03/13] resume --- 01week/resume/index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/01week/resume/index.html b/01week/resume/index.html index e69de29bb2..6e84df56a3 100644 --- a/01week/resume/index.html +++ b/01week/resume/index.html @@ -0,0 +1,11 @@ + + + + + + Resume + + +

HELLO

+ + \ No newline at end of file From 6d9530c27d4516657798d12966be82f522cfeeea Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Tue, 13 Nov 2018 19:50:40 -0600 Subject: [PATCH 04/13] first push --- 01week/helloworld/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/01week/helloworld/index.html b/01week/helloworld/index.html index 5616f453b7..2d41953e84 100644 --- a/01week/helloworld/index.html +++ b/01week/helloworld/index.html @@ -3,7 +3,7 @@ - Juan's Resume + First Site

Hello, World!

From 9530f65253162f9a808053c8d6ac28c5cf7de1b1 Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Tue, 13 Nov 2018 20:33:07 -0600 Subject: [PATCH 05/13] created resume on day 2 --- 01week/helloworld/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/01week/helloworld/index.html b/01week/helloworld/index.html index 2d41953e84..503249d8d2 100644 --- a/01week/helloworld/index.html +++ b/01week/helloworld/index.html @@ -1,6 +1,6 @@ - + First Site From ba121ce05a7a86bab2c548049d58add13399998d Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Tue, 13 Nov 2018 20:38:55 -0600 Subject: [PATCH 06/13] added resume --- 01week/resume/css/style.css | 25 +++++++++++++++++++++++++ 01week/resume/index.html | 9 +++++++-- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/01week/resume/css/style.css b/01week/resume/css/style.css index e69de29bb2..d0d6b10c02 100644 --- a/01week/resume/css/style.css +++ b/01week/resume/css/style.css @@ -0,0 +1,25 @@ +header { + border: 1px solid red; + height: 100px; + width: 100%; +} +nav { + border: 1px solid blue; + height: 100px; + width: 100%; +} +section { + border: 1px solid yellow; + height: 100px; + width: 100%; +} +article { + border: 1px solid purple; + height: 100px; + width: 100%; +} +footer { + border: 1px solid pink; + height: 100px; + width: 100%; +} diff --git a/01week/resume/index.html b/01week/resume/index.html index 6e84df56a3..5c480b6572 100644 --- a/01week/resume/index.html +++ b/01week/resume/index.html @@ -3,9 +3,14 @@ - Resume + Juan's Resume + -

HELLO

+
this is a header
+ +
this is a section
+
this is a article
+
this is a footer
\ No newline at end of file From e8c9f048c065d1753744700ff85624e7d84cf159 Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Thu, 15 Nov 2018 18:41:25 -0600 Subject: [PATCH 07/13] added flex to my header element --- 01week/resume/css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/01week/resume/css/style.css b/01week/resume/css/style.css index d0d6b10c02..d327bdcabc 100644 --- a/01week/resume/css/style.css +++ b/01week/resume/css/style.css @@ -7,6 +7,7 @@ nav { border: 1px solid blue; height: 100px; width: 100%; + display: flex; } section { border: 1px solid yellow; From e749dbcc1acfd6d4fb2b8c08f092ab7daf58e5a3 Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Tue, 27 Nov 2018 18:38:16 -0600 Subject: [PATCH 08/13] submitting resume --- 01week/resume/css/style.css | 71 ++++++++++++++++++++++++++++++++++++- 01week/resume/index.html | 65 ++++++++++++++++++++++++++++++--- 02week/site/css/style.css | 60 +++++++++++++++++++++++++++++++ 02week/site/index.html | 26 ++++++++++++++ 4 files changed, 216 insertions(+), 6 deletions(-) create mode 100644 02week/site/css/style.css create mode 100644 02week/site/index.html diff --git a/01week/resume/css/style.css b/01week/resume/css/style.css index d327bdcabc..4e030b6090 100644 --- a/01week/resume/css/style.css +++ b/01week/resume/css/style.css @@ -1,13 +1,82 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:300,500,900'); +* { + font-family: 'Roboto', sans-serif; +} +body { + font-family: 'Roboto', sans-serif; +} + header { + border: 1px solid red; + border: 1px solid red; + border: 1px solid red; + border: 1px solid red; + border: 1px solid red; border: 1px solid red; height: 100px; width: 100%; + color: aquamarine; + color: aquamarine; + color: aquamarine; + color: aquamarine; + color: aquamarine; + color: aquamarine; + color: aquamarine; + color: aquamarine; +} +footer { + color: red; + font-family: 'Roboto', sans-serif; + font-weight: 300; +} +h1 { + font-weight: 900; + +} +div { + height:100%; +} +.access { + height: 100%; + width: 50%; + border: 1px solid pink; +} +.red { + background:red; +} +input { + border: blue; +} +a:visit{ + content: '', + + +} +nav li { + color: white +} +li { + color:red; } +input:hover { + +} +input:disabled { + border: grey; +} +#div-access { + height: 50%; + background:blue; +} + nav { border: 1px solid blue; height: 100px; width: 100%; - display: flex; + display: inline-block; +} +nav { + border: 1px solid red; } section { border: 1px solid yellow; diff --git a/01week/resume/index.html b/01week/resume/index.html index 5c480b6572..ef573b38b9 100644 --- a/01week/resume/index.html +++ b/01week/resume/index.html @@ -5,12 +5,67 @@ Juan's Resume + -
this is a header
- -
this is a section
-
this is a article
-
this is a footer
+

+

+
+

+ +

+
+

Juan Rod

+

Front End Developer

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/02week/site/css/style.css b/02week/site/css/style.css new file mode 100644 index 0000000000..0610a6233f --- /dev/null +++ b/02week/site/css/style.css @@ -0,0 +1,60 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +.border-red { + border: 1px solid red; +} +.border-blue { + border: 1px solid blue; +} +.border-green { + border: 1px solid green; +} +body{ + height: 100vh; + background-color: #ff7700; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23cc0000' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23aa0000' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23d6002b' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23b10022' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23d9004b' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23b2003d' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23d3006c' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23ac0057' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23c4008c' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%239e0071' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23aa00aa' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23880088' points='943 900 1210 900 971 687'/%3E%3C/svg%3E"); + background-attachment: fixed; + background-size: cover; +} +nav { + height: 90px; + width: 100%; + display: block; + position: fixed; + padding: 10px 15px 10px 15px; + background-color: rgba(128, 128, 128, 0.5); + transition: background-color 0.3s ease; +} +nav:hover { + background-color: rgba(128, 128, 128, 0.8); +} +nav .logo { + display: inline-block; + height: 70px; + width: 70px; + text-align: center; +} +nav .logo i { + font-size: 65px; + margin: 15% 0; +} +nav ul { + height: 100%; + padding: 12px 0 0; + float: right; +} +/* ul li:nth-child(2) { + width:300px; +} */ +ul li { + display: inline-block; + padding: 10px; + margin: 0 auto; +} +header { + height: 100vh; + padding-top: 90px; +} \ No newline at end of file diff --git a/02week/site/index.html b/02week/site/index.html new file mode 100644 index 0000000000..cd8f65e995 --- /dev/null +++ b/02week/site/index.html @@ -0,0 +1,26 @@ + + + + + + Wireframe Site + + + + + +
I'm a header
+
Section 1
+
Section 2
+
I'm a footer
+ + \ No newline at end of file From b8577e3f266b3b58cd5cf293bb61c272009c9191 Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Tue, 11 Dec 2018 12:40:09 -0600 Subject: [PATCH 09/13] updating repo --- 04week/flexbox-exercises/css/home.css | 38 +++++ 04week/flexbox-exercises/css/styles.css | 66 ++++++++ 04week/flexbox-exercises/home.html | 18 +++ 04week/flexbox-exercises/index.html | 46 ++++++ 04week/media-query-exercise/css/styles.css | 98 ++++++++++++ 04week/media-query-exercise/index.html | 65 ++++++++ .../responsive-card/css/style.css | 144 ++++++++++++++++++ .../responsive-card/index.html | 26 ++++ 8 files changed, 501 insertions(+) create mode 100644 04week/flexbox-exercises/css/home.css create mode 100644 04week/flexbox-exercises/css/styles.css create mode 100644 04week/flexbox-exercises/home.html create mode 100644 04week/flexbox-exercises/index.html create mode 100644 04week/media-query-exercise/css/styles.css create mode 100644 04week/media-query-exercise/index.html create mode 100644 05week/in-class-excercises/responsive-card/css/style.css create mode 100644 05week/in-class-excercises/responsive-card/index.html diff --git a/04week/flexbox-exercises/css/home.css b/04week/flexbox-exercises/css/home.css new file mode 100644 index 0000000000..8399abaea9 --- /dev/null +++ b/04week/flexbox-exercises/css/home.css @@ -0,0 +1,38 @@ +@import url('https://fonts.googleapis.com/css?family=Ubuntu'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +.container { + height: 100%; + width: 100%; + position: relative; + font-family: 'Ubuntu', sans-serif; + background: url('https://images.unsplash.com/photo-1543896792-da955826e5eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80'); + background-size: cover; +} +.container--inner { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + /* background-color: rgba(0, 0, 0, 0.196); */ +} +.button__wrapper { + /* border: 1px solid red; */ + padding: 50px 125px; + border-radius: 4px; + background-color: rgba(238, 238, 238, 0.829); + transform: scale(1); + transition: transform 300ms ease; +} +.button__wrapper:hover { + transform: scale(1.1); +} +a { + text-decoration: none; + color: #4d4e4f; + font-size: 40px; +} \ No newline at end of file diff --git a/04week/flexbox-exercises/css/styles.css b/04week/flexbox-exercises/css/styles.css new file mode 100644 index 0000000000..305d50fda6 --- /dev/null +++ b/04week/flexbox-exercises/css/styles.css @@ -0,0 +1,66 @@ +@import url('https://fonts.googleapis.com/css?family=Ubuntu'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +.container { + height: 100%; + width: 100%; + position: relative; + font-family: 'Ubuntu', sans-serif; +} +.list__wrapper { + border: 1px solid red; + display: flex; + justify-content: center; + height: 100%; + width: 100%; +} +.list { + border: 1px solid blue; + height: 550px; + width: 1000px; + display: flex; + justify-content: center; +} +ul { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + list-style: none; + width: 100%; +} +@media(min-width: 480px) { + ul { + flex-direction: column; + } +} +.list__item { + border: 1px solid #eee; + width: 100%; + display: flex; + flex-direction: row; + margin-bottom: 10px; + border-radius: 6px; + padding: 15px; + box-shadow: 5px 5px 13px 0px rgba(0,0,0,.15); +} +.list__image { + flex-shrink: 0; +} +.list__content { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 0 0 20px; + line-height: 1.4; + /* border: 5px solid pink; */ +} +img { + height: 100px; + width: 100px; + border-radius: 50%; +} \ No newline at end of file diff --git a/04week/flexbox-exercises/home.html b/04week/flexbox-exercises/home.html new file mode 100644 index 0000000000..1ae5800744 --- /dev/null +++ b/04week/flexbox-exercises/home.html @@ -0,0 +1,18 @@ + + + + + + + HOME + + +
+
+
+ ENTER SITE +
+
+
+ + \ No newline at end of file diff --git a/04week/flexbox-exercises/index.html b/04week/flexbox-exercises/index.html new file mode 100644 index 0000000000..92f677edf8 --- /dev/null +++ b/04week/flexbox-exercises/index.html @@ -0,0 +1,46 @@ + + + + + + + Contact List + + +
+
+
+
    +
  • +
    + mariah-carey +
    +
    +

    Agent M

    +

    San Juan, PR

    +
    +
    • +
  • +
    + mariah-carey +
    +
    +

    Agent M

    +

    San Juan, PR

    +
    +
    • +
  • +
    + mariah-carey +
    +
    +

    Agent M

    +

    San Juan, PR

    +
    +
    • +
+
+
+
+ + \ No newline at end of file diff --git a/04week/media-query-exercise/css/styles.css b/04week/media-query-exercise/css/styles.css new file mode 100644 index 0000000000..5b5ebf682a --- /dev/null +++ b/04week/media-query-exercise/css/styles.css @@ -0,0 +1,98 @@ +@import url('https://fonts.googleapis.com/css?family=Noto+Sans'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + height: 100%; + width: 100%; + font-family: 'Noto Sans', sans-serif; +} + +.cards{ + display: flex; + justify-content: center; + flex-wrap: wrap; + list-style: none; + /* border: 1px solid red; */ +} +.cards__item{ + /* border: 4px solid purple; */ + padding: 16px; +} + +.card { + display: flex; + flex-direction: column; + height: 500px; + /* width: 400px; */ + overflow: hidden; + border: 1px solid #eee; + box-shadow: 7px 5px 6px 4px rgba(0, 0, 0, 0.11) +} +.card__image { + height: 50%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +.card__image--city { + background-image: url('https://images.unsplash.com/photo-1544077960-604201fe74bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80') +} +.card__content { + padding: 20px; + display: flex; + flex-direction: column; + /* border: 1px solid red; */ + height: 50%; +} +.card__content h4 { + color: #2d2e2f; + /* border: 1px solid red; */ + letter-spacing: 2px; + text-transform: uppercase; + /* flex: 1; */ +} +.card__content p { + line-height: 1.5; + max-height: 110px; + margin-top: 10px; + overflow: scroll; + /* border: 1px solid red; */ + /* flex: 2; */ + /* flex: 1; */ +} +button { + width: 30%; + background-color: white; + border: 1px solid #eee; + color: #4d4e4f; + padding: 10px; + text-transform: lowercase; + width: 100%; + margin-top: 25px; + outline: none; +} +button:hover { + background-color: rgb(199, 200, 248); +} +@media(min-width: 440px) { + .cards__item { + width: 50%; + } +} +@media(min-width: 640px) { + .cards__item { + width: 50%; + } +} +@media(min-width: 896px) { + .cards__item { + width: 33.3333%; + } + .card__content h4 { + /* font-size: 60px; */ + } +} \ No newline at end of file diff --git a/04week/media-query-exercise/index.html b/04week/media-query-exercise/index.html new file mode 100644 index 0000000000..d483414548 --- /dev/null +++ b/04week/media-query-exercise/index.html @@ -0,0 +1,65 @@ + + + + + + + Card Exercise + + +
+
    +
  • +
    +
    +
    +

    Always be coding

    +

    Lorem ipsum dolor amet vinyl jean shorts green juice taiyaki banjo. Leggings health goth glossier thundercats photo booth jianbing. Tacos typewriter trust fund coloring book four loko. Forage synth shaman disrupt raclette.

    + +
    +
    +
    • +
  • +
    +
    +
    +

    Always be coding

    +

    ;lasnv;laskdnflasdn;kalsjdnf;lasdkfl

    + +
    +
    +
    • +
  • +
    +
    +
    +

    Always be coding

    +

    ;lasnv;laskdnflasdn;kalsjdnf;lasdkfl

    + +
    +
    +
    • +
  • +
    +
    +
    +

    Always be coding

    +

    ;lasnv;laskdnflasdn;kalsjdnf;lasdkfl

    + +
    +
    +
    • +
  • +
    +
    +
    +

    Always be coding

    +

    ;lasnv;laskdnflasdn;kalsjdnf;lasdkfl

    + +
    +
    +
    • +
+
+ + \ No newline at end of file diff --git a/05week/in-class-excercises/responsive-card/css/style.css b/05week/in-class-excercises/responsive-card/css/style.css new file mode 100644 index 0000000000..34eb30cf96 --- /dev/null +++ b/05week/in-class-excercises/responsive-card/css/style.css @@ -0,0 +1,144 @@ +@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i'); + +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i'); + +/* .border-1{ + border: 2px solid red; +} +.border-2{ + border: 2px solid blue; +} */ + +* { + box-sizing: border-box; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + margin: 0; + padding: 0; +} + +.card { + height: 90%; + width: 80%; + display: flex; + flex-direction: column; + justify-content: center; + box-shadow: 1px 1px 16px 0px rgba(134, 134, 134, 0.1); +} +.card__content { + flex: 1; + display: flex; + flex-direction: column; + padding: 1em 2em 0; + order: 2; +} +.card__content div { + margin-bottom: 1.3em; +} +.card__content .subtitle { + font-family: 'Open Sans', sans-serif; + letter-spacing: 3px; + font-size: 10px; + text-transform: uppercase; + color: #7E7E7E; + font-weight: 700; +} +.card__content .title { + font-family: 'Playfair Display', serif; + font-size: 30px; + line-height: 31px; + letter-spacing: 3px; + font-weight: 700; + color: #2C2C2C; + margin-bottom: .5em; +} +.card__content .description { + font-family: 'Open Sans', sans-serif; + font-size: 11px; + color: #7e7e7e; + line-height: 22px; +} +.card__content .link a { + text-decoration: none; + color: #2C2C2C; + font-family: 'Open Sans', sans-serif; + letter-spacing: 3px; + font-size: 9px; + text-transform: uppercase; + font-weight: 700; +} +.card__content .link a:hover { + color: #7E7E7E; +} +.card__image { + flex: 1; + background: url('https://images.unsplash.com/photo-1544488994-3a0753185c37?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80'); + background-size: cover; + background-repeat: no-repeat; + order: 1; +} + + +/* Small and up (Landscape Phones) */ +@media (min-width: 576px) { + .card__content .description { + line-height: 16px; + } + .card__image { + flex: 2; + } +} + +/* Medium and up (Tablets) */ +@media (min-width: 768px) { + .card { + height: 550px; + width: 90%; + flex-direction: row; + } + .card__content { + flex: 1; + display: flex; + flex-direction: column; + padding: 6em 2em 0; + order: 1; + } + .card__content .title { + font-size: 44px; + line-height: 45px; + margin-bottom: 1em; + } + .card__content .description { + font-size: 13px; + line-height: 22px; + } + .card__content .link a { + font-size: 13px; + } + .card__image { + order: 2; + flex: 2 + } +} + +/* Large and up (Desktops) */ +@media (min-width: 992px) { + .card { + height: 550px; + width: 900px; + flex-direction: row; + } + +} + +/* Extra Large and up (Wide Screen Desktops) */ +@media (min-width: 1200px) { + +} \ No newline at end of file diff --git a/05week/in-class-excercises/responsive-card/index.html b/05week/in-class-excercises/responsive-card/index.html new file mode 100644 index 0000000000..9b5a4bbaf9 --- /dev/null +++ b/05week/in-class-excercises/responsive-card/index.html @@ -0,0 +1,26 @@ + + + + + + Responsive Card + + + +
+
+
Tipsy the Season
+
Seasonal Cocktails
+
Small batch beard VHS organic poutine banh mi. + Unicorn gastropub banh mi adaptogen mixtape. + Selvage biodiesel chicharrones, poutine hashtag hot chicken + tattooed try-hard activated charcoal lomo post-ironic letterpress + bitters sustainable.
+
Get the recipe
+
+
+ +
+
+ + \ No newline at end of file From c784a928b4f5289b09d2730c98a58095644ca026 Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Tue, 11 Dec 2018 15:39:03 -0600 Subject: [PATCH 10/13] added grids --- .../build-with-grids/css/styles.css | 41 +++++++++++++++++++ .../build-with-grids/index.html | 19 +++++++++ 2 files changed, 60 insertions(+) create mode 100644 05week/in-class-excercises/build-with-grids/css/styles.css create mode 100644 05week/in-class-excercises/build-with-grids/index.html diff --git a/05week/in-class-excercises/build-with-grids/css/styles.css b/05week/in-class-excercises/build-with-grids/css/styles.css new file mode 100644 index 0000000000..e691eb755c --- /dev/null +++ b/05week/in-class-excercises/build-with-grids/css/styles.css @@ -0,0 +1,41 @@ +*{ + box-sizing: border-box; +} +body { + /* background: red; */ + height: 100%; + margin: 0; + padding: 0; +} +.grid-container { + border: 3px solid black; + height: 100%; + /* Grid items are placed in rows by default and + span the full width of the grid container. */ + display: grid; + /* Explicit Grid */ + /* Explicitly set a grid by creating columns and rows with + the grid-template-columns and grid-template-rows properties. */ + grid-template-rows: 50px 100px; + /* A row track is created for each value specified for grid-template-rows. + Track size values can be any non-negative, length value (px, %, em, etc.) + Items 1 and 2 have fixed heights of 50px and 100px. + Because only 2 row tracks were defined, heights of items 3 and 4 are defined by the contents of each. */ + grid-template-columns: 90px 50px 120px; + /* Items 4, 5 and 6 were placed on a new row track because only + 3 column track sizes were defined; and because they were placed in column + tracks 1, 2 and 3, their column sizes are equal to items 1, 2 and 3. */ + grid-template-columns: 1fr 1fr 2fr; + /* The fr unit helps create flexible grid tracks. It represents a fraction of the available + space in the grid container (works like Flexbox’s unitless values). + In this example, items 1 and 2 take up the first two (of four) + sections while item 3 takes up the last two. */ + + +} +.grid-item { + border: 1px dotted #eee; + background-color: crimson; + border-radius: 6px; + +} \ No newline at end of file diff --git a/05week/in-class-excercises/build-with-grids/index.html b/05week/in-class-excercises/build-with-grids/index.html new file mode 100644 index 0000000000..7d05c2d71e --- /dev/null +++ b/05week/in-class-excercises/build-with-grids/index.html @@ -0,0 +1,19 @@ + + + + + + Document + + + +
+
+
+
+
+
+
+
+ + \ No newline at end of file From e06d44016ed70fa5e62d226a26c4a53c360f28e6 Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Tue, 11 Dec 2018 20:08:04 -0600 Subject: [PATCH 11/13] responsive card --- .../build-with-grids/css/styles.css | 41 ---------- .../build-with-grids/index.html | 19 ----- .../responsive-card/index.html | 26 ------- .../build-with-grids/css/styles.css | 19 +++++ .../build-with-grids/index.html | 0 .../responsive-card/css/style.css | 75 +++++++++---------- .../responsive-card/index.html | 26 +++++++ 7 files changed, 79 insertions(+), 127 deletions(-) delete mode 100644 05week/in-class-excercises/build-with-grids/css/styles.css delete mode 100644 05week/in-class-excercises/build-with-grids/index.html delete mode 100644 05week/in-class-excercises/responsive-card/index.html create mode 100644 05week/in-class-exercises/build-with-grids/css/styles.css create mode 100644 05week/in-class-exercises/build-with-grids/index.html rename 05week/{in-class-excercises => in-class-exercises}/responsive-card/css/style.css (70%) create mode 100644 05week/in-class-exercises/responsive-card/index.html diff --git a/05week/in-class-excercises/build-with-grids/css/styles.css b/05week/in-class-excercises/build-with-grids/css/styles.css deleted file mode 100644 index e691eb755c..0000000000 --- a/05week/in-class-excercises/build-with-grids/css/styles.css +++ /dev/null @@ -1,41 +0,0 @@ -*{ - box-sizing: border-box; -} -body { - /* background: red; */ - height: 100%; - margin: 0; - padding: 0; -} -.grid-container { - border: 3px solid black; - height: 100%; - /* Grid items are placed in rows by default and - span the full width of the grid container. */ - display: grid; - /* Explicit Grid */ - /* Explicitly set a grid by creating columns and rows with - the grid-template-columns and grid-template-rows properties. */ - grid-template-rows: 50px 100px; - /* A row track is created for each value specified for grid-template-rows. - Track size values can be any non-negative, length value (px, %, em, etc.) - Items 1 and 2 have fixed heights of 50px and 100px. - Because only 2 row tracks were defined, heights of items 3 and 4 are defined by the contents of each. */ - grid-template-columns: 90px 50px 120px; - /* Items 4, 5 and 6 were placed on a new row track because only - 3 column track sizes were defined; and because they were placed in column - tracks 1, 2 and 3, their column sizes are equal to items 1, 2 and 3. */ - grid-template-columns: 1fr 1fr 2fr; - /* The fr unit helps create flexible grid tracks. It represents a fraction of the available - space in the grid container (works like Flexbox’s unitless values). - In this example, items 1 and 2 take up the first two (of four) - sections while item 3 takes up the last two. */ - - -} -.grid-item { - border: 1px dotted #eee; - background-color: crimson; - border-radius: 6px; - -} \ No newline at end of file diff --git a/05week/in-class-excercises/build-with-grids/index.html b/05week/in-class-excercises/build-with-grids/index.html deleted file mode 100644 index 7d05c2d71e..0000000000 --- a/05week/in-class-excercises/build-with-grids/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - Document - - - -
-
-
-
-
-
-
-
- - \ No newline at end of file diff --git a/05week/in-class-excercises/responsive-card/index.html b/05week/in-class-excercises/responsive-card/index.html deleted file mode 100644 index 9b5a4bbaf9..0000000000 --- a/05week/in-class-excercises/responsive-card/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - Responsive Card - - - -
-
-
Tipsy the Season
-
Seasonal Cocktails
-
Small batch beard VHS organic poutine banh mi. - Unicorn gastropub banh mi adaptogen mixtape. - Selvage biodiesel chicharrones, poutine hashtag hot chicken - tattooed try-hard activated charcoal lomo post-ironic letterpress - bitters sustainable.
-
Get the recipe
-
-
- -
-
- - \ No newline at end of file diff --git a/05week/in-class-exercises/build-with-grids/css/styles.css b/05week/in-class-exercises/build-with-grids/css/styles.css new file mode 100644 index 0000000000..2636ccdc2c --- /dev/null +++ b/05week/in-class-exercises/build-with-grids/css/styles.css @@ -0,0 +1,19 @@ +/* Small and up (Landscape Phones) */ +@media (min-width: 576px) { + +} + +/* Medium and up (Tablets) */ +@media (min-width: 768px) { + +} + +/* Large and up (Desktops) */ +@media (min-width: 992px) { + +} + +/* Extra Large and up (Wide Screen Desktops) */ +@media (min-width: 1200px) { + +} \ No newline at end of file diff --git a/05week/in-class-exercises/build-with-grids/index.html b/05week/in-class-exercises/build-with-grids/index.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/05week/in-class-excercises/responsive-card/css/style.css b/05week/in-class-exercises/responsive-card/css/style.css similarity index 70% rename from 05week/in-class-excercises/responsive-card/css/style.css rename to 05week/in-class-exercises/responsive-card/css/style.css index 34eb30cf96..4223a4bb5a 100644 --- a/05week/in-class-excercises/responsive-card/css/style.css +++ b/05week/in-class-exercises/responsive-card/css/style.css @@ -1,17 +1,17 @@ -@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i'); +@import url('https://fonts.googleapis.com/css?family=Noto+Serif+SC:400,700|Roboto:400,700'); -@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i'); - -/* .border-1{ - border: 2px solid red; -} -.border-2{ - border: 2px solid blue; -} */ +/* font-family: 'Roboto', sans-serif; +font-family: 'Noto Serif SC', serif; */ * { box-sizing: border-box; } +/* .border-1 { + border:2px solid red; +} +.border-2 { + border:2px solid blue; +} */ body { display: flex; @@ -23,71 +23,75 @@ body { margin: 0; padding: 0; } - .card { - height: 90%; - width: 80%; display: flex; flex-direction: column; justify-content: center; + height: 90%; + width: 80%; box-shadow: 1px 1px 16px 0px rgba(134, 134, 134, 0.1); } .card__content { - flex: 1; display: flex; flex-direction: column; - padding: 1em 2em 0; + flex: 1; order: 2; + padding: 1em 2em 0; } .card__content div { margin-bottom: 1.3em; } .card__content .subtitle { - font-family: 'Open Sans', sans-serif; + font-family: 'Roboto', sans-serif; letter-spacing: 3px; font-size: 10px; text-transform: uppercase; - color: #7E7E7E; + color: #7e7e7e; font-weight: 700; } .card__content .title { - font-family: 'Playfair Display', serif; + font-family: 'Noto Serif SC', serif; font-size: 30px; - line-height: 31px; letter-spacing: 3px; + line-height: 31px; font-weight: 700; - color: #2C2C2C; + color: #2c2c2c; margin-bottom: .5em; } .card__content .description { - font-family: 'Open Sans', sans-serif; + font-family: 'Roboto', sans-serif; font-size: 11px; color: #7e7e7e; line-height: 22px; } .card__content .link a { + font-family: 'Roboto', sans-serif; text-decoration: none; - color: #2C2C2C; - font-family: 'Open Sans', sans-serif; + color: #2c2c2c; letter-spacing: 3px; font-size: 9px; text-transform: uppercase; font-weight: 700; } -.card__content .link a:hover { - color: #7E7E7E; -} .card__image { - flex: 1; background: url('https://images.unsplash.com/photo-1544488994-3a0753185c37?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80'); background-size: cover; background-repeat: no-repeat; + flex: 1; order: 1; } + + + + + /* Small and up (Landscape Phones) */ @media (min-width: 576px) { + .card__content { + padding: 2em; + } .card__content .description { line-height: 16px; } @@ -99,33 +103,24 @@ body { /* Medium and up (Tablets) */ @media (min-width: 768px) { .card { - height: 550px; - width: 90%; flex-direction: row; } .card__content { - flex: 1; - display: flex; - flex-direction: column; - padding: 6em 2em 0; order: 1; - } - .card__content .title { - font-size: 44px; - line-height: 45px; - margin-bottom: 1em; + padding: 6em 2em 0; } .card__content .description { - font-size: 13px; line-height: 22px; + font-size: 13px; } .card__content .link a { font-size: 13px; } .card__image { order: 2; - flex: 2 + flex: 2; } + } /* Large and up (Desktops) */ @@ -133,9 +128,7 @@ body { .card { height: 550px; width: 900px; - flex-direction: row; } - } /* Extra Large and up (Wide Screen Desktops) */ diff --git a/05week/in-class-exercises/responsive-card/index.html b/05week/in-class-exercises/responsive-card/index.html new file mode 100644 index 0000000000..2ff8249a14 --- /dev/null +++ b/05week/in-class-exercises/responsive-card/index.html @@ -0,0 +1,26 @@ + + + + + + Responsive Card + + + +
+
+
Tipsy the Season
+
Seasonal Cocktails
+
Small batch beard VHS organic poutine banh mi. + Unicorn gastropub banh mi adaptogen mixtape. + Selvage biodiesel chicharrones, poutine hashtag hot chicken + tattooed try-hard activated charcoal lomo post-ironic letterpress + bitters sustainable.
+
+ Get the recipe +
+
+
+
+ + \ No newline at end of file From c3d5cb6bdb437a68396e57d5549be36a6d640896 Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Thu, 13 Dec 2018 10:43:58 -0600 Subject: [PATCH 12/13] merge conflict --- .../in-class-excercises/build-with-grids/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/05week/in-class-excercises/build-with-grids/index.html b/05week/in-class-excercises/build-with-grids/index.html index 7d05c2d71e..88f04f4ae6 100644 --- a/05week/in-class-excercises/build-with-grids/index.html +++ b/05week/in-class-excercises/build-with-grids/index.html @@ -8,12 +8,12 @@
-
-
-
-
-
-
+
1
+
2
+
3
+
4
+
5
+
6
\ No newline at end of file From 53df0b8c725c55769c80f4d1376f7661cd23da5b Mon Sep 17 00:00:00 2001 From: Juan Rodriguez Date: Thu, 13 Dec 2018 10:48:04 -0600 Subject: [PATCH 13/13] added week 5 --- .../build-with-grids/css/styles.css | 74 +++++++++++++++++++ .../build-with-grids/index.html | 22 ++++++ .../css-grids-2/css/styles.css | 0 .../in-class-exercises/css-grids-2/index.html | 0 4 files changed, 96 insertions(+) create mode 100644 05week/in-class-exercises/css-grids-2/css/styles.css create mode 100644 05week/in-class-exercises/css-grids-2/index.html diff --git a/05week/in-class-exercises/build-with-grids/css/styles.css b/05week/in-class-exercises/build-with-grids/css/styles.css index 2636ccdc2c..55a4b194b3 100644 --- a/05week/in-class-exercises/build-with-grids/css/styles.css +++ b/05week/in-class-exercises/build-with-grids/css/styles.css @@ -1,3 +1,77 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i'); +* { + box-sizing: border-box; +} +body { + height: 100%; + margin: 0; + padding: 0; + font-family: 'Open Sans', sans-serif; +} +.grid-item { + border: 1px dotted #eee; + background-color: crimson; + border-radius: 6px; + color: #fff; + font-size: 26px; + display: flex; + justify-content: center; + align-items: center; +} +.grid-container { + border: 3px solid black; + height: 100%; + display: grid; + grid-template-rows: 150px 1fr 100px; + grid-template-columns: 1fr 200px; + grid-template-areas: "nav nav" + "content sidebar" + "footer footer" +} +.grid-item-1 { + grid-area: nav; +} +.grid-item-3 { + grid-area: sidebar; +} +.grid-item-4 { + grid-area: footer; +} +/* .grid-container { + border: 3px solid black; + height: 100%; + display: grid; + grid-template-rows: 50px 100px; + grid-template-columns: 290px 50px 120px; + + grid-template-columns: 1fr 1fr 2fr; + + grid-template-columns: 3em 25% 1fr 2fr; + + grid-template-rows: minmax(100px, auto); + grid-template-columns: minmax(auto, 50%) 1fr 3em; + + grid-template-rows: repeat(4, 100px); + grid-template-columns: repeat(2, 1fr); + + grid-template-columns: repeat(6, 1fr); + + grid-row-gap: 20px; + grid-column-gap: 5rem; + + grid-gap: 1em; + +} */ +/* .grid-item-1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 4; + grid-row: 2/4; + grid-column: 2/6; + grid-column: 3/ span 2; +} */ + /* Small and up (Landscape Phones) */ @media (min-width: 576px) { diff --git a/05week/in-class-exercises/build-with-grids/index.html b/05week/in-class-exercises/build-with-grids/index.html index e69de29bb2..bd3c304017 100644 --- a/05week/in-class-exercises/build-with-grids/index.html +++ b/05week/in-class-exercises/build-with-grids/index.html @@ -0,0 +1,22 @@ + + + + + + Build-w-Grids + + + +
+
1
+
2
+
3
+
4
+ +
+ + \ No newline at end of file diff --git a/05week/in-class-exercises/css-grids-2/css/styles.css b/05week/in-class-exercises/css-grids-2/css/styles.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/05week/in-class-exercises/css-grids-2/index.html b/05week/in-class-exercises/css-grids-2/index.html new file mode 100644 index 0000000000..e69de29bb2