Learn how to create a simple clone of the Apple website using only HTML and CSS. Follow this step-by-step tutorial for web development beginners and learn how to structure HTML, style with CSS, and add media files.
Table of Contents
Apple, one of the leading technology companies in the world, is famous for its sleek and simple designs. In fact, many people choose to clone Apple’s website because of its sleek website design.
Creating a website can be a daunting task, especially if you're new to web development. This tutorial will guide you through the process of creating a simple clone of the Apple website using only HTML and CSS. We'll cover everything from analyzing the design of the original website to fine-tuning the clone to make it look as professional as possible.
Let's start making an amazing apple website clone using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
Cloning an apple website is a simple process that can be done with a few simple steps. To get started, we will first need to create a basic HTML file. This file will contain the same layout and design as the original apple website.
The code consists of various HTML tags that define the structure and content of the page.
The <!DOCTYPE html> tag specifies the version of HTML used in the document. The <html> tag is the root element of the page and contains all the other elements. The lang attribute in the opening html tag specifies the language of the document.
The <head> tag contains meta information about the page, such as the title of the page, the character set used, and the viewport size. The <link> tag references an external stylesheet called "styles.css" that contains styling information for the page.
The <body> tag contains the main content of the web page, including the header, main content boxes, and footer. The <header> tag contains the navigation bar with links to various products. The <div> tag is used to create sections within the header and main content boxes.
The main content of the page includes six boxes that showcase different products, such as the iPhone 13 Pro, iPhone 13, MacBook Pro, Apple Watch, iPad mini, and AirPods. Each box includes a title, a short description, a link to learn more about the product, and an image.
The <footer> tag contains information about the offer available and terms and conditions that apply to it. The footer also includes links to find a retailer and to contact Apple.
Overall, this code creates a web page that mimics the look and feel of an Apple website and provides information about their products and services.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our clone website using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Next, you'll need to add some CSS rules to style the page. You'll want to style the header, body, and footer tags, as well as the font size and color of the text. You can also add some padding and margin properties to make the page look more like an Apple website.
Then, you'll need to add a few images to your page. You can use images from Google or directly from Apple resources.
Finally, we will link CSS files into HTML so that we can see the final result.
*{
box-sizing: border-box;
}
body{
background-color:#ffffff;
text-align:center;
margin: 0;
padding: 0;
}
#header{
display: inline-block;
background-color: rgba(0,0,0,0.8);
width: 100%;
line-height: 2.8;
cursor: pointer;
}
#header a{
padding: 0px 37px;
font-size: 14px;
text-decoration: none;
color: white;
font-family: "Arial";
cursor: pointer;
}
#header:hover{
background-image:linear-gradient(to right,rgba(255,0,0,0.7),rgba(98,52,140,0.7));
}
#header a img{
position: relative;
top: 5px;
opacity: 0.8;
border-radius: 30%;
cursor: pointer;
}
.header2{
background-color:#ffffff;
text-align:center;
margin: 1%;
padding: 1px;
font-family:"Arial";
font-size: 15px;
color:#595959;
}
.header2 a{
text-decoration: none;
color:#4e94db;
}
.header2 a:hover{
text-decoration: underline;
}
#main-box{
display: inline-block;
background: rgba(0,0,0,0.02);
width: 100%;
text-align: center;
cursor: pointer;
}
#main-box h1{
font-size: 75px;
letter-spacing: -.06em;
position: relative;
top: 10px;
line-height: 1.1;
font-family: "Arial";
cursor: pointer;
}
#main-box p{
font-size: 34px;
letter-spacing: .01em;
font-family:"Arial";
position: relative;
bottom: 38px;
color: rgba(0,0,0,0.8);
cursor: pointer;
}
#main-box a{
font-size:20px;
color:#4e94db;
position: relative;
bottom: 38px;
text-decoration: none;
font-family:"Arial";
display:block;
cursor: pointer;
}
#main-box a:hover{
text-decoration: underline;
}
#main-box img {
position: relative;
bottom: 30px;
width:85%;
}
.mainbox2{
display: inline-block;
background-color :#35283c;
font-family: "Arial";
width: 100%;
text-align: center;
}
.mainbox2 h1{
color: #ffffff;
font-size: 75px;
letter-spacing: -.06em;
}
.mainbox2 p{
position: relative;
bottom: 38px;
font-size: 34px;
letter-spacing: .01em;
color:#c999bd;
}
.mainbox2 a{
font-size: 20px;
color:#4e94db;
position: relative;
bottom: 38px;
text-decoration: none;
font-family:"Arial";
display:block;
}
.mainbox2 a:hover{
text-decoration: underline;
}
#mainbox2 img {
position: relative;
bottom: 30px;
width:85%;
margin: 100%;
}
.mainbox3{
display: inline-block;
background-color :#ffffff;
font-family: "Arial";
width: 100%;
text-align: center;
}
.mainbox3 h1{
color: black;
font-size: 75px;
letter-spacing: -.06em;
}
.mainbox3 p{
position: relative;
bottom: 38px;
font-size: 34px;
letter-spacing: .01em;
color: rgba(0,0,0,0.8);
}
.mainbox3 a{
font-size: 20px;
color:#4e94db;
position: relative;
bottom: 38px;
text-decoration: none;
font-family:"Arial";
display:block;
}
.mainbox3 a:hover{
text-decoration: underline;
}
#mainbox3 img {
position: relative;
bottom: 30px;
width:85%;
margin: 100%;
}
.mainbox4 {
display: inline-block;
background-color :#f5f5f7;
font-family: "Arial";
width: 75%;
text-align: center;
}
.mainbox4 h1{
color: black;
font-size: 75px;
letter-spacing: -.06em;
}
.mainbox4 p{
position: relative;
bottom: 38px;
font-size: 30px;
letter-spacing: .01em;
color:#d90238;
}
.mainbox4 a{
font-size: 20px;
color:#4e94db;
position: relative;
bottom: 38px;
text-decoration: none;
font-family:"Arial";
display:block;
}
.mainbox4 a:hover{
text-decoration: underline;
}
.mainbox4 img{
width:100%;
height:100%;
}
.mainbox5 {
display: inline-block;
background-color :#ffffff;
font-family: "Arial";
width: 100%;
text-align: center;
}
.mainbox5 h1{
color: black;
font-size: 75px;
letter-spacing: -.06em;
}
.mainbox5 p{
position: relative;
bottom: 38px;
font-size: 34px;
letter-spacing: .01em;
color: rgba(0,0,0,0.8);
}
.mainbox5 a{
font-size: 20px;
color:#4e94db;
position: relative;
bottom: 38px;
text-decoration: none;
font-family:"Arial";
display : block;
}
.mainbox5 a:hover{
text-decoration: underline;
}
.mainbox5 img{
width:90%;
height:90%;
}
.mainbox6{
display: inline-block;
background-color :#de2127;
font-family: "Arial";
text-align: center;
width: 75%;
}
.mainbox6 img{
width:70%;
height:50%;
}
.mainbox6 h1{
color: black;
font-size: 75px;
letter-spacing: -.06em;
}
.mainbox6 p{
position: relative;
bottom: 38px;
font-size: 34px;
letter-spacing: .01em;
color: rgba(0,0,0,0.8);
}
.mainbox6 a{
font-size: 20px;
color:#4e94db;
position: relative;
bottom: 38px;
text-decoration: none;
font-family:"Arial";
display : block;
}
.mainbox6 a:hover{
text-decoration: underline;
}
.footer{
font-size:14px;
display: inline-block;
background-color :#f5f5f7;
font-family: "Arial";
}
.footer p{
margin-top:3%;
margin-bottom:3%;
margin-left:10%;
margin-right:10%;
text-align:justify;
color:#a1a1a1;
}
.footer hr{
color:#a1a1a1;
width:80%;
float:center;
line-height:normal;
}
.footer a{
color:#4e94db;
cursor:pointer;
}
.footer a:hover{
text-decoration: underline;
}
footer h4{
margin-top:1%;
margin-bottom:1%;
margin-left:10%;
margin-right:10%;
text-align:justify;
color:#a1a1a1;
font-family:"Arial";
font-weight:normal;
} Final Output:
Conclusion:
In conclusion, learning how to clone an Apple website using HTML and CSS is a great way to develop your web design and development skills. This tutorial provides a step-by-step guide for beginners to create a website that looks as professional and polished as those created by big tech companies like Apple.
By following the steps in this tutorial, you'll learn how to structure HTML, apply CSS styles, and add media files such as images and videos. You'll also learn how to analyze the design of an existing website and use those design elements to create a clone website.
Whether you're looking to start a career in web development or simply want to enhance your existing skills, learning how to clone an Apple website is a great way to build your portfolio and gain experience in web design and development. So, get started with this tutorial and create your own Apple-inspired website today!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
