diff --git a/picture-element-leon/.gitignore b/picture-element-leon/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/picture-element-leon/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/picture-element-leon/css/main.css b/picture-element-leon/css/main.css new file mode 100644 index 0000000..6636457 --- /dev/null +++ b/picture-element-leon/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-leon/images/art-large.jpg b/picture-element-leon/images/art-large.jpg new file mode 100644 index 0000000..99d72cd Binary files /dev/null and b/picture-element-leon/images/art-large.jpg differ diff --git a/picture-element-leon/images/art-medium.jpg b/picture-element-leon/images/art-medium.jpg new file mode 100644 index 0000000..f17b729 Binary files /dev/null and b/picture-element-leon/images/art-medium.jpg differ diff --git a/picture-element-leon/images/extralarge.jpg b/picture-element-leon/images/extralarge.jpg new file mode 100644 index 0000000..bd738ae Binary files /dev/null and b/picture-element-leon/images/extralarge.jpg differ diff --git a/picture-element-leon/index.html b/picture-element-leon/index.html new file mode 100644 index 0000000..1e45aab --- /dev/null +++ b/picture-element-leon/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