Can you fix the CSS?

kt32291 · Oct 5, 2013 · bf91091 · bf91091
commit bf91091
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 0 deletions.
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,35 @@
+/* Base */
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  color: white;
+}
+
+
+/* Layout */
+.weather {
+  width: 320px;
+  height: 568px;
+  background: url(../img/clear-skies.jpg) 0 0 no-repeat;
+  margin: 100px auto;
+}
+
+.group {
+  padding: 15px;
+  border-bottom: 1px solid #b1dafa;
+}
+
+/* Now */
+.now {
+  padding: 60px 0 30px 0;
+  text-align: center;
+}
+
+.now h1 {
+  font-size: 24px;
+  margin-bottom: 5px;
+}
+
+.now h2 {
+  font-size: 72px;
+}
diff --git a/css/reset.css b/css/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/img/clear-skies.jpg b/img/clear-skies.jpg
diff --git a/img/close.png b/img/close.png
diff --git a/img/icon_cloudy.png b/img/icon_cloudy.png
diff --git a/img/icon_rain.png b/img/icon_rain.png
diff --git a/img/icon_sunny.png b/img/icon_sunny.png
diff --git a/img/thunderstorm.jpg b/img/thunderstorm.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,71 @@
+<html>
+<head>
+  <title>iOS 7 Weather</title>
+  <link rel="stylesheet" href="css/reset.css">
+  <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+  <article class="weather thunderstorm">
+
+    <header class="now">
+      <h1>Chicago</h1>
+      <h3>Storms</h3>
+      <h2>74&deg;</h2>
+    </header>
+
+    <section class="today">
+      <header class="group">
+        <h3>Today</h3>
+        84 / 72
+      </header>
+
+      <div class="hours group">
+        <div class="hour current rain">
+          <h4>Now</h4>
+          74
+        </div>
+        <div class="hour cloudy">
+          <h4>9am</h4>
+          76
+        </div>
+        <div class="hour cloudy">
+          <h4>11am</h4>
+          80
+        </div>
+        <div class="hour rain">
+          <h4>1pm</h4>
+          84
+        </div>
+        <div class="hour">
+          <h4>3pm</h4>
+          83
+        </div>
+        <br class="clear">
+      </div>
+    </section>
+
+    <section class="week group">
+      <div class="day">
+        <h4>Thursday</h4>
+        82 / 71
+      </div>
+      <div class="day rain">
+        <h4>Friday</h4>
+        79 / 65
+      </div>
+      <div class="day rain">
+        <h4>Saturday</h4>
+        77 / 67
+      </div>
+      <div class="day cloudy">
+        <h4>Sunday</h4>
+        79 / 70
+      </div>
+      <div class="day">
+        <h4>Monday</h4>
+        78 / 67
+      </div>
+    </section>
+  </article>
+</body>
+</html>