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 =
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >How to Create IPod template
using HTML and CSS
</ h3 >
< div class = "ipod" >
< div class = "innerbox" >
< img src =
</ 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 : 100 vh;
flex- direction : column;
} h 1 ,
h 3 {
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: