Foldable list with Chuck Norris facts

Developer
Carl Calderon
Size
5,984 Kb
Views
44,528
  1. Foldable list with Chuck Norris facts Previews
  2. Foldable list with Chuck Norris facts HTML Codes
  3. Foldable list with Chuck Norris facts CSS Codes
  4. Foldable list with Chuck Norris facts JS Codes

How do I make an foldable list with chuck norris facts?

What is a foldable list with chuck norris facts? How do you make a foldable list with chuck norris facts? This script and codes were developed by Carl Calderon on 30 July 2022, Saturday.

Foldable list with Chuck Norris facts Previews
IQ Test

Foldable list with Chuck Norris facts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Foldable list with Chuck Norris facts</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* General styling */
body { line-height: 1.2em; padding-top: 30px; text-align: center; font-family: Helvetica, Arial, sans-serif;
}
body a, body a:visited { text-decoration: none; color: #2a73a3;
}
body a:hover, body a:visited:hover { text-decoration: underline;
}
body h1 { font-size: 1.5em; font-weight: bold;
}
/* List */
div.list { margin-left: -150px; text-align: left; position: fixed; height: 274px; width: 300px; left: 50%; top: 80px; background-color: #b5bdc8; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFB5BDC8', endColorstr='#FF28343B'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIvPjxzdG9wIG9mZnNldD0iMzYlIiBzdG9wLWNvbG9yPSIjODI4Yzk1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzNDNiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b5bdc8), color-stop(36%, #828c95), color-stop(100%, #28343b)); background-image: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); background-image: -webkit-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); background-image: linear-gradient(to bottom, #b5bdc8 0%, #828c95 36%, #28343b 100%); -moz-box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0.3); box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0.3); -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px; border-radius: 0px 0px 5px 5px;
}
div.list .options { text-shadow: 0px 1px 0px black; text-align: center; position: absolute; bottom: 30px; width: 100%; color: white;
}
div.list .options a, div.list .options a:visited { text-decoration: none; color: #358acc;
}
div.list .options a:hover, div.list .options a:visited:hover { text-decoration: underline;
}
ul { -moz-perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; list-style-type: none; -moz-perspective: 600; -webkit-perspective: 600; perspective: 600; overflow: hidden; width: 100%;
}
ul.unfold li { -moz-transition: -moz-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; -o-transition: -o-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; -webkit-transition: -webkit-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; transition: transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s;
}
ul.fold li { margin-top: -43px; -moz-transition: -moz-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; -o-transition: -o-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; -webkit-transition: -webkit-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; transition: transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s;
}
ul.fold li:nth-child(even) { background-color: #e7ecef; -moz-transform: rotateX(50deg); -ms-transform: rotateX(50deg); -webkit-transform: rotateX(50deg); transform: rotateX(50deg);
}
ul.fold li:nth-child(odd) { background-color: #f0f2f4; margin-top: 0px; -moz-transform: rotateX(-50deg); -ms-transform: rotateX(-50deg); -webkit-transform: rotateX(-50deg); transform: rotateX(-50deg);
}
ul.fold li:last-child { border-bottom: 1px solid black; -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transform: rotateX(0deg);
}
ul li { background: white; font-size: 0.9em; padding: 10px; height: 60px; width: 300px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
ul li:nth-child(even) { -webkit-transform-origin: 50% 100%; background: white;
}
ul li:nth-child(odd) { -webkit-transform-origin: 50% 0%; background: #f0f0f0;
}
ul li:last-child { border-bottom: none; text-align: center; height: 37px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Foldable list with Chuck Norris facts</h1>
<div class="list"> <div class="options"> Get more at <a href="http://www.chucknorrisfacts.com/" target="_blank">http://www.chucknorrisfacts.com</a> </div> <ul> <li>Some magicans can walk on water, Chuck Norris can swim through land.</li> <li>Chuck Norris doesn't call the wrong number. You answer the wrong phone.</li> <li>Ghosts sit around the campfire and tell Chuck Norris stories.</li> <li>Chuck Norris has already been to Mars; that's why there are no signs of life.</li> <li><a href="#" id="toggle">Less</a></li> </ul>
</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>

Foldable list with Chuck Norris facts - Script Codes CSS Codes

/* General styling */
body { line-height: 1.2em; padding-top: 30px; text-align: center; font-family: Helvetica, Arial, sans-serif;
}
body a, body a:visited { text-decoration: none; color: #2a73a3;
}
body a:hover, body a:visited:hover { text-decoration: underline;
}
body h1 { font-size: 1.5em; font-weight: bold;
}
/* List */
div.list { margin-left: -150px; text-align: left; position: fixed; height: 274px; width: 300px; left: 50%; top: 80px; background-color: #b5bdc8; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFB5BDC8', endColorstr='#FF28343B'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIvPjxzdG9wIG9mZnNldD0iMzYlIiBzdG9wLWNvbG9yPSIjODI4Yzk1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzNDNiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b5bdc8), color-stop(36%, #828c95), color-stop(100%, #28343b)); background-image: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); background-image: -webkit-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); background-image: linear-gradient(to bottom, #b5bdc8 0%, #828c95 36%, #28343b 100%); -moz-box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0.3); box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0.3); -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px; border-radius: 0px 0px 5px 5px;
}
div.list .options { text-shadow: 0px 1px 0px black; text-align: center; position: absolute; bottom: 30px; width: 100%; color: white;
}
div.list .options a, div.list .options a:visited { text-decoration: none; color: #358acc;
}
div.list .options a:hover, div.list .options a:visited:hover { text-decoration: underline;
}
ul { -moz-perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; list-style-type: none; -moz-perspective: 600; -webkit-perspective: 600; perspective: 600; overflow: hidden; width: 100%;
}
ul.unfold li { -moz-transition: -moz-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; -o-transition: -o-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; -webkit-transition: -webkit-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; transition: transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s;
}
ul.fold li { margin-top: -43px; -moz-transition: -moz-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; -o-transition: -o-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; -webkit-transition: -webkit-transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s; transition: transform 0.5s, margin-top 0.5s, background 0.5s, box-shadow 0.5s;
}
ul.fold li:nth-child(even) { background-color: #e7ecef; -moz-transform: rotateX(50deg); -ms-transform: rotateX(50deg); -webkit-transform: rotateX(50deg); transform: rotateX(50deg);
}
ul.fold li:nth-child(odd) { background-color: #f0f2f4; margin-top: 0px; -moz-transform: rotateX(-50deg); -ms-transform: rotateX(-50deg); -webkit-transform: rotateX(-50deg); transform: rotateX(-50deg);
}
ul.fold li:last-child { border-bottom: 1px solid black; -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transform: rotateX(0deg);
}
ul li { background: white; font-size: 0.9em; padding: 10px; height: 60px; width: 300px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
ul li:nth-child(even) { -webkit-transform-origin: 50% 100%; background: white;
}
ul li:nth-child(odd) { -webkit-transform-origin: 50% 0%; background: #f0f0f0;
}
ul li:last-child { border-bottom: none; text-align: center; height: 37px;
}

Foldable list with Chuck Norris facts - Script Codes JS Codes

(function() { $("#toggle").click(function() { var at; at = $(this); if (at.text() === "More") { at.text("Less"); } else { at.text("More"); } return $("ul").toggleClass("fold").toggleClass("unfold"); }); $("ul").addClass("fold");
}).call(this);
Foldable list with Chuck Norris facts - Script Codes
Foldable list with Chuck Norris facts - Script Codes
Home Page Home
Developer Carl Calderon
Username carlcalderon
Uploaded July 30, 2022
Rating 4
Size 5,984 Kb
Views 44,528
Do you need developer help for Foldable list with Chuck Norris facts?

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!

Carl Calderon (carlcalderon) Script Codes
Name
Babsan Difference Check
Project Euler - Problem 2
Project Euler - Problem 1
Flat Adobe Icons
Single Element CSS Stickers
Paper login form
Almost Magic Mouse
Subway - Red Line
Nonsense 1
Bayer ordered dithering
Create amazing SEO 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!