Skip to content

Commit 3ee5f86

Browse files
dshcheungdshcheung
committed
feat(solution)
1 parent 946ccb7 commit 3ee5f86

File tree

9 files changed

+109
-0
lines changed

9 files changed

+109
-0
lines changed

‎solution-code/css/main.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/*
2+
Colors to use:
3+
dark blue: #06365f
4+
light blue: #1c5380
5+
*/
6+
7+
/*Body CSS*/
8+
body {
9+
background: #fff url('../images/bgtile.png') repeat-x;
10+
font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
11+
margin: 0 auto;
12+
padding-top: 90px;
13+
padding-left: 10px;
14+
padding: right: 10px;
15+
width: 880px;
16+
}
17+
18+
/*Main CSS*/
19+
main section.section-right {
20+
float: right;
21+
width: 500px;
22+
}
23+
24+
main section.section-right article {
25+
background: url("../images/frame.png") no-repeat;
26+
padding: 40px;
27+
}
28+
29+
main section.section-right article h1 {
30+
color: #06365f;
31+
font-size: 27px;
32+
margin-top: 0;
33+
line-height: 1.3;
34+
}
35+
36+
/*Footer CSS*/
37+
footer ul {
38+
clear: both;
39+
list-style: none;
40+
margin: 0 0 20px;
41+
padding: 0;
42+
text-align: center;
43+
}
44+
45+
footer ul li {
46+
color: #999;
47+
display: inline;
48+
font-size: 11px;
49+
font-weight: bold;
50+
margin: 0 10px;
51+
text-transform: uppercase;
52+
}
53+
54+
footer ul li a {
55+
color: #1c5380;
56+
text-decoration: none;
57+
}
58+
59+
footer ul li a:hover {
60+
text-decoration: underline;
61+
}

‎solution-code/images/badge-android.png‎

5.39 KB
Loading

‎solution-code/images/badge-iphone.png‎

5.54 KB
Loading

‎solution-code/images/bgtile.png‎

129 Bytes
Loading

‎solution-code/images/brand.png‎

24.6 KB
Loading

‎solution-code/images/frame.png‎

2.94 KB
Loading

‎solution-code/images/home.png‎

811 Bytes
Loading

‎solution-code/images/phones.png‎

203 KB
Loading

‎solution-code/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Instagram</title>
5+
<link rel="stylesheet" href="css/main.css">
6+
</head>
7+
<body>
8+
9+
<main>
10+
<section class="section-right">
11+
<img src="images/brand.png" alt="Instagram">
12+
13+
<article>
14+
<h1>Capture and Share<br>the World's Moments</h1>
15+
16+
<p>Instagram is a <b>fast</b>, <b>beautiful</b> and <b>fun</b> way to share your life with friends and family.</p>
17+
18+
<p>Take a picture or video, choose a filter to transform its look and feel, then post to Instagram &mdash; it's that easy. You can even share to Facebook, Twitter, Tumblr and more. It's a new way to see the world.</p>
19+
20+
<p>Oh yeah, did we mention it's free?</p>
21+
22+
<a href="#"><img src="images/badge-iphone.png" alt="Download on the App Store"></a>
23+
<a href="#"><img src="images/badge-android.png" alt="Get it on Google Play"></a>
24+
</article>
25+
</section>
26+
27+
<section class="section-left">
28+
<img src="images/phones.png" alt="Product Photo">
29+
</section>
30+
31+
</main>
32+
33+
<footer>
34+
<ul>
35+
<li><a href="#">About Us</a></li>
36+
<li><a href="#">Support</a></li>
37+
<li><a href="#">Blog</a></li>
38+
<li><a href="#">Press</a></li>
39+
<li><a href="#">API</a></li>
40+
<li><a href="#">Jobs</a></li>
41+
<li><a href="#">Privacy</a></li>
42+
<li><a href="#">Terms</a></li>
43+
<li>&copy; 2014 Instagram</li>
44+
</ul>
45+
</footer>
46+
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)