How to Create iPod Template using HTML and CSS ?
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 >w3wiki</ h1 > < h3 >How to Create IPod template using HTML and CSS </ h3 > < div class = "ipod" > < div class = "innerbox" > < img src = "https://media.w3wiki.net/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 : 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: