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

Hello World!

+ + \ No newline at end of file diff --git a/01week/resume/css/style.css b/01week/resume/css/style.css index e69de29bb2..540a63cac8 100644 --- a/01week/resume/css/style.css +++ b/01week/resume/css/style.css @@ -0,0 +1,30 @@ +header{ + //background-color:violet; + //float: center; + text-align: center; + border: 2px solid black; +} +nav{ + background-color: rgb(199, 193, 193); +} +body{ + background-image: linear-gradient(yellow,violet); +} +main { + background-image: linear-gradient(violet,yellow); + border: 2px solid black; + width: 35%; + height: 75%; + float: left; +} +aside{ + background-image: linear-gradient(violet,yellow); + border: 2px solid black; + width: 35%; + height: 75%; + float: right; +} +footer{ + height: 5%; + clear:both; +} diff --git a/01week/resume/index.html b/01week/resume/index.html index e69de29bb2..73980cb752 100644 --- a/01week/resume/index.html +++ b/01week/resume/index.html @@ -0,0 +1,62 @@ + + + + + + +Emilio Sanchez Resumé + + +
+

Resumé

+

Emilio Sanchez

+ +
+
+
+
+

Experience

+

Habiat for Humanity

+

2015 - 2016

+

Company Inc.

+

June 2016 - December 2016

+
+
+

Education

+

University of Texas at Austin

+

Bachelors of Arts in Sociology

+

2018

+ +
+
+

Technichal Skills

+
    +
  • HTML
    • +
  • CSS
    • +
  • Microsoft Word
    • +
  • Microsoft Excel
    • +
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/02week/bio/css/email-logo.png b/02week/bio/css/email-logo.png new file mode 100644 index 0000000000..4ceae9ba41 Binary files /dev/null and b/02week/bio/css/email-logo.png differ diff --git a/02week/bio/css/facebook-logo.png b/02week/bio/css/facebook-logo.png new file mode 100644 index 0000000000..53f2820f3f Binary files /dev/null and b/02week/bio/css/facebook-logo.png differ diff --git a/02week/bio/css/profile_pic.jpg b/02week/bio/css/profile_pic.jpg new file mode 100644 index 0000000000..230279d2f9 Binary files /dev/null and b/02week/bio/css/profile_pic.jpg differ diff --git a/02week/bio/css/style.css b/02week/bio/css/style.css index e69de29bb2..5fb10f96ff 100644 --- a/02week/bio/css/style.css +++ b/02week/bio/css/style.css @@ -0,0 +1,82 @@ +body{ + line-height: 20px; + font-family: 'Roboto Condensed', sans-serif; + text-indent: 20px; + background:rgb(255, 251, 239); +} +header{ + float:left; + background-color: lightcoral; + width:100%; + color: rgb(56, 56, 54); +} +nav{ + float:right; +} +ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; +} + +li { + float: left; +} + +li a { + padding-right: 10px; + padding-left: 10px; + text-align: center; + color: rgb(56, 56, 54); + text-decoration: none; + font-size: default; +} +li a:hover{ + color:white; + background-color: rgb(4, 235, 235); + font-style: oblique; +} +li a.active{ + color: white; +} +.image1{ + padding: 50px; + border-radius: 50%; + float: left; +} +.image2{ + margin: 10px 0px; + padding: 10px; + float: right; +} +#bio{ + background-color: rgb(179, 174, 174); + margin: 10px 0px; + padding: 10px; + width: 30%; + height: 70%; + float: left; +} +#bio p{ + margin: 0px 0px; + padding: 5px; + float:left; + text-indent: 30px; + line-height:30px; +} +footer{ + float:left; + background-color: lightcoral; + width:100%; + height: 10%; + color: rgb(56, 56, 54); +} +.rightSide{ + width:50%; + float: right; +} +.leftSide{ + width: 50%; + float:left; +} \ No newline at end of file diff --git a/02week/bio/index.html b/02week/bio/index.html index e69de29bb2..26fa192be1 100644 --- a/02week/bio/index.html +++ b/02week/bio/index.html @@ -0,0 +1,58 @@ + + + + + + + + Emilio Sanchez Bio + + +
+

Emilio Sanchez

+

Aspiring Web Developer

+ +
+
+
+
+ Emilio Sanchez +
+
+

About Me

+

+ My name is Emilio Sanchez. I'm an aspiring web developer + living in Austin, Texas. Irecently graduated from the University + of Texas at Austin with a bachelor's + degree in Sociology. I am currently + learning HTML and CSS at Austin Coding + Academy. +

+

+ I enjoy exploring around Austin. +

+
+
+
+ + + \ No newline at end of file diff --git a/02week/blog/css/email-logo.png b/02week/blog/css/email-logo.png new file mode 100644 index 0000000000..4ceae9ba41 Binary files /dev/null and b/02week/blog/css/email-logo.png differ diff --git a/02week/blog/css/profile_pic.jpg b/02week/blog/css/profile_pic.jpg new file mode 100644 index 0000000000..230279d2f9 Binary files /dev/null and b/02week/blog/css/profile_pic.jpg differ diff --git a/02week/blog/css/style.css b/02week/blog/css/style.css index e69de29bb2..2baaa50c3c 100644 --- a/02week/blog/css/style.css +++ b/02week/blog/css/style.css @@ -0,0 +1,111 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + background-color: #ffffff; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(168,719,381)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%234FE'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.13'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E"); + background-attachment: fixed; + background-size: cover; + font-family: 'Roboto', sans-serif; +} +header{ + padding: 10px 10px; + height:15%; + width: 100%; + /* background-color: rgb(177, 171, 171); */ + background: rgb(155, 150, 150); + border-bottom: 3px solid rgba(255, 237, 75, 0.87); +} +nav{ + margin: 20px 0px 0px 0px; + padding-right: 10px; + padding-left: 10px; + padding-bottom: 2px; + float:right; + background: rgb(255, 237, 75); +} +nav > ul{ + list-style-type: none; + overflow: hidden; + margin-top: 5px; + padding: 0px; +} +nav> ul > li{ + /* margin: 5px; */ + float: left; +} +nav > ul > li > a{ + padding: 5px; + margin: 5px; + text-decoration: none; + color: inherit; + background: inherit; +} +nav > ul > li > a:hover{ + color: #76ddd3; +} +nav > ul > li > a.home{ + color:#76ddd3; +} +article{ + transition-duration: 1s; + margin: 10px auto; + width: 40%; + border: 2px solid black; + padding: 10px 10px; + background: rgba(155, 150, 150, 0.5); +} +article > h3{ + color: rgba(255, 237, 75, 0.87); +} +article:hover{ + transition-duration: 1s; + background-color: rgba(155, 150, 150,.8); +} +article p{ + text-indent: 20px; + margin: 15px 0px; +} +article > p:first-letter{ + font-size:20px; + font-weight: bold; +} +/*article p:first-of-type:hover:first-letter{ + color: rgba(255, 237, 75, 0.87); +} */ +article p:first-of-type span:hover{ + color: rgba(255, 237, 75, 0.87); +} +footer{ + color: #76ddd3; + border-top: 3px solid rgba(255, 237, 75, 0.87); + padding: 10px 10px; + height:10%; + width: 100%; + /* background-color: rgb(177, 171, 171); */ + background: rgb(155, 150, 150); + font-family: 'Courier New', Courier, monospace; +} +img{ + border-radius: 50%; + padding:5px; + margin: auto 10px; + /* float: right; */ +} +.rightSide{ + float: right; + text-align: right; + color: inherit; + width: 50%; +} +.rightSide > h3{ + margin: 2vh 5px; + float: right; +} +.leftSide{ + float: left; + color: inherit; + width: 50%; +} \ No newline at end of file diff --git a/02week/blog/index.html b/02week/blog/index.html index e69de29bb2..cf24786c01 100644 --- a/02week/blog/index.html +++ b/02week/blog/index.html @@ -0,0 +1,123 @@ + + + + + + Blog + + + + +
+
+ Emilio Sanchez +
+
+

+ Emilio's Great Big Blog. +

+

+ A blog about my learning experience. +

+
+ +
+
+
+

Transitions

+

+ Nov 20, 2018 +

+

I learned how to format transitions in CSS by defining the transition-duration in the section where you define the format the content will be transitioning to. You can also further customize a transition with commands such as 'transition-timing-function' to change the acceleration of the transition and 'transition duration' to specify the speed of the transition.

+

There is still a lot I don't know about making transitions in CSS and I'm excited to explore more in depth in the future.

+
+
+

+ Lorem Ipsum +

+

+ Nov 10, 2018 +

+

+ Sed eget tempor leo. Etiam efficitur turpis a est eleifend, eu rutrum sapien accumsan. Sed eu leo tristique, blandit tellus eget, ornare neque. Phasellus consectetur sem vel orci mattis, ut egestas metus efficitur. Mauris imperdiet fringilla libero ut imperdiet. Nullam dictum ex non vulputate viverra. Aliquam erat volutpat. +

+

+ Maecenas a dui sit amet tellus lacinia consectetur. Donec molestie, eros consectetur hendrerit rhoncus, massa erat vehicula lacus, nec gravida libero erat id lacus. Aenean in auctor sem. +

+
+
+

+ Lorem Ipsum +

+

+ Oct 31, 2018 +

+

+ Sed eget tempor leo. Etiam efficitur turpis a est eleifend, eu rutrum sapien accumsan. Sed eu leo tristique, blandit tellus eget, ornare neque. Phasellus consectetur sem vel orci mattis, ut egestas metus efficitur. Mauris imperdiet fringilla libero ut imperdiet. Nullam dictum ex non vulputate viverra. Aliquam erat volutpat. +

+

+ Maecenas a dui sit amet tellus lacinia consectetur. Donec molestie, eros consectetur hendrerit rhoncus, massa erat vehicula lacus, nec gravida libero erat id lacus. Aenean in auctor sem. +

+
+
+

+ Lorem Ipsum +

+

+ Oct 21, 2018 +

+

+ Sed eget tempor leo. Etiam efficitur turpis a est eleifend, eu rutrum sapien accumsan. Sed eu leo tristique, blandit tellus eget, ornare neque. Phasellus consectetur sem vel orci mattis, ut egestas metus efficitur. Mauris imperdiet fringilla libero ut imperdiet. Nullam dictum ex non vulputate viverra. Aliquam erat volutpat. +

+

+ Maecenas a dui sit amet tellus lacinia consectetur. Donec molestie, eros consectetur hendrerit rhoncus, massa erat vehicula lacus, nec gravida libero erat id lacus. Aenean in auctor sem. +

+
+
+

+ Lorem Ipsum +

+

+ Oct 11, 2018 +

+

+ Sed eget tempor leo. Etiam efficitur turpis a est eleifend, eu rutrum sapien accumsan. Sed eu leo tristique, blandit tellus eget, ornare neque. Phasellus consectetur sem vel orci mattis, ut egestas metus efficitur. Mauris imperdiet fringilla libero ut imperdiet. Nullam dictum ex non vulputate viverra. Aliquam erat volutpat. +

+

+ Maecenas a dui sit amet tellus lacinia consectetur. Donec molestie, eros consectetur hendrerit rhoncus, massa erat vehicula lacus, nec gravida libero erat id lacus. Aenean in auctor sem. +

+
+
+

+ Lorem Ipsum +

+

+ Oct 1, 2018 +

+

+ Sed eget tempor leo. Etiam efficitur turpis a est eleifend, eu rutrum sapien accumsan. Sed eu leo tristique, blandit tellus eget, ornare neque. Phasellus consectetur sem vel orci mattis, ut egestas metus efficitur. Mauris imperdiet fringilla libero ut imperdiet. Nullam dictum ex non vulputate viverra. Aliquam erat volutpat. +

+

+ Maecenas a dui sit amet tellus lacinia consectetur. Donec molestie, eros consectetur hendrerit rhoncus, massa erat vehicula lacus, nec gravida libero erat id lacus. Aenean in auctor sem. +

+
+
+ + + \ 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..239db355d4 --- /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: #cc5577; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg fill-opacity='0.86'%3E%3Crect fill='%23cc5577' width='11' height='11'/%3E%3Crect fill='%23cd5776' x='10' width='11' height='11'/%3E%3Crect fill='%23cd5875' y='10' width='11' height='11'/%3E%3Crect fill='%23ce5a74' x='20' width='11' height='11'/%3E%3Crect fill='%23cf5c72' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23cf5d71' y='20' width='11' height='11'/%3E%3Crect fill='%23d05f70' x='30' width='11' height='11'/%3E%3Crect fill='%23d06170' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%23d1626f' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%23d2646e' y='30' width='11' height='11'/%3E%3Crect fill='%23d2666d' x='40' width='11' height='11'/%3E%3Crect fill='%23d3676c' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%23d4696c' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23d46b6b' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23d56e6c' y='40' width='11' height='11'/%3E%3Crect fill='%23d5726e' x='50' width='11' height='11'/%3E%3Crect fill='%23d67670' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23d77a72' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23d77e73' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23d88275' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23d88577' y='50' width='11' height='11'/%3E%3Crect fill='%23d98978' x='60' width='11' height='11'/%3E%3Crect fill='%23da8d7a' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23da907c' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23db947d' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%23db977f' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%23dc9b81' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%23dd9e83' x='70' width='11' height='11'/%3E%3Crect fill='%23dda184' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%23dea486' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%23dea888' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%23dfab8a' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23dfae8b' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23e0b18d' x='80' width='11' height='11'/%3E%3Crect fill='%23e1b48f' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23e1b790' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23e2ba92' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23e2bd94' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23e3c096' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23e3c297' x='90' width='11' height='11'/%3E%3Crect fill='%23e4c599' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23e5c89b' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23e5ca9d' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%23e6cd9f' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%23e6cfa0' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%23e7d2a2' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%23e7d4a4' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%23e8d6a6' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%23e8d9a7' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%23e9dba9' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23e9ddab' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23eadfad' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23eae1ae' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23ebe3b0' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23ebe5b2' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23ece7b4' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23ece9b6' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23edebb7' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23edecb9' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23EEB' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E"); + background-attachment: fixed; + background-size: cover; +} +nav{ + height: 90px; + width: 100%; + display: block; + position: fixed; + padding: 10px 15px; + background-color: rgba(128, 128, 128, 0.538); + 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: 10px 0 0; + float: right; +} +/* ul li:nth-child(2){ + width: 300px; +} */ +ul li{ + display: inline-block; + padding: 13px; + 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..db9e668e18 --- /dev/null +++ b/02week/site/index.html @@ -0,0 +1,27 @@ + + + + + + Document + + + + + +
I'm a Header
+
Section 1
+
Section 2
+
Section 3
+ + + \ No newline at end of file diff --git a/03week/airplane/css/style.css b/03week/airplane/css/style.css index e69de29bb2..8cb08deb77 100644 --- a/03week/airplane/css/style.css +++ b/03week/airplane/css/style.css @@ -0,0 +1,136 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + background-image: url("../img/airline.jpg"); + background-color: blue; + background-repeat: no-repeat; + background-size: cover; + font-family: 'Noto Sans TC', sans-serif; + font-size: 15px; +} +nav{ + display: block; + height: 90px; + width: 100%; + background-color:#183955; + padding: 10px 15px; + border-bottom: 2px solid white; +} +nav > img{ + position: relative; + bottom: 15px; +} +nav ul{ + display: inline-block; + list-style-type: none; + position: relative; + left: 25%; + bottom: 15px; + margin: 0 auto; +} +nav ul li{ + display: inline-flex; + margin: 10px 10px; + color: white; +} +nav ul li a{ + display:inline-flex; + text-decoration:none; + color: white; + height: 20px; +} +nav ul li a img{ + float: left; + margin: 1px 5px; +} +.homePage{ + color:#018d80 +} +main{ + color: white; +} +.box{ + position: absolute; + border-radius: 10px; + z-index: 1; + background-color: #183955; + width: 25%; + left: 5%; + top: 25%; + height: 40%; +} +.logos{ + height: 15%; + width: 100%; +} +.topLogo{ + float: left; + width: 33.3%; + height: 100%; + background: #018d80; + color:black; +} +.center{ + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 10px; +} +.otherLogo{ + background-color: #0063b7; +} +.bluePart{ + top: 15%; +} +.flight{ + float: left; + padding: 10px; + width: 50%; + height: 45%; +} +.flight input{ + background-color: inherit; + color: white; + height: 30%; + width: 100%; + border-radius: 5px; + margin: 7% auto; + padding: 10px; +} +.passenger{ + display: inline-flex; + width: 100%; + height: 20%; + padding: 5% 10px; +} +.passenger input[type="number"]{ + border: 1px solid white; + background-color: inherit; + color: white; + height: 20px; + width: 20%; + border-radius: 10%; + margin: 0 10px; + padding: 10px; +} +.passenger input[type="radio"]{ + margin: 5px auto; +} +.search{ + height: 20%; + width: 100%; + padding: 10px; +} +.search input[type="submit"]{ + width: 100%; + height: 100%; + border-radius: 5px; + border: none; + background-color: #0063b7; + color: white; + font-size: 15px; + cursor: -webkit-grab; +} \ No newline at end of file diff --git a/03week/airplane/index.html b/03week/airplane/index.html index e69de29bb2..a2bc1e78fc 100644 --- a/03week/airplane/index.html +++ b/03week/airplane/index.html @@ -0,0 +1,77 @@ + + + + + + + + UX Atlantic + + + +
+
+
+ + + +
+
+
+ + +
+
+ + +
+
+ + + + + + +
+
+ +
+
+
+
+ + \ 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..d2af5218c0 --- /dev/null +++ b/04week/flexbox-exercises/css/home.css @@ -0,0 +1,37 @@ +@import url('https://fonts.googleapis.com/css?family=Oswald'); +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +.container{ + height: 100%; + width: 100%; + position: relative; + font-family: 'Oswald', sans-serif; + background: url("https://images.unsplash.com/photo-1504700610630-ac6aba3536d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"); + background-size: cover; +} +.containerInner{ + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 0, 0, 0.11); +} +.buttonWrapper{ + padding: 50px 100px; + background-color: rgba(241, 150, 180, 0.88); + border-radius: 5px; + transform: scale(1); + transition: transform 300ms ease; +} +.buttonWrapper:hover{ + transform: scale(1.15); +} +a{ + text-decoration: none; + color: aqua; + font-size: 40px; +} \ No newline at end of file diff --git a/04week/flexbox-exercises/css/style.css b/04week/flexbox-exercises/css/style.css new file mode 100644 index 0000000000..d8c0d7a2b6 --- /dev/null +++ b/04week/flexbox-exercises/css/style.css @@ -0,0 +1,71 @@ +@import url('https://fonts.googleapis.com/css?family=Oswald'); +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +.container{ + height: 100%; + width: 100%; + position: relative; + font-family: 'Oswald', sans-serif; +} +.listWrapper{ + display: flex; + justify-content: center; + height: 100%; + width: 100%; + border: 1px solid red; +} +.list{ + border: 1px solid blue; + height: 550px; + width: 600px; + display: flex; + justify-content: center; +} +ul{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + list-style: none; + width: 100%; +} +@media(mind-width: 480px){ + ul{ + flex-direction: column; + } +} + +.listItem{ + 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(200,0,55,.15); + transition-duration: 1s; +} +.listItem:hover{ + box-shadow: 10px 10px 26px 0px rgba(200,0,55,.5); +} +.listImage{ + flex-shrink: 0; +} +.listContent{ + /* border: 5px solid pink; */ + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 0 0 20px; + line-height: 2.4; +} +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..d1974196b2 --- /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..8f604bc007 --- /dev/null +++ b/04week/flexbox-exercises/index.html @@ -0,0 +1,46 @@ + + + + + + + Contact List + + +
+
+
+
    +
  • +
    + terry-crews +
    +
    +

    Agent M

    +

    San Juan, PR

    +
    +
    • +
  • +
    + terry-crews +
    +
    +

    Agent M

    +

    San Juan, PR

    +
    +
    • +
  • +
    + terry-crews +
    +
    +

    Agent M

    +

    San Juan, PR

    +
    +
    • +
+
+
+
+ + \ No newline at end of file diff --git a/04week/media-query-exercises/css/style.css b/04week/media-query-exercises/css/style.css new file mode 100644 index 0000000000..c0b7ef36ee --- /dev/null +++ b/04week/media-query-exercises/css/style.css @@ -0,0 +1,103 @@ +@import url('https://fonts.googleapis.com/css?family=Slabo+27px'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +.container{ + height: 100%; + width: 100%; + font-family: 'Slabo 27px', serif; +} +.cards{ + display: flex; + justify-content: center; + list-style: none; + flex-wrap: wrap; + /* border: 1px solid red; */ +} +.cardsItem{ + /* border: 1px solid blue; */ + padding: 16px; +} +.card{ + display: flex; + flex-direction: column; + height: 500px; + /* width: 400px; */ + overflow: hidden; + border: 1px solid plum; + box-shadow: 5px 5px 5px 5px rgba(50,220,170,.4); +} +.cardImage{ + height: 50%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +.cardImageComp{ + background-image: url("https://images.unsplash.com/photo-1491975474562-1f4e30bc9468?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80"); +} +.cardContent{ + /* border: 2px solid green; */ + padding: 10px; + display: flex; + flex-direction: column; + justify-content: space-around; + height: 50%; + /* flex: 1 1 auto; */ +} +.cardContent h4{ + color: #2c2a2a; + letter-spacing: 2px; + text-transform: uppercase; + /* flex: 1; */ +} +.cardContent p{ + line-height: 1.5; + padding: 20; + max-height: 160px; + overflow: auto; + /* flex: 1; */ +} +button{ + width: 30%; + background-color: white; + border: 1px solid #eee; + color: #4d4d4d; + padding: 10px; + text-transform: lowercase; + width: 100%; + outline-color: pink; + cursor: pointer; +} +button:hover{ + box-shadow: 2px 2px 0px 0px rgba(39, 37, 37, 0.089); +} +button:active{ + background-color: rgb(241, 239, 239); +} +@media(min-width: 440px){ + .cardsItem{ + width: 50%; + } + .cardContent h4{ + font-size: 10px; + } +} +@media(min-width: 640px){ + .cardsItem{ + width: 50%; + } + .cardContent h4{ + font-size: 15px; + } +} +@media(min-width: 896px){ + .cardsItem{ + width: 33%; + } + .cardContent h4{ + font-size: 20px; + } +} \ No newline at end of file diff --git a/04week/media-query-exercises/index.html b/04week/media-query-exercises/index.html new file mode 100644 index 0000000000..8a2e87d7a0 --- /dev/null +++ b/04week/media-query-exercises/index.html @@ -0,0 +1,80 @@ + + + + + + + Card Exercise + + +
+ +
+ + \ No newline at end of file diff --git a/04week/nasa/css/style.css b/04week/nasa/css/style.css index e69de29bb2..2e236939ce 100644 --- a/04week/nasa/css/style.css +++ b/04week/nasa/css/style.css @@ -0,0 +1,73 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans'); +*{ + padding: 0px; + margin: 0px; + box-sizing: border-box; + font-family: 'Open Sans', sans-serif; +} +.container{ + width: 100% -20px; + height: 450px; + margin: 20px; + position: relative; + background-image: url("../img/nasa-background.jpg"); + background-color: black; +} +.nasaContainer{ + margin: 20px 0; + width: 100%; + height: 100%; + color: white; + display: flex; + justify-content: center; + align-items: center; +} +.textContainer{ + margin: 20px 0; + width: 100%; + height: 324px; + padding: 10px 0; + background-color: #e6e6e6; + display: flex; + justify-content: space-around; +} +.textStuff{ + margin: 20px; + display: flex; + flex-direction: column; + line-height: 25px; + width: 270px; +} +input{ + border: none; + background-color: white; + width: 100%; + height: 10%; + margin: 10px 0; +} +textarea{ + margin: 10px 0; + border: none; + border: none; + height: 20%; + width: 100%; + resize: none; + padding: 5px; +} +button{ + color:white; + background-color: #4d4d4d; + height: 20%; + width: 30%; + font-size: 20px; + cursor: pointer; +} +button:active{ + cursor: -webkit-grab; +} +h1{ + font-size: 50px; +} +h2{ + margin: 20px 0; +} \ No newline at end of file diff --git a/04week/nasa/index.html b/04week/nasa/index.html index e69de29bb2..b15822bf57 100644 --- a/04week/nasa/index.html +++ b/04week/nasa/index.html @@ -0,0 +1,42 @@ + + + + + + + The Final Frontier + + +
+
+

NASA

+
+
+
+

Social Media

+

Twitter - @nasa

+

Facebook - fb.com/nasa

+

Instagram - @nasa

+

Youtube - youtube.com/nasa

+
+
+

Office Info

+

Public Communications

+

NASA Headquarters

+

300 E Street SW, Suite 5430

+

Washington, DC 20546

+

(202) 358-0001 (Office)

+

(202) 358-4338 (Fax)

+
+
+

Contact

+ + + + + +
+
+
+ + \ No newline at end of file diff --git a/04week/tomorrows-technology/css/style.css b/04week/tomorrows-technology/css/style.css index e69de29bb2..dceed42752 100644 --- a/04week/tomorrows-technology/css/style.css +++ b/04week/tomorrows-technology/css/style.css @@ -0,0 +1,123 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +.container{ + display:flex; +} +.headline{ + padding: 20px; +} +.headline img{ + width: 100%; +} +.headline button{ + margin: 20px 0; + padding: 5px; + border:none; + background-color: #4D4D4D; + color: #FCFCFC; + height: 5%; +} +.links{ + display: none; +} +.links{ + padding: 20px; + + background-color: #4D4D4D; + color: #FCFCFC; + display: none; + height: 250px; + line-height: 30px; +} +.links ul{ + list-style: none; +} +.links li{ + width: 100%; + border-bottom: 1px solid #FCFCFC; +} +.links a{ + width: 100%; + text-decoration: none; + color: #FCFCFC; + display:flex; + justify-content: space-between; +} +.links a img{ + width: 20px; + height:20px; + border-radius: 50%; +} +.topStories{ + width: 28%; + display: none; + color: black; +} +@media (min-width: 320px){ + .container{ + flex-direction: column; + } + .links{ + display: flex; + flex-direction: row; + justify-content: space-around; + } +} +@media (min-width: 768px){ + .links{ + display:none; + } + .headline{ + padding: 30px; + } + .headline h1{ + margin: 30px 0; + font-size: 50px; + } + .headline h3{ + font-size: 30px; + } + .headline button{ + width: 20%; + font-size: 25px; + } +} +@media (min-width: 1025px){ + .container{ + flex-direction: row; + } + .headline{ + width: 70%; + } + .headline h1{ + margin: 20px 0; + font-size: 40px; + } + .headline h3{ + font-size: 20px; + } + .headline button{ + width: 20%; + height: 50px; + font-size: 20px; + } + .topStories{ + width: 30%; + display: flex; + flex-direction: column; + padding: 20px; + } + .topStories p{ + margin-bottom: 30px; + font-weight: bold; + } + .banner{ + width: 100%; + height: 5%; + border-bottom: 1px solid black; + margin: 20px 0; + } +} \ No newline at end of file diff --git a/04week/tomorrows-technology/index.html b/04week/tomorrows-technology/index.html index e69de29bb2..49d31d0077 100644 --- a/04week/tomorrows-technology/index.html +++ b/04week/tomorrows-technology/index.html @@ -0,0 +1,70 @@ + + + + + + + Tomorrow's Technology + + +
+
+ tomorrow's-tech +

Tomorrow's Technology, Yesterday's Insight

+

Sometimeswhat the tech world comes up with has already been tried and rejected and really doesn't need to be resurrected-like the Taylorist view...

+ +
+
+
+

Useful Links

+ +
+
+

Social Media

+ +
+
+
+ +

Stanford researcher's make artificial skin that senses touch

+

3 New Ways to Wear Your Favorite Chambray Shirt

+

Where to Buy Your Next Rug

+

Chukkas that Offer Casual, Comfortable Style

+
+
+ + \ No newline at end of file diff --git a/04week/welcome-to-our-site/css/style.css b/04week/welcome-to-our-site/css/style.css index e69de29bb2..cf0a266803 100644 --- a/04week/welcome-to-our-site/css/style.css +++ b/04week/welcome-to-our-site/css/style.css @@ -0,0 +1,98 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +.welcomeContainer{ + width: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; +} +.titleContainer{ + padding: 10%; + display: flex; + flex-direction: column; + justify-content:center; + align-items: center; + text-align:center; + width: 100%; + background: #F7F5F6; +} +.titleOne{ + border-top: 20px solid #33A8DD; + padding: 5px; + width: 50%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} +.titleTwo{ + border-top: 20px solid #F46831; + padding: 5px; + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.titleThree{ + border-top: 20px solid #2ACDBF; + padding: 5px; + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +@media (min-width: 320px){ + .welcomeContainer{ + background: #33A8DD; + height: 250px; + } + .welcomeContainer h1{ + width: 50%; + } + .titleContainer{ + align-items: space-around; + } + .titleOne{ + margin-top: 50px; + } + .titleTwo{ + margin-top: 50px; + } + .titleThree{ + margin-top: 50px; + } +} +@media (min-width: 1025px){ + .welcomeContainer{ + height: 300px; + background:#2ACDBF; + text-align: center; + } + .welcomeContainer h1{ + font-size: 50px; + } + .titleContainer{ + flex-direction: row; + justify-content: space-between; + color:white; + background: black; + padding: 5%; + height: 500px; + } + .titleOne{ + margin: 0 10px; + width: 20%; + } + .titleTwo{ + width: 20%; + } + .titleThree{ + width: 20%; + } +} \ No newline at end of file diff --git a/04week/welcome-to-our-site/index.html b/04week/welcome-to-our-site/index.html index e69de29bb2..93f9d8a555 100644 --- a/04week/welcome-to-our-site/index.html +++ b/04week/welcome-to-our-site/index.html @@ -0,0 +1,30 @@ + + + + + + + Welcome to Our Site + + +
+
+

Welcome to our site

+
+
+
+

Title

+

Lorem ih3sum dolor amet asymmetrical kombucha waistcoat chambray, chillwave pok pok trust fund. Pariatur tumblr.

+
+
+

Title

+

Lorem ih3sum dolor amet asymmetrical kombucha waistcoat chambray, chillwave pok pok trust fund. Pariatur tumblr.

+
+
+

Title

+

Lorem ih3sum dolor amet asymmetrical kombucha waistcoat chambray, chillwave pok pok trust fund. Pariatur tumblr.

+
+
+
+ + \ No newline at end of file diff --git a/05week/brutalism/css/style.css b/05week/brutalism/css/style.css new file mode 100644 index 0000000000..2c5a545c76 --- /dev/null +++ b/05week/brutalism/css/style.css @@ -0,0 +1,284 @@ +@import url('https://fonts.googleapis.com/css?family=Monoton|VT323|Dancing+Script'); +*{ + box-sizing: border-box; + margin: 0; + padding: 0; +} +body{ + background-image: linear-gradient(to bottom right,#00CCFF,#FA47FF); + background-size: cover; + cursor: cell; +} +.gridItem{ + border: 5px solid black; + border-radius: 3px; + color: #fff; + font-size: 26px; + display: flex; + justify-content: center; + align-items: center; +} +.gridItem-1{ + padding: 10px; + font-family: 'Monoton', cursive; + grid-area: name; + background-color: teal; + text-shadow: 2px 2px gold; +} +.gridItem-1:hover{ + color: gold; + text-shadow: 2px 2px rgb(241, 136, 238); +} +.gridItem-2{ + font-family: 'Monoton', cursive; + grid-area: nav; + background-color: orchid; +} + +ul{ + list-style-type: none; + display: flex; + flex-direction: row; + justify-content: flex-end; + width: 100%; +} +li:first-of-type{ + color: lightblue; +} +li{ + width: 23%; + margin: 0 15px; +} +li:hover a{ + color: lightblue; + font-size: 15px; +} +.gridItem-2{ + display: inline-flex; + justify-content: flex-end; + align-items: flex-end; +} +a{ + cursor: help; +} +.gridItem-3{ + grid-area: side1; + border: none; + transition-duration: 2s; +} +.gridItem-3:hover{ + -webkit-transform: scale(.7,.7) rotate(720deg); + -moz-transform: scale(.7, rotate(720deg).7) rotate(720deg); + -o-transform: scale(.7, rotate(720deg).7) rotate(720deg); + -ms-transform: scale(.7, rotate(720deg).7) rotate(720deg); + transform: scale(.7, rotate(720deg).7) rotate(720deg); +} +.gridItem-4{ + padding: 15px; + grid-area: about; + background-color: black; +} +.gridItem-4 p{ + font-family: 'VT323', monospace; +} +.gridItem-4 p:first-of-type{ + font-family: 'Monoton', cursive; +} +.gridItem-4 span{ + font-family: 'Dancing Script', cursive; + color: gold; +} +.gridItem-4:hover { + box-shadow: 5px 5px .5px gold; + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.gridItem-4:hover span{ + font-size: 40px; +} +.gridItem-4:hover p:first-of-type{ + color: orchid; + text-shadow: 2px 2px gold; +} +.gridItem-5{ + grid-area: side2; + background-color: teal; + border-radius: 50%; +} +.gridItem-6{ + grid-area: my-work; + background-color: #B281FF; + justify-content: flex-start; +} +.gridItem-6 p{ + font-family: 'Monoton', cursive; + font-size: 35px; +} +.gridItem-7{ + grid-area: proj1; + background-color: black; + font-family: 'VT323', monospace; + transition-duration: 2s; +} +.gridItem-7:hover{ + background-color: rgb(236, 202, 8); + border: 5px solid forestgreen; + color: black; + -webkit-transform: scale(.7) rotate(-360deg); + -moz-transform: scale(.7) rotate(-360deg); + -o-transform: scale(.7) rotate(-360deg); + -ms-transform: scale(.7) rotate(-360deg); + transform: scale(.7) rotate(-360deg); +} +.gridItem-8{ + grid-area: proj2; + background-color: black; + font-family: 'VT323', monospace; + transition-duration: 2s; +} +.gridItem-8:hover{ + background-color: magenta; + border: 5px solid cyan; + color: black; + -webkit-transform: scale(1.5) rotate(360deg); + -moz-transform: scale(1.5) rotate(360deg); + -o-transform: scale(1.5) rotate(360deg); + -ms-transform: scale(1.5) rotate(360deg); + transform: scale(1.5) rotate(360deg); +} +.gridItem-9{ + grid-area: proj3; + background-color: black; + font-family: 'VT323', monospace; + transition-duration: 2s; +} +.gridItem-9:hover{ + background-color: rgb(236, 202, 8); + border: 5px solid forestgreen; + color: black; + -webkit-transform: scale(1.5) rotate(360deg); + -moz-transform: scale(1.5) rotate(360deg); + -o-transform: scale(1.5) rotate(360deg); + -ms-transform: scale(1.5) rotate(360deg); + transform: scale(1.5) rotate(360deg); +} +.gridItem-10{ + grid-area: proj4; + background-color: black; + font-family: 'VT323', monospace; + transition-duration: 2s; +} +.gridItem-10:hover{ + background-color: rgb(236, 202, 8); + border: 5px solid forestgreen; + color: black; + -webkit-transform: scale(1.5) rotate(360deg); + -moz-transform: scale(1.5) rotate(360deg); + -o-transform: scale(1.5) rotate(360deg); + -ms-transform: scale(1.5) rotate(360deg); + transform: scale(1.5) rotate(360deg); +} +.gridItem-11{ + grid-area: proj5; + background-color: black; + font-family: 'VT323', monospace; + transition-duration: 2s; +} +.gridItem-11:hover{ + background-color: magenta; + border: 5px solid cyan; + color: black; + -webkit-transform: scale(1.5) rotate(360deg); + -moz-transform: scale(1.5) rotate(360deg); + -o-transform: scale(1.5) rotate(360deg); + -ms-transform: scale(1.5) rotate(360deg); + transform: scale(1.5) rotate(360deg); +} +.gridItem-12{ + padding: 10px; + grid-area: contact; + /* background-color: #B281FF; */ + border: none; + border-top: 5px solid black; + justify-content: flex-end; + font-family: 'VT323', monospace; +} +.gridItem-12 p{ + font-family: 'Monoton', cursive; + font-size: 35px; + color: black; +} +.gridItem-12 a:hover{ + color: cyan; +} +a{ + text-decoration: none; + color: inherit; +} +@media (min-width: 320px){ + .gridContainer{ + margin: 5 10 5 10; + width: 90%; + height: 100%; + display: grid; + grid-gap: 20px; + grid-template-columns: 50% 50%; + grid-template-rows: 20% 20% 50% 20% 50% 25% 25% 20%; + grid-template-areas: "name name" + "nav nav" + "about about" + "my-work my-work" + "proj1 proj1" + "proj2 proj3" + "proj4 proj5" + "contact contact" + + } + a{ + margin: 10px; + font-size: 20px; + } +} +@media (min-width: 768px){ + .gridContainer{ + margin: 7 10 7 10; + width: 90%; + height: 100%; + display: grid; + grid-gap: 10px; + grid-template-columns: 25% 25% 25% 25%; + grid-template-rows: 20% 50% 20% 25% 25% 25% 20%; + grid-template-areas: "name name nav nav" + "side1 about about side2" + "my-work my-work my-work my-work" + "proj1 proj1 proj2 proj2" + "proj1 proj1 proj3 proj3" + "proj4 proj4 proj5 proj5" + "contact contact contact contact" + + } + a{ + font-size: 30px; + } +} +@media(min-width: 1025px){ + .gridContainer{ + margin: 10 15 10 15; + width: 90%; + height: 100%; + display: grid; + grid-gap: 20px; + grid-template-columns: 25% 25% 25% 25%; + grid-template-rows: 20% 50% 20% 25% 25% 20%; + grid-template-areas: "name nav nav nav" + "side1 about about side2" + "my-work my-work my-work my-work" + "proj1 proj1 proj2 proj3" + "proj1 proj1 proj4 proj5" + "contact contact contact contact" + + } +} \ No newline at end of file diff --git a/05week/brutalism/index.html b/05week/brutalism/index.html new file mode 100644 index 0000000000..12b292425b --- /dev/null +++ b/05week/brutalism/index.html @@ -0,0 +1,76 @@ + + + + + + + Brutalism + + +
+
+ EMILIO SANCHEZ +
+
+ +
+
+ windows icon +
+
+
+

About Emilio

+

Integer tempus convallis elit id porttitor. Vestibulum suscipit neque quis pulvinar pretium. Ut quis hendrerit urna. Donec in posuere ante, in fermentum metus. Morbi porta a lacus sed condimentum. Aenean volutpat fermentum diam, ac semper felis. Lorem ipsum and all that jazz...

+
+
+
+ link-sprite +
+
+ +

My Projects

+
+
+ + Favor Landing Page Imitation + +
+
+ + Grid Landing Page +
+
+ + Responsive Landing Page + +
+
+ + Airline Landing Page + +
+
+ + Blog Site + +
+
+ +

Contact Info:

+ email + github +
+
+ + diff --git a/05week/grid-landing-page/css/style.css b/05week/grid-landing-page/css/style.css new file mode 100644 index 0000000000..b514c1f312 --- /dev/null +++ b/05week/grid-landing-page/css/style.css @@ -0,0 +1,175 @@ +/* @import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC|Roboto+Condensed');font-family: 'Noto Serif TC', serif; */ +/* font-family: 'Noto Serif TC', serif; +font-family: 'Roboto Condensed', sans-serif; */ +@import url('https://fonts.googleapis.com/css?family=Noto+Sans'); +*{ + box-sizing: border-box; + margin: 0; + padding: 0; +} +body{ + height: 100%; + width: 100%; + font-family: 'Noto Sans', sans-serif; + background: #4A148C; +} +.grid-container{ + display: grid; + height: 100%; + width: 100%; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(8, 1fr); + grid-gap: 2px; + /* grid-auto-flow: dense; */ + /* grid-template-areas: "icon icon nav nav nav nav nav" + "space space space space text space1" + "" */ +} +.grid-container div{ + color: white; + font-size: 20px; + padding: 20px; +} +.item-1 { + /* grid-area: icon; */ + grid-column: 1/ span 2;; + grid-row: span 2; + /* background: #b0343254; */ + color: black; + display: flex; + justify-content: center; +} +.item-1 img{ + width: 50px; + height: 50px; +} +.item-2 { + /* grid-area: nav; */ + grid-column: 3/ 9; + grid-row: span 2; + /* background: #33a8a4; */ + display: flex; + justify-content: space-between; + align-items: center; +} +.sign_up{ + height: 50px; + width:20%; + color: white; + background-color: #01BCD4; + border-radius: 25%; + font-size: 20px; +} +.drop_down{ + height: 25%; + width: 20%; + background: yellow; +} +.drop_down img{ + width: 45px; + height: 45px; +} +.item-3 { + /* grid-row: ; */ + grid-column: 1/span 4; + /* background: #ff9069; */ +} +.item-4 { + /* grid-area: text; */ + grid-column: 5; + /* background: #6a478f; */ +} +.item-4 p{ + font-size: 10px; +} +.item-5 { + /* grid-area: space1; */ + grid-column: 6/ 9; + /* background: #3d8bb1; */ +} +.item-6 { + /* background: #59a627; */ + grid-row: 4/ 6; + grid-column: 1/ 6; + padding-left: 300px; + display: flex; +} +.item-6 h1{ + font-size: 100px; +} +.blue_font{ + color: #01BCD4; +} +/* .item-7 { + grid-column: 7/ 9; + background: #4464a1; +} */ +.item-8 { + grid-column: 6/ 9; + grid-row: 4/6; + /* background: #e03f3f; */ + transform: rotate(270deg); + display: flex; + justify-content: space-around; +} +.item_8 div{ + transform: rotate(270deg); +} +.item-9 { + /* background: #b03532; */ + grid-column: 1/4; + grid-row: span 2/ 8; +} +.item_text{ + width: 50%; + height: 60px; +} +.app_info{ + width: 70%; + height: 50%; + display: flex; + justify-content: space-between; +} +.get_app{ + background: #E91D63; + border: none; + color: white; + width: 100px; + height: 30px; + border-radius: 25%; +} +.apple{ + background: white; + width: 30px; + height:30px; + border-radius: 50%; +} +.apple img{ + width: 30px; + height: 30px; +} +.item-10 { + /* background: #7ada2b; */ + grid-column: 1/4; + grid-row: 8/ span 2; + display: flex; + align-items: center; +} +.item-10 img{ + width: 30px; + height: 30px; + border-radius:50%; +} +.item-11 { + /* background: black; */ + /* border: 3px solid palevioletred; */ + grid-column: 4/9; + grid-row: 5/span 5; +} +.item-11 img{ + width:100%; + height: 100%; +} +button{ + font-family: 'Noto Sans', sans-serif; +} diff --git a/05week/grid-landing-page/grid-stuff.png b/05week/grid-landing-page/grid-stuff.png new file mode 100644 index 0000000000..fb4a7d99b3 Binary files /dev/null and b/05week/grid-landing-page/grid-stuff.png differ diff --git a/05week/grid-landing-page/index.html b/05week/grid-landing-page/index.html new file mode 100644 index 0000000000..d4fa6554d9 --- /dev/null +++ b/05week/grid-landing-page/index.html @@ -0,0 +1,106 @@ + + + + + + + Grid Landing Page + + +
+
+ fish-icon +
+
+

THE APP

+

DOWNLOAD

+ + +
+
+
+

By signing in, you agree with the Terms of Service, Privacy Policy and Cookie Policy.

+
+
+
+

Slick

+

fish

+
+ +
+

EN

+

FR

+
+
+
+

The greatest way to make love connection.

+
+
+ + +
+
+
+
+ + instagram-icon + + + twitter-icon + + + facebook-icon + +
+

STAY SOCIAL

+
+
+ couple +
+ + +
+ + \ No newline at end of file diff --git a/05week/grid-landing-page/landing-page-example.png b/05week/grid-landing-page/landing-page-example.png new file mode 100644 index 0000000000..a8e5ba73b5 Binary files /dev/null and b/05week/grid-landing-page/landing-page-example.png differ diff --git a/05week/in-class-exercises/build-with-grids/css/style.css b/05week/in-class-exercises/build-with-grids/css/style.css new file mode 100644 index 0000000000..e69de29bb2 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..a19bc1011d --- /dev/null +++ b/05week/in-class-exercises/build-with-grids/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/05week/in-class-exercises/code-along-card/css/style.css b/05week/in-class-exercises/code-along-card/css/style.css new file mode 100644 index 0000000000..605041cafb --- /dev/null +++ b/05week/in-class-exercises/code-along-card/css/style.css @@ -0,0 +1,104 @@ +@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC|Roboto+Condensed');/* font-family: 'Noto Serif TC', serif; */ +/* font-family: 'Noto Serif TC', serif; +font-family: 'Roboto Condensed', sans-serif; */ +*{ + box-sizing: border-box; +} +.border1{ + /* border: 2px solid red; */ +} +.border2{ + /* border: 2px solid blue; */ +} +body{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0; + margin: 0; +} +.card{ + display: flex; + flex-direction: column; + justify-content: center; + height: 90%; + width: 80%; + box-shadow: 1px 1px 16px 0px rgba(134,134,134, 0.1); +} +.cardContent{ + display: flex; + flex-direction: column; + flex: 1; + padding: 1em 2em 0; + order: 2; +} + +.cardContent div{ + margin-bottom: 1.3em; +} +.cardImage{ + flex: 1; + background: url("https://images.unsplash.com/photo-1496843916299-590492c751f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2851&q=80"); + background-size: cover; +} +.cardContent .subtitle{ + font-family: 'Roboto Condensed', sans-serif; + letter-spacing: 1px; + font-size: 10px; + text-transform: uppercase; + color: #7e7e7e; + font-weight: 700; +} +.cardContent .title{ + font-family: 'Noto Serif TC', serif; + font-size: 31px; + letter-spacing: 3px; + font-weight: 700; + color:#2c2c2c; + margin-bottom: .5em; +} +.cardContent .description{ + font-family: 'Roboto Condensed', sans-serif; + font-size: 11px; + line-height: 22px; + color: #7e7e7e; +} +.cardContent .link a{ + font-family: 'Roboto Condensed', sans-serif; + text-decoration: none; + color: #2c2c2c; + letter-spacing: 3px; + font-size: 9px; + text-transform: uppercase; + font-weight: 700; +} +@media (min-width: 568px){ + .cardContent{ + padding: 2em; + } + .cardContent .description{ + line-height: 16px; + } + .cardImage{ + flex: 2; + } +} +@media (min-width: 768px){ + .card{ + flex-direction:row; + } + .cardContent{ + order: 1; + padding: 6em 2em 0; + } + .cardContent .description{ + line-height: 22px; + font-size: 13px; + } + .cardImage{ + order:2; + flex: 2; + } + +} \ No newline at end of file diff --git a/05week/in-class-exercises/code-along-card/index.html b/05week/in-class-exercises/code-along-card/index.html new file mode 100644 index 0000000000..0257d224a1 --- /dev/null +++ b/05week/in-class-exercises/code-along-card/index.html @@ -0,0 +1,22 @@ + + + + + + Respond CARD + + + +
+
+
Tipsy the Season
+
Seasonal Coctails
+
Pineapple grape banana cherry orange kiwi blueberry. Pineapple pomegranate grape banana cherry orange kiwi lemon. Pineapple grape banana cherry orange kiwi mango. Pineapple grape banana cherry orange kiwi papaya. Pineapple grape banana cherry orange kiwi carrot.
+
+ Get recipe +
+
+
+
+ + \ No newline at end of file diff --git a/05week/in-class-exercises/responsive-card/css/style.css b/05week/in-class-exercises/responsive-card/css/style.css new file mode 100644 index 0000000000..c9782e7f98 --- /dev/null +++ b/05week/in-class-exercises/responsive-card/css/style.css @@ -0,0 +1,43 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + display:flex; + justify-content: center; + align-items: center; +} +.card{ + width: 90%; + height: 90%; + border-radius: 3px; + box-shadow: 2px 2px 2px 2px plum; +} +.imgContainer{ + width: 100%; + padding: 5%; +} +.imgContainer img{ + width: 100%; +} +.textContainer{ + width: 100%; + padding: 5%; + line-height: 30px; +} +@media (min-width: 1025px){ + .card{ + display:flex; + flex-direction: row-reverse; + justify-content: center; + align-items: center; + } + .textContainer{ + width: 35%; + padding-right:0; + } + .imgContainer{ + width: 60%; + } +} \ No newline at end of file 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..b5aad0227f --- /dev/null +++ b/05week/in-class-exercises/responsive-card/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + +
+
+ cool-pineapple +
+
+
Is This the End Times?
+

Cool Fruit Sited

+

Pineapple grape banana cherry orange kiwi blueberry. Pineapple pomegranate grape banana cherry orange kiwi lemon. Pineapple grape banana cherry orange kiwi mango. Pineapple grape banana cherry orange kiwi papaya. Pineapple grape banana cherry orange kiwi carrot.

+
DEC 11 2018
+
+
+ + \ No newline at end of file diff --git a/05week/transitions-and-transformations/css/style.css b/05week/transitions-and-transformations/css/style.css index e69de29bb2..83cce168e0 100644 --- a/05week/transitions-and-transformations/css/style.css +++ b/05week/transitions-and-transformations/css/style.css @@ -0,0 +1,74 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +body{ + background-color: rgb(37, 33, 33); +} +.container{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} +.square_big{ + width: 50px; + height: 50px; + transition-duration: 4s; +} +.square_small{ + width: 50px; + height: 50px; + transition: 2s; +} +.square_container:hover .square_big{ + -webkit-transform: scale(2,2) translateX(200px) rotate(360deg); + -moz-transform: scale(2,2) translateX(200px) rotate(360deg); + -o-transform: scale(2,2) translateX(200px) rotate(360deg); + -ms-transform: scale(2,2) translateX(200px) rotate(360deg); + transform: scale(2,2) translateX(200px) rotate(360deg); +} +.square_container:hover .square_small{ + -webkit-transform: scale(.5,.5) translateX(-800px) rotate(-360deg); + -moz-transform: scale(.5,.5) translateX(-800px) rotate(-360deg); + -o-transform: scale(.5,.5) translateX(-800px) rotate(-360deg); + -ms-transform: scale(.5,.5) translateX(-800px) rotate(-360deg); + transform: scale(.5,.5) translateX(-800px) rotate(-360deg); +} +.square1{ + background-color: palevioletred; +} +.square2{ + background-color: orangered; +} +.square3{ + background-color: limegreen; +} +.square4{ + background-color: plum; +} +.square5{ + background-color: blueviolet; +} +.square6{ + background-color: forestgreen; +} +.square7{ + background-color: pink; +} +.square8{ + background-color: aqua; +} +.square9{ + background-color: coral; +} +.square10{ + background-color: yellow; +} +.square11{ + background-color: maroon; +} +.square12{ + background-color: yellowgreen; +} \ No newline at end of file diff --git a/05week/transitions-and-transformations/index.html b/05week/transitions-and-transformations/index.html index 8b13789179..ce4c242708 100644 --- a/05week/transitions-and-transformations/index.html +++ b/05week/transitions-and-transformations/index.html @@ -1 +1,27 @@ - + + + + + + + Transitions and Transformations + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/05week/travel-gram/css/style.css b/05week/travel-gram/css/style.css index d3f5a12faa..2af3c2ccea 100644 --- a/05week/travel-gram/css/style.css +++ b/05week/travel-gram/css/style.css @@ -1 +1,113 @@ +*{ + box-sizing: border-box; + margin: 0; + padding: 0; +} +body{ + height: 100%; + width: 100%; +} +h1{ + text-align: center; +} +.gridContainer{ + margin: 0 15 0 15; + height: 100%; + width: 90%; + display: grid; + grid-gap: 20px; + grid-template-columns: 25% 25% 25% 25%; + grid-template-rows: 25% 30% 1fr 25%; + grid-template-areas: "nav nav nav2 nav2" + "content1 content1 side1 side2" + "content1 content1 side3 side3" + "footer1 footer2 footer3 footer4" +} +.gridItem{ + border: 3px solid black; + border-radius: 6px; + color: #fff; + font-size: 26px; + display: flex; + justify-content: center; + align-items: center; +} +.gridItem-1{ + grid-area: nav; + background-color: palevioletred; +} +.gridItem-2{ + grid-area: nav2; + background-color: lightblue; +} +.gridItem-3{ + grid-area: content1; + background-color: orange; +} +.gridItem-4{ + grid-area: side1; + background-color: pink; +} +.gridItem-5{ + grid-area: side2; + background-color: teal; +} +.gridItem-6{ + grid-area: side3; + background-color: orchid; +} +.gridItem-7{ + grid-area: footer1; + background-color: gold; +} +.gridItem-8{ + grid-area: footer2; + background-color: plum; +} +.gridItem-9{ + grid-area: footer3; + background-color: forestgreen; +} +.gridItem-10{ + grid-area: footer4; + background-color: maroon; +} +img{ + width: 100%; + height: auto; +} +@media (min-width: 320px) { + .gridContainer{ + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 100%; + grid-template-areas: "nav" + "nav2" + "content1" + } +@media (min-width: 768px){ + .gridContainer{ + grid-template-columns: 50% 50%; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-areas: "content1 content1" + "content1 content1" + "content1 content1" + "content1 content1" + "nav nav2" + "nav nav2" + "side3 side3" + } +@media(min-width: 1025px){ + .gridContainer{ + display: grid; + grid-gap: 20px; + grid-template-columns: 25% 25% 25% 25%; + grid-template-rows: 25% 30% 1fr 25%; + grid-template-areas: "nav nav nav2 nav2" + "content1 content1 side1 side2" + "content1 content1 side3 side3" + "footer1 footer2 footer3 footer4" + } +} + +} \ No newline at end of file diff --git a/05week/travel-gram/index.html b/05week/travel-gram/index.html index 8b13789179..2af87921f6 100644 --- a/05week/travel-gram/index.html +++ b/05week/travel-gram/index.html @@ -1 +1,24 @@ - + + + + + + + Travel Gram + + +

Travel Gram

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ + diff --git a/07week/dice/css/style.css b/07week/dice/css/style.css new file mode 100644 index 0000000000..c97e659e6f --- /dev/null +++ b/07week/dice/css/style.css @@ -0,0 +1,31 @@ +h1 { + font-size:60px; + text-align:center; +} + +#dice { + height: 200px; + margin: auto; + text-align: center; + font-size:150px; +} + +.button { + margin: auto; + border: blue 1px solid; + width: 125px; + height:40px; + text-align: center; + font-size:30px; + border-radius:15px; + cursor: pointer; +} + +#report { + display:block; + margin: auto; + margin-top:35px; + height:400px; + width: 600px; + border: 1px solid black; +} \ No newline at end of file diff --git a/07week/dice/index.html b/07week/dice/index.html new file mode 100644 index 0000000000..ce4813c508 --- /dev/null +++ b/07week/dice/index.html @@ -0,0 +1,16 @@ + + + + + + + Dice + + +

Dicey Results

+

+
Roll
+
+ + + \ No newline at end of file diff --git a/07week/dice/js/script.js b/07week/dice/js/script.js new file mode 100644 index 0000000000..70430e43fa --- /dev/null +++ b/07week/dice/js/script.js @@ -0,0 +1,74 @@ +let dieChar = ["⚀", "⚁", "⚂", "⚃", "⚄", "⚅"] + +function roll() { + document.querySelector("#dice").innerHTML = ""; + for (let i = 0; i < 5; i++) { + let roll = Math.floor(Math.random() * 6) + 1; + document.querySelector("#dice").innerHTML += `${dieChar[roll - 1]}`; + } + report(); +} + +roll(); + +////////////////////////////////////////////////////// +// Add code here that uses loops and conditional statements +// to determine if any of the following cases are true: +// +function report() { + document.querySelector("#report").innerHTML = ""; + var pairs = 0; + var triple = 0; + let diceHtml = document.querySelectorAll('.die'); + for (let dieVal = 1; dieVal < 7; dieVal++) { + let howManyDice = 0; + + for (let i = 0; i < 5; i++) { + if (dieVal === Number(diceHtml[i].getAttribute('data-roll'))) { + howManyDice++; + } + } + if (howManyDice === 2) { // we check after the counting is done if it is equal to '2' + document.querySelector("#report").innerHTML += `There are a pair of ${dieVal}s
`; // if yes, we report a pair + pairs += 1; + } + if (howManyDice === 3) { + document.querySelector("#report").innerHTML += `There are three ${dieVal}s
`; + triple +=1; + } + if (howManyDice === 4) { + document.querySelector("#report").innerHTML += `There are four ${dieVal}s
`; + } + if (howManyDice === 5) { + document.querySelector("#report").innerHTML += `Yacht`; + } + +} +if (pairs === 2){ + document.querySelector("#report").innerHTML = 'Two pairs'; +} +if (pairs === 1 && triple === 1) { + document.querySelector("#report").innerHTML = 'Full House'; +} +var diceNums = [0,0,0,0,0]; +for(let i = 0; i < 5; i++){ + diceNums[i] = diceHtml[i].getAttribute('data-roll'); +} +diceNums.sort(); +console.log(diceNums); +var straight = true; +for(let i = 0; i < 4; i++){ + if (diceNums[i] != diceNums[i+1]-1){ + straight = false; + } + console.log(straight); +} +if (straight && diceNums[0]==1){ + document.querySelector("#report").innerHTML += 'Small Straight' +} +if (straight && diceNums[0]==2){ + document.querySelector("#report").innerHTML += 'Big Straight' +} +} + +report(); \ No newline at end of file diff --git a/08week/tic-tac-toe/index.html b/08week/tic-tac-toe/index.html index 37e4c9f386..4112dc1b78 100644 --- a/08week/tic-tac-toe/index.html +++ b/08week/tic-tac-toe/index.html @@ -6,6 +6,9 @@ +
+

X's Turn

+
@@ -23,7 +26,13 @@
+ + + diff --git a/08week/tic-tac-toe/script.js b/08week/tic-tac-toe/script.js index 0509eaee74..76a1f6140e 100644 --- a/08week/tic-tac-toe/script.js +++ b/08week/tic-tac-toe/script.js @@ -2,4 +2,73 @@ $(document).ready(function() { // Put app logic in here + + //need var player1, player2 + //function for clear board + //function to append as x or o on clicked element + + + //calculate a win + let dataCell = $('div[data-cell]'); + let play = 'X' + let playArray= []; + dataCell.click(function(){ + let attrVal = $(this).attr('data-cell') + + if(play === 'X' && $(this).is(':empty') && $('#announce-winner').is(':empty')){ + $(this).append('X') + playArray[attrVal] = play; + victory() + play = 'O' + $('#turn').text("O's Turn") + } + else if(play === 'O' && $(this).is(':empty') && $('#announce-winner').is(':empty')){ + $(this).append('O') + playArray[attrVal] = play; + victory() + play = 'X' + $('#turn').text("X's Turn") + } + // console.log(playArray) + readDataCellValue($(this)) + + }) + + function readDataCellValue(cell){ + let attrVal = cell.attr('data-cell') + // console.log(cell.attr('data-cell')) + } + + $('#clear').click(function(){ + dataCell.empty() + $('#announce-winner').empty() + playArray = [] + play = 'X' + $('#turn').text("X's Turn") + }) + dataCell.draggable(); + function victory(){ + //determine a winner by data-cell {0,1,2}, {3,4,5}, {6,7,8}, {0,3,6}, {1,4,7}, {2,5,8}, + //diagnols{0,4,,8}, {2,4,6} + let winConditions = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6], + ] + console.log(playArray) + console.log(winConditions[1][1]) + console.log(playArray[winConditions[1][1]]) + for(let i=0; i < winConditions.length; i++){ + if(playArray[winConditions[i][0]] && playArray[winConditions[i][0]] === playArray[winConditions[i][1]] && playArray[winConditions[i][2]] === playArray[winConditions[i][0]]){ + $('#announce-winner').text(play + " is the winner!") + } + } + } + }); + diff --git a/08week/tic-tac-toe/style.css b/08week/tic-tac-toe/style.css index d550b6372c..3e48a2e4c3 100644 --- a/08week/tic-tac-toe/style.css +++ b/08week/tic-tac-toe/style.css @@ -6,6 +6,7 @@ div[data-cell] { border: 1px solid #808080; font-size: 100px; text-align: center; + cursor: default; } .row { diff --git a/09week/customer-satisfaction/css/style.css b/09week/customer-satisfaction/css/style.css index e69de29bb2..3f55c4ca6c 100644 --- a/09week/customer-satisfaction/css/style.css +++ b/09week/customer-satisfaction/css/style.css @@ -0,0 +1,55 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + color: white; +} +.container{ + width: 100%; + height: 500px; + display: flex; + justify-content: center; +} +form{ + background-color: #6F42C1; + border-radius: 5px; + padding: 10px; + width: 400px; + height: 525px; + margin: 10px; +} +input[type=password]{ + color: grey; +} +input[type=url]{ + color: grey; +} +input[type="email"]{ + color: grey; +} +input{ + border-radius: 2px; + border: 1px solid grey; + padding: 2px; + margin: 10px; + height: 25px; + color: grey; +} +textarea{ + height: 50px; + width: 200px; + margin-bottom: 20px; + margin-top: 5px; + color: grey; + padding: 2px; +} +button{ + color: grey; + font-size: 15px; + border-radius: 5px; + width: 100px; + margin-right: 10px; + height: 25px; +} \ No newline at end of file diff --git a/09week/customer-satisfaction/index.html b/09week/customer-satisfaction/index.html index e69de29bb2..d2271c4c1a 100644 --- a/09week/customer-satisfaction/index.html +++ b/09week/customer-satisfaction/index.html @@ -0,0 +1,59 @@ + + + + + + + + Customer Satisfaction + + +
+
+

Give me your feedback!

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + Yes + No +
+ +
+ +
+
+
+
+
+

What needs to be improved?

+
+
+ Emilio's work + Other +
+
+ + +
+ +
+
+ + + + \ No newline at end of file diff --git a/09week/customer-satisfaction/js/script.js b/09week/customer-satisfaction/js/script.js index e69de29bb2..fae3d36bde 100644 --- a/09week/customer-satisfaction/js/script.js +++ b/09week/customer-satisfaction/js/script.js @@ -0,0 +1,15 @@ +'use strict'; + +$(document).ready(function() { + const inputs = document.querySelectorAll("input, select, textarea"); + + inputs.forEach(input => { + input.addEventListener( + "invalid", + event => { + input.classList.add("error"); + }, + false + ); +}); +}); \ No newline at end of file diff --git a/09week/towers-of-hanoi/index.html b/09week/towers-of-hanoi/index.html index 2c7189c758..e6a1ad0ed5 100644 --- a/09week/towers-of-hanoi/index.html +++ b/09week/towers-of-hanoi/index.html @@ -6,6 +6,7 @@ +

Towers of Hanoi

@@ -16,6 +17,7 @@
+
Moves: 0
diff --git a/09week/towers-of-hanoi/script.js b/09week/towers-of-hanoi/script.js index ba46e37e29..8b3171bd19 100644 --- a/09week/towers-of-hanoi/script.js +++ b/09week/towers-of-hanoi/script.js @@ -1,5 +1,36 @@ 'use strict'; $(document).ready(function() { - // Put app logic here + let $block = null; + let moves = 0; + console.log($("[data-stack=1]")) + $('[data-stack]').click(function() { + let rowCondition = parseInt($(this).children().last().attr('data-block'),10) + + if (($block && (parseInt($block.attr('data-block'),10) < rowCondition)) || (!rowCondition)) { + $(this).append($block); + $block = null; + moves++ + $('.counter').text('Moves: ' + moves) + } else if($block ===null){ + $block = $(this).children().last().detach(); + } + winCondition($(this)) + }) + function winCondition(row){ + console.log(row.children().length) + if ((row.attr('data-stack')==3) && row.children().length === 4){ + $('#announce-game-won').text("You've won with " + moves + " moves! \n Click to reset") + } + } + $('#announce-game-won').click(function(){ + reset() + }) + function reset(){ + let k=$("[data-stack=3]").children().detach() + $("[data-stack=1]").append(k) + moves = 0 + $('.counter').text('Moves: ' + moves) + $('#announce-game-won').text("") + } }); diff --git a/09week/towers-of-hanoi/style.css b/09week/towers-of-hanoi/style.css index 2fc6989236..f7fffb2af7 100644 --- a/09week/towers-of-hanoi/style.css +++ b/09week/towers-of-hanoi/style.css @@ -1,3 +1,10 @@ +@import url('https://fonts.googleapis.com/css?family=Major+Mono+Display'); +*{ + font-family: 'Major Mono Display', monospace; +} +h2{ + margin: 25px; +} [data-stack] { display: flex; justify-content: flex-start; @@ -10,6 +17,7 @@ [data-block] { width: 25px; float: left; + border-radius: 12px; } [data-block="25"] { @@ -31,8 +39,14 @@ height: 100px; background-color: yellow; } - +.counter{ + margin: 25px; +} +.clear{ + margin: 0 25px; +} #announce-game-won { font-size: 50px; text-align: center; + cursor: pointer; } diff --git a/checkpoint-one/css/style.css b/checkpoint-one/css/style.css index 8b13789179..707635fcfa 100644 --- a/checkpoint-one/css/style.css +++ b/checkpoint-one/css/style.css @@ -1 +1,312 @@ - +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Gotham SSm A","Gotham SSm B",Arial,Helvetica,sans-serif; +} +body{ + background: #385D84; + background-image: url("https://images.unsplash.com/photo-1536510233921-8e5043fce771?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1671&q=80"); + height: 100vh; +} +nav{ + height: 75px; + width: 100%; + padding: 5px; + color: white; + display: flex; + flex-direction: row; + justify-content: space-between; + font-weight: 900; + font-size: 20px; +} +nav img{ + position: relative; + margin: 0px; + float: left; + height: 100%; +} +nav ul{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: 20px 20px 20px 0; + list-style: none; +} +nav ul li a{ + margin: 10px; + color: white; + text-decoration: none; +} +header{ + padding: 15px; + height: 100vh; + size: cover; + background-size: cover; + /* height: 100vh; */ +} +.hungry{ + position: absolute; + left: 80px; + top: 300px; + height: 450px; + width: 500px; + padding: 10px; + background-color: rgba(128, 0, 128, 0); + color: white; + z-index: 1; + line-height: 50px;; +} +.hungry h1{ + font-size: 50px; +} +.formInputs{ + background-color: white; + height: 15%; + width: 100%; + margin: 20px 0; +} +.formInputs input{ + margin: 5px; + border: none; + background-color: inherit; + color: grey; + height: 80%; + width: 70%; + font-size: 15px; + float: left; + font-size: 20px; +} +.formInputs button{ + float: right; + margin: 5px; + width: 20%; + height: 80%; + padding: 10px; + background-color: #00a3e1; + color: white; + border-radius: 4px; + font-size:15px; +} +.appInfo{ + width: 50%; + display: flex; + flex-direction: row; + justify-content:space-between; + align-items: center; +} +.appInfo img{ + background-color: #00a3e1; + width: 30px; + height: 30px; + border-radius: 50%; +} +.customerInfo{ + width: 100%; + height: 700px; + background-color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} +.customerInfoImg{ + width:50%; + display:flex; + justify-content: flex-end; +} +.customerInfoText{ + width: 50%; +} +.customerInfoText h1{ + font-size: 40px; +} +.topText{ + color: #00a3e1; +} +.bottomText{ + color: rgba(128, 128, 128, 0.678); +} +.customerInfoText h2{ + color: rgba(128, 128, 128, 0.678); + width: 65%; +} +.customerInfoText i{ + color: #00a3e1; + margin: 30px 10px; +} +.downloadButtons{ + width: 50%; + display:flex; + justify-content: space-between; +} +.downloadButtons button{ + padding: 6px; + border-radius: 4px; + width:48%; + height:7%; + background: #00a3e1; + color: white; + line-height: 15px; + cursor: pointer; +} +.downloadButtons button img{ + width: 35px; + height: 35px; + float: left; +} +.downloadButtons h4{ + font-size: 16px;; +} +.career{ + height: 900px; + width: 100%; + color: white; + background-color: white; + text-shadow: 2px 2px rgba(37, 34, 37, 0.24); +} +.career h1{ + font-size: 40px; +} +.career button{ + margin: 20px; + padding: 10px; + background-color: rgba(255, 255, 255, 0); + border: 2px solid white; + color: white; + height: 15%; + width: 200px; + font-size: 20px; + font-weight: bold; + cursor: pointer; + border-radius: 4px; + box-shadow: 2px 2px rgba(37, 34, 37, 0.24); +} +.runner{ + margin-bottom: 1%; + height: 47%; + width: 100%; + background-image: url("https://images.unsplash.com/photo-1526367790999-0150786686a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1651&q=80"); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-shadow: 2px 2px rgba(37, 34, 37, 0.24); +} +.careerType{ + display: flex; + flex-direction: row; + justify-content: space-between; +} +.partner{ + margin-top: 1%; + height: 47%; + width: 49%; + background-image: url("https://images.unsplash.com/photo-1527664557558-a2b352fcf203?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1651&q=80"); + display: flex; + justify-content: center; + align-items: center; + align-content: center; + flex-direction: column; + +} +.careers{ + margin-top: 1%; + height: 47%; + width: 49%; + background-image: url("https://images.unsplash.com/photo-1527153818091-1a9638521e2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2058&q=80"); + display: flex; + justify-content: center; + align-items: center; + align-content: center; + flex-direction: column; +} +footer{ + padding: 20px; + height: 400px; + width: 100%; + background: #00a3e1; + color: white; + display: flex; + flex-direction: column; + align-items: center; +} +.footerNav{ + height: 15%; + margin: 20px; + display: flex; + flex-direction: row; + justify-content: space-between; + width: 90%; + border-bottom: 2px solid rgba(255, 255, 255, 0.568); +} +.footerNav a{ + color: white; + text-decoration: none; + font-size: 20px; + font-weight: bold; + margin: 10px 20px 0 0; +} +.footerNav img{ + width: 35px; + height: 35px; + border-radius: 50%; + background: white; + margin: 0 10px; +} +.cities{ + height: 60%; + width: 90%; + display: flex; + justify-content: space-between; + line-height: 40px; + border-bottom: 2px solid rgba(255, 255, 255, 0.568); +} +.becomeRunner{ + margin: 20px 0; + padding: 10px; + background-color: rgba(255, 255, 255, 0); + border: 2px solid white; + color: white; + height: 30%; + width: 97%; + font-size: 20px; + font-weight: bold; + cursor: pointer; + border-radius: 4px; +} +.moreButtons{ + padding: 6px; + border-radius: 4px; + width: 48%; + height:30%; + background: white; + color: #00a3e1; + line-height: 15px; + cursor: pointer; +} +.moreButtons img{ + width: 35px; + height: 35px; + float: left; +} +.moreButtons h4{ + font-size: 16px;; +} +.moreButtons p{ + font-size: 15px; +} +.officialStuff{ + padding: 20px 0; + width: 90%; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.officialStuff a{ + color: white; + text-decoration: none; + font-size: 15px; + margin-left: 20px; +} \ No newline at end of file diff --git a/checkpoint-one/index.html b/checkpoint-one/index.html index 8b13789179..1dd0f71a56 100644 --- a/checkpoint-one/index.html +++ b/checkpoint-one/index.html @@ -1 +1,171 @@ + + + + + + + + + Not Favor + + + +
+
+

Hungry?

+

Order your Local Favorites.

+
+ + + +
+
+

Get the app.

+ + apple-icon + + + android-icon + +
+
+
+
+
+ favor-phone +
+
+

What is Favor?

+

Use Favor to get anything delivered in under an hour.

+ + + + + + + + +

Download the App

+
+ + +
+
+
+
+
+

BECOME A RUNNER

+

Apply Today, Run Tommorrow.

+ +
+
+
+

PARTNER

+

Grow your business with Favor

+ +
+
+

CAREERS

+

Start your next chapter.

+ +
+
+
+ + + \ No newline at end of file diff --git a/checkpoint-two/css/profile_pic.jpg b/checkpoint-two/css/profile_pic.jpg new file mode 100644 index 0000000000..230279d2f9 Binary files /dev/null and b/checkpoint-two/css/profile_pic.jpg differ diff --git a/checkpoint-two/css/style.css b/checkpoint-two/css/style.css index 8b13789179..88e7e7029e 100644 --- a/checkpoint-two/css/style.css +++ b/checkpoint-two/css/style.css @@ -1 +1,299 @@ +@import url('https://fonts.googleapis.com/css?family=Lora|Roboto'); +*{ + box-sizing: border-box; + margin: 0; + padding: 0; +} +body{ + background-color: #4b54bf; + background-color: #d1c9ff; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23d1c9ff'/%3E%3Cstop offset='1' stop-color='%235979e6'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E"); + background-attachment: fixed; + background-size: cover; + background-attachment: fixed; + background-size: cover; + overflow-x: hidden; +} +.gridItem{ + border: 2px solid black; + border-radius: 3px; + color: #fff; + font-size: 26px; + display: flex; + justify-content: center; + align-items: center; +} +.gridItem-1{ + padding: 10px; + font-family: 'Roboto', sans-serif; + grid-area: name; + background-color: rgba(173, 216, 230, 0.836); + text-shadow: 2px 2px gold; +} +.gridItem-1:hover{ + color: gold; + text-shadow: 2px 2px #fff; +} +.gridItem-2{ + font-family: 'Roboto', sans-serif; + grid-area: nav; + padding: 5px; + background-color: rgba(177, 129, 255, 0.836); +} +ul{ + list-style-type: none; + display: flex; + flex-direction: row; + justify-content: flex-end; + width: 100%; +} +li:first-of-type{ + color: gold; +} +li{ + width: 23%; + margin: 0 15px; +} +li:hover a{ + color: gold; +} +.gridItem-2{ + display: inline-flex; + justify-content: flex-end; + align-items: flex-end; +} +.gridItem-3{ + grid-area: side1; + border: none; +} +.gridItem-3 img{ + border-radius: 50%; + border: 2px solid black; + transition-duration: .5s; +} +.gridItem-3 img:hover{ + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.gridItem-4{ + padding: 15px; + grid-area: about; + background-color: rgba(173, 216, 230, 0.536); + transition-duration: .5s; +} +.gridItem-4 p{ + font-family: 'Lora', serif; +} +.gridItem-4 p:first-of-type{ + font-family: 'Roboto', sans-serif; + text-decoration: underline; + text-shadow: 1px 1px gold; +} + +.gridItem-4:hover { + background-color: rgba(173, 216, 230, 0.836) + +} + +.gridItem-5{ + grid-area: side2; +} +.gridItem-6{ + grid-area: my-work; + padding: 5px; + justify-content: flex-start; + align-items: flex-end; + border: none; + border-bottom: 3px solid black; +} +.gridItem-6 p{ + font-family: 'Roboto', sans-serif; + font-size: 35px; +} +.gridItem-7{ + grid-area: proj1; + background-color: rgba(128, 128, 128, 0.596); + font-family: 'Lora', serif; + transition-duration: .5s; +} +.gridItem-7:hover{ + background-color: rgba(128, 128, 128, 0.836); + -webkit-transform: scale(1.04); + -moz-transform: scale(1.04); + -o-transform: scale(1.04); + -ms-transform: scale(1.04); + transform: scale(1.04); +} +.gridItem-8{ + grid-area: proj2; + background-color: rgba(128, 128, 128, 0.596); + font-family: 'Lora', serif; + transition-duration: .5s; +} +.gridItem-8:hover{ + background-color: rgba(128, 128, 128, 0.836); + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.gridItem-9{ + grid-area: proj3; + background-color: rgba(128, 128, 128, 0.596); + font-family: 'Lora', serif; + transition-duration: .5s; +} +.gridItem-9:hover{ + background-color: rgba(128, 128, 128, 0.836); + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.gridItem-10{ + grid-area: proj4; + background-color: rgba(128, 128, 128, 0.596); + font-family: 'Lora', serif; + transition-duration: .5s; +} +.gridItem-10:hover{ + background-color: rgba(128, 128, 128, 0.836); + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.gridItem-11{ + grid-area: proj5; + background-color: rgba(128, 128, 128, 0.596); + font-family: 'Lora', serif; + transition-duration: .5s; +} +.gridItem-11:hover{ + background-color: rgba(128, 128, 128, 0.836); + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.gridItem-12{ + padding: 10px; + grid-area: contact; + border: none; + border-top: 3px solid black; + justify-content: flex-end; + font-family: 'Lora', serif; +} +.gridItem-12 p{ + font-family: 'Roboto', sans-serif; + font-size: 35px; + color: black; +} +.gridItem-12 a:hover{ + color: gold; +} +a{ + text-decoration: none; + color: inherit; +} +@media (min-width: 320px){ + body{ + overflow-x: hidden; + } + .gridContainer{ + margin: 5 10 5 10; + width: 90%; + height: 100%; + display: grid; + grid-gap: 20px; + grid-template-columns: 50% 50%; + grid-template-rows: 20% 20% 50% 20% 50% 25% 25% 20%; + grid-template-areas: "name name" + "nav nav" + "about about" + "my-work my-work" + "proj1 proj1" + "proj2 proj3" + "proj4 proj5" + "contact contact" + + } + a{ + margin: 10px; + font-size: 20px; + } + .gridItem-4 p{ + font-family: 'Lora', serif; + font-size: 15px; + } + .gridItem-4 p:first-of-type{ + font-size: 20px; + } + .gridItem-2 a{ + font-size: 13px; + } + .gridItem-2 li:hover a{ + color: white; + } +} +@media (min-width: 768px){ + .gridContainer{ + margin: 7 10 7 10; + width: 90%; + height: 100%; + display: grid; + grid-gap: 10px; + grid-template-columns: 25% 25% 25% 25%; + grid-template-rows: 20% 50% 20% 25% 25% 25% 20%; + grid-template-areas: "name name nav nav" + "side1 about about about" + "my-work my-work my-work my-work" + "proj1 proj1 proj2 proj2" + "proj1 proj1 proj3 proj3" + "proj4 proj4 proj5 proj5" + "contact contact contact contact" + + } + a{ + font-size: 30px; + } +} +@media(min-width: 1025px){ + .gridContainer{ + margin: 10 15 10 15; + width: 90%; + height: 100%; + display: grid; + grid-gap: 20px; + grid-template-columns: 25% 25% 25% 25%; + grid-template-rows: 20% 50% 20% 25% 25% 20%; + grid-template-areas: "name nav nav nav" + "side1 about about about" + "my-work my-work my-work my-work" + "proj1 proj1 proj2 proj3" + "proj1 proj1 proj4 proj5" + "contact contact contact contact" + + } + .gridItem-4 p{ + font-size: 20px; + line-height: 35px; + } + .gridItem-4 p:first-of-type{ + font-size: 30px; + } + .gridItem-2 a{ + font-size: 25px + } + .gridItem-2 li:hover a{ + color: gold; + } +} \ No newline at end of file diff --git a/checkpoint-two/index.html b/checkpoint-two/index.html index 8b13789179..0ab4db649a 100644 --- a/checkpoint-two/index.html +++ b/checkpoint-two/index.html @@ -1 +1,74 @@ - + + + + + + + Portfolio + + +
+
+ EMILIO SANCHEZ +
+
+ +
+
+ Emilio Sanchez +
+
+
+

About Emilio

+

Integer tempus convallis elit id porttitor. Vestibulum suscipit neque quis pulvinar pretium. Ut quis hendrerit urna. Donec in posuere ante, in fermentum metus. Morbi porta a lacus sed condimentum. Aenean volutpat fermentum diam, ac semper felis. Lorem ipsum and all that jazz...

+
+
+
+
+
+ +

My Projects

+
+
+ + Favor Landing Page Imitation + +
+
+ + Grid Landing Page +
+
+ + Responsive Landing Page + +
+
+ + Airline Landing Page + +
+
+ + Blog Site + +
+
+ +

Contact Info:

+ email + github +
+
+ +