Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
added hw for this week
  • Loading branch information
paigeleon committed Mar 29, 2020
1 parent b041897 commit 394968d
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 0 deletions.
1 change: 1 addition & 0 deletions picture-element-leon/.gitignore
@@ -0,0 +1 @@
.DS_Store
66 changes: 66 additions & 0 deletions 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%
}
}
Binary file added picture-element-leon/images/art-large.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added picture-element-leon/images/art-medium.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added picture-element-leon/images/extralarge.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 51 additions & 0 deletions picture-element-leon/index.html
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Picture Element Exercise</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
</head>
<body>
<main>
<article>
<h1>Using the &lt;picture&gt; Element</h1>
<figure class="quote">
<blockquote><code>srcset</code> if you’re lazy, <code>picture</code> if you’re crazy™</blockquote>
<figcaption><a href="https://twitter.com/wilto">Mat Marquis</a></figcaption>
</figure>

<p>
Using <code>srcset</code> and <code>sizes</code> 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.
</p>

<p>
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.
</p>

<hr>

<h2>Instructions</h2>
<ol>
<li>Add the <code>picture</code> element to the <code>aside</code>. Set one of our 3 images (in <code>images/</code>) to the default image.</li>
<li>Add a <code>source</code> that uses the large image at 945px.</li>
<li>Add a <code>source</code> that uses the extra large image at 1100px.</li>
<li>Publish this page and submit your link to HuskyCT.</li>
</ol>
</article>

<aside>
<picture>
<source media = "(min-width: 1100px)" srcset="images/extralarge.jpg">
<source media="(min-width: 945px)" srcset="images/art-large.jpg">
<img src="images/art-medium.jpg" alt="">
</picture>
</aside>

</main>
</body>
</html>

0 comments on commit 394968d

Please sign in to comment.