Homecoming Playlist Mockup

Developer
Anupam Chakravarty
Size
2,820 Kb
Views
28,336
  1. Homecoming Playlist Mockup Previews
  2. Homecoming Playlist Mockup HTML Codes
  3. Homecoming Playlist Mockup CSS Codes

How do I make an homecoming playlist mockup?

What is a homecoming playlist mockup? How do you make a homecoming playlist mockup? This script and codes were developed by Anupam Chakravarty on 07 September 2022, Wednesday.

Homecoming Playlist Mockup Previews
IQ Test

Homecoming Playlist Mockup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Homecoming Playlist Mockup</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Metadata Section -->
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Hoya Homecoming Hits Playlist!</title>
<!--Facebook Meta Data-->
<meta property="og:title" content="Hoya Homecoming Hits Playlist!" />
<meta property="og:url" content="http://homecoming.georgetown.edu/playlist.html" />
<meta property="og:image" content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/112586/Homecoming-Hits-Graphic-thumbnail.jpg" />
<meta property="og:description" content="Our curated mix features artists across genres and generations with tracks that remind us of home. From must-hum ballads to must-dance anthems (and, of course, The Fight Song), we’ll get you ready for tailgate, class parties and every Tombs trip in between." />
<!--Twitter Card Meta Data-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@gualumni">
<meta name="twitter:creator" content="@gualumni">
<meta name="twitter:title" content="Hoya Homecoming Hits Playlist!">
<meta name="twitter:description" content="Our curated mix features artists across genres and generations with tracks that remind us of home. From must-hum ballads to must-dance anthems (and, of course, The Fight Song), we’ll get you ready for tailgate, class parties and every Tombs trip in between.">
<meta name="twitter:image" content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/112586/Homecoming-Hits-Graphic-thumbnail.jpg">
</head>
<!-- End Metadata -->
<div class="container">
<h2>Hoya Homecoming Hits Playlist!</h2>
<p>Welcome to our Spotify playlist -- released just in time for Homecoming 2016! Our curated mix features artists across genres and generations with tracks that remind us of home. From must-hum ballads to must-dance anthems (and, of course, The Fight Song), we’ll get you ready for tailgate, class parties and every Tombs trip in between.</p>
<p>So start listening to the soundtrack of your weekend as you head back home to Georgetown University. Hoya Saxa!</p>
<p style="text-align:center;"><em>"Oh, now I'm coming home again, I'm in home again."</em></p>
<p>
</p>
<div class="promo-graphic"> <a href="https://open.spotify.com/user/georgetownalumni/playlist/1ZunIqW2sd34hDYFQTj6xz"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/112586/Homecoming-Hits-Graphic_copy.jpg"/></a>
</div>
<div class="playlist"> <iframe src="https://embed.spotify.com/?uri=spotify:user:georgetownalumni:playlist:1ZunIqW2sd34hDYFQTj6xz&theme=white" width="400" height="400" frameborder="0" allowtransparency="true"></iframe>
</div>
<div class="share-icons"> <div class="spotify-icon"> <a href="https://open.spotify.com/user/georgetownalumni/playlist/1ZunIqW2sd34hDYFQTj6xz"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/112586/listen-button.png"/></a> </div> <div class="twitter-icon"><a href="https://twitter.com/intent/tweet?text=%23NowPlaying%3A%20Getting%20geared%20up%20for%20the%20weekend%20with%20%23HoyaHomecoming%20Hits!%20Listen%3A%20http%3A%2F%2Fbit.ly%2F2d2yJZw%20by%20%40GUAlumni" onclick="window.open(this.href, 'Share', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=550,height=500'); return false;" style="border-bottom:none;" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/112586/tweet-button.png"/></a> </div> <div class="facebook-icon"><a href="https://www.facebook.com/sharer/sharer.php?u=http://homecoming.georgetown.edu/playlist.html" onclick="window.open(this.href, 'Share', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=550,height=500'); return false;" style="border-bottom:none;" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/112586/fb-button.png"/></a></div>
</div>
</div>
</body>
</html>

Homecoming Playlist Mockup - Script Codes CSS Codes

* { font-family: "nimbus-sans", Helvetica, Arial, sans-serif;
}
h2 { font-weight: 400; text-transform: uppercase;
}
p { margin:0 auto 20px auto;
}
.container { padding:60px; height:600px;
}
.playlist { width:50%; float:right; text-align:center;
}
.promo-graphic { width: 50%; float:left; text-align:center;
}
.promo-graphic img { border:1px solid gray; width:400px; height:400px;
}
.share-icons { clear:left; padding-top:30px;
}
.spotify-icon { border:0px solid black; width:35%; float:left; text-align:right;
}
.twitter-icon { width:30%; float:left; text-align:center;
}
.facebook-icon { width:35%; float:right; text-align:left;
}
Homecoming Playlist Mockup - Script Codes
Homecoming Playlist Mockup - Script Codes
Home Page Home
Developer Anupam Chakravarty
Username anupamc
Uploaded September 07, 2022
Rating 3
Size 2,820 Kb
Views 28,336
Do you need developer help for Homecoming Playlist Mockup?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anupam Chakravarty (anupamc) Script Codes
Name
Lombardi Quarterly - New Template
Homecoming 2017 - One Month to Go
BAS - Fourth Email
GT2015 Form Social Shares
1988 Interactive Invitation
Welcome to the Neighborhood Demo
ATG Email Design
A Pen by Anupam Chakravarty
1977 Reunion Infographic
BAS - First Email
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!