Scribd
Upload
20 views55 pages

Cse 326 Ca3

The CA3 Project Report presents an innovative web platform designed to enhance the Apple iPhone experience, created by group members Nitya and Shweta. It utilizes HTML5/CSS3 for structure and styling, ensuring responsive design for various devices. The report includes code snippets for the homepage and gallery, showcasing features like audio controls and a comprehensive gallery of iPhone models.

Uploaded by

Nitya Mehta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views55 pages

Cse 326 Ca3

The CA3 Project Report presents an innovative web platform designed to enhance the Apple iPhone experience, created by group members Nitya and Shweta. It utilizes HTML5/CSS3 for structure and styling, ensuring responsive design for various devices. The report includes code snippets for the homepage and gallery, showcasing features like audio controls and a comprehensive gallery of iPhone models.

Uploaded by

Nitya Mehta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 55

CA3 Project Report

Group Members: Nitya , Shweta


Section: K23WT
Group: A
Subject: CSE326

I. INTRODUCTION
Welcome to world of apple, an innovative web platform designed to enhance and
elevate the Apple iPhone experience. In a world dominated by cutting-edge
technology, our project aims to create a seamless and interactive online space
tailored specifically for iPhone enthusiasts.

II. TECHNOLOGIES USED

• HTML5/CSS3: Standard markup and styling languages for structuring and


presenting content.
• Responsive Design: Ensures the website is accessible and looks good on a
variety of devices and screen sizes.

III. PROGRAM AND WEBSITE SNAPSHOTS


1. HOME
 Html code
2. <html>
3. <head>
4. <link rel="stylesheet" href="Av.css">
5. <title>Apple</title>
6. <link rel="preconnect" href="https://fonts.googleapis.com">
7. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8. <link href="https://fonts.googleapis.com/css2?
family=Glory&family=Josefin+Sans:wght@300;400&display=swap"
rel="stylesheet">
9. </head>
10. <body>
11. <section class="first">
12. <nav>
13. <div class="b-link">
14. <ul>
15. <li><a href="Index.html">Home</a></li>
16. <li><a href="gallery.html">Gallery</a></li>
17. <li><a href="timeline.html">Timeline</a></li>
18. <li><a href="feature.html">Features</a></li>
19. <li><a href="Av.html">More</a></li>
20.
21. </ul>
22. </div>
23.
24. </nav>
25. <div class="head">
26. <h1>Umm.. need some vedios</h1>
27. <h3>Don't worry just click these buttons</h3>
28. <!--linking and creating button-->
29. <div class="btn">
30. <a href="Vedios/Evo.mp4" target="_blank">
31. <button>Evolution(iPhones)</button>
32. </a>
33. <a href="Vedios/ICEvo.mp4" target="_blank">
34. <button>Evolution(Camera)</button>
35. </a>
36. <!--Linking and creating button end-->
37. </div>
38. </div>
39. </section>
40. <section class="content">
41. <h3>Some Audios here.!</h3>
42. </section>
43. <section class="ct">
44. <div class="written">
45. <h3>Ringtone</h3>
46. </div>
47. <div class="audio">
48. <audio controls>
49. <source src="Audio/Ring.mp3">
50. </audio>
51. </div>
52. </section>
53. <section class="ct1">
54. <div class="written">
55. <h3>Notification tone</h3>
56. </div>
57. <div class="audio">
58. <audio controls>
59. <source src="Audio/Notify.mp3">
60. </audio>
61. </div>
62. </div>
63. </section>
64. <section class="ct2">
65. <div class="written">
66. <h3>Message tone</h3>
67. </div>
68. <div class="audio">
69. <audio controls>
70. <source src="Audio/Ding.mp3">
71. </audio>
72. </div></section>
73. <section class="ct3">
74. <div class="written">
75. <h3>Message sent tone</h3>
76. </div>
77. <div class="audio">
78. <audio controls>
79. <source src="Audio/Sent.mp3">
80. Your browser does not support the audio element.
81. </audio></div>
82. </div></section>
83. </body>
84. </html>

 CSS code
*{

margin:0;
padding:0;
font-family: 'Glory', sans-serif;
font-family: 'Josefin Sans', sans-serif;

}
.first
{
background-image:linear-
gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(Images/im.jpg);
height:80vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
position:relative;
}
nav
{
padding:13px;

}
.b-link
{
text-align:center;
}
.b-link ul li
{
list-style: none;
display:inline-block;
}
.b-link ul li a
{
position: relative;
padding:8px 16px;
font-weight: bold;
text-decoration:none;
text-transform:uppercase;
color:#eae8f6;
font-size:18px;
text-shadow: 2px 2px grey;
}
.b-link ul li a:hover
{
color:#A5D8F3;
font-size: 25px;
}

.head
{
color:#eae8f6;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/*So that it will be in center */
text-align:center;
}
.head h1
{
font-size:50px;
text-shadow: 2px 2px grey;
}
.head h3
{
font-size:28px;
text-shadow: 2px 2px grey;
padding-top: 14px;
}
.Btn{
text-align: center;
padding-top: 50px;
}

.btn button{
font-size:18px;

padding:14px;
background-color: #688F4E;
color:#B1D182;
border-radius: 18px;
border:2px solid #B1D182;
text-decoration: none;

}
.btn button:hover
{

background-color:#B1D182;
box-shadow:0px 2px 8px 6px #688F4E;
color:#688F4E;
}
.content
{

text-align: center;
padding-top:80px;
color:#688F4E;
padding-bottom:80px;
font-size: 30px;
}
.ct{
background-image:linear-
gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(Images/r.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
display:flex;
/*so that they come in line*/
flex-wrap: wrap;
justify-content: space-between;
padding-top:40px;

}
.ct1{
background-image:linear-
gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(Images/ntf.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
display:flex;
/*so that they come in line*/
flex-wrap: wrap;
justify-content: space-between;
padding-top:40px;

}
.ct2{
background-image:linear-
gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(Images/nof.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
display:flex;
/*so that they come in line*/
flex-wrap: wrap;
justify-content: space-between;
padding-top:40px;
}
.ct3{
background-image:linear-
gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(Images/snt.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
display:flex;
/*so that they come in line*/
flex-wrap: wrap;
justify-content: space-between;
padding-top:40px;

}
.audio
{
padding-right: 100px;
color: black;
}
.audio:hover
{
transform: scale(1.3);

}
.written
{
padding-left: 100px;
font-size: 20px;
color:#688F4E;
shadow:2px solid #B1D182;

2. GALLERY
 Html code
<html>
<head>
<link rel="stylesheet" href="gallery.css">
<title>Apple</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Glory&family=Josefin+Sans:wght@300;400&display=swap"
rel="stylesheet">
</head>
<body>
<section class="first">
<nav>
<div class="b-link">
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="timeline.html">Timeline</a></li>

<li><a href="feature.html">Features</a></li>
<li><a href="Av.html">More</a></li>

</ul>
</div>

</nav>
<div class="head">
<h1>GALLERY</h1>
<p><b>Beyond the style</b></p>
<div class="head01">
<p><b>Explore more here</b></p>
</div>
</div>

</section>
<section class="written">

</section>
<section class="next">
<div class="gallery">
<div class="items">
<img src="Images/ip01.jpg" height="325" width="300">
<div class="des">Generation 1</div>
</div>
<div class="items">
<img src="Images/ip.3g.jpg" height="325" width="300">
<div class="des">iPhone 3G</div>
</div>
<div class="items">
<img src="Images/ip.3gs.jpg" height="325" width="300">
<div class="des">iPhone 3GS</div>
</div>
<div class="items">
<img src="Images/ip.4.jpg" height="325" width="300">
<div class="des">iPhone 4</div>
</div>
<div class="items">
<img src="Images/ip.4s.jpg" height="325" width="300">
<div class="des">iPhone 4S</div>
</div>
<div class="items">
<img src="Images/ip5.jpg" height="325" width="300">
<div class="des">iPhone 5</div>
</div>
<div class="items">
<img src="Images/ip5c.jpg" height="325" width="300">
<div class="des">iPhone 5C</div>
</div>
<div class="items">
<img src="Images/ip5s.jpg" height="325" width="300">
<div class="des">iPhone 5S</div>
</div>
<div class="items">
<img src="Images/ip6.jpg" height="325" width="300">
<div class="des">iPhone 6</div>
</div>
<div class="items">
<img src="Images/ip6+.jpg" height="325" width="300">
<div class="des">iPhone 6 Plus</div>
</div>
<div class="items">
<img src="Images/ip6s.jpg" height="325" width="300">
<div class="des">iPhone 6S</div>
</div>
<div class="items">
<img src="Images/ip6s+.jpg" height="325" width="300">
<div class="des">iPhone 6S Plus</div>
</div>
<div class="items">
<img src="Images/ip7.jpg" height="325" width="300">
<div class="des">iPhone 7</div>
</div>
<div class="items" >
<img src="Images/ip7+.jpg" height="325" width="300">
<div class="des">iPhone 7 Plus</div>
</div>
<div class="items">
<img src="Images/ip8.jpg" height="325" width="300">
<div class="des">iPhone 8</div>
</div>
<div class="items">
<img src="Images/ip8+.jpg"height="325" width="300">
<div class="des">iPhone 8 Plus</div>
</div>
<div class="items">
<img src="Images/ipse.jpg" height="325" width="300">
<div class="des">iPhone SE</div>
</div>
<div class="items">
<img src="Images/ipx.jpg" height="325" width="300">
<div class="des">iPhone X</div>
</div>
<div class="items">
<img src="Images/ipxs.jpg" height="325" width="300">
<div class="des">iPhone Xs</div>
</div>
<div class="items">
<img src="Images/ipxsmax.jpg" height="325" width="300">
<div class="des">iPhone Xs Max</div>
</div>
<div class="items">
<img src="Images/ipxr.jpg" height="325" width="300">
<div class="des">iPhone XR</div>
</div>
<div class="items">
<img src="Images/ip11.jpg" height="325" width="300">
<div class="des">iPhone 11</div>
</div>
<div class="items">
<img src="Images/ip11pro.jpg" height="325" width="300">
<div class="des">iPhone 11 Pro</div>
</div>
<div class="items">
<img src="Images/ip11promax.jpg" height="325" width="300">
<div class="des">iPhone 11 Pro Max</div>
</div>
<div class="items">
<img src="Images/ip12.jpg" height="325" width="300">
<div class="des">iPhone 12</div>
</div>
<div class="items">
<img src="Images/12mini.jpg" height="325" width="300">
<div class="des">iPhone 12 Mini</div>
</div>
<div class="items">
<img src="Images/12pro.jpg" height="325" width="300">
<div class="des">iPhone 12 Pro</div>
</div>
<div class="items">
<img src="Images/12prm.jpg" height="325" width="300">
<div class="des">iPhone 12 Pro Max</div>
</div>
<div class="items">
<img src="Images/133.jpg" height="325" width="300">
<div class="des">iPhone 13</div>
</div>
<div class="items">
<img src="Images/13m.jpg" height="325" width="300">
<div class="des">iPhone 13 mini</div>
</div>
<div class="items">
<img src="Images/13p.jpg" height="325" width="300">
<div class="des">iPhone 13 Pro</div>
</div>
<div class="items">
<img src="Images/13pm.jpg" height="325" width="300">
<div class="des">iPhone 13 Pro Max</div>
</div>
</div>
</section>

</body>
</html>

 CSS Code
*{

margin:0;
padding:0;
font-family: 'Glory', sans-serif;
font-family: 'Josefin Sans', sans-serif;

}
.first
{
background-image:linear-
gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(Images/BG.jpg);
height:60vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
position:relative;
}
nav
{
padding:13px;

}
.b-link
{
text-align:center;
}
.b-link ul li
{
list-style: none;
display:inline-block;
}
.b-link ul li a
{
position: relative;
padding:8px 16px;
font-weight: bold;
text-decoration:none;
text-transform:uppercase;
color:#eae8f6;
font-size:18px;
text-shadow: 2px 2px grey;
}
.b-link ul li a:hover
{
color:#A5D8F3;
font-size: 25px;
}
.head
{
color:#eae8f6;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/*So that it will be in center */
text-align:center;
}
.head h1
{
font-size:65px;
text-shadow: 2px 2px grey;
}
.head p
{
margin-top:20px;
font-size:25px;
text-shadow: 2px 2px grey;
}
.head01 p
{
margin-top: 40px;
font-size:30px;
text-shadow: 2px 2px grey;
}
.next
{
background-color: #eae8f6;
}
.gallery
{
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.items{
flex:auto;
margin:5px;
text-align: center;
border:1px solid black;
padding:12px;
}
.items:hover
{
transform: scale(1.3);
opacity:95%;
}

.des
{
text-align:center;
font-size:20px;
padding-top: 10px;
}

3. TIMELINE
 Html code
<html>
<head>
<link rel="stylesheet" href="detail.css">
<title>Apple</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Glory&family=Josefin+Sans:wght@300;400&display=swap"
rel="stylesheet">
</head>
<body>
<section class="first1">
<nav>
<div class="c-link">
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="detail.html">Identification</a></li>
<li><a href="feature.html">Features</a></li>

</ul>
</div>
</nav>
<div class="content1">
<h1>Identification and Details</h1>
</div>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 13 Pro</h3>
<img src="Images/13.jpeg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2021.</li>
<li><b>Capacity:</b> 128, 256, 512 GB, 1 TB.</li>
<li><b>Colors:</b> Graphite, gold, silver, sierra blue.</li>
<li><b>Model numbers:</b>A2483 (United States), A2636
(Canada, Japan, Mexico, Saudi Arabia), A2639 (mainland China, Hong Kong,
Macao), A2640 (Armenia, Belarus, Kazakhstan, Kyrgyzstan, Russia), A2638
(other countries and regions).</li>
</ul>
<h2>Details</h2>
<p> iPhone 13 Pro has a 6.1-inch1 all-screen Super Retina XDR
display with ProMotion. The back is textured matte glass, and there's a
flat-edge stainless steel band around the frame. The side button is on
the right side of the device. There are three 12 MP cameras on the back:
Ultra Wide, Wide, and Telephoto. There's a LiDAR Scanner on the back.
There's a Dual-LED True Tone flash on the back and a SIM tray on the left
side that holds a "fourth form factor" (4FF) nano-SIM card. The IMEI is
etched on the SIM tray.</p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 13</h3>
<img src="Images/13.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2021.</li>
<li><b>Capacity:</b> 128, 256, 512 GB.</li>
<li><b>Colors:</b>RED, starlight, midnight, blue, pink.</li>
<li><b>Model numbers:</b> A2482 (United States), A2631
(Canada, Japan, Mexico, Saudi Arabia), A2634 (mainland China, Hong Kong,
Macao), A2635 (Armenia, Belarus, Kazakhstan, Kyrgyzstan, Russia), A2633
(other countires and regions)</li>
</ul>
<h2>Details</h2>
<p> iPhone 13 has a 6.1-inch1 all-screen Super Retina XDR
display. The back is glass, and there's a flat-edged anodized aluminum
band around the frame. The side button is on the right side of the
device. There are two 12 MP cameras on the back: Ultra Wide and Wide.
There's a Dual-LED True Tone flash on the back and a SIM tray on the left
side that holds a "fourth form factor" (4FF) nano-SIM card. The IMEI is
etched on the SIM tray.</p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 13 Mini</h3>
<img src="Images/13.jpeg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2021.</li>
<li><b>Capacity:</b> 128, 256, 512 GB.</li>
<li><b>Colors:</b> RED, starlight, midnight, blue, pink.</li>
<li><b>Model numbers:</b>A2481 (United States), A2626
(Canada, Japan, Mexico, Saudi Arabia), A2629 (mainland China), A2630
(Armenia, Belarus, Armenia, Belarus, Kazakhstan, Kyrgyzstan, Russia),
A2628 (other countries and regions).</li>
</ul>
<h2>Details</h2>
<p> iPhone 13 mini has a 5.4-inch1 all-screen Super Retina XDR
display. The back is glass, and there's a flat-edged anodized aluminum
band around the frame. The side button is on the right side of the
device. There are two 12 MP cameras on the back: Ultra Wide and Wide.
There's a Dual-LED True Tone flash on the back and a SIM tray on the left
side that holds a "fourth form factor" (4FF) nano-SIM card. The IMEI is
etched on the SIM tray.</p>
</div>
</section>
</section>

<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 12 Pro Max</h3>
<img src="Images/12.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2020.</li>
<li><b>Capacity:</b> 128, 256, 512 GB.</li>
<li><b>Colors:</b> Silver, graphite, gold, pacific blue.</li>
<li><b>Model numbers:</b> A2342 (United States), A2410
(Canada, Japan), A2412 (China mainland, Hong Kong, Macao), A2411 (other
countries and regions).</li>
</ul>
<h2>Details</h2>
<p>iPhone 12 Pro Max has a 6.7-inch1 all-screen Super Retina XDR
display. The back is textured matte glass, and there's a flat-edge
stainless steel band around the frame. The side button is on the right
side of the device. There are three 12 MP cameras on the back: Ultra
Wide, Wide, and Telephoto. There's a LiDAR Scanner on the back. There's a
Dual-LED True Tone flash on the back and a SIM tray on the left side that
holds a "fourth form factor" (4FF) nano-SIM card. The IMEI is etched on
the SIM tray.</p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 12 Pro</h3>
<img src="Images/12.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2020.</li>
<li><b>Capacity:</b> 128, 256, 512 GB.</li>
<li><b>Colors:</b> Silver, graphite, gold, pacific blue.</li>
<li><b>Model numbers:</b>A2341 (United States), A2406
(Canada, Japan), A2408 (China mainland, Hong Kong, Macao), A2407 (other
countries and regions).</li>
</ul>
<h2>Details</h2>
<p> iPhone 12 Pro has a 6.1-inch1 all-screen Super Retina XDR
display. The back is textured matte glass, and there's a flat-edge
stainless steel band around the frame. The side button is on the right
side of the device. There are three 12 MP cameras on the back: Ultra
Wide, Wide, and Telephoto. There's a LiDAR Scanner on the back. There's a
Dual-LED True Tone flash on the back and a SIM tray on the left side that
holds a "fourth form factor" (4FF) nano-SIM card. The IMEI is etched on
the SIM tray.</p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 12</h3>
<img src="Images/12m.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2020.</li>
<li><b>Capacity:</b>64, 128, 256 GB.</li>
<li><b>Colors:</b> Black, white, (PRODUCT)RED, green, blue,
purple.</li>
<li><b>Model numbers:</b>A2172 (United States), A2402
(Canada, Japan), A2404 (China Mainland, Hong Kong, Macao), A2403 (other
countries and regions).</li>
</ul>
<h2>Details</h2>
<p>iPhone 12 has a 6.1-inch1 all-screen Super Retina XDR display.
The back is glass, and there's a flat-edged anodized aluminum band around
the frame. The side button is on the right side of the device. There are
two 12 MP cameras on the back: Ultra Wide and Wide. There's a Dual-LED
True Tone flash on the back and a SIM tray on the left side that holds a
"fourth form factor" (4FF) nano-SIM card. The IMEI is etched on the SIM
tray.</p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 12 Mini</h3>
<img src="Images/12m.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2020.</li>
<li><b>Capacity:</b> 64, 128, 256 GB.</li>
<li><b>Colors:</b> Black, white, (PRODUCT)RED, green, blue,
purple.</li>
<li><b>Model numbers:</b> A2176 (United States), A2398
(Canada, Japan), A2400 (China mainland), A2399 (other countries and
regions).</li>
</ul>
<h2>Details</h2>
<p>iPhone 12 mini has a 5.4-inch1 all-screen Super Retina XDR
display. The back is glass, and there's a flat-edged anodized aluminum
band around the frame. The side button is on the right side of the
device. There are two 12 MP cameras on the back: Ultra Wide and Wide.
There's a Dual-LED True Tone flash on the back and a SIM tray on the left
side that holds a "fourth form factor" (4FF) nano-SIM card. The IMEI is
etched on the SIM tray.</p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone SE (2nd generation)</h3>
<img src="Images/se2.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2020.</li>
<li><b>Capacity:</b>64, 128, 256 GB</li>
<li><b>Colors:</b> White, black, (PRODUCT)RED.</li>
<li><b>Model numbers:</b> A2275 (Canada, United States),
A2298 (China mainland), A2296 (other countries and regions).</li>
</ul>
<h2>Details</h2>
<p>The display is 4.7 inches (diagonal). The glass front is flat
with curved edges. The back is glass, and there's an anodized aluminum
band around the frame. The side button is on the right side of the
device. The device has a solid-state Home button with Touch ID. There's a
Quad-LED True Tone flash on the back and a SIM tray on the right side
that holds a "fourth form factor" (4FF) nano-SIM card. The IMEI is etched
on the SIM tray.</p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 11 Pro</h3>
<img src="Images/11p.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2019</li>
<li><b>Capacity:</b>64, 256, 512 GB.</li>
<li><b>Colors:</b>Silver, space gray, gold, midnight
green.</li>
<li><b>Model numbers:</b> A2160 (Canada, United States),
A2217 (China mainland, Hong Kong, Macao), A2215 (other countries and
regions).</li>
</ul>
<h2>Details</h2>
<p> iPhone 11 Pro has a 5.8-inch1 all-screen Super Retina XDR
display. The back is textured matte glass, and there's a stainless steel
band around the frame. The side button is on the right side of the
device. There are three 12 MP cameras on the back: Ultra Wide, Wide, and
Telephoto. There's a Dual-LED True Tone flash on the back and a SIM tray
on the right side that holds a "fourth form factor" (4FF) nano-SIM card.
The IMEI is etched on the SIM tray.</p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 11 Pro Max</h3>
<img src="Images/11pm.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2019</li>
<li><b>Capacity:</b>64, 256, 512 GB.</li>
<li><b>Colors:</b> Silver, space gray, gold, midnight
green.</li>
<li><b>Model numbers:</b>A2161 (Canada, United States), A2220
(China mainland, Hong Kong, Macao), A2218 (other countries and
regions).</li>
</ul>
<h2>Details</h2>
<p>iPhone 11 Pro Max has a 6.5-inch1 all-screen Super Retina XDR
display. The back is textured matte glass, and there's a stainless steel
band around the frame. The side button is on the right side of the
device. There are three 12 MP cameras on the back: Ultra Wide, Wide, and
Telephoto. There's a Dual-LED True Tone flash on the back and a SIM tray
on the right side that holds a "fourth form factor" (4FF) nano-SIM card.
The IMEI is etched on the SIM tray.</p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 11</h3>
<img src="Images/11.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2019</li>
<li><b>Capacity:</b>64, 128, 256 GB.</li>
<li><b>Colors:</b> Purple, green, yellow, black, white,
(PRODUCT)RED</li>
<li><b>Model numbers:</b>A2111 (Canada, United States), A2223
(China mainland, Hong Kong, Macao), A2221 (other countries and
regions).</li>
</ul>
<h2>Details</h2>
<p> iPhone 11 has a 6.1-inch1 Liquid Retina display. The back is
glass, and there's an anodized aluminum band around the frame. The side
button is on the right side of the device. There are two 12 MP cameras on
the back: Ultra Wide and Wide. There's a Dual-LED True Tone flash on the
back and a SIM tray on the right side that holds a "fourth form factor"
(4FF) nano-SIM card. The IMEI is etched on the SIM tray.</p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone XS</h3>
<img src="Images/XS.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2018</li>
<li><b>Capacity:</b>64, 256, 512 GB.</li>
<li><b>Colors:</b> Silver, space gray, gold.</li>
<li><b>Model numbers:</b> A1920, A2097, A2098 (Japan), A2099,
A2100 (China mainland).</li>
</ul>
<h2>Details</h2>
<p> iPhone XS has a 5.8-inch1 all-screen Super Retina display.
The back is glass, and there's a stainless steel band around the frame.
The side button is on the right side of the device. There are 12 MP wide-
angle and telephoto cameras on the back. There's a Quad-LED True Tone
flash on the back and a SIM tray on the right side that holds a "fourth
form factor" (4FF) nano-SIM card. The IMEI is etched on the SIM tray.</p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone XS Max</h3>
<img src="Images/xsm.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2018</li>
<li><b>Capacity:</b>64, 256, 512 GB.</li>
<li><b>Colors:</b> Silver, space gray, gold.</li>
<li><b>Model numbers:</b> A1921, A2101, A2102 (Japan), A2103,
A2104 (China mainland).</li>
</ul>
<h2>Details</h2>
<p> iPhone XS Max has a 6.5-inch1 all-screen Super Retina
display. The back is glass, and there's a stainless steel band around the
frame. The side button is on the right side of the device. There are 12
MP wide-angle and telephoto cameras on the back. There's a Quad-LED True
Tone flash on the back and a SIM tray on the right side that holds a
"fourth form factor" (4FF) nano-SIM card.3 The IMEI is etched on the SIM
tray. </p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone XR</h3>
<img src="Images/xr.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2018</li>
<li><b>Capacity:</b>64, 128, 256 GB.</li>
<li><b>Colors:</b> Black, white, blue, yellow, coral,
(PRODUCT)RED.</li>
<li><b>Model numbers:</b> A1984, A2105, A2106 (Japan), A2107,
A2108 (China mainland).</li>
</ul>
<h2>Details</h2>
<p> iPhone XR has a 6.1-inch1 Liquid Retina display. The back is
glass, and there's an anodized aluminum band around the frame. The side
button is on the right side of the device. There is a 12 MP wide-angle
camera on the back. There's a Quad-LED True Tone flash on the back and a
SIM tray on the right side that holds a "fourth form factor" (4FF) nano-
SIM card. The IMEI is etched on the SIM tray. </p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone X</h3>
<img src="Images/X.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2017</li>
<li><b>Capacity:</b>64, 256 GB.</li>
<li><b>Colors:</b> Silver, space gray.</li>
<li><b>Model numbers:</b> A1865, A1901, A1902 (Japan2).</li>
</ul>
<h2>Details</h2>
<p> iPhone X has a 5.8-inch1 all-screen Super Retina display.
The back is glass, and there's a stainless steel band around the frame.
The side button is on the right side of the device. There are 12 MP wide-
angle and telephoto cameras on the back. There's a Quad-LED True Tone
flash on the back and a SIM tray on the right side that holds a "fourth
form factor" (4FF) nano-SIM card. The IMEI is etched on the SIM tray.
</p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 8</h3>
<img src="Images/8.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2017</li>
<li><b>Capacity:</b> 64, 128, 256 GB.</li>
<li><b>Colors:</b> Gold, silver, space gray,
(PRODUCT)RED.</li>
<li><b>Model numbers:</b> A1863, A1905, A1906 (Japan2).</li>
</ul>
<h2>Details</h2>
<p> The display is 4.7 inches (diagonal). The glass front is flat
with curved edges. The back is glass, and there's an anodized aluminum
band around the frame. The side button is on the right side of the
device. The device has a solid-state Home button with Touch ID. There's a
Quad-LED True Tone flash on the back and a SIM tray on the right side
that holds a "fourth form factor" (4FF) nano-SIM card. The IMEI is etched
on the SIM tray. </p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 8 Plus</h3>
<img src="Images/8+.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2017</li>
<li><b>Capacity:</b> 64, 128, 256 GB.</li>
<li><b>Colors:</b> Gold, silver, space gray,
(PRODUCT)RED.</li>
<li><b>Model numbers:</b> A1864, A1897, A1898 (Japan2).</li>
</ul>
<h2>Details</h2>
<p> The display is 5.5 inches (diagonal). The glass front is flat
with curved edges. The back is glass, and there's an anodized aluminum
band around the frame. The side button is on the right side of the
device. The device has a solid-state Home button with Touch ID. There are
12 MP wide-angle and telephoto cameras on the back. There's a Quad-LED
True Tone flash on the back and a SIM tray on the right side that holds a
"fourth form factor" (4FF) nano-SIM card. The IMEI is etched on the SIM
tray. </p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 7</h3>
<img src="Images/7.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2016</li>
<li><b>Capacity:</b> 32, 128, 256 GB.</li>
<li><b>Colors:</b> Black, jet black, gold, rose gold, silver,
(PRODUCT)RED.</li>
<li><b>Model numbers:</b> A1660, A1778, A1779 (Japan4).</li>
</ul>
<h2>Details</h2>
<p> The display is 4.7 inches (diagonal). The glass front is flat
with curved edges. The back is anodized aluminum. The Sleep/Wake button
is on the right side of the device. The device has a solid-state Home
button with Touch ID. There's a Quad-LED True Tone flash on the back and
a SIM tray on the right side that holds a "fourth form factor" (4FF)
nano-SIM card. The IMEI is etched on the SIM tray. </p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 7 Plus</h3>
<img src="Images/7+.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2016</li>
<li><b>Capacity:</b> 32, 128, 256 GB.</li>
<li><b>Colors:</b> Black, jet black, gold, rose gold, silver,
(PRODUCT)RED.</li>
<li><b>Model numbers:</b> A1661, A1784, A1785 (Japan4).</li>
</ul>
<h2>Details</h2>
<p> The display is 5.5 inches (diagonal). The glass front is flat
with curved edges. The back is anodized aluminum. The Sleep/Wake button
is on the right side of the device. The device has a solid-state Home
button with Touch ID. There are dual 12 MP cameras on the back. There's a
Quad-LED True Tone flash on the back and a SIM tray on the right side
that holds a "fourth form factor" (4FF) nano-SIM card. The IMEI is etched
on the SIM tray. </p>
</div>
</section>
</section>

<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 6s</h3>
<img src="Images/6s.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2015</li>
<li><b>Capacity:</b> 16, 32, 64, 128 GB.</li>
<li><b>Colors:</b> Space gray, silver, gold, rose gold.</li>
<li><b>Model numbers:</b> A1633, A1688, A1700.</li>
</ul>
<h2>Details</h2>
<p> The display is 4.7 inches (diagonal). The glass front is flat
with curved edges. The back is anodized aluminum with a laser-etched "S".
The Sleep/Wake button is on the right side of the device. The Home button
has Touch ID. There's a True Tone LED flash on the back and a SIM tray on
the right side that holds a "fourth form factor" (4FF) nano-SIM card. The
IMEI is etched on the SIM tray. </p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 6s Plus</h3>
<img src="Images/6s+.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2015</li>
<li><b>Capacity:</b> 16, 32, 64, 128 GB.</li>
<li><b>Colors:</b> Space gray, silver, gold, rose gold.</li>
<li><b>Model numbers:</b> A1634, A1687, A1699.</li>
</ul>
<h2>Details</h2>
<p> The display is 5.5 inches (diagonal). The front is flat with
curved edges and is made of glass. The back is anodized aluminum with a
laser-etched "S". The Sleep/Wake button is on the right side of the
device. The Home button has Touch ID. There's a True Tone LED flash on
the back and a SIM tray on the right side that holds a "fourth form
factor" (4FF) nano-SIM card. The IMEI is etched on the SIM tray. </p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 6</h3>
<img src="Images/6.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2014</li>
<li><b>Capacity:</b> 16, 32, 64, 128 GB.</li>
<li><b>Colors:</b> Space gray, silver, gold.</li>
<li><b>Model numbers:</b> A1549, A1586, A1589</li>
</ul>
<h2>Details</h2>
<p> The display is 4.7 inches (diagonal). The front is flat with
curved edges and is made of glass. The back is anodized aluminum. The
Sleep/Wake button is on the right side of the device. The Home button has
Touch ID. There's a True Tone LED flash on the back and a SIM tray on the
right side that holds a "fourth form factor" (4FF) nano-SIM card. The
IMEI is etched on the back cover. </p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 6 Plus</h3>
<img src="Images/6+.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2014</li>
<li><b>Capacity:</b> 16, 64, 128 GB.</li>
<li><b>Colors:</b> Space gray, silver, gold.</li>
<li><b>Model numbers:</b> A1522, A1524, A1593</li>
</ul>
<h2>Details</h2>
<p> The display is 5.5 inches (diagonal). The front has curved
edges and is made of glass. The back is anodized aluminum. The Sleep/Wake
button is on the right side of the device. The Home button has Touch ID.
There's a True Tone LED flash on the back and a SIM tray on the right
side that holds a "fourth form factor" (4FF) nano-SIM card. The IMEI is
etched on the back cover.</p>
</div>
</section>
</section>

<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone SE (1st generation)</h3>
<img src="Images/se.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2016</li>
<li><b>Capacity:</b> 16, 32, 64, 128 GB.</li>
<li><b>Colors:</b> Space gray, silver, gold, rose gold.</li>
<li><b>Model numbers:</b> A1723, A1662, A1724</li>
</ul>
<h2>Details</h2>
<p> The display is 4 inches (diagonal). The glass front is flat.
The back is anodized aluminum with matte chamfered edges and a stainless
steel inset logo. The Sleep/Wake button is on the top of the device. The
Home button has Touch ID. There's a True Tone LED flash on the back and a
SIM tray on the right side that holds a "fourth form factor" (4FF) nano-
SIM card. The IMEI is etched on the back cover.</p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 5s</h3>
<img src="Images/5s.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2013</li>
<li><b>Capacity:</b> 16, 32, 64.</li>
<li><b>Colors:</b> Space gray, silver, gold.</li>
<li><b>Model numbers:</b> A1453, A1457, A1518, A1528,
A1530, A1533.</li>
</ul>
<h2>Details</h2>
<p> The front is flat and made of glass. The back is anodized
aluminum. The Home button contains Touch ID. There's a True Tone LED
flash on the back and a SIM tray on the right side that holds a "fourth
form factor" (4FF) nano-SIM card. The IMEI is etched on the back
cover.</p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 5c</h3>
<img src="Images/5c.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2013</li>
<li><b>Capacity:</b>8, 16, 32 GB.</li>
<li><b>Colors:</b> White, blue, pink, green, yellow.</li>
<li><b>Model numbers:</b> A1456, A1507, A1516, A1529,
A1532.</li>
</ul>
<h2>Details</h2>
<p> The front is flat and made of glass. The back is hard-coated
polycarbonate (plastic). There's a SIM tray on the right side that holds
a "fourth form factor" (4FF) nano-SIM card. The IMEI is etched on the
back cover.</p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 5</h3>
<img src="Images/5.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b>2012</li>
<li><b>Capacity:</b>16, 32, 64 GB</li>
<li><b>Colors:</b> Black and white.</li>
<li><b>Model numbers:</b> A1428, A1429, A1442.</li>
</ul>
<h2>Details</h2>
<p> The front is flat and made of glass. The back is anodized
aluminum. There's a SIM tray on the right side that holds a "fourth form
factor" (4FF) nano-SIM card. The IMEI is etched on the back cover.</p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 4s</h3>
<img src="Images/4s.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b>2011</li>
<li><b>Capacity:</b>8, 16, 32, 64 GB</li>
<li><b>Colors:</b> Black and white.</li>
<li><b>Model numbers:</b> A1431, A1387.</li>
</ul>
<h2>Details</h2>
<p> The front and back are flat and made of glass, and there's a
stainless steel band around the edges. The volume up and down buttons are
marked with a "+" and "-" sign. There's a SIM tray on the right side that
holds a "third form factor" (3FF) micro-SIM card.</p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 4</h3>
<img src="Images/4.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b> 2010 (GSM), 2011 (CDMA)</li>
<li><b>Capacity:</b>8, 16, 32 GB</li>
<li><b>Colors:</b> Black and white.</li>
<li><b>Model numbers:</b> A1349, A1332.</li>
</ul>
<h2>Details</h2>
<p> The front and back are flat and made of glass, and there's a
stainless steel band around the edges. The volume up and down buttons are
marked with a "+" and "-" sign. There's a SIM tray on the right side that
holds a "third form factor" (3FF) micro-SIM card. The CDMA model has no
SIM tray.</p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone 3GS</h3>
<img src="Images/3.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b> 2009</li>
<li><b>Capacity:</b>8, 16, 32 GB</li>
<li><b>Colors:</b> Black and white.</li>
<li><b>Model numbers:</b> A1325, A1303</li>
</ul>
<h2>Details</h2>
<p> The back housing is made of plastic. The imprint on the back
case is the same bright and shiny silver as the Apple logo. There's a SIM
tray on the top side that holds a "second form factor" (2FF) mini-SIM.
The serial number is printed on the SIM tray.</p>
</div>
</section>
</section>
<section class="color0">
<section class="About0">
<section class="iphone0">
<h3>iPhone 3G</h3>
<img src="Images/03.jpg" >
</section>
<div class="ip0">
<ul>
<li><b>Year introduced:</b> 2008, 2009 (China mainland)</li>
<li><b>Capacity:</b>8, 16 GB</li>
<li><b>Model numbers:</b> A1324, A1241</li>
</ul>
<h2>Details</h2>
<p> The back housing is made of plastic. The imprint on the
back of the phone is less shiny than the Apple logo above it. There's a
SIM tray on the top side that holds a "second form factor" (2FF) mini-
SIM. The serial number is printed on the SIM tray.</p>
</div>
</section>
</section>
<section class="color">
<section class="About01">
<section class="iphone01">
<h3>iPhone </h3>
<img src="Images/0.jpg" >
</section>
<div class="ip01">
<ul>
<li><b>Year introduced:</b> 2007</li>
<li><b>Capacity:</b> 4, 8, 16 GB</li>
<li><b>Model numbers:</b>A1203.</li>
</ul>
<h2>Details</h2>
<p> The back housing is made of anodized aluminum. There's a
SIM tray on the top side that holds a "second form factor" (2FF) mini-
SIM. The serial number is etched in the back case..</p>
</div>
</section>
</section>
</section>
</body>
</html>

 CSS Code
*{

margin:0;
padding:0;
font-family: 'Glory', sans-serif;
font-family: 'Josefin Sans', sans-serif;
}
.first1
{
background-image:linear-
gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(Images/iphones.jpg);
height:65vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
position:relative;
background-attachment: fixed;
/*parralax*/
}

nav
{

padding:1% 3%;
align-items: center;
justify-content: space-between;

}
.c-link
{

text-align:center;
}

.c-link ul li
{

list-style: none;
display:inline-block;

}
.c-link ul li a
{
position: relative;
padding:8px 16px;
font-weight: bold;
text-decoration:none;
text-transform:uppercase;
color:#FAD0C9FF;
text-shadow:1px 2px #6E6E6DFF;
font-size:18px;
}
.c-link ul li a:hover
{
color: #6E6E6DFF;
font-size: 25px;
text-shadow: 2px 2px #FAD0C9FF ;
}
.content1
{
color:#FAD0C9FF ;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/*So that it will be in center */
text-align:center;

}
.content1 h1
{
font-size:60px;
text-shadow:3px 4px #6E6E6DFF;
}
.color
{
background-color: #6E6E6DFF;
}
.color:hover{

.iphone01
{

text-align: center;
padding-top: 50px;
}
.iphone01 h3
{

font-size: 30px;
}
.iphone01 img
{
margin-top: 40px;
border-color: #FFD3B5;
border-radius: 30px;

padding:5px;
height:350px;
width:400px;

.iphone01 img:hover
{

box-shadow:0px 2px 8px 6px #FAD0C9FF;

}
.ip01
{
margin-top: 20px;
}
.ip01 ul li
{

text-decoration:none;
color:black;
font-size:18px;
text-align: center;
padding:6px 30px;
list-style-type:circle;
margin-left: 30px;
/*to add spacing between the elements*/

}
.ip01 h2
{
text-align: center;
margin-top: 20px;
}
.ip01 p{
margin-top: 20px;
margin-bottom: 50px;
text-align:center;

}
.ip01{

border-bottom:3px dotted white;


border-radius: 4px;

}
.color0
{
background-color: #FAD0C9FF;
}
.color0:hover{

.iphone0
{

text-align: center;
padding-top: 50px;
}
.iphone0 h3
{

font-size: 30px;
}
.iphone0 img
{
margin-top: 40px;
border-radius: 30px;

padding:5px;
height:350px;
width:400px;

.iphone0 img:hover
{

box-shadow:0px 2px 8px 6px #6E6E6DFF;

}
.ip0
{
margin-top: 20px;
}
.ip0 ul li
{

text-decoration:none;
color:black;
font-size:18px;
text-align: center;
padding:6px 30px;
list-style-type:circle;
margin-left: 30px;
/*to add spacing between the elements*/

}
.ip0 h2
{
text-align: center;
margin-top: 20px;
}
.ip0 p{
margin-top: 20px;
margin-bottom: 50px;
text-align: center;

}
.ip0{

border-bottom:3px dotted white;


border-radius: 4px;
}

4. FEATURE
 Html code
<html>
<head>
<link rel="stylesheet" href="feature.css">
<title>Apple</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Glory&family=Josefin+Sans:wght@300;400&display=swap"
rel="stylesheet">
</head>
<body>
<section class="first1">
<nav>
<div class="c-link">
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="timeline.html">Timeline</a></li>

<li><a href="feature.html">Features</a></li>
<li><a href="Av.html">More</a></li>
</ul>
</div>
</nav>
<div class="content1">
<h1> BUILT-IN FEATURES</h1>
</div>
</section>
<section class="col">

<p>Because the iPhone is like a mini-computer, it offers the same


wide range of features and functions that a computer does. The major
areas of functionality for the iPhone are:</p>
</section>
<section class="pt">
<div class="ip01">
<ul>
<li><b>Phone:</b>The iPhone’s phone features are solid. It
includes innovative features like Visual Voicemail and standard features
like text messaging, voice dialing, and free conference calls.</li>
</ul>
</div>

</section>
<section class="pt0">
<div class="ip01">
<ul>
<li><b>Web browser:</b> The iPhone offers the best, most
complete mobile browsing experience. Though it never supported the Flash
browser plug-in, it doesn’t require dumbed-down "mobile" versions of
websites, instead offering a full web browser experience thing on a
phone.</li>
</ul>
</div>
</section>
<section class="pt1">
<div class="ip01">
<ul>
<li><b>Email:</b> Like all good smartphones, the iPhone has
robust email features for use with email services like Gmail and can sync
to corporate email servers running Exchange.</li>
</ul>
</div>
</section>
<section class="pt2">
<div class="ip01">
<ul>
<li><b>Calendar and Contacts: </b>The iPhone is a personal
information manager, too. It has pre-loaded apps for ket features like
calendar, address book, stocks, weather, and other features</li>
</ul>
</div>
</section>
<section class="pt3">
<div class="ip01">
<ul>
<li><b>Music Player:</b> One of the iPhone's core features
all along has been its terrific music player features. Music options on
the iPhone got even more compelling with the release of the Apple Music
streaming service.</li>
</ul>
</div>
</section>
<section class="pt4">
<div class="ip01">
<ul>
<li><b>Video playback:</b> With its big, beautiful screen,
the iPhone is a great choice for mobile video playback. You can choose
from the YouTube app, adding your own video, or buying or renting content
from the iTunes Store.</li>
</ul>
</div>
</section>
<section class="pt5">
<div class="ip01">
<ul>
<li><b>Apps:</b> Thanks to the App Store, iPhones can run all
kinds of third-party programs, from games to Facebook and Twitter to
restaurant finders and productivity apps. The App Store makes the iPhone
the most useful smartphone around.</li>
</ul>
</div>
</section>
<section class="pt6">
<div class="ip01">
<ul>
<li><b>Cameras:</b> All recent iPhone models have two cameras
— though the iPhone 11 Pro sports a three-camera system on its back
camera. All of the cameras can be used to take still images, record HD or
4K video, or even get pro-quality effects with Portrait Lighting. The
user-facing camera is for FaceTime video chats and taking selfies.</li>
</ul>
</div>
</section>
<section class="pt7">
<div class="ip01">
<ul>
<li><b>Face ID:</b> The iPhone X and newer models include the
Face ID facial scanner. This very-hard-to-defeat security system is used
to unlock the iPhone, authorize iTunes and App Store purchases, and to
finalize Apple Pay transactions.</li>
</ul>
</div>
</section>
<section class="pt8">
<div class="ip01">
<ul>
<li><b>Apple Pay:</b>The iPhone supports secure, wireless
transactions based on holding your iPhone close to payment terminals in
stores. Add a credit or debit card to your Apple Pay account, and
authorize with Face ID, for this smooth process.</li>
</ul>
</div>
</section>
<section class="pt9">
<div class="ip01">
<ul>
<li><b>Siri:</b> Every iPhone model in recent years has
included Apple's voice-activated, virtual assistant, Siri. Use Siri to
get answers to questions, to automate actions on your iPhone, and much
more.</li>
</ul>
</div>
</section>
<section class="pt10">
<div class="ip01">
<ul>
<li><b>Wireless Charging:</b> The iPhone X and newer models
don't need to be plugged into a cable to charge. Just place them on a
compatible charging mat and the battery will top up.</li>
</ul>
</div>
</section>

<section class="col">
<h1>iPhone Buttons and Controls</h1>
<p>Though the iPhone’s coolest control features are based around the
multi-touch screen, it also has a number of buttons on its face that are
used for control.</p>
</section>
<section class="ctrl">

<div class="btn">
<ul>
<li><b>Side button:</b> At the side of the iPhone (or at the
top right corner on older models), you’ll find the Side button. Pressing
this button locks the screen and/or puts the phone to sleep. It’s also
the button used to restart the phone.</li>
</ul>
</div>

<div class="btn">
<ul>
<li><b>Volume buttons:</b> On the left side of the phone,
buttons that move up and down control the volume of music, video, and the
phone’s ringer.</li>
</ul>
</div>

<div class="btn">
<ul>
<li><b>Ringer button:</b> Just above the volume control is a
smaller rectangular button. This is the ringer button, which allows you
to put the phone into silent mode so the ringer won’t sound when calls
come in.</li>
</ul>
</div>
<div class="btn">
<ul>
<li><b>Lightning Port:</b> This port, at the bottom of the
phone, is where you plug in the cable to sync the phone with a computer,
as well as accessories.</li>
</ul>
</div>
</section>
</body>
</html>

 CSS code
*{

margin:0;
padding:0;
font-family: 'Glory', sans-serif;
font-family: 'Josefin Sans', sans-serif;
}
.first1
{
background-image:linear-
gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(stack.jpeg);
height:65vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
position:relative;
background-attachment: fixed;
/*parralax*/
}

nav
{

padding:1% 3%;
align-items: center;
justify-content: space-between;
}
.c-link
{

text-align:center;
}

.c-link ul li
{

list-style: none;
display:inline-block;

}
.c-link ul li a
{

position: relative;
padding:8px 16px;
font-weight: bold;
text-decoration:none;
text-transform:uppercase;
color:#B2D3DC;
text-shadow: 1px 2px white;
font-size:18px;

.c-link ul li a:hover
{
color:white;
font-size: 32px;
text-shadow:2px 2px #B2D3DC;
}
.content1
{
color:#B2D3DC;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/*So that it will be in center */
text-align:center;

}
.content1 h1
{
font-size:60px;
text-shadow:3px 3px white;
}
.col
{
text-align:center;
padding-top:70px;
/*TO add space from top*/
padding-bottom: 70px;
padding-left: 5px;
padding-right: 5px;
background-color: #B2D3DC;
}
.col p{
font-size:22px;
}
.col h1{
font-size:35px;
margin-bottom: 18px;
}

.pt{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/aa.jpg);
/*to make the bg dark*/
height:13vh;
width:100%;
background-position:right;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.ip01 ul li
{

text-decoration:none;
color:#86AAA7;
text-shadow: 1px 1px #B2D3DC;
font-size:20px;
text-align:center;
padding:6px 30px;
list-style-type:circle;
margin-left: 30px;

/*to add spacing between the elements*/


}
.pt0{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/sa.png);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.pt1{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/i.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.pt2{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/cc.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.pt3{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/m.png);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.pt4{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/u.png);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.pt5{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/a.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.pt6{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/ci.png);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.pt7{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/f.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.pt8{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/p.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.pt9{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/si.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
padding-top: 40px;
text-align:center;
}
.pt10{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/nn.jpg);
/*to make the bg dark*/
height:12vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
.ctrl{
padding-top: 50px;
}
.btn ul li{
padding-top: 10px;

text-decoration:none;
color:#86AAA7;
text-shadow: 1px 1px #B2D3DC;
text-shadow: 1px 1px #B2D3DC;
font-size:20px;
text-align:center;
padding:20px 30px;
list-style-type:circle;
margin-left: 30px;

/*to add spacing between the elements*/


}
.ctrl{
background-image:linear-
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Images/btn.jpg);
/*to make the bg dark*/
height:50vh;
width:100%;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
position:relative;
text-align:center;
padding-top: 40px;
}
Snapshots
Git Hub project link
https://github.com/MehtaNitya/Website

You might also like