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 |
Your Planet is Loading... | 4,051 Kb |
Video Loading | 2,118 Kb |
Flower Spinner | 2,584 Kb |
Expanding Contact Form | 6,876 Kb |
Samsung TV Loader | 3,014 Kb |
TTMM Pebble Clock | 4,020 Kb |
Step | 11,366 Kb |
That Morning Coffee Feeling | 4,005 Kb |
Untranslatable | 7,119 Kb |
Social Links Plugin | 5,307 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 |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Addthis_button | Esambino | 1,691 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Mini Profile | Frytyler | 3,828 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 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!