Legend for Social Dance 2 vis - 1.0, pre bootstrap sidebar
How do I make an legend for social dance 2 vis - 1.0, pre bootstrap sidebar?
What is a legend for social dance 2 vis - 1.0, pre bootstrap sidebar? How do you make a legend for social dance 2 vis - 1.0, pre bootstrap sidebar? This script and codes were developed by David Mora on 29 November 2022, Tuesday.
Legend for Social Dance 2 vis - 1.0, pre bootstrap sidebar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Legend for Social Dance 2 vis - 1.0, pre bootstrap sidebar</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div id="legend"> <h1>Social Dance 2</h1> <p>Richard Powers powers through 8 dance styles and 150+ moves in 10 weeks. Here's a big picture look. </p> <p>How it works: </p> <div class="row legend-section"> <div class="col-sm-3 "> <svg class="legend-svg dance-style"> <circle cx="50" cy="50" r="40" fill="red" /> </svg> </div> <div class="col-sm-9"> <p class="legend-text">All moves are grouped by dance style. Click to zoom...</p> </div> </div> <div class="row legend-section"> <div class="col-sm-3 "> <svg class="legend-svg dance-sub-category"> <circle cx="50" cy="50" r="30" fill="darkred" /> </svg> </div> <div class="col-sm-9"> <p class="legend-text">... into sub-categories</p> </div> </div> <div class="row legend-section"> <div class="col-sm-3 "> <svg class="legend-svg dance-move"> <circle cx="50" cy="50" r="15" fill="white" /> </svg> </div> <div class="col-sm-9"> <p class="legend-text">... and double click individual moves to watch a video of them</p> </div> </div> <div class="row"> <div class="col-sm-12"> <button>Let's go!</button> </div> </div> </div>
</div>
</body>
</html>
Legend for Social Dance 2 vis - 1.0, pre bootstrap sidebar - Script Codes CSS Codes
#legend { background: skyblue;
/* opacity: 0.6; */ margin: auto; padding: 20px; width: 80%; border: solid 2px black;
}
svg { height: 100px; width: 100px;
}
circle:hover { stroke: green; stroke-width: 4px;
}
circle {
}
button {
}
Developer | David Mora |
Username | davidnmora |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 1,942 Kb |
Views | 12,144 |
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!
Name | Size |
JS Array of 20,000 adjectives | 101,800 Kb |
DiverseCity Prototype 1.0 | 15,685 Kb |
Animate.css | 4,194 Kb |
Updates in global variables register inside closures | 1,455 Kb |
PrettyPhoto test | 1,732 Kb |
D3 Bar graph Sort sandbox | 3,874 Kb |
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!
Name | Username | Size |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Animated Logo | Shakdaniel | 2,672 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Break Out | AzazelN28 | 12,431 Kb |
Transition | Shayhowe | 1,632 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!