diff --git a/01week/helloworld/index.html b/01week/helloworld/index.html index e69de29bb2..503249d8d2 100644 --- a/01week/helloworld/index.html +++ b/01week/helloworld/index.html @@ -0,0 +1,11 @@ + + + + + + First Site + + +

Hello, World!

+ + \ No newline at end of file diff --git a/01week/resume/css/style.css b/01week/resume/css/style.css index e69de29bb2..4e030b6090 100644 --- a/01week/resume/css/style.css +++ b/01week/resume/css/style.css @@ -0,0 +1,95 @@ +@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: inline-block; +} +nav { + border: 1px solid red; +} +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 e69de29bb2..ef573b38b9 100644 --- a/01week/resume/index.html +++ b/01week/resume/index.html @@ -0,0 +1,71 @@ + + + + + + Juan's Resume + + + + +

+

+
+

+ +

+
+

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
+ + + \ No newline at end of file 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 + + +
+ +
+ + \ No newline at end of file diff --git a/05-week/in-class-exercises/build-with-grids/css/styles.css b/05-week/in-class-exercises/build-with-grids/css/styles.css new file mode 100644 index 0000000000..55a4b194b3 --- /dev/null +++ b/05-week/in-class-exercises/build-with-grids/css/styles.css @@ -0,0 +1,93 @@ +@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) { + +} + +/* 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/05-week/in-class-exercises/build-with-grids/index.html b/05-week/in-class-exercises/build-with-grids/index.html new file mode 100644 index 0000000000..bd3c304017 --- /dev/null +++ b/05-week/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/transitions-and-transformations/css/style.css b/05-week/in-class-exercises/css-grids-2/css/styles.css similarity index 100% rename from 05week/transitions-and-transformations/css/style.css rename to 05-week/in-class-exercises/css-grids-2/css/styles.css diff --git a/05-week/in-class-exercises/css-grids-2/index.html b/05-week/in-class-exercises/css-grids-2/index.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/05week/transitions-and-transformations/index.html b/05week/transitions-and-transformations/index.html deleted file mode 100644 index 8b13789179..0000000000 --- a/05week/transitions-and-transformations/index.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/05week/travel-gram/css/style.css b/05week/travel-gram/css/style.css deleted file mode 100644 index d3f5a12faa..0000000000 --- a/05week/travel-gram/css/style.css +++ /dev/null @@ -1 +0,0 @@ - diff --git a/05week/travel-gram/index.html b/05week/travel-gram/index.html deleted file mode 100644 index 8b13789179..0000000000 --- a/05week/travel-gram/index.html +++ /dev/null @@ -1 +0,0 @@ -