The Venn Diagram

Developer
Danny
Size
3,669 Kb
Views
16,192
  1. The Venn Diagram Previews
  2. The Venn Diagram HTML Codes
  3. The Venn Diagram CSS Codes
  4. The Venn Diagram JS Codes

How do I make an the venn diagram?

A pure CSS / animated version of the diagram used on Mgnt's 404 page."Venn diagrams or set diagrams are diagrams that show all hypothetically possible logical relations between a finite collection of sets (groups of things).". What is a the venn diagram? How do you make a the venn diagram? This script and codes were developed by Danny on 23 September 2022, Friday.

The Venn Diagram Previews
IQ Test

The Venn Diagram - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Venn Diagram</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/vagdpg.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='venn'> 404 Page
</div>
<div class='one'> <div class='text'> We Broke <br> Something </div>
</div>
<div class='two'> <div class='text'> You Can't <br> Type </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

The Venn Diagram - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
body { pointer-events: none; cursor: default; background: #eee; font-family: Lato, sans-serif;
}
.venn { position: absolute; top: 50%; left: 50%; height: 300px; width: 300px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 300px; text-align: center; z-index: 1; color: #fff; font-size: 1.3em; z-index: 3; -webkit-animation: fade .5s ease-in-out; animation: fade .5s ease-in-out; -webkit-animation-delay: .5s; animation-delay: .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0;
}
.one, .two { position: absolute; line-height: initial; top: 50%; left: calc(50%); height: 300px; width: 300px; background: rgba(244, 158, 25, 0.8); -webkit-transform: translate(-50%, -50%) rotate(20deg); transform: translate(-50%, -50%) rotate(20deg); border-radius: 50%; z-index: 2; -webkit-animation: slide-one .5s; animation: slide-one .5s; -webkit-animation-delay: .2s; animation-delay: .2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.one .text, .two .text { position: absolute; top: 50%; left: calc(50% - 70px); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; color: #fff; opacity: 0; -webkit-animation: fade 1s ease-in-out; animation: fade 1s ease-in-out; -webkit-animation-delay: .1s; animation-delay: .1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.two { z-index: 1; left: calc(50%); background: -webkit-radial-gradient(center ellipse, #ef4f29 0%, #e33216 100%); background: radial-gradient(ellipse at center, #ef4f29 0%, #e33216 100%); -webkit-transform: translate(-50%, -50%) rotate(-20deg); transform: translate(-50%, -50%) rotate(-20deg); opacity: 0; -webkit-animation: slide-two .5s; animation: slide-two .5s; -webkit-animation-delay: .2s; animation-delay: .2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.two .text { left: calc(50% + 70px);
}
@-webkit-keyframes slide-one { 100% { opacity: 1; left: calc(50% - 75px); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
}
@keyframes slide-one { 100% { opacity: 1; left: calc(50% - 75px); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
}
@-webkit-keyframes slide-two { 100% { opacity: 1; left: calc(50% + 75px); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
}
@keyframes slide-two { 100% { opacity: 1; left: calc(50% + 75px); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
}
@-webkit-keyframes fade { 100% { opacity: 1; }
}
@keyframes fade { 100% { opacity: 1; }
}

The Venn Diagram - Script Codes JS Codes

// Idea definitely & directly borrowed from:
// www.magnt.com/404
The Venn Diagram - Script Codes
The Venn Diagram - Script Codes
Home Page Home
Developer Danny
Username ExtremelyGinger
Uploaded September 23, 2022
Rating 3
Size 3,669 Kb
Views 16,192
Do you need developer help for The Venn Diagram?

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!

Danny (ExtremelyGinger) Script Codes
Name
App Layout
Notify Me
Work In Progress
Add To Cart
Timed Notifications
Improved Motion Blur
Simple Domain Placeholder
Flight Search Button
Dribbble Template
Cardiac Rhythm
Create amazing Facebook ads 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!