How to Create iPod Template using HTML and CSS ?

Last Updated : 28 Apr, 2025

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.

HTML

<!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>

CSS

/*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%;
  }
}