Art Gallery

Even though the internet started with just text, it is a lot more interesting and useful when we can pass images around the world. In this challenge you will pull images in from other servers and display them on your page.

Goal

• Make an "art gallery" like this, putting images on a wall and in frames

Example

Example on codepen: "Art Gallery": https://codepen.io/joe_bacal/pen/MvwyBW

Clues

Image elements just have one "self-closing" tag

• The src attribute tells us where to find the image.
• You can always store images on your own server, but you can also "hotlink" to other images on the internet

<img src="http://bit.ly/2tDDiBs">

You can get free-to-use images from wikimedia commons

1. Go to: https://commons.wikimedia.org/wiki/Category:Images
2. Find an image and right click it to copy the images address on the internet
3. You can shorten the link at https://bitly.com/

You can give each frame more than one class.

• They can all share a "frame" class, and each have their own class as well.
• This div has a class called frame that it shares with all frames, and frame-one which makes it unique.

<div class="frame frame-one"></div>

Control the frame, not the image

• It's easier to put images in a wrapper and control the wrapper than it is to control the image on its own.
• This way we can tell all the images how to behave, and control each wrapper

<div class="frame frame-one">
  <img src="http://bit.ly/2tJR9ua">
</div>

• This CSS rule selects "all the images you can find inside a an element with the class frame.

.frame img {
  width:100%;
}

• With all our frames behaving in a similar way, we can "talk to" each frame individually like this:

.frame-one {
  width:120px;
  margin-top:60px;
}

.frame-two {
  width:300px;
}

Complete Code

html

<div class="frame frame-one">
  <img src="http://bit.ly/2tJR9ua">
</div>

<div class="frame frame-two">
  <img src="http://bit.ly/2tDDiBs">
</div>

<div class="frame frame-three">
  <img src="http://bit.ly/2tDulrC">
</div>

css

.frame {
  padding:10px;
  border:6px solid brown;
  background-color:beige;
  margin:15px;
  float:left;
  box-shadow: 5px 5px 5px #888888;
}

.frame img {
  width:100%;
}

.frame-one {
  width:120px;
  margin-top:60px;
}

.frame-two {
  width:300px;
}

.frame-three {
  width:100px;
  margin-top:30px;
}