- HTML
- CSS Layout
Let's duplicate an image using a given HTML page, index.html, and an inspiration image:
Challenge #1.1: Fork this repo and modify index.html and add your own CSS to make it look like the image above. Your CSS should be in a separate file called styles.css.
Goal #1.1: Add a custom stylesheet to index.html.
Challenge #1.2: Make sure your project is safe! Create a git repository containing your project files and upload it to Github. Goal #1.2: Submit your Github URL below.
Challenge #2.1: Let's practice writing some custom HTML as well. Follow the pattern in index.html and add 3 more Octocats to your web page. Use the Octodex at http://octodex.github.com if you need some images, or draw your own and include them in your Github repository!
Goal #2.1: Submit your updated Github URL below.
Challenge #3.1: Try making your web page responsive when the browser is resized. Here's a hint: consider what CSS rules you know that determine how many items are displayed inline. Goal #3.1: Submit your updated Github URL below.
- A Github URL containing:
index.htmlstyles.css
- A file called
index.htmlwith the following markup:
<!doctype html>
<html lang="en">
<head>
<title>Octodex</title>
<!-- link to your stylesheet -->
</head>
<body>
<ul class="octodex">
<li class="octocat">
<a href="proxy.php?url=https%3A%2F%2Foctodex.github.com%2Fsaritocat">
<img src="proxy.php?url=https%3A%2F%2Foctodex.github.com%2Fimages%2Fsaritocat.png" />
</a>
<div class="image-footer">
<span class="image-number">114</span>
<div class="image-caption">
<span>the</span>
<a href="proxy.php?url=https%3A%2F%2Foctodex.github.com%2Fsaritocat">Saritocat</a>
<span>by</span>
<ul class="authors">
<li>
<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2FJohnCreek">
<img src="proxy.php?url=https%3A%2F%2Fgithub.com%2FJohnCreek.png" />
</a>
</li>
</ul>
</div> <!-- .image-caption -->
</div> <!-- .image-footer -->
</li>
<li class="octocat">
<a href="proxy.php?url=https%3A%2F%2Foctodex.github.com%2Ftopguntocat">
<img src="proxy.php?url=https%3A%2F%2Foctodex.github.com%2Fimages%2Ftopguntocat.png" />
</a>
<div class="image-footer">
<span class="image-number">113</span>
<div class="image-caption">
<span>the</span>
<a href="proxy.php?url=https%3A%2F%2Foctodex.github.com%2Ftopguntocat">Topguntocat</a>
<span>by</span>
<ul class="authors">
<li>
<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fleereilly">
<img src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fleereilly.png" />
</a>
<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2Ftonyjaramillo">
<img src="proxy.php?url=https%3A%2F%2Fgithub.com%2Ftonyjaramillo.png" />
</a>
</li>
</ul>
</div> <!-- .image-caption -->
</div> <!-- .image-footer -->
</li>
<li class="octocat">
<a href="proxy.php?url=https%3A%2F%2Foctodex.github.com%2Fcarlostocat">
<img src="proxy.php?url=https%3A%2F%2Foctodex.github.com%2Fimages%2Fcarlostocat.gif" />
</a>
<div class="image-footer">
<span class="image-number">112</span>
<div class="image-caption">
<span>the</span>
<a href="proxy.php?url=https%3A%2F%2Foctodex.github.com%2Fcarlostocat">Carlostocat</a>
<span>by</span>
<ul class="authors">
<li>
<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fjeejkang">
<img src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fjeejkang.png" />
</a>
</li>
</ul>
</div> <!-- .image-caption -->
</div> <!-- .image-footer -->
</li>
</ul>
</body>
</html>