Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ******THIS PART GOES BETWEEN <HEAD> AND </HEAD>***********
- <!--IMPORT FONT AWESOME ICONS-->
- <script src="https://use.fontawesome.com/a8cbc62841.js"></script>
- <!--IMPORT GOOGLE FONT-->
- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700" rel="stylesheet">
- <!--ALL THE JQUERY-->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
- <script>
- $(document).ready(function(){
- $('.textbox').hide();
- $('.tab-con').click(function(){
- $(this).children('.bubble').toggleClass('open');
- $(this).children('.textbox').delay(500).fadeToggle(600);
- })
- })
- </script>
- ******THIS PART GOES BETWEEN <STYLE TYPE="TEXT/CSS"> AND </STYLE>***********
- .con {
- position: fixed;
- margin: 10px;
- }
- .bubble {
- width: 30px;
- height: 30px;
- border: 1px solid white;
- z-index: 99;
- text-align: center;
- padding: 6px 0;
- box-sizing: border-box;
- border-radius: 25px;
- -moz-border-radius: 25px;
- -webkit-border-radius: 25px;
- background: #ace8ba;
- margin-bottom: 10px;
- position: relative;
- transition-duration: 0.75s;
- -moz-transition-duration: 0.75s;
- -webkit-transition-duration: 0.75s;
- }
- .bubble i {
- color: white;
- position: relative;
- z-index: 999;
- }
- .open {
- transition-duration: 0.75s;
- -moz-transition-duration: 0.75s;
- -webkit-transition-duration: 0.75s;
- margin-left: 125px;
- }
- .textbox {
- width: 135px;
- height: auto;
- border: 1px solid #ace8ba;
- position: relative;
- top: -20px;
- left: 5px;
- clear: both;
- font-family: 'Open Sans', sans-serif;
- }
- .textbox .title {
- background: #ace8ba;
- text-align: center;
- text-transform: uppercase;
- font-size: 8pt;
- padding: 5px 0;
- letter-spacing: 2px;
- color: white;
- font-weight: 700;
- }
- .textbox .text {
- font-size: 8pt;
- width: auto;
- padding: 5px;
- font-weight: 300;
- box-sizing: border-box;
- }
- ******THIS PART GOES BETWEEN <BODY> AND </BODY>***********
- <div class="con">
- <!--PROFILE BOX-->
- <div class="tab-con">
- <div class="bubble">
- <i class="fa fa-user"></i>
- </div>
- <div class="textbox">
- <div class="title">
- title
- </div>
- <div class="text">
- text
- </div>
- </div>
- </div>
- <div style="clear: both"></div>
- <!--MUSIC BOX-->
- <div class="tab-con">
- <div class="bubble">
- <i class="fa fa-step-forward"></i>
- </div>
- <div class="textbox">
- <div class="title">
- title
- </div>
- <div class="text">
- text
- </div>
- </div>
- </div>
- <!--OTHER BOX | COPY AND PASTE THIS BOX TO ADD OTHER BOXES-->
- <div class="tab-con">
- <div class="bubble">
- <i class="fa fa-star"></i>
- </div>
- <div class="textbox">
- <div class="title">
- title
- </div>
- <div class="text">
- text
- </div>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement