Skip to content

Instantly share code, notes, and snippets.

@masiedu4

masiedu4/index.html

Created June 4, 2020 00:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save masiedu4/79cd520248f0a3143e00086694660722 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save masiedu4/79cd520248f0a3143e00086694660722 to your computer and use it in GitHub Desktop.
Download ZIP
Apple // source https://jsbin.com/vojovaj
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Apple</title>
<style id="jsbin-css">
body{
text-align:center;
font-family:verdana;
width:1400px;
font-size:18px;
margin:auto;
background-color:white;
}
.firstboarder{
background-color:black;
}
.firstboarder ul,li{
display:flex;
justify-content:center;
margin:auto;
}
#firstboarder li{
margin:1em;
color:white
}
.secondboarder{
background-color:blue;
}
#paragraph{
color:white;
padding:0;
margin:0;
}
.thirdboarder{
background-color:white;
}
#secondparagraph{
margin:auto;
font-size:14px
}
.iphonese{
background-color:black;
color:white;
margin:auto;
}
#thirdparagraph{
padding:0;
margin:0;
font-weight:bolder;
font-size:45px;
}
#fourthparagraph{
font-weight:bold;
font-size:25px;
margin:0;
}
#fifthparagraph{
font-weight:bold;
font-size:25px;
margin:0;
padding:0;
}
#sixthparagraph{
font-weight:lighter;
}
.wwdc{
width:100%;
z-index:0;
}
.tradeins{
font-size:12px;
font-weight:lighter;
width:100%
}
#article{
width:100%;
font-size:12px;
}
</style>
</head>
<body>
<!--start of header-->
<header>
<section class=firstboarder>
<ul id=firstboarder type="none">
<li>Mac</li>
<li>iPad</li>
<li>iPhone</a>
<li>Watch</a>
<li>Tv</a>
<li>Music</li>
<li>Support</li>
<li>Search</li>
</ul>
</section>
<section class=secondboarder>
<div>
<p id=paragraph> Evaluate COVID-19 symptons and understand next steps></p>
</div>
<div class=thirdboarder>
<p id=secondparagraph><a href="https://www.apple.com/us/shop/goto/shop">Shop now</a> and get free,no-contact delivery,Specialist help and more
</p>
</div>
<!--end of header-->
</header>
<main>
<section class="iphonese">
<p id="thirdparagraph">iPhone SE</p>
<p id="fourthparagraph">Lots to Love.Less To Spend</p>
<p id=fifthparagraph>Starting at $399.</p>
<p id=sixthparagraph>From $9.54/mo. or $299 with trade-in</p>
<p><a href="https://www.apple.com/iphone-se/">Learn more></a> <a href="https://www.apple.com/us/shop/goto/buy_iphone/iphone_se">Buy></a>
<figure id="iphone se img">
<img src="https://us.123rf.com/450wm/subhanbaghirov/subhanbaghirov1609/subhanbaghirov160900154/62303575-baku-azerbaigian-08-settembre-2016-iphone-7-su-sfondo-nero-.jpg?ver=6">
</figure>
</section>
<section id="iphone11">
<p id=thirdparagraph>iPhone 11</p>
<p id=fourthparagraph>Just the right amount of everything</p>
<p id=fifthparagraph>From $18.70/mo. or $499 with trade-in</p>
<p><a href="https://www.apple.com/iphone-11/">Learn more></a> <a href="https://www.apple.com/us/shop/goto/buy_iphone/iphone_11">Buy></a>
<p>
<img src="https://www.kickmobiles.com/images/thumbs/0011343_apple-iphone-11-a2221-61-black-green-yellow-purple-product-red-white-_610.jpeg">
</p>
</section>
<section id="ipadpro">
<p id=thirdparagraph>iPad pro</p>
<p id=fourthparagraph>Your next computer is not a computer.</p>
<p><a href="https://www.apple.com/ipad-pro/">Learn more></a> <a href="https://www.apple.com/us/shop/goto/ipad_pro/select">Buy></a>
<div id=ipad pro img>
<img src="https://images.idgesg.net/images/article/2019/09/2018-11-inch-ipad-pro-100811291-large.jpg">
</div>
</section>
<section>
<p>Apple's approach to reopen our stores</p>
<p> <a href="https://www.apple.com/store-opening-letter/"><img src="https://i1.wp.com/marketbusinessnews.com/wp-content/uploads/2014/03/apple-logo.jpg?resize=301%2C169" </a></p>
</section>
<section class=wwdc ><a href="https://developer.apple.com/"</a> <img src="https://images.idgesg.net/images/article/2020/05/apple-event-wwdc-100840846-large.jpg" ></a></section>
<section class=tradeins>
<ol>
<li>Trade In: Trade‑in values vary. iPhone 11 and iPhone 11 Pro promotional pricing is after trade‑in of iPhone 8 Plus and iPhone X in good condition. iPhone SE promotional pricing is after trade-in of iPhone 8 in good condition. Additional trade‑in values require purchase of a new iPhone, subject to availability and limits. Must be at least 18. Apple or its trade-in partners reserve the right to refuse or limit any Trade In transaction for any reason. In‑store trade‑in requires presentation of a valid, government-issued photo ID (local law may require saving this information). Sales tax may be assessed on full value of new iPhone. Additional terms from Apple or Apple’s trade-in partners may apply. Monthly pricing: Available to qualified customers and requires 0% APR, 24-month installment loan with Citizens One or Apple Card Monthly Installments and iPhone activation with AT&T, Sprint, T-Mobile, or Verizon. Taxes and shipping not included. Additional Apple Card Monthly Installments terms are in the customer agreement. Additional iPhone Payments terms are here.</li>
<li>Trade‑in values vary. Apple Watch Series 5 promotional pricing is after trade‑in of Apple Watch Series 4 in good condition. Additional trade‑in values require purchase of a new Apple Watch, subject to availability and limits. Must be at least 18. Apple or its trade-in partners reserve the right to refuse or limit any Trade In transaction for any reason. In‑store trade‑in requires presentation of a valid, government-issued photo ID (local law may require saving this information). Sales tax may be assessed on full value of new Apple Watch. Additional terms from Apple or Apple’s trade-in partners may apply. Offer is available for a limited time only.</li>
<li> Subscription required.
Magic Keyboard sold separately.
Apple TV+ is $4.99/month after free trial. One subscription per Family Sharing group. Offer good for 3 months after eligible device activation. Plan automatically renews until cancelled. Restrictions and other terms apply.</li>
</ol>
</section>
<article id=article>
<h5>Account<h5>
<ul type="none">
<li>Manage your Apple ID</li>
<li>Apple store account</li>
<li>iCloud.com</li>
</ul>
<h5>About Apple</h5>
<ul type=none>
<li>Newsroom</li>
<li>Apple Leadership</li>
<li>Job opportunities</li>
<li>Investors</li>
<li>Events</li>
<li>Contact Apple</li>
</ul>
<h5>For Government</h5>
<ul type=none>
<li>Shop for government</li>
<li>Shop for veterans and military</li>
</ul>
</article>
</main>
<script id="jsbin-source-css" type="text/css">body{
text-align:center;
font-family:verdana;
width:1400px;
font-size:18px;
margin:auto;
background-color:white;
}
.firstboarder{
background-color:black;
}
.firstboarder ul,li{
display:flex;
justify-content:center;
margin:auto;
}
#firstboarder li{
margin:1em;
color:white
}
.secondboarder{
background-color:blue;
}
#paragraph{
color:white;
padding:0;
margin:0;
}
.thirdboarder{
background-color:white;
}
#secondparagraph{
margin:auto;
font-size:14px
}
.iphonese{
background-color:black;
color:white;
margin:auto;
}
#thirdparagraph{
padding:0;
margin:0;
font-weight:bolder;
font-size:45px;
}
#fourthparagraph{
font-weight:bold;
font-size:25px;
margin:0;
}
#fifthparagraph{
font-weight:bold;
font-size:25px;
margin:0;
padding:0;
}
#sixthparagraph{
font-weight:lighter;
}
.wwdc{
width:100%;
z-index:0;
}
.tradeins{
font-size:12px;
font-weight:lighter;
width:100%
}
#article{
width:100%;
font-size:12px;
}</script>
</body>
</html>
Raw
jsbin.vojovaj.css
body{
text-align:center;
font-family:verdana;
width:1400px;
font-size:18px;
margin:auto;
background-color:white;
}
.firstboarder{
background-color:black;
}
.firstboarder ul,li{
display:flex;
justify-content:center;
margin:auto;
}
#firstboarder li{
margin:1em;
color:white
}
.secondboarder{
background-color:blue;
}
#paragraph{
color:white;
padding:0;
margin:0;
}
.thirdboarder{
background-color:white;
}
#secondparagraph{
margin:auto;
font-size:14px
}
.iphonese{
background-color:black;
color:white;
margin:auto;
}
#thirdparagraph{
padding:0;
margin:0;
font-weight:bolder;
font-size:45px;
}
#fourthparagraph{
font-weight:bold;
font-size:25px;
margin:0;
}
#fifthparagraph{
font-weight:bold;
font-size:25px;
margin:0;
padding:0;
}
#sixthparagraph{
font-weight:lighter;
}
.wwdc{
width:100%;
z-index:0;
}
.tradeins{
font-size:12px;
font-weight:lighter;
width:100%
}
#article{
width:100%;
font-size:12px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment