<div id="button-container"> <a class="button" href="https://codepen.io/DevWars/pen/WvyXYQ" target="_blank">View Week 2's challenge</a> <a class="button" href="https://www.reddit.com/r/DevWars/comments/3e3vkq/week_2_devwars_weekly_challenge_discussion_and/" target="_blank">Discuss Week 2's challenge</a> <a class="button" href="http://www.devwars.tv/games" target="_blank">Play in the next DevWars!</a> </div>> <div class="tip"> <h3>Beau's Top Tips</h3> <h4>Click me!</h4> <ul id="tiplist"> <li>Padding is good for a lot of cases, but sometimes it is better to use line-height. Choose wisely!</li> <li>There are APIs for a variety of things that will make your life easier. It may be worth looking into a weather API!</li> <li>Animations can be great if used subtly. Give it a try!</li> <li>If you struggle with spritesheets, look into <b>background-position: X Y;</b></li> <li>Google is your friend! If you ever get stuck, remember that someone has probably already had the same issue before.</li> </ul> </div> <div id="container"> <div id="container-header"> <a href="http://www.devwars.tv" target="_blank"><img id="logo" src="https://i.imgur.com/GpeUKZU.png"/></a> <h1>Welcome to the DevWars weekly challenge!</h1> <h2>(Week 3)</h2> </div> <div id="content"> <img id="challenge-image" src="https://i.imgur.com/woC7RA9.png"/> <p class="hint">(Click the image to see it more clearly!)</p> <p>It seems that last's weeks challenge was a little bit too much! Not everyone has time to create something as complicated as a Hangouts replica. Luckily this week we've toned it down.</p> <p>Here we have a weather widget. Let's see if you recreate it! <a href="http://www.favepixels.com/translucent-weather-widget-psd/">It's supplied by favepixels.com</a>. You can even download the PSD if you like! <a href="https://i.imgur.com/93NPLK2.png">We've made a spritesheet (from Meteocons)</a> to help you with the weather icons.</p> <p>Fancy an extra challenge? Try to make it actually work! Or offer weather based on the location of the person using it!</p> <p>As ever, please save your results here on CodePen, and when saving, use the tag "DevWarsWeek3". We'll take a look at them next week <a href="http://www.reddit.com/r/devwars" target="_blank">on our subreddit</a> & <a href="http://devwars.us10.list-manage.com/subscribe/post?u=0719cdf11a95678dd04e5db33&id=02e4f24ca1" target="_blank">via our mailing list</a>, and talk about who we thought did the best, and the different ways it could have been recreated!</p> <h2>Good Luck!</h2> </div> </div> <div id="linkblock"> <a href="https://www.reddit.com/r/DevWars/" target="_blank"><i class="fa fa-reddit"></i></a> <a href="https://www.facebook.com/DevWars/" target="_blank"><i class="fa fa-facebook"></i></a> <a href="https://twitter.com/devwarstv" target="_blank"><i class="fa fa-twitter"></i></a> <a href="https://www.youtube.com/devwars" target="_blank"><i class="fa fa-youtube"></i></a> <a href="https://www.youtube.com/devwars" target="_blank"><i class="fa fa-twitch"></i></a> <a href="http://www.devwars.tv" target="_blank"><img src="https://i.imgur.com/RikvFbh.png"/></a> </div>

!