iPhoneX/index.html at main · gitsteve0/iPhoneX · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iphone XS</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="vendor/aos/aos.css">
</head>
<body class="bg-black">

    <div class="text-center">
        <div class="container-lg pt-5">
            <div data-aos="fade-up" data-aos-duration="800" class="col-11 col-md-9 col-lg-8 text-gold display-2 fw-normal mx-auto">iPhone XS and iPhone XS Max:</div>
            <div data-aos="fade-up" data-aos-duration="800" class="col-10 fs-3 text-uppercase text-white opacity-75 py-2 py-md-1 mx-auto">Everything you need to know!</div>
            <div data-aos="fade-up" data-aos-duration="2000" class="col-11 col-md-9 col-lg-5 opacity-75 mx-auto py-4 pb-md-0">Looking to learn a little bit more about what's happening with the new iPhone XS and iPhone XS Max? We've got you covered!</div>
        </div>
        <img data-aos="fade-up" class="col-12 img-fluid" src="img/1.png" alt="image">
    </div>

    <div class="py-5">
        <div class="py-lg-5 text-end bg-img-2">
            <div class="container-lg pt-6 pe-3 pe-md-4 pe-lg-0">
                <div data-aos="fade-up" data-aos-duration="800" class="col-11 col-md-9 col-lg-5 display-5 lh-1 text-gold py-3 ms-auto">What's the difference between the iPhone XS and iPhone XS Max?</div>
                <div data-aos="fade-up" data-aos-duration="800" class="col-11 col-md-9 col-lg-5 fs-6 opacity-75 text-light ms-auto">iPhone XS has a 5.8-inch OLED display and iPhone XS Max has a 6.5-inch OLED display, meaning the iPhone XS Max is large: however, other than that, there is no difference between the two new phones on the inside.</div>
            </div>
        </div>
    </div>

    <div class="container-lg text-white py-5 ps-4 ps-lg-0">
        <div class="row g-5">
            <div class="col-10 col-md">
                <div data-aos="fade-up" data-aos-duration="800" class="py-2">
                    <div class="fs-2 py-2">The Insides</div>
                    <div class="opacity-75">The iPhone XS and iPhone XS Max use the new A12 Bionic chip. Both phones have a 6-core CPU and a 4-core GPU, both of which are faster and more powerful than iPhone X from last year</div>
                </div>
                <div data-aos="fade-up" data-aos-duration="800" class="py-2">
                    <div class="fs-2 pb-2">The Camera</div>
                    <div class="opacity-75">The iPhone XS and iPhone XS Max both come with a dual camera system on the back that consists of an f1.8 12MP wide-angle lens and f2.4 12MP telephoto lens.</div>
                </div>
            </div>
            <div data-aos="fade-up" data-aos-duration="800" class="col-10 col-md mt-0 mt-md-5">
                <div class="py-2">
                    <div class="fs-2 pb-2">The Video</div>
                    <div class="pb-4 opacity-75">The video capabilities are the same as the last years iPhone X. meaning you can expact the iPhone XS and iPhone XS Max to have the following video specs:</div>
                    <ul class="opacity-75 ps-3">
                        <li>4K video recording at 24 fps, 30 fps or 60 fps</li>
                        <li>1080p HD video recording at 30 fps or 60 fps</li>
                        <li>720p HD video recording at 30 fps</li>
                        <li>Optical image stabilization for video</li>
                        <li>Slo-mo video support for 1080p at 120 fps or 240 fps</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container-lg py-lg-5">
        <div class="row text-white text-center align-items-end py-5">
            <div class="col-12 col-md pb-5">
                <img data-aos="fade-up" data-aos-duration="800" class="img-fluid" src="img/3.png" alt="phone">
                <div data-aos="fade-up" data-aos-duration="800" class="fs-3">iPhone Xs Max</div>
                <div data-aos="fade-up" data-aos-duration="800" class="fs-5">6.5" display1</div>
            </div>
            <div class="col-12 col-md pb-5">
                <img data-aos="fade-up" data-aos-duration="800" class="img-fluid pb-2" src="img/4.png" alt="phone">
                <div data-aos="fade-up" data-aos-duration="800" class="fs-3">iPhone Xs</div>
                <div data-aos="fade-up" data-aos-duration="800" class="fs-5">5.8" display1</div>
            </div>
            <div class="col-12 col-md pb-5">
                <img data-aos="fade-up" data-aos-duration="800" class="img-fluid" src="img/5.png" alt="phone">
                <div data-aos="fade-up" data-aos-duration="800" class="fs-3">iPhone Xr</div>
                <div data-aos="fade-up" data-aos-duration="800" class="fs-5">6.1" display1</div>
            </div>
        </div>
    </div>

    <div class="bg-img-3">
        <div class="container-lg py-5 ps-4 ps-lg-0">
            <div class="py-5">
                <div class="col-11 col-md-8 col-lg-7 py-5 my-3 ps-2 ps-md-0">
                    <div data-aos="fade-up" data-aos-duration="800" class="pb-5 ps-3 ps-md-0">
                        <div class="text-gold fs-1 py-3">Exceptional materials</div>
                        <div class="col-11 col-md-11 text-white fs-5 opacity-75">The most durable front glass ever in a smartphone. Precision-machined, aerospace-grade aluminium bands. Water  and dustresistance. And six stunning new finishes.</div>
                    </div>
                    <div class="row lh-sm py-2 ps-3 ps-md-0">
                        <div data-aos="fade-up" data-aos-duration="800" class="col-11 col-md-6 col-lg pb-3 pb-md-0">
                            <div class="col-10 text-gold fs-4 py-3">Seven-layer color process</div>
                            <div class="col-10 text-white opacity-75">The beautiful finishes of the black glass are achieved using an advanced process that allows for deep, rich colors.</div>
                        </div>
                        <div data-aos="fade-up" data-aos-duration="800" class="col-11 col-md-6 col-lg pb-3 pb-md-0">
                            <div class="text-gold fs-4 py-3">Aerospace-grade aluminium bands</div>
                            <div class="col-md-11 col-lg-12 text-white opacity-75">A special apple designed alloy is precision-machined to create structural bands, and anodized to complement the color of the back glass.</div>
                        </div>
                        <div data-aos="fade-up" data-aos-duration="800" class="col-11 col-md-8 col-lg ps-lg-5">
                            <div class="col-10 text-gold fs-4 py-3">Wireless charging</div>
                            <div class="col-10 text-white opacity-75">The glass back allows iPhone XR to charge easily and wirelessly.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div data-aos="fade-up" data-aos-duration="800" class="container-lg pt-5 text-white ps-4 ps-lg-0">
        <div class="col-11 col-md-9 col-lg-5 fs-1 fw-normal">Advanced face ID</div>
        <div class="col-md-6 col-lg-4 fs-4 text-uppercase text-light py-2">Security is simple when your face is your passwoord.</div>
        <div class="col-12 col-md-8 col-lg-5 opacity-75">You can unlock your phone, log in to apps, and pay for things with a glance. It's the most secure facial authentication ever in a smartphone. And now it's even faster.</div>
    </div>

    <div class="col-11 col-md-9 col-lg-7 ms-auto pt-4 pt-lg-0">
        <div class=""><img class="img-fluid" src="img/7.png" alt="img"></div>
    </div>
    <div data-aos="fade-up" data-aos-duration="800" class="container-lg px-0 py-3 py-md-4 py-lg-5">
        <img class="img-fluid" src="img/8.png" alt="image">
    </div>

    <div class="container-lg text-center">
        <div class="col-10 col-md-7 col-lg-6 display-2 fw-normal lh-1 text-gold mx-auto">No other phone is like iPhone</div>
        <div data-aos="fade-up" data-aos-duration="800" class="col-11 col-md-8 col-lg-5 fs-4 text-white opacity-75 text-uppercase mx-auto py-2">Every decision that goes into iPhone makes it stand apart</div>
        <div data-aos="fade-up" data-aos-duration="800" class="col-11 col-md-8 col-lg-6 py-3 pb-5 mx-auto">From the way it's made, to the way we build privacy and security from the start, to the innovative ways we recycle the components</div>
    </div>

    <div class="container-lg py-3 py-md-5">
        <div class="row px-3">
            <div class="col-12 col-md row mx-auto p-0">
                <img class="col-6 col-md-12 p-0 img-fluid" src="img/9.jpg" alt="image">
                <img class="col-6 col-md-12 p-0 img-fluid" src="img/12.jpg" alt="image">
            </div>
            <div class="col-12 col-md row mx-auto p-0">
                <img class="col-6 col-md-12 p-0 img-fluid" src="img/10.jpg" alt="image">
                <img class="col-6 col-md-12 p-0 img-fluid" src="img/13.jpg" alt="image">
            </div>
            <div class="col-12 col-md row mx-auto p-0">
                <img class="col-6 col-md-12 p-0 img-fluid" src="img/11.jpg" alt="image">
                <img class="col-6 col-md-12 p-0 img-fluid" src="img/14.jpg" alt="image">
            </div>
        </div>
    </div>

    <script src="js/bootstrap.bundle.js"></script>
    <script src="vendor/aos/aos.js"></script>
    <script>
        AOS.init({
            once: true,
        });
    </script>
</body>
</html>