WebTechnologies jQuery Mobile Assessment

index.pug

.page(data-role="page", data-theme="b")
   .header(data-role="header",data-position="fixed",data-tap-toggle="false" data-theme="b")
      h1 
         a(href="index.html") Stoopify
      
   .banner
      .middle
         h1 Listen to THE MUSIC
         a(href="#musicList")
            button Browse Music
            
   #musicList(data-role="main")
      .setList(data-role="collapsible-set")
         .artist(data-role="collapsible" data-mini="true")
            h4 Rage Against The Machine
            .content
               p Any content

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

style.sass

/* IMPORTS */
@import url('https://fonts.googleapis.com/css?family=Quicksand')

/* VARIABLES */
$bg: #111
$mainColor: #fff
$mainFam: 'Quicksand', sans-serif
$uiColor: #E74C3C

/* MIXINS */
=banner()
   height: 100vh
   width: 100%
   background: url('http://cdn.allwallpaper.in/wallpapers/1920x1200/4797/black-background-dark-minimalistic-music-red-1920x1200-wallpaper.jpg')
   background-position: left
   background-size: cover
   background-repeat: no-repeat
   
=radius()
   -webkit-border-radius: 13px
   -moz-border-radius: 13px
   -o-border-radius: 13px
   border-radius: 13px


body
   color: $mainColor
   background: $bg
   font-family: $mainFam
   cursor: default
   
/* HEADER */
.header
   border-bottom: 5px solid $uiColor
   display: flex
   padding: 16px
   
   h1
      margin: auto
      
      a
         color: #fff
         &:hover
            color: #fff
            text-decoration: none
      
.banner
   +banner
   display: flex
   
   .middle
      display: flex
      flex-direction: column
      margin: 120px auto
      filter: brightness(100%)
      
      h1
         font-size: 70px
         
      a
         color: #333
         &:hover
            color: #333
         
         button
            margin: 120px auto
            padding: 12px
            background: #E74C3C
            border: none
            color: #fff
            text-align:center
            +radius
            
/* MUSIC LIST */
#musicList
   padding: 12px

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" />

WebTechnologies jQuery Mobile Assessment

.page(data-role="page", data-theme="b")
   .header(data-role="header",data-position="fixed",data-tap-toggle="false" data-theme="b")
      h1 
         a(href="index.html") Stoopify
      
   .banner
      .middle
         h1 Listen to THE MUSIC
         a(href="#musicList")
            button Browse Music
            
   #musicList(data-role="main")
      .setList(data-role="collapsible-set")
         .artist(data-role="collapsible" data-mini="true")
            h4 Rage Against The Machine
            .content
               p Any content

webtechnologies-jquery-mobile-assessment.markdown

WebTechnologies jQuery Mobile Assessment

A Pen by Francis Lorenz Taberdo on CodePen.

License.

zlqwme.markdown

ZLQwme

A Pen by Francis Lorenz Taberdo on CodePen.

License.