appleclone/index.html at master · simandebvu/appleclone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple</title>
    <script src="https://kit.fontawesome.com/4c68ce4f85.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <header class="main-header">
            <div class="header-content">
                <nav class="nav-bar">
                    <ul>
                        <li>
                            <a href="#"><i class="nav-logo fab fa-apple"></i></a>
                        </li>
                        <li>
                            <a href="#">Store</a>
                        </li>
                        <li>
                            <a href="#">Mac</a>
                        </li>
                        <li>
                            <a href="#">iPod</a>
                        </li>
                        <li>
                            <a href="#">iPhone</a>
                        </li>
                        <li>
                            <a href="#">iPad</a>
                        </li>
                        <li>
                            <a href="#">iTunes</a>
                        </li>
                        <li>
                            <a href="#">Support</a>
                        </li>
                        <li class="search-bar">
                            <span class="search-icon material-icons">search</span>
                            <input type="text" name="search" class="nav-search">
                        </li>
                    </ul>
                </nav>
                <div class="header-main">
                    <h1>What will your verse be?</h1>
                </div>
                <div class="header-sub-text">
                    <h4>Everyone has something to share. See how people are using iPad in their unique ways to add to the worlds story.</h4>
                    <br>
                    <div class="header-watch">
                        <a href="#" class="film-link">Watch the "Your Verse" film and explore the stories.<span class="material-icons">
                        play_arrow
                        </span></a></div>
                </div>
            </div>
        </header>
        <aside class="blog-links">
            <a href="#5c" class="image-blog-link iphone-5c"></a>
            <a href="#5s" class="image-blog-link iphone-5s"></a>
            <a href="#30" class="image-blog-link years"></a>
            <a href="#mac" class="image-blog-link supplier"></a>
        </aside>
    </div>
    <footer class="footer">
        <div class="footer-shop">
            Shop the <span class="footer-inline-link"><a href="#">Apple Online Store</a></span> (1-800-MY-APPLE), visit an Apple Retail Store, or find a <span class="footer-inline-link"><a href="#">reseller.</a></span>
        </div>
        <div class="footer-links">
            <ul>
                <li class="footer-link"><a href="#">Site Map |</a></li>
                <li class="footer-link"><a href="#">Hot News |</a></li>
                <li class="footer-link"><a href="#">RSS Feeds |</a></li>
                <li class="footer-link"><a href="#">Media Info |</a></li>
                <li class="footer-link"><a href="#">Environment |</a></li>
                <li class="footer-link"><a href="#">Job Opportunities |</a></li>
                <li class="footer-link"><a href="#">Contact Us |</a></li>
                <li class="footer-link "><a href="#"><span class="material-icons footer-icon">
                    flag
                    </span></a>
                </li>
            </ul>
        </div>
        <div class="footer-copyright">
            Copyright © 2014 Apple Inc. All rights reserved.
            <div class="footer-links">
                <ul>
                    <li class="footer-link-copyright"><a href="#">Terms Of Use |</a></li>
                    <li class="footer-link-copyright"><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </footer>
</body>

</html>