Material Inspired Panel
How do I make an material inspired panel?
What is a material inspired panel? How do you make a material inspired panel? This script and codes were developed by Sandro Walet on 12 June 2022, Sunday.
Material Inspired Panel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Inspired Panel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card transition"> <h2 class="transition">Diensten<br><small>Bekijk onze diensten</small></h2> <div class="cta-container transition"><a href="#" class="cta">Call to action</a></div> <div class="card_circle transition"></div>
</div> <script src="js/index.js"></script>
</body>
</html>
Material Inspired Panel - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);
/*html { background-image: url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/arches.png);
}
*/
html,
body { background-color: #fff;
}
.transition { transition: .3s cubic-bezier(.3, 0, 0, 1.3)
}
.card { background-color: #fff; height: 400px; width: 300px; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); overflow: hidden;
}
.card:hover { box-shadow: 0px 30px 30px rgba(0,0,0,0.2); height: 430px; width: 330px;
}
.card_circle { height: 400px; width: 450px; background-color: #2196F3; position: absolute; border-radius: 50%; margin-left: -75px; margin-top: -270px;
}
.card:hover .card_circle { border-radius: 0; margin-top: -130px;
}
h2 { text-align: center; margin-top: 190px; position: absolute; z-index: 9999; font-size: 26px; color: #2196F3; width: 100%; font-family: 'Noto Sans', serif;
}
h2 small { font-weight: normal; font-size: 65%; color: rgba(0,0,0,0.5);
}
.card:hover h2 { margin-top: 100px; color: #fff;
}
.card:hover h2 small { color: #fff;
}
.cta-container { text-align: center; margin-top: 290px; position: absolute; z-index: 9999; width: 100%; font-family: 'Noto Sans', serif;
}
.cta { color: #fff; border: 2px solid #2196F3; background-color: #2196F3; padding: 10px 25px; border-radius: 50px; font-size: 17px; text-decoration: none; font-weight: bold;
}
.card:hover .cta-container { margin-top: 320px;
}
Material Inspired Panel - Script Codes JS Codes
/* Material Inspired Panel */
Developer | Sandro Walet |
Username | tamashi |
Uploaded | June 12, 2022 |
Rating | 4.5 |
Size | 2,159 Kb |
Views | 76,912 |
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 |
Bounce.js Hover Animation | 2,336 Kb |
Gooey Preloader with Anime.js | 2,469 Kb |
Material inspired grid | 4,443 Kb |
A Pen by Sandro Walet | 1,923 Kb |
Current indicator | 2,598 Kb |
Expanding Share Button | 3,746 Kb |
Rotating Preloader with Anime.js | 2,450 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 |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
Slick Slider | Wearebold | 5,913 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Off Canvas | Mariamarica | 1,870 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!