diff --git a/week-4/404.html b/midterm/404.html similarity index 100% rename from week-4/404.html rename to midterm/404.html diff --git a/week-4/LICENSE.txt b/midterm/LICENSE.txt similarity index 100% rename from week-4/LICENSE.txt rename to midterm/LICENSE.txt diff --git a/week-4/browserconfig.xml b/midterm/browserconfig.xml similarity index 100% rename from week-4/browserconfig.xml rename to midterm/browserconfig.xml diff --git a/week-4/css-diner.png b/midterm/css-diner.png similarity index 100% rename from week-4/css-diner.png rename to midterm/css-diner.png diff --git a/week-4/css/main.css b/midterm/css/main.css similarity index 71% rename from week-4/css/main.css rename to midterm/css/main.css index 6f10ce0..d4d2e78 100644 --- a/week-4/css/main.css +++ b/midterm/css/main.css @@ -12,12 +12,12 @@ ========================================================================== */ html { - color: black; - background: white; + color: white; + background: #131516; font-size: 1em; line-height: 1.4; - font-family: 'Open Sans', sans-serif; - font-weight: bold; + font-family: input-sans,sans-serif; + font-weight: 500; } /* @@ -266,181 +266,60 @@ textarea { } } -.mw-960 { - max-width: 1100px; - margin: 0 auto; - padding: 12px; + +.m-hidden { + display: none; } -.flex { +nav.show { + flex-shrink: 0; display: flex; + flex-direction: column; + flex: 0 100%; } header { - background-color: #000; -} - -#header-flex { + display: flex; justify-content: space-between; align-items: center; - height: 70px; - padding: 0 12px; -} - -header .logo img{ - height: 27px; -} - -nav { - display: none; -} -nav a { - color: #bbb; - text-decoration: none; - font-size: 12px; - font-weight: bold; -} - -main { - background: linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%), url(../img/u2_state0.jpg); - background-size: cover; - background-position: center; - color: white; - padding: 110px 24px; -} - -.left { - font-family: Raleway; - font-weight: normal; - margin-bottom: 24px; -} - -.left .logo img { - height: 60px; -} - -.left h1 { - font-weight: normal; - text-transform: uppercase; - font-size: 32px; -} - -.left p{ - font-weight: 200; - font-size: 12px; - padding: 30px 0; -} - -.left hr { - border-top: 2px solid white; - width: 64px; + padding: 24px 12px; + flex-wrap: wrap; } -.white-outline { - background: none; - border: 2px solid #fff; - color: white; - font-family: Open Sans; - padding: 15px 31px; - width: 100%; -} -form { - display: flex; - flex-direction: column; - text-align: center; - background: #fff; - color: #000; - border-radius: 4px; -} -input { - border: none; - border-bottom: 1px solid rgba(0,0,0,.16); - height: 31px; - margin: 36px 45px; +header .iconify { + height: 24px; + width: 24px; } -button[type="submit"] { - background-color: #ff8b38; +a, a:visited { color: white; - border: none; - height: 54px; - font-weight: bolder; -} - -.desc h3 { - margin-bottom: 3px; } -.desc p{ - margin-top: 0; - font-weight: normal; - color: #86878b; - font-size: 12px; -} - -.socials .icons { - display: flex; - justify-content: space-between; - font-size: 24px; - color: #ccc; -} - -footer { - background-color: #000; - color: white; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 99px; +header a { + text-decoration: none; } -footer .icons { - display: flex; - justify-content: space-between; - width: 100%; +main { + padding: 12px; } -footer p{ - font-weight: normal; - opacity: 50%; - font-size: 12px; -} -@media only screen and (min-width: 768px) { - nav { - display: flex; - justify-content: space-between; - width: 40%; - } - footer .icons { - width: 40% - } - .content { - display: flex; - flex-direction: row; - justify-content: space-between; +@media screen and (min-width: 768px) { + .mobile { + display: none; } - .left { - margin-right: 24px; + .m-hidden { + display: initial; } - .right { - flex: 0 60%; + .mw-824 { + display: initial; } - .white-outline { - width: auto; + header nav a:after { + content:' |'; } - .socials { - display: flex; - } - .socials .desc { - flex: 0 30%; - } - .socials .icons { - font-size: 40px; - flex: 1; - align-items: center; - justify-content: space-around; + + header nav a:first-child:before { + content: '| ' } } \ No newline at end of file diff --git a/week-4/css/normalize.css b/midterm/css/normalize.css similarity index 100% rename from week-4/css/normalize.css rename to midterm/css/normalize.css diff --git a/week-4/favicon.ico b/midterm/favicon.ico similarity index 100% rename from week-4/favicon.ico rename to midterm/favicon.ico diff --git a/week-4/humans.txt b/midterm/humans.txt similarity index 100% rename from week-4/humans.txt rename to midterm/humans.txt diff --git a/week-4/icon.png b/midterm/icon.png similarity index 100% rename from week-4/icon.png rename to midterm/icon.png diff --git a/week-4/img/.gitignore b/midterm/img/.gitignore similarity index 100% rename from week-4/img/.gitignore rename to midterm/img/.gitignore diff --git a/week-4/img/logo.png b/midterm/img/logo.png similarity index 100% rename from week-4/img/logo.png rename to midterm/img/logo.png diff --git a/week-4/img/u2_state0.jpg b/midterm/img/u2_state0.jpg similarity index 100% rename from week-4/img/u2_state0.jpg rename to midterm/img/u2_state0.jpg diff --git a/midterm/index.html b/midterm/index.html new file mode 100644 index 0000000..0c3d2b5 --- /dev/null +++ b/midterm/index.html @@ -0,0 +1,63 @@ + + + + + + CSS Grid Showcase + + + + + + + + + + + + + + + + + + + +
+ +
+ CSS Grid Showcase +
+ +
+
+
+

The History of CSS Grid

+
+
+

Grid Container Properties

+
+
+

Grid Item Properties

+
+
+

Grid Generator

+
+
+ + + + + + + \ No newline at end of file diff --git a/midterm/js/main.js b/midterm/js/main.js new file mode 100644 index 0000000..a2fcfe4 --- /dev/null +++ b/midterm/js/main.js @@ -0,0 +1,14 @@ +let menuButton = document.querySelector('#nav-menu') +menuButton.addEventListener('click', toggleMenu) + +let navLinks = document.querySelector('#nav-links') +let navTitle = document.querySelector('.title') +function toggleMenu() { + if (navLinks.className == 'm-hidden') { + navLinks.className = 'show'; + // navTitle.className = 'hidden'; + } else { + // navTitle.className = 'show'; + navLinks.className = 'm-hidden'; + } +} \ No newline at end of file diff --git a/week-4/js/plugins.js b/midterm/js/plugins.js similarity index 100% rename from week-4/js/plugins.js rename to midterm/js/plugins.js diff --git a/week-4/js/vendor/jquery-3.4.1.min.js b/midterm/js/vendor/jquery-3.4.1.min.js similarity index 100% rename from week-4/js/vendor/jquery-3.4.1.min.js rename to midterm/js/vendor/jquery-3.4.1.min.js diff --git a/week-4/js/vendor/modernizr-3.8.0.min.js b/midterm/js/vendor/modernizr-3.8.0.min.js similarity index 100% rename from week-4/js/vendor/modernizr-3.8.0.min.js rename to midterm/js/vendor/modernizr-3.8.0.min.js diff --git a/week-4/robots.txt b/midterm/robots.txt similarity index 100% rename from week-4/robots.txt rename to midterm/robots.txt diff --git a/week-4/site.webmanifest b/midterm/site.webmanifest similarity index 100% rename from week-4/site.webmanifest rename to midterm/site.webmanifest diff --git a/week-4/js/main.js b/midterm/style.css similarity index 100% rename from week-4/js/main.js rename to midterm/style.css diff --git a/week-4/tile-wide.png b/midterm/tile-wide.png similarity index 100% rename from week-4/tile-wide.png rename to midterm/tile-wide.png diff --git a/week-4/tile.png b/midterm/tile.png similarity index 100% rename from week-4/tile.png rename to midterm/tile.png diff --git a/week-4/udacity.png b/midterm/udacity.png similarity index 100% rename from week-4/udacity.png rename to midterm/udacity.png diff --git a/picture-element-master/.gitignore b/picture-element-master/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/picture-element-master/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/picture-element-master/css/main.css b/picture-element-master/css/main.css new file mode 100644 index 0000000..6636457 --- /dev/null +++ b/picture-element-master/css/main.css @@ -0,0 +1,66 @@ +body { + font-family: Arial, Helvetica, sans-serif; + margin: 1em; + background-color: azure +} +h1,h2, h3, h4, h5, h6 { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif +} + +a:link { + color: rgb(101, 101, 206); +} +a:hover{ + color:rgb(61, 61, 126); +} +a:visited { + color:rgb(107, 107, 121) +} + + +figure.quote { + color: #698b9c; + margin: 2em 1em; + background-color: white; + font-size: 1.25em; + border-left: 1px dotted rgb(139, 139, 207); + padding: 0 1em; +} +figcaption::before { + content: "— "; +} +figcaption { + line-height: 1.5em; +} +blockquote { + margin: 0; + padding: 0; +} + +code { + background-color: rgb(234, 234, 234); +} + +li { + margin-bottom: 1em; +} + +hr { + border: 1px dotted rgb(139, 139, 207); + margin: 2em; +} + + + +@media (min-width: 945px ) { + main { + display: flex; + } + main > article, main > aside { + width: 50%; + } + img { + float: right; + max-width: 100% + } +} \ No newline at end of file diff --git a/picture-element-master/images/art-large.jpg b/picture-element-master/images/art-large.jpg new file mode 100644 index 0000000..99d72cd Binary files /dev/null and b/picture-element-master/images/art-large.jpg differ diff --git a/picture-element-master/images/art-medium.jpg b/picture-element-master/images/art-medium.jpg new file mode 100644 index 0000000..f17b729 Binary files /dev/null and b/picture-element-master/images/art-medium.jpg differ diff --git a/picture-element-master/images/extralarge.jpg b/picture-element-master/images/extralarge.jpg new file mode 100644 index 0000000..bd738ae Binary files /dev/null and b/picture-element-master/images/extralarge.jpg differ diff --git a/picture-element-master/images/udacity.png b/picture-element-master/images/udacity.png new file mode 100644 index 0000000..beb792d Binary files /dev/null and b/picture-element-master/images/udacity.png differ diff --git a/picture-element-master/index.html b/picture-element-master/index.html new file mode 100644 index 0000000..ba34522 --- /dev/null +++ b/picture-element-master/index.html @@ -0,0 +1,51 @@ + + + + + + Picture Element Exercise + + + + + +
+
+

Using the <picture> Element

+
+
srcset if you’re lazy, picture if you’re crazy™
+
Mat Marquis
+
+ +

+ Using srcset and sizes is extremely easy, but it places all decisions in the hands of your web browser. + You may provide recommendations for the images that are served to your users, but ultimately it's the decision of the web browser. +

+ +

+ The picture element gives us significantly more control over the images that we serve to our users. As a result, it can be more time-consuming to + configure. +

+ +
+ +

Instructions

+
    +
  1. Add the picture element to the aside. Set one of our 3 images (in images/) to the default image.
    2. +
  2. Add a source that uses the large image at 945px.
    3. +
  3. Add a source that uses the extra large image at 1100px.
    4. +
  4. Publish this page and submit your link to HuskyCT.
    5. +
+
+ + + +
+ + \ No newline at end of file diff --git a/week-4/index.html b/week-4/index.html deleted file mode 100644 index 6c2d24e..0000000 --- a/week-4/index.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - Week 2 Assignment - - - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
-
-
-
- -

Modern Axure Template For Beautiful Prototypes

-
-

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus atque in ex itaque quae! Culpa voluptates odit aspernatur nihil labore. Eligendi odit delectus eos modi adipisci esse officiis minus commodi.

- -
-
-
-

Try your FREE Trial Today

- - - - -
-
-
-
-
-
-

Social Media

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.

-
-
- - - - - - - -
-
- - - - - - \ No newline at end of file