Protocol Card

Developer
Alexander Hadik
Size
3,149 Kb
Views
24,288
  1. Protocol Card Previews
  2. Protocol Card HTML Codes
  3. Protocol Card CSS Codes

How do I make an protocol card?

What is a protocol card? How do you make a protocol card? This script and codes were developed by Alexander Hadik on 16 September 2022, Friday.

Protocol Card Previews
IQ Test

Protocol Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Protocol Card</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg style="display: none;"> <defs> <symbol id="generic_card" preserveAspectRatio="xMidYMid meet" viewBox="0 0 150 98"> <defs><path id="a" d="M0 0h150v98H0z"/><mask id="b" x="0" y="0" width="150" height="98" fill="#fff"><use xlink:href="#a"/></mask></defs><g fill="none" fill-rule="evenodd"><use stroke="#EFF1F2" mask="url(#b)" stroke-width="2" fill="#FFF" xlink:href="#a"/><path fill="#515A67" d="M14 17h44v7H14z"/><path fill="#C2C8CE" d="M96 61h37v7H96zM42 61h50v7H42zM14 61h20v7H14zM103 48h30v7h-30zM62 48h37v7H62zM14 48h44v7H14zM76 35h37v7H76zM55 35h15v7H55zM14 35h37v7H14z"/><circle fill="#FFC40C" cx="71" cy="20" r="6"/></g> </symbol> <symbol id="ELISA_card" preserveAspectRatio="xMidYMid meet" viewBox="0 0 150 98"> <defs><path id="a" d="M0 0h150v98H0z"/><mask id="b" x="0" y="0" width="150" height="98" fill="#fff"><use xlink:href="#a"/></mask></defs><g fill="none" fill-rule="evenodd"><use stroke="#EFF1F2" mask="url(#b)" stroke-width="2" fill="#FFF" xlink:href="#a"/><path fill="#C2C8CE" d="M96 61h37v7H96zM42 61h50v7H42zM14 61h20v7H14zM103 48h30v7h-30zM62 48h37v7H62zM14 48h44v7H14zM76 35h37v7H76zM55 35h15v7H55zM14 35h37v7H14z"/><circle fill="#FFC40C" cx="71" cy="20" r="6"/><text font-family="SourceSansPro-Bold, Source Sans Pro" font-size="14" font-weight="bold" letter-spacing=".56" fill="#525B68"><tspan x="15" y="25">ELISA</tspan></text></g> </symbol> </defs>
</svg>
<script>	function play() { [].forEach.call(document.querySelectorAll('.protocol_card'), (card) => { console.log(card); card.classList.toggle('in'); }); }
</script>
<svg class="protocol_card protocol_card__left"> <use xlink:href="#generic_card"></use>
</svg>
<svg class="protocol_card protocol_card__right"> <use xlink:href="#generic_card"></use>
</svg>
<svg class="protocol_card protocol_card__center"> <use xlink:href="#ELISA_card"></use>
</svg>
<header> <button onclick="play()">Play</button>
</header>
</body>
</html>

Protocol Card - Script Codes CSS Codes

html, body { margin: 0;
}
header { width: 100%; height: 400px; z-index: 1; -webkit-shape-outside: polygon(0 0, 0 300px, 100% 400px, 100% 0); shape-outside: polygon(0 0, 0 300px, 100% 400px, 100% 0); -webkit-clip-path: polygon(0 0, 0 250px, 100% 100%, 100% 0); clip-path: polygon(0 0, 0 250px, 100% 100%, 100% 0); -webkit-shape-margin: 5%; shape-margin: 5%; background: #0E202E; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
header button { height: 50px; width: 120px; border-radius: 5px; background: transparent; border: 2px solid orange; color: orange; font-size: 2em; font-weight: 300;
}
.protocol_card { z-index: 0; position: absolute; width: 300px; height: 196px; -webkit-filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.3)); top: 0; left: 50%; -webkit-transition: -webkit-transform .25s; transition: -webkit-transform .25s; transition: transform .25s; transition: transform .25s, -webkit-transform .25s; -webkit-transform: translateZ(0); transform: translateZ(0);
}
.protocol_card__left { -webkit-transform: translateX(-50%) rotate(25deg); transform: translateX(-50%) rotate(25deg);
}
.protocol_card__left.in { -webkit-transform: translate(-125%, 400px) rotate(-20deg); transform: translate(-125%, 400px) rotate(-20deg);
}
.protocol_card__right { -webkit-transform: translateX(-50%) rotate(-19deg); transform: translateX(-50%) rotate(-19deg);
}
.protocol_card__right.in { -webkit-transform: translate(25%, 400px) rotate(10deg); transform: translate(25%, 400px) rotate(10deg);
}
.protocol_card__center { -webkit-transform: translateX(-50%) rotate(6deg); transform: translateX(-50%) rotate(6deg);
}
.protocol_card__center.in { -webkit-transform: translate(-50%, 400px) rotate(0); transform: translate(-50%, 400px) rotate(0);
}
Protocol Card - Script Codes
Protocol Card - Script Codes
Home Page Home
Developer Alexander Hadik
Username ahadik
Uploaded September 16, 2022
Rating 3
Size 3,149 Kb
Views 24,288
Do you need developer help for Protocol Card?

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!

Alexander Hadik (ahadik) Script Codes
Name
Pricing Cards V3
Transcriptic Pricing Cards
A Pen by Alexander Hadik
Pricing Cards
Basil Tree
Welcome to Transcriptic
Loader
Pricing Cards V2
Transcriptic Typography
Ops Implementation
Create amazing marketing copy 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!