Bluetooth Settings mockup

In this example below you will see how to do a Bluetooth Settings mockup with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by gebrutommy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gebrutommy ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bluetooth Settings mockup</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  

  <div class="container"> 
  <div class="nav">
<i class="fa fa-bluetooth-b first"> <h1>Bluetooth settings</h1></i><i class="fa fa-angle-down fa-2x"></i>
</div>
    <div class="wrap">
  
 
    
    
    <span class="connected">
    <i class="fa fa-usb"></i>
    <h1>ANKER USB HUB</h1>
      <span>
    <h2>connected</h2></span>
      </span>

  <span class="connected">      
    <i class="fa fa-keyboard-o"></i>
    <h1>ANKER keyboard</h1>
        <span>
    <h2>connected</h2></span>
    </span>
      
   
           
      
      
      
      <span class="searching"><i class="fa fa-gamepad"></i>
      <h1>PS4 Controller</h1>
      <span><h2>searching <i class="fa fa-spinner fa-lg" aria-hidden="true"></i></h2></span>
      </span>
      
      
      
      
      
      <span class="disconnected">
    <i class="fa fa-headphones"></i><h1>BOSE Noise-Cancel</h1><h2>disconnected</h2></span>
     
           
         <span class="disconnected">
       <i class="fa fa-gamepad"></i>
      <h1>XBOX1 Controller</h1>
      <h2>disconnected</h2>
   </span>
      
      
         <span class="disconnected">
<i class="fa fa-tablet"></i>
       <h1>Surface tablet</h1>
      <h2>disconnected</h2>
   </span>
      
      <i class="fa fa-bluetooth-b fa-5x"></i>
  <div class="question"><i class="fa fa-question-circle fa-2x"></i>
    
      
      
       </div><!--wrap-->
    </div><!--container-->
  </div><!--nav-->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/gebrutommy/bluetooth-settings-mockup-vGXqgL */
* {
  box-sizing: border-box; 
}
body{background:#e6e670; font-family: 'Open Sans', sans-serif;}

span.searching{padding:30px 0px; font-size:1.03em; }
span.disconnected{color:rgba(200, 200, 200, .6); padding:15px 0px; border-bottom:solid rgba(200, 200, 200, .6) 1px;}
span.searching{color:rgba(255, 255, 255, .7); padding-top:40px;}



.wrap{color:white; height:100%; width:100%;display:flex; justify-content:space-around; align-items:center; flex-direction:column;
}
.wrap>span{display:flex; justify-content:space-between; width:80%;  align-items:space-around; margin:0 auto;  font-family: 'Open Sans', sans-serif;}
.connected span{font-weight:600;}
.wrap .connected{padding:15px 0px; border-bottom:solid white 1px;
font-size:1.1em;}

.container {
  height: 500px;
  width: 320px;
  background-color: rgba(0, 0, 205, .7);
  box-shadow: 0px 10px 22px -8px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  position:absolute;
  margin:auto;
  left:0;
  right:0;
   top:0; 
  bottom:0;
}

.nav {
  height: 60px;
  width: 320px;
  background-color: rgba(60, 60, 60, .9);
  box-shadow: 0px 10px 22px -8px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-around;
  align-items: center;
  
}
.nav h1{ font-family: 'Open Sans', sans-serif;}
.nav .fa-2x {
  color: white;
}

.first {
  color: white;
  width: 55%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.25em;
}


.fa-5x {
  font-size: 18em;
  color: rgba(0, 0, 255, .1);
z-index:0;
position:absolute;
  text-align:center;
}

.question {
  color: rgba(200, 200, 200, .6);
  margin:0 0 0 280px;
}
.question:hover{color:rgba(255, 255, 255, .7);}

.fa-spinner { padding:0 2px;
  -webkit-animation: spin .2s infinite linear;
  animation: spin 2s infinite linear;
     -webkit-transform-origin: 50% 58%;
         transform-origin:50% 58%;
         -ms-transform-origin:50% 58%; /* IE 9 */
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

Comments