--------------------------------------------------------------->
jfjenwu3uwhwwywihrhh3
<div class="card" style="position:relative;width:360px;height:640px;margin:auto;border:16px black solid;border-top-width:60px;border-bottom-width:60px;border-radius:36px;">
  
  
  
  <!------HORIZONTAL LINE ON TOP OF THE DEVICE------>
  <div class="text-center">
  <div class="card" style="display:block; width:60px;height:5px;position:absolute;top:-30px;left:50%;transform:translate(-50%, -50%);background:#4e4e4e;border-radius:10px;"></div>
  </div>
  <!------END HORIZONTAL LINE ON TOP OF THE DEVICE------>
  
  
  
  <div class="ui-accordion card" style="background:#000;padding:0px;border:0px;border-radius:0px;">
   <div class="ui-accordion-content card-block" style="height:520px;border-radius:5px;overflow-y:auto;color:#000;padding:0px;">
    
    
    
    <!------NOTIFICATION BAR------>
    <a style="display:flex;justify-content:space-between;color:#fff;">
      <span>
        <i class="fas fa-signal"></i>
        <i class="fa fa-wifi"></i>
      </span>
      <span>00:00 AM</span>
      <span>
        75% 
      <i class="fa fa-battery-three-quarters"></i>
      </span>
    </a>
    <!------END NOTIFICATION BAR------>
    
    
    
    
    
    <!------CONTENT------>
    <div class="table-responsive tab-content" style="height:430px;background-color:#fff;">
    
    
    <!------TWITTER
    
    Add-on(s) instruction:
    - To make the account verified, add <i class="fas fa-badge-check text-primary ml-1"></i> after <strong>username</strong>
    - To make the account protected, add <i class="fas fa-lock-alt ml-1"></i> after <strong>username</strong>
    
    --------------->
      <div class="tab-pane fade" id="Twitter" style="max-height:1100px;background-color:#fff;">
        
        <div class="card-block border-0 bg-faded" style="height:130px;background-color:#cecece;color:#000;background-image:url(https://via.placeholder.com/300);background-position:center;background-size:cover;background-repeat:no-repeat;"></div>
        <div class="row no-gutters" style="margin-bottom:5px;">
          <div>
            
          <!------ PROFILE PICTURE ------>
          <img src="https://via.placeholder.com/140" class="fr-rounded p-1" style="max-height:100px;margin-left:10px;margin-top:-50px;margin-bottom:5px;background:#fff;">
          <!------ END PROFILE PICTURE ------>
            
          <!------ USERNAME ------>
          <div class="pl-2">
            <strong>username</strong>
            <br><small style="color:#aaa;">@username</small>
          </div>
          <!------ END USERNAME ------>
          
          </div>
          <div class="text-center p-2 pull-right" style="margin-left:110px;">
            <div class="card-block m-0 p-1 text-white mx-auto" style="font-size:12px;border-radius:20px;width:70px;background-color:#cecece;"> Following </div>
          </div>
        </div>
        
        <!------ SHORT DESCRIPTION ------>
        <div class="px-2 py-1">
          <p align="justify" style="font-size:12px;">Descriptions, tidbits, etc. Uses <strong>& # 6 4 ;</strong> (without the space) to write an @ which doesn't link to other th user.</p>
        </div>
        <!------ END SHORT DESCRIPTION ------>
        
        <!------ STATUS ------>
        <div class="px-2"><p align="left"><i class="fal fa-map-marker-alt" style="color:#c1c1c1;"></i><small style="opacity:.5;"> location, house, whatsoever</small></p></div>
        <div class="px-2"><p align="left"><i class="fal fa-calendar" style="color:#c1c1c1;"></i><small style="opacity:.5;"> birthday, date of death, etc</small></p></div>
        <div class="px-2"><p align="left"><i class="fal fa-link" style="color:#c1c1c1;"></i><small style="opacity:.5;"> anything you want</small></p></div>
        <div class="px-2 pt-1"><p style="font-size:12px;"><strong>1,000</strong> Following <strong>1,000</strong> Followers</p></div>
        <div class="px-2"><p align="justify" style="font-size:12px;color:#c1c1c1;">Not followed by anyone you follow</p></div>
        <!------ END STATUS ------>
        
        <div class="row no-gutters mx-auto text-center" style="margin-top: 15px;">
          <div class="col-3"><span style="font-size: 12px;font-weight: bold;">Tweets</span> </div>
          <div class="col-3 text-truncate"><span class="text-truncate" style="font-size: 12px;">Tweets & Replies</span></div>
          <div class="col-3"><span style="font-size: 12px;">Media</span></div>
          <div class="col-3"><span style="font-size: 12px;">Likes</span></div>
        </div>
        <div class="card" style="width: 65px;margin-left: 8px;background: #1d9bf0;"></div>
        <hr style="border-color:#e5e5e5;margin-top:0px;">
        
        
        <!------ 1ST TWEET ------>
        <div class="row no-gutters">
          <div class="col-2 pl-1"><img src="https://via.placeholder.com/140" class="fr-rounded p-1" style="max-height: 60px;" alt="character image"></div>
          <div class="col-10 px-2"><p style="font-size:12px;margin-bottom:0px;"><strong>username</strong> <small style="color:#aaa;"> @username</small> · 5h</p>
          <p align="justify" style="font-size: 12px;margin-bottom: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="row no-gutters mx-auto">
            <div class="col-3"><span><i class="far fa-comment"></i> 10</span></div>
            <div class="col-3" style="color:#00BA7C;"><span><i class="fas fa-retweet"></i> 10</span></div>
            <div class="col-3" style="color:#F91880;"><span><i class="fas fa-heart"></i> 10</span></div>
            <div class="col-3"><i class="far fa-external-link"></i></div>
          </div>
          </div>
        </div>
        <hr style="border-color:#e5e5e5;">
        <!------ END 1ST TWEET ------>
        
        
        <!------ 2ND TWEET ------>
        <div class="row no-gutters">
          <div class="col-2 pl-1"><img src="https://via.placeholder.com/140" class="fr-rounded p-1" style="max-height: 60px;" alt="character image"></div>
          <div class="col-10 px-2"><p style="font-size:12px;margin-bottom:0px;"><strong>username</strong> <small style="color:#aaa;"> @username</small> · 16h</p>
          <p align="justify" style="font-size: 12px;margin-bottom: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis sagittis erat, sed fringilla eros.</p>
          <div class="row no-gutters mx-auto">
            <div class="col-3"><span><i class="far fa-comment"></i> 10</span></div>
            <div class="col-3"><span><i class="far fa-retweet"></i> 10</span></div>
            <div class="col-3"><span><i class="far fa-heart"></i> 10</span></div>
            <div class="col-3"><i class="far fa-external-link"></i></div>
          </div>
          </div>
        </div>
        <hr style="border-color:#e5e5e5;">
        <!------ END 2ND TWEET ------>
        
        
        <!------ 3RD TWEET ------>
        <div class="row no-gutters">
          <div class="col-2 pl-1"><img src="https://via.placeholder.com/140" class="fr-rounded p-1" style="max-height: 60px;" alt="character image"></div>
          <div class="col-10 px-2"><p style="font-size:12px;margin-bottom:0px;"><strong>username</strong> <small style="color:#aaa;"> @username</small> · Dec 30, 2021</p>
          <p align="justify" style="font-size: 12px;margin-bottom: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis sagittis erat, sed fringilla eros. Praesent ut urna ullamcorper, efficitur massa vitae, aliquet metus.</p>
          <div class="row no-gutters mx-auto">
            <div class="col-3"><span><i class="far fa-comment"></i> 10</span></div>
            <div class="col-3"><span><i class="far fa-retweet"></i> 10</span></div>
            <div class="col-3"><span><i class="far fa-heart"></i> 10</span></div>
            <div class="col-3"><i class="far fa-external-link"></i></div>
          </div>
          </div>
        </div>
        <hr style="border-color:#e5e5e5;">
        <!------ END 3RD TWEET ------>
        
        
        <!------ 4TH TWEET (WITH IMAGES) ------>
        <div class="row no-gutters">
          <div class="col-2 pl-1"><img src="https://via.placeholder.com/140" class="fr-rounded p-1" style="max-height: 60px;" alt="character image"></div>
          <div class="col-10 px-2"><p style="font-size:12px;margin-bottom:0px;"><strong>username</strong> <small style="color:#aaa;"> @username</small> · Dec 28, 2021</p>
          <p align="justify" style="font-size: 12px;margin-bottom: 5px;">You can put images, too.</p>
          <div class="tab-content card rounded my-2" style="background:#fff url(https://via.placeholder.com/300) no-repeat center;background-size:100%;border-radius:15px;height:160px;background-repeat:no-repeat;"></div>
          <div class="row no-gutters mx-auto">
            <div class="col-3"><span><i class="far fa-comment"></i> 10</span></div>
            <div class="col-3"><span><i class="far fa-retweet"></i> 10</span></div>
            <div class="col-3"><span><i class="far fa-heart"></i> 10</span></div>
            <div class="col-3"><i class="far fa-external-link"></i></div>
          </div>
          </div>
        </div>
        <hr style="border-color:#e5e5e5;">
        <!------ END 4TH TWEET ------>
        
        
        <!------ 5TH TWEET (RETWEET) ------>
        <div class="row no-gutters ml-5">
          <div class="col">
            <p style="font-size:12px;margin-bottom:0px;">
              <small style="color:#aaa;"><span><i class="far fa-retweet"></i> username retweeted</span></small>
            </p>
          </div>
        </div>
        <div class="row no-gutters">
          <div class="col-2 pl-1"><img src="https://via.placeholder.com/140" class="fr-rounded p-1" style="max-height:60px;" alt="character image"></div>
          <div class="col-10 px-2"><p style="font-size:12px;margin-bottom:0px;"><strong>other user</strong> <small style="color:#aaa;"> @other user</small> · Dec 30, 2021</p>
          <p align="justify" style="font-size:12px;margin-bottom:5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis sagittis erat, sed fringilla eros. Praesent ut urna ullamcorper, efficitur massa vitae, aliquet metus.</p>
          <div class="row no-gutters mx-auto">
            <div class="col-3"><span><i class="far fa-comment"></i> 10</span></div>
            <div class="col-3"><span><i class="far fa-retweet"></i> 10</span></div>
            <div class="col-3"><span><i class="far fa-heart"></i> 10</span></div>
            <div class="col-3"><i class="far fa-external-link"></i></div>
          </div>
          </div>
        </div>
        <hr style="border-color:#e5e5e5;">
        <!------ END 5TH TWEET ------>
        
        
        <!------ CAN ADD MORE TWEETS HERE. ------>
        
      </div>
    <!------END TWITTER------>
    
    
    
    
    
    <!------MESSAGE------>
      <div class="tab-pane fade" id="Message" style="height:620px;background-color:#fff;">
        
        <!------ CONTACT NAME ------>
        <div class= "d-flex display-4 p-2 justify-content-between" style="background-color:#cecece;">
          <i class="far fa-angle-left fa-fw"></i>
          <span style="font-size:20px;color:#000;margin-top:3px;">
            <b>Name</b>
          </span>
          <i class="fas fa-ellipsis-h fa-fw"></i>
        </div>
        <!------ END CONTACT NAME ------>
        
        <!------MESSAGES------>
        <div class="m-3">
          
          <!------ 1ST MESSAGE ------>
          <div class="text-right mb-2">
          <div class="py-2 px-3 d-inline-block text-left" style="max-width:75%;background:#319ffc;border-radius:20px;position:relative;color:#ffffff;">
          To create a new message, just copy-paste this div.
          </div>
          </div>
          <!------ END 1ST MESSAGE ------>
          
          <!------ 2ND MESSAGE ------>
          <div class="text-left mb-2">
          <div class="py-2 px-3 d-inline-block text-left" style="max-width:75%;background:#E5E5EA;border-radius:20px;position:relative;color:#000000;">
          To create a new reply, copy paste this div.
          </div>
          </div>
          <!------ END 2ND MESSAGE ------>
          
          <!------ 3RD MESSAGE ------>
          <div class="text-right mb-2">
          <div class="py-2 px-3 d-inline-block text-left" style="max-width:75%;background:#319ffc;border-radius:20px;position:relative;color:#ffffff;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
          </div>
          <!------ END 3RD MESSAGE ------>
          
          <!------ 4TH MESSAGE (WITH IMAGE) ------>
          <div class="text-right mb-2">
          <div class="py-2 px-3 d-inline-block text-left" style="max-width:75%;background:#319ffc;border-radius:20px;position:relative;color:#ffffff;">
          You can put images too!
          <img src="https://via.placeholder.com/200" style="width:275px;margin-top:10px;margin-bottom:10px;" alt="325855509fd87dd81e545a48dcded8a2.jpg">
          </div>
          </div>
          <!------ END 4TH MESSAGE ------>
          
          <!------ 5TH MESSAGE (WITH VIDEO) ------>
          <div class="text-left mb-2">
          <div class="py-2 px-3 d-inline-block text-left" style="max-width:75%;background:#E5E5EA;border-radius:20px;position:relative;color:#000000;">
          Or put videos. Keep in mind this may cause the code to load a little bit longer.
          <iframe width="180" height="200" src="https://www.youtube.com/embed/RBtlPT23PTM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
          </div>
          <!------ END 5TH MESSAGE ------>
          
          <!------ 6TH MESSAGE (WITH LINK) ------>
          <div class="text-right mb-2">
          <div class="py-2 px-3 d-inline-block text-left" style="max-width:75%;background:#319ffc;border-radius:20px;position:relative;color:#ffffff;">
          Or maybe, use a link instead?
          <br>
          <a href="https://www.youtube.com/watch?v=Cy5MiOqarYs" style="color:fff;">Like this.</a>
          </div>
          </div>
          <!------ END 6TH MESSAGE ------>
          
          <!------CAN ADD MORE MESSAGES HERE.------>
          
        </div>
        <!------END MESSAGES------>
        
        <div class="d-flex py-2 px-3 border-0" style="background-color:#cecece;">
          <span class="fas fa-camera fa-2x"></span>
          <span class="w-100 mx-3 px-3 p-1" style="border-radius:20px;padding-top:1px;background-color:#FFFFFF;color:#9AA295;">
            Send a message
          </span>
          <span class="fas fa-microphone fa-2x"></span>
        </div>
        
      </div>
    <!------END MESSAGE------>
    
    
    
    
    
    <!------HOMESCREEN------>
      <div class="tab-pane active show text-center" id="Homescreen" style="height:430px; background-image: url(https://images.unsplash.com/photo-1577971828613-9872f39c0825?ixlib=rb-1.2.1&w=1000&q=80); background-position: center; background-size: cover; background-repeat: no-repeat;">
        <br>
        <p style="color:#000;" class="display-4"> 0 0 : 0 0 AM </p>
      </div>
    <!------END HOMESCREEN------>
    
    
    
    
    
    <!------PLAYLIST------>
      <div class="tab-pane fade" id="Playlist" style="min-height:700px; background-image: linear-gradient(#535353,#212121);">
        <br>
        <div class="text-center">
          
           <!------PLAYLIST INFO------>
           <img class="fr-fic fr-dii" style="padding: 10px;" height="155" width="155" src="https://via.placeholder.com/200">
           <p style="font-size:20px;color:#fff;margin-bottom:0px;"><strong>Playlist Title</strong></p>
           <p style="font-size:10px;color:#aaa;letter-spacing:1px;"><strong>BY USERNAME • 1,000 LIKES</strong></p>
           <!------END PLAYLIST INFO------>
           
        </div>
        <center>
        <a href="https://www.youtube.com/watch?v=rVeMiVU77wo" class="btn btn-lg btn-block text-uppercase mx-auto mt-3 py-3" target="_blank" style="background:#1db954;border-radius:27px;font-size:1.2em;letter-spacing:2px;font-weight:500;top:73px;z-index:2;width:60%;color:#fff;">SHUFFLE PLAY</a>
        </center>
        <hr>
 
        <!------SONGS------>
        <div class="m-3 text-left;">
          
          <!------SONG 1------>
          <span style="color:#ffffff">
            Song Title
            <a href="linkhere" class="text-white">
              <i style="float:right; padding:10px" class="fas fa-ellipsis-h"></i>
            </a>
            <br>
            <small style="opacity:.5;">Artist</small>
          </span>
          <!------SONG 1------>
          
          <br>
          <br>
         
          <!------SONG 2------>
          <span style="color:#ffffff">
            Song Title
            <a href="linkhere" class="text-white">
              <i style="float:right; padding:10px" class="fas fa-ellipsis-h"></i>
            </a>
            <br>
            <small style="opacity:.5;">Artist</small>
          </span>
         <!------END SONG 2------>
         
          <br>
          <br>
         
          <!------SONG 3------>
          <span style="color:#ffffff">
            Song Title
            <a href="linkhere" class="text-white">
              <i style="float:right; padding:10px" class="fas fa-ellipsis-h"></i>
            </a>
            <br>
            <small style="opacity:.5;">Artist</small>
          </span>
          <!------END SONG 3------>
          
          <br>
          <br>
         
          <!------SONG 4------>
          <span style="color:#ffffff">
            Song Title
            <a href="linkhere" class="text-white">
              <i style="float:right; padding:10px" class="fas fa-ellipsis-h"></i>
            </a>
            <br>
            <small style="opacity:.5;">Artist</small>
          </span>
          <!------END SONG 4------>
         
          <br>
          <br>
         
          <!------SONG 5------>
          <span style="color:#ffffff">
            Song Title
            <a href="linkhere" class="text-white">
              <i style="float:right; padding:10px" class="fas fa-ellipsis-h"></i>
            </a>
            <br>
            <small style="opacity:.5;">Artist</small>
          </span>
          <!------END SONG 5------>
         
          <br>
          <br>
         
          <!------SONG 6------>
          <span style="color:#ffffff">
            Song Title
            <a href="linkhere" class="text-white">
              <i style="float:right; padding:10px" class="fas fa-ellipsis-h"></i>
            </a>
            <br>
            <small style="opacity:.5;">Artist</small>
          </span>
          <!------SONG 6------>
           
           
          <!------CAN ADD MORE SONGS HERE. REMEMBER TO USE <br> TWICE BETWEEN EACH SONG.------>
 
 
        </div>
        <!------END SONGS------>
 
        <div class="d-flex py-2 px-3 border-0" style="background-color: #121212; color: #FFFFFF;">
          <span class="fal fa-heart fa-2x" style="margin-top:5px"></span>
          <span class="w-100 px-3 pb-1 pt-2 text-center text-truncate" style="font-size:12px; border-radius:4px;padding-top:1px;background-color:#121212; color: #FFFFFF;">
            <b>Song Title</b> • Artist
          </span>
          <span class="fal fa-pause-circle fa-2x" style="margin-top:5px"></span>
        </div>
        
      </div>
    <!--END PLAYLIST-->
    
    
    
    
    
    <!------INSTA------>
      <div class="tab-pane fade" id="Insta" style="height:460px; background-color: #fff;">
        
        <!------BIO------>
        <img src="https://via.placeholder.com/115" class="float-left fr-rounded" style="padding: 10px; border-color:#1a1a1a;border-width:2px;width:115px;margin-top:10px;">
        <div align="left" style="margin-bottom:20px;">
          <br>
          <p style="font-size:12px">
            <b>la și ti uiti </p>
          <p style="font-size:12px;margin-bottom:5px;">
            <b>42</b> Posts
            <b>420<izmodgery/b> Followers
            <b>69</b> Following
          </p>
          <p style="font-size:12px">
            j
        </div>
        <!------END BIO------>
        
        
        <!----- EDIT PROFILE BUTTON
        
        (Optional. You can delete this.)
        
        ----->
        <div class="row no-gutters px-2 pb-2 text-center">
          <div class="col-11 card text-center" style="background: #fff;color: #000;border: 1px solid #c1c1c1;font-size: 13px;">Edit Profile</div>
          <div class="col-1 card text-center" style="background: #fff;color: #000;border: 1px solid #c1c1c1;font-size: 13px;">
            <span><i class="fas fa-chevron-down"></i></span>
          </div>
        </div>
        <!----- END BUTTON ----->
        
        
        <!------INSTA STORIES------>
        <div class="row no-gutters px-2">
          <div class="col-3 text-center text-truncate">
            <img src="https://via.placeholder.com/140" class="fr-rounded p-1" style="height:60px;width:60px;" alt="character image">
            <p class="text-truncate" style="font-size:12px;">Story Highlights</p>
          </div>
          <div class="col-3 text-center text-truncate">
            <img src="https://via.placeholder.com/140" class="fr-rounded p-1" style="height:60px;width:60px;" alt="character image">
            <p class="text-truncate" style="font-size:12px;">More Story</p>
          </div>
          <div class="col-3 text-center text-truncate">
            <img src="https://via.placeholder.com/140" class="fr-rounded p-1" style="height:60px;width:60px;" alt="character image">
            <p class="text-truncate" style="font-size:12px;">More Story</p>
          </div>
          <div class="col-3 text-center text-truncate">
            <img src="https://via.placeholder.com/140" class="fr-rounded p-1" style="height:60px;width:60px;" alt="character image">
            <p class="text-truncate" style="font-size:12px;">More Story</p>
          </div>
        </div>
        <!------END INSTA STORIES------>
        
        <div class="row no-gutters mx-auto text-center" style="margin-top:15px;">
          <div class="col-4"><span style="font-size:16px;font-weight:bold;"><i class="fal fa-grid"></i></span> </div>
          <div class="col-4"><span style="font-size:16px;font-weight:bold;"><i class="fal fa-clapperboard-play"></i></span></div>
          <div class="col-4"><span style="font-size:16px;font-weight:bold;"><i class="fal fa-user-tag"></i></span></div>
        </div>
        <div class="card" style="width: 95px;margin-left:8px;background:#000;"></div>
        <hr style="border-color:#c1c1c1;margin-top:0px;">
        
        <!------1ST IMAGE ROW------>
        <div class="row no-gutters pb-1">
          <div class="col-4 text-center"><img src="https://via.placeholder.com/100" style="height:100px;width:100px;"></div>
          <div class="col-4 text-center"><img src="https://via.placeholder.com/100" style="height:100px;width:100px;"></div>
          <div class="col-4 text-center"><img src="https://via.placeholder.com/100" style="height:100px;width:100px;"></div>
        </div>
        <!------END 1ST IMAGE ROW------>
        
        <!------2ND IMAGE ROW------>
        <div class="row no-gutters pb-1">
          <div class="col-4 text-center"><img src="https://via.placeholder.com/100" style="height:100px;width:100px;"></div>
          <div class="col-4 text-center"><img src="https://via.placeholder.com/100" style="height:100px;width:100px;"></div>
          <div class="col-4 text-center"><img src="https://via.placeholder.com/100" style="height:100px;width:100px;"></div>
        </div>
        <!------END 2ND IMAGE ROW------>
        
        <!------3RD IMAGE ROW------>
        <div class="row no-gutters pb-1">
          <div class="col-4 text-center"><img src="https://via.placeholder.com/100" style="height:100px;width:100px;"></div>
          <div class="col-4 text-center"><img src="https://via.placeholder.com/100" style="height:100px;width:100px;"></div>
          <div class="col-4 text-center"><img src="https://via.placeholder.com/100" style="height:100px;width:100px;"></div>
        </div>
        <!------END 3RD IMAGE ROW------>
        
        <!------CAN ADD MORE IMAGE ROWS HERE.------>

      </div>
    <!------END INSTA------>
    
    
    
    
    
    </div>
    <!------END CONTENT------>
    
    
    
    
    
    
    <!------APP ICONS------>
     <ul class="card-block nav justify-content-between" style="background-color: #292929;">
       <li class="nav-item">
         <a data-toggle="tab" href="#Twitter" style="color:#FFFFFF;"> <i class="fas fa-bird"></i> </a>
       </li>
       <li class="nav-item">
         <a data-toggle="tab" href="#Message" style="color:#FFFFFF;"> <i class="fas fa-comment-alt"></i> </a>
       </li>
       <li class="nav-item">
         <a data-toggle="tab" href="#Homescreen" style="color:#FFFFFF;"> <i class="fas fa-home-alt"></i> </a>
       </li>
       <li class="nav-item">
         <a data-toggle="tab" href="#Playlist" style="color:#FFFFFF;"> <i class="fas fa-music"></i> </a>
       </li>
       <li class="nav-item">
         <a data-toggle="tab" href="#Insta" style="color:#FFFFFF;"> <i class="fas fa-camera-retro"></i> </a>
       </li>
     </ul>
    <!------END APP ICONS------>
    
    
    
   </div>
  </div>
 
  <!------CIRCLE ON BOTTOM OF THE DEVICE------>
  <div class="text-center">
    <div class="card" style="display: block; width: 35px; height: 35px; position: absolute; left: 50%; bottom: -65px; transform: translate(-50%, -50%); background: #4e4e4e; border-radius: 50%;"></div>
  </div>
  <!------CIRCLE ON BOTTOM OF THE DEVICE------>
 
 
</div>