making a beautiful website as same as an "apple.com"

-
Using HTML, CSS, and public-domain images, we are recreating apple's homepage from scratch. Writing all in the HTML and the CSS ourselves. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>apple</title>
<style>

 body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

 img {
width: 100%;
}

 .navbar {
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
height: 45px;
line-height: 44px;
text-align: center;

}

 .navbar a {
float: left;
display: block;
color: grey;
text-align: center;
text-decoration: none;
margin: 0px 40px;
justify-content: center;
}

 .navbar a img {
text-align: center;
margin-top: 7px;
}

 .navbar a:hover {
background: black;
color: white;
}

 .main {
margin-top: 30px;
}

 .covid-19 {
color: white;
background-color: #0E79E1 ;
margin: 0;
text-align: center;
padding-top: 20px;s
height: 41px;
line-height: 41px;
}

 .shop-online {
color: #363738;
background-color: white;
text-align: center;
margin: 0;
height: 41px;
line-height: 41px;
}

 .flex {
display: flex;
}

 .bottom {
color: #7d7c78;
font-size: 12px;
}

 @media only screen and (max-width: 768px) {
.flex {
display: list-item;
}

 .navbar {

 background-image: url(logo.jpg);
background-repeat: no-repeat;
justify-content: center;

}

 .navbar a {
float: none;
width: 100%;
overflow: hidden;
}

 section {
background-image: url("mini1.jpg"); 
}

}
</style>
</head>
<body>

 <div class="navbar">

 <a href="https://www.apple.com"><img id="logo" src="logo.jpg" alt="apple logo"></a>
<a href="https://www.apple.com/mac/">Mac</a>
<a href="https://www.apple.com/ipad/">iPad</a>
<a href="https://www.apple.com/iphone/">iPhone</a>
<a href="https://www.apple.com/watch/">Watch</a>
<a href="https://www.apple.com/tv/">TV</a>
<a href="https://www.apple.com/music/">Music</a>
<a href="https://support.apple.com/">Support</a>
<a href="https://www.apple.com/us/search"><img src="search.jpg"></a>
<a href="https://www.apple.com/shop/"><img src="store.jpg"></a>

 </div>

 <div class="main">

  <p class="covid-19"> 
  <a href="https://covid19.apple.com/screening/" style="text-decoration: none;"> <span style="color: white; font-weight: lighter;"> Evalutate COVID-19 symptoms and understand next steps</span></a>
 </p>

 <p class="shop-online">
  <a href="https://www.apple.com/shop" style="text-decoration: none;"> Shop online</a> and get free, no-contact delivery, Specialist help, and more.
 </p>

  <section>

 <a href="
https://www.apple.com/iphone-se/"><img id="first" src="iphone se 2020.jpg" alt="iphone se"/> </a>
<a href="https://www.apple.com/iphone-11/"> <img src="iphone11.jpg" alt="iphone 11"/>
</a>

 <a href="https://www.apple.com/us-hed/shop/back-to-school"> <img src="hello.jpg"/>
</a>

 <nav class="flex">
<a href="https://music.apple.com/us/playlist/james-blake-essentials/pl.3c906e9382594b80ae6373bcaa8c34ad?app=music&ls=1&itscg=10000&itsct=pla_essentials_jamesblakebtm"> <img src="never.jpg"></a>

 <a href="https://www.apple.com/apple-watch-series-5/"> <img src="watch.jpg"></a>
</nav>

 <nav class="flex">
<a href="https://www.apple.com/airpods/"><img src="make.jpg"></a>

 <a href="https://tv.apple.com/show/dear/umc.cmc.3bcp1uw2craeu8lbc53h7i205?itscg=10000&itsct=atv-0-apl_hp-pmo_wch-der-200602"><img src="dear.jpg"></a>
</nav>

 <nav class="flex">
<a href="https://www.apple.com/apple-card/monthly-installments/"><img src="apple card.jpg"></a>

 <a href="https://www.apple.com/store-opening-letter/"><img src="apple's approach.jpg"></a>
</nav>

 </section>

 </div>

 <p class="bottom">
1. 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 <a href="https://www.goldmansachs.com/terms-and-conditions/Apple-Card-Customer-Agreement.pdf"><span style="color: black; font-style: none;"> Customer Agreement</span></a>. Additional iPhone Payments terms are <a href="https://www.apple.com/legal/sales-support/iphoneinstallments_us/"><span style="color: black; font-style: none; "> here</span></a>.
</p>

 <p class="bottom">
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.
</p>
<br>
<p class="bottom">
More ways to shop: Find an Apple Store or other retailer near you. Or call 1-800-MY-APPLE.
</p>

</body>
</html>

Try yourself and try to make it better. 


Comments

Post a Comment

Popular posts from this blog

Deploy Quasar + Laravel + MySQL on AWS EC2 (Default VPC)

-
AWS EC2 Laravel Quasar / Vue.js MySQL A complete, step-by-step guide to deploying a full-stack application — Quasar (Vue.js) frontend, Laravel API backend, and MySQL database — on a single EC2 instance using the default VPC. ARCHITECTURE OVERVIEW Quasar SPA :80 / → Nginx reverse proxy → Laravel API :8000 /api → MySQL 8 :3306 All running on a single EC2 instance (Ubuntu 22.04) inside the default VPC TABLE OF CONTENTS Prerequisites Launch EC2 Instance Install Dependencies Set Up MySQL Deploy Laravel Backend Deploy Quasar Frontend Configure Nginx SSL with Let's Encrypt Troubleshooting STEP 01 Prerequisites Before starting, make sure you have: An AWS account with access to the EC2 dashboard A domain name pointed to your server (optional, but needed for SSL) Your Quasar + Laravel project pushed to a Git repository A local SSH key pair ℹ️ This guide assumes a single-server deployment. For production at scale, consider separat...
Read more

Nginx Load Balancing Lab on AWS EC2

-
Nginx Load Balancing Lab on AWS EC2 — Romanch Jung Rayamajhi Back to Portfolio Nginx AWS EC2 DevOps Nginx Load Balancing Lab on AWS EC2 A hands-on lab guide to setting up Nginx as a load balancer across multiple EC2 instances — covering round-robin, least connections, IP hash, and health checks. RJ Romanch Jung Rayamajhi April 2026 10 min read Architecture Overview Clients users / traffic → Nginx LB :80 load balancer → Backend 1 :8080 app server Backend 2 :8080 app server Backend 3 :8080 app server Nginx distributes traffic acro...
Read more

EC2 Fundamentals

-
Image
 Amazon: Elastic Compute Cloud (EC2) Basics Amazon EC2 (Elastic Compute Cloud) is a service within AWS (Amazon Web Services) that lets you rent virtual computers (servers) in the cloud to run applications. Think of it as hiring a computer remotely that you can control, customize, and use just like a computer at home or work. Here’s a breakdown of EC2 in simple terms: What EC2 Is : EC2 provides scalable virtual servers (instances) in the cloud. You can choose different types of instances based on your needs, like more CPU power, memory, or storage. Why Use EC2 : You only pay for what you use. You can scale up or down quickly—      add more instances when you need more computing  power and shut them down when you don’t. No need to manage physical servers or deal with maintenance. How It Works : Launch:         Start a new server (instance) by choosing an Amazon Machine Image (AMI), which is like a template of an operating system and basic soft...
Read more