apple_clone/index.html at master · hackpacific/apple_clone · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- sets the character set your document should use to utf-8 -->
  <title>Apple</title>
  <!-- title tag defines what is shown on the tab of the browser -->
  <link href="style.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
  <header>
    <nav>
      <div class="container">
        <ul>
          <li><a href="" class="nav-link" id="nav-apple-logo"></a></li>
          <li><a href="" class="nav-link" id="nav-mac"></a></li>
          <li><a href="" class="nav-link" id="nav-ipad"></a></li>
          <li><a href="" class="nav-link" id="nav-iphone"></a></li>
          <li><a href="" class="nav-link" id="nav-watch"></a></li>
          <li><a href="" class="nav-link" id="nav-tv"></a></li>
          <li><a href="" class="nav-link" id="nav-music"></a></li>
          <li><a href="" class="nav-link" id="nav-support"></a></li>
          <li><a href="" class="nav-link" id="nav-search"></a></li>
          <li><a href="" class="nav-link" id="nav-shop"></a></li>
        </ul>
      </div>
    </nav>
  </header>

  <div class="container hero">
    <div id="product-img">
    </div>
    <div id="product-info">
      <h1 id="product-name"></h1>
      <h2 id="product-text">The only thing that’s changed is everything.</h2>
      <ul id="product-links">
        <li><a href="">Learn more  &#62;</a></li>
        <li><a href="">Watch the film  <i class="fa fa-play-circle-o"></i></a></li>
      </ul>
    </div>
  </div>

  <div class="hero-sub-section">
    <div class="col-3 hero-sub-images" id="hero-sub-watch"></div><!--
    --><div class="col-3 hero-sub-images" id="hero-sub-ipad"></div><!--
    --><div class="col-3 hero-sub-images" id="hero-sub-access"></div><!--
    --><div class="col-3 hero-sub-images" id="hero-sub-macbook"></div>
    <div>
      <p id="exchange"><a href="">AC Wall Plug Adapter Recall Program  &#62;</a></p>
    </div>
  </div>

  <footer>
    <div class="container">
      <div class="footer-nav">
        <div class="col-2">
          <ul>
            <li>Shop and Learn</li>
            <li><a href="">Mac</a></li>
            <li><a href="">iPad</a></li>
            <li><a href="">iPhone</a></li>
            <li><a href="">Watch</a></li>
            <li><a href="">TV</a></li>
            <li><a href="">Music</a></li>
            <li><a href="">iTunes</a></li>
            <li><a href="">iPod</a></li>
            <li><a href="">Accessories</a></li>
            <li><a href="">Gift Cards</a></li>
          </ul>
        </div><!--
        --><div class="col-2">
          <ul>
            <li>Apple Store</li>
            <li><a href="">Find a Store</a></li>
            <li><a href="">Genius Bar</a></li>
            <li><a href="">Workshops and Learning</a></li>
            <li><a href="">Youth Programs</a></li>
            <li><a href="">Apple Store App</a></li>
            <li><a href="">Refurbished</a></li>
            <li><a href="">Financing</a></li>
            <li><a href="">Reuse and Recycling</a></li>
            <li><a href="">Order Status</a></li>
            <li><a href="">Shopping Help</a></li>
          </ul>
        </div><!--
        --><div class="col-2">
          <ul>
            <li>For Education</li>
            <li><a href="">Apple and Education</a></li>
            <li><a href="">Shop for College</a></li>
          </ul>
          <ul>
            <li>For Business</li>
            <li><a href="">iPhone in Business</a></li>
            <li><a href="">iPad in Business</a></li>
            <li><a href="">Mac in Business</a></li>
            <li><a href="">Shop for Your Business</a></li>
          </ul>
        </div><!--
        --><div class="col-2">
          <ul>
            <li>Account</li>
            <li><a href="">Manage Your Apple ID</a></li>
            <li><a href="">Apple Store Account</a></li>
            <li><a href="">iCloud.com</a></li>
          </ul>
          <ul>
            <li>Apple Values</li>
            <li><a href="">Environment</a></li>
            <li><a href="">Supplier Responsibility</a></li>
            <li><a href="">Accessibility</a></li>
            <li><a href="">Privacy</a></li>
            <li><a href="">Inclusion and Diversity</a></li>
            <li><a href="">Education</a></li>
          </ul>
        </div><!--
        --><div class="col-2">
          <ul>
            <li>About Apple</li>
            <li><a href="">Apple Info</a></li>
            <li><a href="">Job Opportunities</a></li>
            <li><a href="">Press Info</a></li>
            <li><a href="">Investors</a></li>
            <li><a href="">Events</a></li>
            <li><a href="">Hot News</a></li>
            <li><a href="">Legal</a></li>
            <li><a href="">Contact Apple</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-help">
        <p>More ways to shop: Visit an <a href="">Apple Store</a>, call 1-800-MY-APPLE, or <a href="">find a reseller</a>.</p>
        <div id="legal">Copyright © 2016 Apple Inc. All rights reserved.</div>
        <div id="legal-links">
          <a href="">Privacy Policy</a>
          <a href="">Terms of Use</a>
          <a href="">Sales and Refunds</a>
          <a href="">Site Map</a>
        </div>
        <div id="locale">
          <a href="">
            <span id="locale-flag"></span>
          </a>
          <a href="">
            United States
          </a>
        </div>
      </div>
    </div>
  </footer>
</body>
</html>