Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!---
- (\ ∧♛∧ .+° °*.
- (ヾ( *・ω・) °・ cr viliarreai if used !
- `し( つ つ━✩* .+°
- (/しーJ
- --->
- <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Pacifico|Poppins:400,700'>
- <style>
- /*my credits! please dont remove, but you may the change the img to ur liking*/
- .dont-remove {
- position:fixed;
- z-index:99;
- bottom:0;margin-bottom:5px;
- left:0;margin-left:5px;
- }
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: "Poppins", sans-serif;
- transition: 1s cubic-bezier(0.59, -0.43, 0.17, 1.16);
- }
- body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- overflow: hidden;
- perspective: 800px;
- background: #ffc0e2;
- }
- figure {
- width: 350px;
- box-shadow: 3px 3px 40px 0 rgba(0, 0, 0, 0.4);
- border-radius: 8px;
- position: relative;
- background: #ffc0e2;
- transition: 0.3s ease-in-out;
- }
- figure .img {
- width: 100%;
- height: 200px;
- border-radius: 8px 8px 0 0;
- background: url("https://data.whicdn.com/images/34202019/original.jpg");
- background-size: 350px auto;
- background-repeat: no-repeat;
- }
- figure .img:after {
- content: "";
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 150px;
- background: linear-gradient(transparent, #ecf0f1 44%);
- border-radius: 0 0 8px 8px;
- }
- figure figcaption {
- height: 80px;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- position: relative;
- overflow: visible;
- background: #fff;
- border-radius: 0 0 8px 8px;
- }
- figure figcaption span {
- width: 100%;
- }
- figure figcaption span:nth-child(1) {
- position: absolute;
- font-family: "Pacifico", cursive;
- font-size: 30px;
- top: -40px;
- opacity: 0;
- left: 10;
- color: #000;
- text-shadow: 0 0 15px #FFCFE9;
- }
- figure figcaption span:nth-child(2) {
- filter: url("#outline");
- font-family: "Pacifico", cursive;
- font-size: 52px;
- overflow: visible;
- position: absolute;
- top: -42px;
- left: 1px;
- white-space: nowrap;
- color: #ffc0e2;
- z-index: 10px;
- transform: rotate(-2deg);
- text-shadow: 0 0 15px #FFCFE9;
- transition: top 0.3s ease-in-out;
- }
- figure figcaption span:nth-child(3) {
- opacity: 0;
- padding: 0 20px;
- height: 20px;
- overflow: hidden;
- cursor: text;
- }
- figure button {
- position: absolute;
- bottom: -10px;
- width: 130px;
- left: calc(50% - 65px);
- background: #FFBDE2;
- color: #fff;
- border: 0;
- height: 35px;
- border-radius: 4px;
- transform: rotate(1deg);
- box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
- cursor: pointer;
- pointer-events: auto;
- transition: 0.3s ease-in-out;
- overflow: hidden;
- z-index: 20;
- }
- figure button:focus {
- outline: 0;
- }
- figure button:before {
- content: "more";
- position: absolute;
- top: 8px;
- left: 44px;
- opacity: 1;
- transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
- }
- figure button:after {
- content: "back";
- opacity: 0;
- top: 8px;
- left: 0;
- position: absolute;
- transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
- }
- figure:hover {
- transition: 0.3s ease-in-out;
- transform: rotateX(-2deg);
- box-shadow: 3px -3px 40px 0 rgba(0, 0, 0, 0.4);
- }
- figure:hover button {
- background: #FFADDA;
- bottom: -13px;
- transition: 0.3s ease-in-out;
- }
- figure:hover span:nth-child(2) {
- top: -39px;
- transition: top 0.3s ease-in-out;
- }
- figure.open .img {
- height: 0;
- }
- figure.open figcaption {
- height: 280px;
- border-radius: 8px;
- }
- figure.open figcaption span:nth-child(1) {
- top: -25px;
- opacity: 1;
- }
- figure.open figcaption span:nth-child(2) {
- top: -18px;
- }
- figure.open figcaption span:nth-child(3) {
- height: 100%;
- opacity: 1;
- padding: 80px 20px 40px 20px;
- }
- figure.open button:before {
- opacity: 0;
- left: 100%;
- }
- figure.open button:after {
- opacity: 1;
- left: 47px;
- }
- figure.open:hover figcaption span:nth-child(2) {
- top: -15px;
- transition: top 0.3s ease-in-out;
- }
- figure svg {
- position: absolute;
- bottom: 0;
- width: 350px;
- }
- </style>
- <a href="https://twitter.com/vilIarreaI" title="container code created by ximena!"><img class="dont-remove" src="https://64.media.tumblr.com/tumblr_lkl5s8Ay6F1qfamg6.gif"></a>
- <figure>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
- <filter id="outline" mask="url(#mask)">
- <feFlood flood-color="#ecf0f1" result="base" />
- <feMorphology in="SourceGraphic" operator="dilate" radius="10" />
- <feComposite in="base" operator="in" />
- <feBlend in="SourceGraphic" mode="normal" />
- <feDropShadow stdDeviation="6" />
- </filter>
- </defs>
- </svg>
- <div class="img"></div>
- <figcaption>
- <span>About</span>
- <span>Gael or Blanca!</span>
- <span>info info info idk what to put here bc im dumb yeass</span>
- </figcaption>
- <button></button>
- </figure>
- <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
- <script id="rendered-js">
- $("button").click(function () {
- $("figure").toggleClass("open");
- });
- </script>
Add Comment
Please, Sign In to add comment