[F2U] iPod

subject404

Info

Created: 4 years, 8 months ago
Creator: subject404
Favorites: 1040
Trade Listing: Free

free code template ipod freebie playlist html layout f2u

Profile

Preview
Code

Lili.mp3

3:18

3:44

How Do You Feel Today?

Gabrielle Aplin

3:18

3:38

Hurt Me

Kerli

3:18

4:54

Feel Like Falling

Digital Daggers

3:18

3:45

Hypnotized explicit

Set It Off

2:18

3:17

There's A Good Reason These Tables Are Numbered Honey, You Just Haven't Thought Of It Yet

Panic! At The Disco

Species

Aasimar / Divine Dragon

Gender

Female

Height

5'6"

Occupation

Translator

Alignment

Neutral Good

Orientation

Asexual

Horoscope

Cancer • July 17th

Voice Claim

N/A

Likes

Dislikes

White

Being Alone

Wind

Sour Food

Pineberries

Fog

Linguistics

Needles

Carnations

Shadows

Aesthetic

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

host

relationship

relationship

relationship

<div class="container justify-content-center px-0">

<div class="card col-12 col-md-8 col-lg-4 p-0" style="background-image: linear-gradient(#333536, #0C1929); border: .75em outset; border-radius: 1.5em; min-width: 310px;">

<div class="card-header nav display-4 py-3" style="background: none; border: none;">

<a class="d-inline text-light show active" data-toggle="tab" href="#music"><i class="nav-item far fa-music"></i></a>

<div class="d-inline mx-auto text-light" style="font-weight: bold;">Name.mp3</div>

<a class="d-inline text-light show" data-toggle="tab" href="#tab"><i class="nav-item fas fa-stream"></i></a>

</div>

<hr class="my-0 mx-0" style="border: medium solid white; opacity: .2;">

<div class="card-content tab-content" style="height: 40em; overflow: hidden;">

<div class="tab-pane fade active show" id="music">

<div class="rounded-circle my-5 mx-auto" style="background: url(https://placehold.it/600x600/555) center no-repeat; background-size: cover; height: 20em; width: 20em;">

<br>

</div>

<div class="carousel slide carousel-fade" data-pause="true" id="playlist">

<div class="carousel-item show active">

<div class="mb-4">

<div class="progress mx-4" style="height: 7px;">

<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded" style="border: thin solid silver; width: 60%; height: 7px;">

<br>

</div>

</div>

<div class="text-light my-1 mx-4" style="font-size: 10px; letter-spacing: .1em;">

<div class="d-inline pull-left">3:18</div>

<div class="d-inline pull-right">?:??</div>

</div>

</div>

<div class="px-2 text-light" style="text-align: center; white-space: nowrap; overflow-x: hidden;">

<div style="font-size: 22px; font-weight: bold;">SONG TITLE</div>

<div style="font-size: 18px;">ARTIST</div>

</div>

<div class="display-4 mt-2 mb-4 mx-4 py-3" style="text-align: center;">

<div class="d-inline pull-left my-0"><a class="tooltipster" href="https://unsplash.com/" id="" rel="noopener noreferrer" target="_blank" title="photos from unsplash"><i class="text-warning fal fa-images"></i></a></div>

<div class="d-inline">

<div class="d-inline pr-4"><a data-slide="prev" href="#playlist"><i class="text-light fas fa-backward"></i></a></div>

<div class="d-inline px-2" style="vertical-align: sub;"><span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px;" src="https://www.youtube.com/embed/VIDEO-ID"></iframe></span></div>

<div class="d-inline pl-4"><a data-slide="next" href="#playlist"><i class="text-light fas fa-forward"></i></a></div>

</div>

<div class="d-inline pull-right my-0"><a class="tooltipster" href="https://toyhou.se/Subject404" id="" rel="noopener noreferrer" target="_blank" title="code by subject404"><i class="text-warning far fa-code"></i></a></div>

</div>

</div>

<div class="carousel-item">

<div class="mb-4">

<div class="progress mx-4" style="height: 7px;">

<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded" style="border: thin solid silver; width: 60%; height: 7px;">

<br>

</div>

</div>

<div class="text-light my-1 mx-4" style="font-size: 10px; letter-spacing: .1em;">

<div class="d-inline pull-left">3:18</div>

<div class="d-inline pull-right">?:??</div>

</div>

</div>

<div class="px-2 text-light" style="clear: both; text-align: center; white-space: nowrap; overflow-x: hidden;">

<div style="font-size: 22px; font-weight: bold;">SONG TITLE</div>

<div style="font-size: 18px;">ARTIST</div>

</div>

<div class="display-4 mt-2 mb-4 mx-4 py-3" style="text-align: center;">

<div class="d-inline pull-left my-0"><a class="tooltipster" href="https://unsplash.com/" id="" rel="noopener noreferrer" target="_blank" title="photos from unsplash"><i class="text-warning fal fa-images"></i></a></div>

<div class="d-inline">

<div class="d-inline pr-4"><a data-slide="prev" href="#playlist"><i class="text-light fas fa-backward"></i></a></div>

<div class="d-inline px-2" style="vertical-align: sub;"><span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px;" src="https://www.youtube.com/embed/VIDEO-ID"></iframe></span></div>

<div class="d-inline pl-4"><a data-slide="next" href="#playlist"><i class="text-light fas fa-forward"></i></a></div>

</div>

<div class="d-inline pull-right my-0"><a class="tooltipster" href="https://toyhou.se/Subject404" id="" rel="noopener noreferrer" target="_blank" title="code by subject404"><i class="text-warning far fa-code"></i></a></div>

</div>

</div>

<div class="carousel-item show">

<div class="mb-4">

<div class="progress mx-4" style="height: 7px;">

<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded" style="border: thin solid silver; width: 60%; height: 7px;">

<br>

</div>

</div>

<div class="text-light my-1 mx-4" style="font-size: 10px; letter-spacing: .1em;">

<div class="d-inline pull-left">3:18</div>

<div class="d-inline pull-right">?:??</div>

</div>

</div>

<div class="px-2 text-light" style="clear: both; text-align: center; white-space: nowrap; overflow-x: hidden;">

<div style="font-size: 22px; font-weight: bold;">SONG TITLE</div>

<div style="font-size: 18px;">ARTIST</div>

</div>

<div class="display-4 mt-2 mb-4 mx-4 py-3" style="text-align: center;">

<div class="d-inline pull-left my-0"><a class="tooltipster" href="https://unsplash.com/" id="" rel="noopener noreferrer" target="_blank" title="photos from unsplash"><i class="text-warning fal fa-images"></i></a></div>

<div class="d-inline">

<div class="d-inline pr-4"><a data-slide="prev" href="#playlist"><i class="text-light fas fa-backward"></i></a></div>

<div class="d-inline px-2" style="vertical-align: sub;"><span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px;" src="https://www.youtube.com/embed/VIDEO-ID"></iframe></span></div>

<div class="d-inline pl-4"><a data-slide="next" href="#playlist"><i class="text-light fas fa-forward"></i></a></div>

</div>

<div class="d-inline pull-right my-0"><a class="tooltipster" href="https://toyhou.se/Subject404" id="" rel="noopener noreferrer" target="_blank" title="code by subject404"><i class="text-warning far fa-code"></i></a></div>

</div>

</div>

<div class="carousel-item show">

<div class="mb-4">

<div class="progress mx-4" style="height: 7px;">

<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded" style="border: thin solid silver; width: 60%; height: 7px;">

<br>

</div>

</div>

<div class="text-light my-1 mx-4" style="font-size: 10px; letter-spacing: .1em;">

<div class="d-inline pull-left">3:18</div>

<div class="d-inline pull-right">?:??</div>

</div>

</div>

<div class="px-2 text-light" style="clear: both; text-align: center; white-space: nowrap; overflow-x: hidden;">

<div style="font-size: 22px; font-weight: bold;">SONG TITLE <span class="text-uppercase px-1" style="vertical-align: 25%; font-size: 9px; color: #808080; border: thin solid #808080; border-radius: 3px;">explicit</span></div>

<div style="font-size: 18px;">ARTIST</div>

</div>

<div class="display-4 mt-2 mb-4 mx-4 py-3" style="text-align: center;">

<div class="d-inline pull-left my-0"><a class="tooltipster" href="https://unsplash.com/" id="" rel="noopener noreferrer" target="_blank" title="photos from unsplash"><i class="text-warning fal fa-images"></i></a></div>

<div class="d-inline">

<div class="d-inline pr-4"><a data-slide="prev" href="#playlist"><i class="text-light fas fa-backward"></i></a></div>

<div class="d-inline px-2" style="vertical-align: sub;"><span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px;" src="https://www.youtube.com/embed/VIDEO-ID"></iframe></span></div>

<div class="d-inline pl-4"><a data-slide="next" href="#playlist"><i class="text-light fas fa-forward"></i></a></div>

</div>

<div class="d-inline pull-right my-0"><a class="tooltipster" href="https://toyhou.se/Subject404" id="" rel="noopener noreferrer" target="_blank" title="code by subject404"><i class="text-warning far fa-code"></i></a></div>

</div>

</div>

<div class="carousel-item show">

<div class="mb-4">

<div class="progress mx-4" style="height: 7px;">

<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary rounded" style="border: thin solid silver; width: 60%; height: 7px;">

<br>

</div>

</div>

<div class="text-light my-1 mx-4" style="font-size: 10px; letter-spacing: .1em;">

<div class="d-inline pull-left">3:18</div>

<div class="d-inline pull-right">?:??</div>

</div>

</div>

<div class="px-2 text-light" style="clear: both; text-align: center; white-space: nowrap; overflow-x: hidden;">

<div style="font-size: 22px; font-weight: bold;">SONG TITLE</div>

<div style="font-size: 18px;">ARTIST</div>

</div>

<div class="display-4 mt-2 mb-4 mx-4 py-3" style="text-align: center;">

<div class="d-inline pull-left my-0"><a class="tooltipster" href="https://unsplash.com/" id="" rel="noopener noreferrer" target="_blank" title="photos from unsplash"><i class="text-warning fal fa-images"></i></a></div>

<div class="d-inline">

<div class="d-inline pr-4"><a data-slide="prev" href="#playlist"><i class="text-light fas fa-backward"></i></a></div>

<div class="d-inline px-2" style="vertical-align: sub;"><span class="fr-video fr-fvc fr-dvi fr-draggable" contenteditable="true"><iframe style="border: thick solid white; border-radius: 5em; height: 25px; width: 25px;" src="https://www.youtube.com/embed/VIDEO-ID"></iframe></span></div>

<div class="d-inline pl-4"><a data-slide="next" href="#playlist"><i class="text-light fas fa-forward"></i></a></div>

</div>

<div class="d-inline pull-right my-0"><a class="tooltipster" href="https://toyhou.se/Subject404" id="" rel="noopener noreferrer" target="_blank" title="code by subject404"><i class="text-warning far fa-code"></i></a></div>

</div>

</div>

</div>

</div>

<div class="tab-pane fade" id="tab">

<div class="accordion panel-group" id="accordion" style="font-variant: small-caps;">

<div class="panel">

<a class="text-light collapsed" data-parent="#accordion" data-target="#about" data-toggle="collapse">

<div class="panel-accordion display-4 my-4 mx-4"><span class="d-inline" style="cursor: pointer; font-weight: bold;">About</span><span class="d-inline pull-right"><i class="far fa-angle-right"></i></span></div>

</a>

<div class="panel-accordion panel-collapse mx-4 text-light collapse" data-parent="#accordion" id="about" style="text-align: justify;">

<div>

<p class="d-inline mb-0" style="font-weight: bold;">Species</p>

<p class="d-inline pull-right mb-0">content</p>

<hr class="mt-0" style="border: thin dashed silver;">

<p class="d-inline mb-0" style="font-weight: bold;">Gender</p>

<p class="d-inline pull-right mb-0">content</p>

<hr class="mt-0" style="border: thin dashed silver;">

<p class="d-inline mb-0" style="font-weight: bold;">Height</p>

<p class="d-inline pull-right mb-0">content</p>

<hr class="mt-0" style="border: thin dashed silver;">

<p class="d-inline mb-0" style="font-weight: bold;">Occupation</p>

<p class="d-inline pull-right mb-0">content</p>

<hr class="mt-0" style="border: thin dashed silver;">

<p class="d-inline mb-0" style="font-weight: bold;">Alignment</p>

<p class="d-inline pull-right mb-0">content</p>

<hr class="mt-0" style="border: thin dashed silver;">

<p class="d-inline mb-0" style="font-weight: bold;">Orientation</p>

<p class="d-inline pull-right mb-0">content</p>

<hr class="mt-0" style="border: thin dashed silver;">

<p class="d-inline mb-0" style="font-weight: bold;">Horoscope</p>

<p class="d-inline pull-right mb-0">content</p>

<hr class="mt-0" style="border: thin dashed silver;">

<p class="d-inline mb-0" style="font-weight: bold;">Voice Claim</p>

<p class="d-inline pull-right mb-0">content</p>

<hr class="mt-0" style="border: thin dashed silver;">

</div>

</div>

</div>

<div class="panel">

<a class="text-light collapsed" data-parent="#accordion" data-target="#info" data-toggle="collapse">

<div class="panel-accordion display-4 my-4 mx-4"><span class="d-inline" style="cursor: pointer; font-weight: bold;">Info</span><span class="d-inline pull-right"><i class="far fa-angle-right"></i></span></div>

</a>

<div class="panel-accordion panel-collapse mx-4 text-light collapse" data-parent="#accordion" id="info" style="text-align: justify;">

<div>

<p class="d-inline mb-0" style="font-weight: bold;">Likes</p>

<p class="d-inline pull-right mb-0" style="font-weight: bold;">Dislikes</p>

<hr class="my-0" style="border: thin dashed silver;">

<p class="d-inline-block mt-2 mb-0"><i class="text-success fas fa-check-circle"></i> content</p>

<p class="d-inline-block mt-2 mb-0 pull-right">content <i class="text-danger fas fa-times-circle"></i></p>

<br>

<p class="d-inline-block mt-2 mb-0"><i class="text-success fas fa-check-circle"></i> content</p>

<p class="d-inline-block mt-2 mb-0 pull-right" style="clear: right;">content <i class="text-danger fas fa-times-circle"></i></p>

<br>

<p class="d-inline-block mt-2 mb-0"><i class="text-success fas fa-check-circle"></i> content</p>

<p class="d-inline-block mt-2 mb-0 pull-right" style="clear: right;">content <i class="text-danger fas fa-times-circle"></i></p>

<br>

<p class="d-inline-block mt-2 mb-0"><i class="text-success fas fa-check-circle"></i> content</p>

<p class="d-inline-block mt-2 mb-0 pull-right" style="clear: right;">content <i class="text-danger fas fa-times-circle"></i></p>

<br>

<p class="d-inline-block mt-2 mb-0"><i class="text-success fas fa-check-circle"></i> content</p>

<p class="d-inline-block mt-2 mb-0 pull-right" style="clear: right;">content <i class="text-danger fas fa-times-circle"></i></p>

<br>

<p class="mb-0" style="text-align: center; font-weight: bold;">Aesthetic</p>

<hr class="mt-0" style="border: thin dashed silver;">

<div class="row" style="height: 6em;">

<div class="col-4 pr-0">

<div class="col-12 p-0 h-100">

<div class="h-100 rounded bg-light" style="background: url(IMAGE URL) center no-repeat; background-size: cover;">

<br>

</div>

</div>

</div>

<div class="col-4 px-2">

<div class="col-12 p-0 h-100">

<div class="h-100 rounded bg-light" style="background: url(IMAGE URL) bottom no-repeat; background-size: cover;">

<br>

</div>

</div>

</div>

<div class="col-4 pl-0">

<div class="col-12 p-0 h-100">

<div class="h-100 rounded bg-light" style="background: url(IMAGE URL) left no-repeat; background-size: cover;">

<br>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="panel">

<a class="text-light collapsed" data-parent="#accordion" data-target="#trivia" data-toggle="collapse">

<div class="panel-accordion display-4 my-4 mx-4"><span class="d-inline" style="cursor: pointer; font-weight: bold;">Trivia</span><span class="d-inline pull-right"><i class="far fa-angle-right"></i></span></div>

</a>

<div class="panel-accordion panel-collapse mx-4 text-light collapse" data-parent="#accordion" id="trivia" style="text-align: justify;">

<div class="pr-2" style="max-height: 20em; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

</div>

</div>

<div class="panel">

<a class="text-light collapsed" data-parent="#accordion" data-target="#relationships" data-toggle="collapse">

<div class="panel-accordion display-4 my-4 mx-4"><span class="d-inline" style="cursor: pointer; font-weight: bold;">Relationships</span><span class="d-inline pull-right"><i class="far fa-angle-right"></i></span></div>

</a>

<div class="panel-accordion panel-collapse mx-4 text-light collapse" data-parent="#accordion" id="relationships" style="text-align: justify;">

<div class="pr-2" style="max-height: 20em; overflow: auto;">

<p class="d-inline mb-0" style="font-weight: bold;"><a href="" id="">Name</a></p>

<p class="d-inline pull-right mb-0">relationship</p>

<hr class="my-0" style="border: thin dashed silver;">

<p class="text-danger my-0" style="font-size: 20px; text-align: center;"><i class="fas fa-heart"></i> <i class="fas fa-heart"></i> <i class="fas fa-heart"></i> <i class="far fa-heart"></i> <i class="far fa-heart"></i></p>

<br>

<p class="d-inline mb-0" style="font-weight: bold;"><a href="" id="">Name</a></p>

<p class="d-inline pull-right mb-0">relationship</p>

<hr class="my-0" style="border: thin dashed silver;">

<p class="text-danger my-0" style="font-size: 20px; text-align: center;"><i class="fas fa-heart"></i> <i class="fas fa-heart"></i> <i class="fas fa-heart"></i> <i class="far fa-heart"></i> <i class="far fa-heart"></i></p>

<br>

<p class="d-inline mb-0" style="font-weight: bold;"><a href="" id="">Name</a></p>

<p class="d-inline pull-right mb-0">relationship</p>

<hr class="my-0" style="border: thin dashed silver;">

<p class="text-danger my-0" style="font-size: 20px; text-align: center;"><i class="fas fa-heart"></i> <i class="fas fa-heart"></i> <i class="fas fa-heart"></i> <i class="far fa-heart"></i> <i class="far fa-heart"></i></p>

<br>

<p class="d-inline mb-0" style="font-weight: bold;"><a href="" id="">Name</a></p>

<p class="d-inline pull-right mb-0">relationship</p>

<hr class="my-0" style="border: thin dashed silver;">

<p class="text-danger my-0" style="font-size: 20px; text-align: center;"><i class="fas fa-heart"></i> <i class="fas fa-heart"></i> <i class="fas fa-heart"></i> <i class="far fa-heart"></i> <i class="far fa-heart"></i></p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Recent Images

No images.

2242 Users Online 11:03 pm © cyancrows 2017

About FAQ Rules TOS