Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="phone">
  <div class="inner">
    <div class="header">
      <button class="button back">
        <svg t="1577165392507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5866" width="16" height="16"><path d="M20.48 542.72l240.64 250.88c20.48 15.36 46.08 15.36 66.56 0s20.48-46.08 0-66.56L153.6 552.96h829.44c20.48 0 40.96-20.48 40.96-40.96s-20.48-56.32-40.96-56.32H153.6l174.08-174.08c20.48-15.36 20.48-46.08 0-66.56H261.12L15.36 465.92c-5.12 5.12-10.24 15.36-10.24 20.48 0 5.12-5.12 10.24-5.12 15.36 0 5.12 0 10.24 5.12 15.36 5.12 10.24 5.12 20.48 15.36 25.6z" p-id="5867"></path></svg>
      </button>
      <h2 class="title">My Playlist</h2>
      <button class="button more">
        <svg t="1577165711099" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8060" width="16" height="16"><path d="M231.08266667 509.49688889c-0.11377778 51.76888889-41.87022222 93.52533333-93.75288889 93.41155556-51.65511111-0.11377778-93.63911111-42.09777778-93.52533333-93.86666667 0-51.54133333 42.21155555-93.52533333 93.98044444-93.41155556 51.65511111 0.11377778 93.29777778 41.984 93.29777778 93.86666667z m656.49777778-93.75288889c51.76888889 0 93.86666667 41.87022222 93.86666666 93.52533333 0.11377778 51.65511111-41.87022222 93.75288889-93.63911111 93.75288889-51.88266667 0-93.75288889-41.64266667-93.75288889-93.52533333s41.64266667-93.75288889 93.52533334-93.75288889zM512.45511111 603.02222222c-51.65511111 0-93.98044445-42.43911111-93.75288889-93.75288889 0.34133333-51.76888889 42.21155555-93.52533333 93.98044445-93.52533333 51.65511111 0 93.86666667 42.21155555 93.63911111 93.75288889-0.11377778 51.65511111-42.09777778 93.52533333-93.86666667 93.52533333z" p-id="8061"></path></svg>
      </button>
    </div>
    
    <div class="cover">
      <img src="https://p2.music.126.net/rNQH185Dp2lcG2yII_Aiwg==/18159534045164927.jpg" alt="Sober Up">
    </div>
    
    <div class="info">
      <h3 class="song">Sober Up</h3>
      <h4 class="artist">AJR/Rviers Cuomo</h4>
    </div>
    
    <div class="time">
      <div class="bar"></div>
    </div>
    
    <div class="control">
      <button class="control-button prev">
        <svg t="1577170367189" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1743" width="40" height="40">
          <path d="M420.943721 392.442767c-106.153251 66.047119-106.153251 173.139025 0 239.100812l581.45358 361.467181c106.153251 66.047119 192.253437 23.039693 192.253437-95.913388V126.888975C1194.650738 7.850562 1108.46522-34.9862 1002.397301 30.975587L420.943721 392.442767z" p-id="1744" fill="#d5e1ea" filter="url(#inset-shadow)"></path>
          <path d="M0 0m127.998293 0l0 0q127.998293 0 127.998294 127.998293l0 767.98976q0 127.998293-127.998294 127.998294l0 0q-127.998293 0-127.998293-127.998294l0-767.98976q0-127.998293 127.998293-127.998293Z" p-id="1745" fill="#d5e1ea" filter="url(#inset-shadow)"></path>
        </svg>
      </button>
      
      <button class="play-button">
        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
          <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
            <feComponentTransfer in=SourceAlpha>
              <feFuncA type="table" tableValues="1 0" />
            </feComponentTransfer>
            <feGaussianBlur stdDeviation="50"/>
            <feOffset dx="-5" dy="-5" result="offsetblur"/>
            <feFlood flood-color="rgba(0, 0, 0, 0.2)" result="color"/>
            <feComposite in2="offsetblur" operator="in"/>
            <feComposite in2="SourceAlpha" operator="in" />
            <feMerge>
              <feMergeNode in="SourceGraphic" />
              <feMergeNode />
            </feMerge>
          </filter>
          <path d="M888.32 400.128L236.544 23.808A129.194667 129.194667 0 0 0 42.666667 135.765333v752.64a129.194667 129.194667 0 0 0 193.877333 111.786667L888.32 624.042667a129.28 129.28 0 0 0 0-223.829334z" p-id="7474" fill="#ffffff" filter="url(#inset-shadow)"></path>
        </svg>
      </button>
      
      <button class="control-button next">
        <svg t="1577170367189" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1743" width="40" height="40" transform="rotate(180)">
          <path d="M420.943721 392.442767c-106.153251 66.047119-106.153251 173.139025 0 239.100812l581.45358 361.467181c106.153251 66.047119 192.253437 23.039693 192.253437-95.913388V126.888975C1194.650738 7.850562 1108.46522-34.9862 1002.397301 30.975587L420.943721 392.442767z" p-id="1744" fill="#d5e1ea" filter="url(#inset-shadow)"></path>
          <path d="M0 0m127.998293 0l0 0q127.998293 0 127.998294 127.998293l0 767.98976q0 127.998293-127.998294 127.998294l0 0q-127.998293 0-127.998293-127.998294l0-767.98976q0-127.998293 127.998293-127.998293Z" p-id="1745" fill="#d5e1ea" filter="url(#inset-shadow)"></path>
        </svg>
      </button>
    </div>
    
  </div>
</div>

<div class="footer">
  <a target="_blank" href="https://dribbble.com/shots/8137871-Music-Player">design by Maya Koeva</a>
</div>

              
            
!

CSS

              
                body {
  background-color: #e5edf2;
}

.footer {
  text-align: center;
}

a {
  color: #8f95a4;
}

.phone {
  width: 375px;
  height: 812px;
  background-color: #f1f8fd;
  position: relative;
  border-radius: 40px;
  margin: 30px auto;
  box-shadow: 20px 20px 30px 0 rgba(0,0,0,0.1);
}

.phone::after {
  content: '';
  width: 135px;
  height: 6px;
  background-color: #c8d4dd;
  border-radius: 3px;
  display: block;
  position: absolute;
  bottom: 9px;
  left: 50%;
  margin-left: -67.5px;
}

.inner {
  padding: 40px 24px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
}

.title {
  margin: 0;
  line-height: 32px;
  font-size: 16px;
  color: #222e51;
}

.button {
  width: 32px;
  height: 32px;
  background-color: #f1f8fd;
  padding: 8px;
  border-radius: 8px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #222e51;
  box-shadow:
    6px 6px 6px rgba(0,0,0,0.05),
    -6px -6px 6px rgba(255,255,255,0.6),
    inset 2px 2px 5px rgba(0,0,0,0.03),
    inset -2px -2px 5px rgba(255,255,255,0.4);
  transition: all 0.3s;
}

.button:hover {
  box-shadow:
    6px 6px 6px rgba(0,0,0,0.05),
    -6px -6px 6px rgba(255,255,255,0.6),
    inset 3px 3px 3px rgba(0,0,0,0.03),
    inset -3px -3px 3px rgba(255,255,255,0.4);
}

.button:active {
  box-shadow:
    6px 6px 6px rgba(0,0,0,0.05),
    -6px -6px 6px rgba(255,255,255,0.6),
    inset 8px 8px 8px rgba(0,0,0,0.05),
    inset -8px -8px 8px rgba(255,255,255,0.6);
}

.cover {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  margin: 32px 0 40px 0;
  overflow: hidden;
  border: 3px solid #f1f8fd;
  box-shadow:
    20px 20px 20px rgba(0,0,0,0.07),
    -20px -20px 20px rgba(255,255,255,0.7),
    6px 6px 6px rgba(0,0,0,0.09),
    -6px -6px 6px rgba(255,255,255,0.9);
}

.cover::after {
  content: '';
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #f1f8fd;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -27.5px 0 0 -27.5px;
  box-shadow:
    inset 5px 5px 5px rgba(0,0,0,0.07),
    inset -5px -5px 5px rgba(255,255,255,0.7);
}

.cover img {
  width: 100%;
  height: 100%;
}

.info {
  text-align: center;
  margin-bottom: 46px;
}

.info .song {
  margin: 0 0 16px 0;
  line-height: 24px;
  font-size: 24px;
  color: #222e51;
}

.info .artist {
  margin: 0;
  line-height: 16px;
  font-size: 16px;
  font-weight: normal;
  color: #8f95a4;
}

.time {
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 8px;
  box-shadow:
    9px 9px 9px rgba(0,0,0,0.05),
    -9px -9px 9px rgba(255,255,255,0.5),
    inset 4px 4px 4px rgba(0,0,0,0.05),
    inset -4px -4px 4px rgba(255,255,255,0.5);
  margin-bottom: 56px;
}

.time .bar {
  width: 80%;
  height: 12px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 6px;
  background-color: #fed0b3;
  box-shadow:
    2px 2px 2px rgba(0,0,0,0.05),
    -2px -2px 2px rgba(255,255,255,0.5),
    inset 3px 3px 3px rgba(255,255,255,0.5),
    inset -3px -3px 3px rgba(0,0,0,0.05);
}

.control {
  padding: 0 40px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-button {
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}

.play-button {
  cursor: pointer;
  position: relative;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 26px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: block;
  transition: all 0.3s;
  box-shadow:
    9px 9px 9px rgba(0,0,0,0.06),
    -9px -9px 9px rgba(255,255,255,0.6),
    inset 5px 5px 5px rgba(0,0,0,0.07),
    inset -5px -5px 5px rgba(255,255,255,0.7);
}

.play-button::before {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fed0b3;
  top: 50%;
  left: 50%;
  margin: -35px 0 0 -35px;
  box-shadow:
    inset 3px 3px 3px rgba(255,255,255,0.5),
    inset -3px -3px 3px rgba(0,0,0,0.05);
}

.play-button:hover::before {
  box-shadow:
    inset 3px 3px 3px rgba(255,255,255,0.35),
    inset -3px -3px 3px rgba(0,0,0,0.035);
}

.play-button:active::before {
  box-shadow:
    inset 3px 3px 3px rgba(0,0,0,0.05),
    inset -3px -3px 3px rgba(255,255,255,0.5);
}

.play-button svg {
  position: relative;
  left: 3px;
}
              
            
!

JS

              
                
              
            
!
999px

Console