Expanding Card | Material Design
How do I make an expanding card | material design?
Simple expanding card transition... Might work quite nicely with a 'Contact Me' form. What is a expanding card | material design? How do you make a expanding card | material design? This script and codes were developed by Joe Harry on 25 October 2022, Tuesday.
Expanding Card | Material Design - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Expanding Card | Material Design</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400, 700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"><span class="button">✖</span> <div class="content"> <div class="head"> <h1>Expand.</h1> <p class="sub">by <a href="https://codepen.io/woodwork/" target="_blank">Joe Harry</a></p> </div> <div class="body"> <p> There once was a wolf named <em>Knox</em>. He lived in a bright blue box. Until one day, his box blew away and he was left with only his <em>socks</em>.<br><br> Integer augue augue, fermentum at purus nec, euismod rutrum ex. Nulla pulvinar tortor ipsum, vel accumsan nunc rutrum sed. Praesent faucibus sollicitudin tempus. Phasellus congue ex tempor malesuada congue. Etiam vitae dui commodo, ultrices eros malesuada mi. Fusce suscipit eleifend lacus, at gravida urna gravida in. Nullam sodales a consequat leo nisl sit amet ipsum. Pellentesque aliquam dolor quam, et ultricies leo fringilla in. Nulla eu neque eu mauris malesuada efficitur ultrices sed mi. Vestibulum nec quam vitae purus ut sed velit. Vestibulum ultricies iaculis magna ut consequat.</p> <div class="action-bar"><a>SHARE</a><a>LEARN MORE</a></div> </div> </div>
</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>
Expanding Card | Material Design - Script Codes CSS Codes
body { font-family: Roboto, sans-serif; width: 100%; height: 100%; margin: 0; padding: 0; color: #FFF; background: #FAFAFA;
}
h1 { font-weight: 700; font-size: 64px; margin: 20px 0 0 0; padding: 0 20px;
}
p { font-size: 16px; padding: 0 20px;
}
em { font-style: normal; color: #FFC400;
}
a { font-style: normal; color: #FFD740; text-decoration: none; padding-right: 10px; cursor: pointer;
}
.sub { margin: 0;
}
.button { cursor: pointer; width: 60px; height: 60px; display: inline-block; font-size: 20px; line-height: 60px; font-weight: bold; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.expand .button { -webkit-transform: rotate(630deg); transform: rotate(630deg); -webkit-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.container { position: absolute; margin: auto; left: 0; right: 0; top: 5vh; background-color: #03A9F4; border-radius: 50%; width: 60px; max-width: 60px; height: 60px; text-align: center; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); overflow: hidden; -webkit-transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s; transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}
.container.expand { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17); border-radius: 0; width: 80%; height: 500px; max-width: 600px; padding: 0; -webkit-transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s; transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s;
}
.content { -webkit-transform: translateY(100%); transform: translateY(100%); width: 100%; height: 100%; opacity: 0; text-align: left; -webkit-transition: opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.expand .content { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; -webkit-transition: opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; transition: opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0s; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}
.content .head { padding: 0 0 20px 0;
}
.content .body { color: #000; color: rgba(0, 0, 0, 0.87); background-color: #FFF; width: 100%; height: 100%; padding: 10px 0; box-sizing: border-box;
}
.action-bar { padding-left: 15px; border-top: 1px solid #E0E0E0; width: 100%;
}
.action-bar a { text-transform: uppercase; line-height: 52px; color: #FFC400;
}
Expanding Card | Material Design - Script Codes JS Codes
$('.button').click(function () { $(this).parent().toggleClass('expand');
});
Developer | Joe Harry |
Username | woodwork |
Uploaded | October 25, 2022 |
Rating | 4.5 |
Size | 4,790 Kb |
Views | 20,240 |
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 |
Social Links Plugin | 5,307 Kb |
Step | 11,366 Kb |
Fake 3D | 2,813 Kb |
Stronger Together | 3,751 Kb |
TTMM Pebble Clock | 4,020 Kb |
Expanding Contact Form | 6,876 Kb |
Your Planet is Loading... | 4,051 Kb |
Samsung TV Loader | 3,014 Kb |
Video Loading | 2,118 Kb |
Untranslatable | 7,119 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 |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Video mute | Leon9208 | 2,131 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
Count up | Alanshortis | 2,391 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
React Vote Component | Souporserious | 5,465 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 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!