Overwatch cards, three styles

Developer
Joost Jansen
Size
4,047 Kb
Views
8,096
  1. Overwatch cards, three styles Previews
  2. Overwatch cards, three styles HTML Codes
  3. Overwatch cards, three styles CSS Codes
  4. Overwatch cards, three styles JS Codes

How do I make an overwatch cards, three styles?

What is a overwatch cards, three styles? How do you make a overwatch cards, three styles? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

Overwatch cards, three styles Previews
IQ Test

Overwatch cards, three styles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Overwatch cards, three styles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Days+One|Open+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <img src="https://blzgdapipro-a.akamaihd.net/media/screenshot/hanamura-screenshot-004.jpg" alt="background image" /> <div class="card animate"> <div class="card--top"> <h1>McCree</h1> </div> <div class="card--bottom"> <h2>Attack</h2> <p>Gunslinger and vigilante, McCree makes use of his revolver to slay his foes.</p> </div> </div> <div class="card animate">
<!-- <div class="card--top"> <h1>Reinhardt</h1> </div> --> <div class="card--bottom"> <h2>Reinhardt</h2> <p>Reinhardt is a powerful Tank. His iconic ability Barrier Field allows him to shield allies and defend objectives</p> </div> </div> <div class="card animate"> <div class="card--top"> <h1>Reaper</h1> </div>
<!-- <div class="card--bottom"> <h2>Attack</h2> <p>Reaper is a deadly assassin that can move like a ghost through the battlefield.</p> </div> --> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Overwatch cards, three styles - Script Codes CSS Codes

html, body, .wrapper { height: 100%;
}
body { -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; cursor: default;
}
h1, h2 { font-family: "Days One", sans-serif;
}
p { font-family: "Open Sans", sans-serif;
}
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-perspective: 500px; perspective: 500px; position: relative; overflow: hidden;
}
.wrapper > img { z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-filter: blur(7px); filter: blur(7px);
}
.card { z-index: 2; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 450px; width: 300px; margin: 0 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; opacity: 1; -webkit-transform: translate(0) rotate3d(0) scale(1); transform: translate(0) rotate3d(0) scale(1); -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out; transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out; transition: opacity 300ms ease-out, transform 300ms ease-out; transition: opacity 300ms ease-out, transform 300ms ease-out, -webkit-transform 300ms ease-out;
}
.card:hover { -webkit-transform: scale(1.025); transform: scale(1.025);
}
.card:nth-of-type(1) { background: url(https://i.ytimg.com/vi/ctOvQkdb7KE/maxresdefault.jpg) no-repeat center/cover; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.card:nth-of-type(2) { background: url(https://i.ytimg.com/vi/NIfSNYXWAiI/maxresdefault.jpg) no-repeat center/cover; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
}
.card:nth-of-type(3) { background: url(http://orig15.deviantart.net/b6af/f/2016/244/e/b/reaper_by_ninovecia-dag3qj0.jpg) no-repeat center/cover;
}
.card:nth-of-type(3) .card--top { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.card.animate { opacity: 0; -webkit-transform: translateX(-110px) rotate3d(0, 1, 0, 45deg); transform: translateX(-110px) rotate3d(0, 1, 0, 45deg);
}
.card.animate:nth-of-type(2n) { -webkit-transform: translateX(-110px) rotate3d(0, 1, 0, -45deg); transform: translateX(-110px) rotate3d(0, 1, 0, -45deg);
}
.card--top, .card--bottom { padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap;
}
.card--top h1, .card--top h2, .card--bottom h1, .card--bottom h2 { text-transform: uppercase; font-style: italic;
}
.card--top { color: #fff; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.75), transparent); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.card--bottom { height: 150px; background-color: #fff; color: #331a4d; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around;
}

Overwatch cards, three styles - Script Codes JS Codes

const cardsToFlip = document.querySelectorAll('.card.animate');
setTimeout(function() { Array.from(cardsToFlip).forEach((card, i) => { setTimeout(() => card.classList.remove('animate'), i * 100); });
}, 500)
Overwatch cards, three styles - Script Codes
Overwatch cards, three styles - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 4.5
Size 4,047 Kb
Views 8,096
Do you need developer help for Overwatch cards, three styles?

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!

Joost Jansen (DevItWithDavid) Script Codes
Name
Personal Website Redesign v2.0
IPhone
Flexbox Mixin
Firebase Logo Animation
React Close Dialog with Animation
Flexbox is AWESOME
TicTacToe
League of Legends Login UI
Personal website redesign v1.0
Star Wars Battlefront I 2016 Interface
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!