How to Create iPod Template using HTML and CSS ?

Last Updated : 22 Jan, 2024

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

ipodtemp

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