A Pen by Tingyu

Developer
Tingyu
Size
2,475 Kb
Views
40,480
  1. A Pen by Tingyu Previews
  2. A Pen by Tingyu HTML Codes
  3. A Pen by Tingyu CSS Codes
  4. A Pen by Tingyu JS Codes

How do I make an a pen by tingyu?

What is a a pen by tingyu? How do you make a a pen by tingyu? This script and codes were developed by Tingyu on 13 September 2022, Tuesday.

A Pen by Tingyu Previews
IQ Test

A Pen by Tingyu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Tingyu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tabs"> <ul class="tab-links"> <li class="active"><a href="#tab1">Tab #1</a></li> <li><a href="#tab2">Tab #2</a></li> <li><a href="#tab3">Tab #3</a></li> <li><a href="#tab4">Tab #4</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab active"> <p>Tab #1 content goes here!</p> <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p> </div> <div id="tab2" class="tab"> <p>Tab #2 content goes here!</p> <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p> </div> <div id="tab3" class="tab"> <p>Tab #3 content goes here!</p> <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p> </div> <div id="tab4" class="tab"> <p>Tab #4 content goes here!</p> <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Tingyu - Script Codes CSS Codes

/*----- Tabs -----*/
.tabs { width:100%; display:inline-block;
} /*----- Tab Links -----*/ /* Clearfix */ .tab-links:after { display:block; clear:both; content:''; } .tab-links li { margin:0px 5px; float:left; list-style:none; } .tab-links a { padding:9px 15px; display:inline-block; border-radius:3px 3px 0px 0px; background:#7FB5DA; font-size:16px; font-weight:600; color:#4c4c4c; transition:all linear 0.15s; background:#006ea6; } .tab-links a:hover { background:#a7cce5; text-decoration:none; } li.active a, li.active a:hover { background:#e3e3e3; color:#4c4c4c; } /*----- Content of Tabs -----*/ .tab-content { padding:15px; border-radius:3px; box-shadow:-1px 1px 1px rgba(0,0,0,0.15); background:#fff; } .tab { display:none; } .tab.active { display:block; }

A Pen by Tingyu - Script Codes JS Codes

jQuery('.tabs .tab-links a').on('click', function(e) { var currentAttrValue = jQuery(this).attr('href'); // Show/Hide Tabs jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); // Change/remove current tab to active jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); e.preventDefault(); });
A Pen by Tingyu - Script Codes
A Pen by Tingyu - Script Codes
Home Page Home
Developer Tingyu
Username TingChe
Uploaded September 13, 2022
Rating 3
Size 2,475 Kb
Views 40,480
Do you need developer help for A Pen by Tingyu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tingyu (TingChe) Script Codes
Name
Animation - moving from bottom
Customize radio buttons width CSS3
Mixitup and jPages
Responsive mansory layout
Play around velocity js
Using MixItUp plugin
Implement Flip effect with css3
Translate Overlay hover effect
For animated drop down menu
Play with Raphael.js
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!