How to Create iPod Template using HTML and CSS ?
Last Updated :
24 Apr, 2025
Improve
The iPod template will create the look and feel of a classic iPod, with a sleek design and functional layout. The code creates a visually appealing iPod-like template with responsive design features and FontAwsome icons are used to enhance the look of the project.
Preview
Approach
- First, create the structure of the project using a div with the class .phone.The upper section (upper) represents the phone's display using an image tag.
- Include Fontawsome using the CDN link.
- The lower section (lower) includes a circular menu bar (menubar) with a hover effect. Buttons are represented using Fontawsome icons and divs with specific classes (Menu, Forward, Backward, Play/Pause).
- CSS styling for layout, margins, colors, and shadows. The phone has rounded corners using border-radius and is centered on the page. Grayscale filters and hover effects were applied to buttons for visual feedback.
Example: Illustration of creation of an iPod Template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>iPod Template</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>How to Create IPod template
using HTML and CSS
</h3>
<div class="ipod">
<div class="innerbox">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240119114334/gfgre.png" />
</div>
<div class="outercircle">
<div class="outerinnercircle">
<!-- Buttons for play, pause,
backward, and forward -->
<button class="button play">
<i class="fa fa-solid fa-play"></i>
</button>
<div class="menu">MENU</div>
<button class="button backward">
<i class="fa-solid fa-backward fa"></i>
</button>
<button class="button forward">
<i class="fa fa-solid fa-forward-step"></i>
</button>
</div>
</div>
</div>
</body>
</html>
/*style.css*/
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
h1,
h3 {
color: green;
}
.ipod {
width: 100%;
max-width: 300px;
height: 500px;
background: #2c2c2c;
border-radius: 30px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.innerbox {
background-color: rgb(34, 32, 32);
width: 230px;
height: 200px;
margin: auto;
border: black 5px solid;
border-radius: 25px;
}
img {
width: 100%;
height: 100%;
border-radius: 25px;
}
.outercircle {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: aliceblue;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
}
.outerinnercircle {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: rgb(165, 169, 169);
margin: auto;
position: relative;
}
.button {
width: 30px;
height: 30px;
background-color: #fff;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
}
.button.play {
top: 125%;
left: 50%;
}
.menu {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
top: -20%;
left: 50%;
font-size: large;
font-weight: bold;
font-family: Geneva, Verdana, sans-serif;
}
.menu:hover {
color: #566493;
}
.button.backward {
top: 50%;
left: -25%;
background-position: 50%;
}
.button.forward {
top: 50%;
right: -50%;
background-position: 50%;
}
.button:hover {
background-color: rgb(149, 146, 146);
}
/* Media Queries for Responsive Design */
@media (max-width: 600px) {
.ipod {
max-width: 100%;
}
.innerbox {
width: 80%;
height: 30%;
}
.outercircle {
width: 70%;
height: 70%;
}
.outerinnercircle {
width: 40%;
height: 40%;
}
}
Output:
