Hipster quote callout

Developer
Barbara Laird
Size
5,030 Kb
Views
6,072
  1. Hipster quote callout Previews
  2. Hipster quote callout HTML Codes
  3. Hipster quote callout CSS Codes

How do I make an hipster quote callout?

Just a simple callout layout using box-shadow with a touch of animation. What is a hipster quote callout? How do you make a hipster quote callout? This script and codes were developed by Barbara Laird on 16 January 2023, Monday.

Hipster quote callout Previews
IQ Test

Hipster quote callout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hipster quote callout</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #c6cec3; color: #617675; font-family: Indie Flower;
}
.mine { position: absolute; right: 4em; overflow: hidden; width: 50%; border: 2em solid transparent; box-shadow: 3em 0 0 #617675, -1em 0 0 #9C6E37; border-radius: 1.14285714em; text-align: right; animation: slideInRight 1.5s ease-out; animation-fill-mode: forwards;
}
@keyframes showall { from { width: 10%; max-height: 1em; } to { width: 50%; max-height: 100%; }
}
h1 { color: #9C6E37; margin-top: 0; text-transform: uppercase; font-weight: bold;
}
.sig { color: #9C6E37; font-weight: bold;
}
.sig:before { content: 'By '; font-weight: normal;
}
@keyframes slideInRight { 0% { opacity: 0; transform: translateX(500px); } 100% { transform: translateX(0); }
}
@keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); }
}
@keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
.mine %h1 reprehenderit %p Messenger bag Neutra flannel umami commodo deserunt. Nostrud brunch excepteur beard. Messenger bag pork belly blog, ennui High Life dreamcatcher elit id Tumblr. Paleo whatever est nesciunt, mixtape cliche Odd Future wolf proident slow-carb stumptown fingerstache. Cray Williamsburg id four loko. Odd Future pickled consectetur, gentrify ugh Marfa fixie Wes Anderson lomo exercitation butcher. Banjo nulla wayfarers, accusamus single-origin coffee fanny pack incididunt fingerstache selfies. %p Deep v farm-to-table Tumblr odio tattooed, PBR&B letterpress semiotics aesthetic sint velit. Synth raw denim Bushwick small batch. Squid pug aute sriracha art party dolore. Small batch odio before they sold out incididunt, kitsch Brooklyn sint vinyl fanny pack cray Odd Future butcher selvage. Culpa pour-over eiusmod swag reprehenderit polaroid. Fugiat viral gentrify, cred tofu pickled before they sold out pour-over. Authentic deserunt pork belly fap messenger bag PBR&B. %p Squid aesthetic proident keffiyeh, literally +1 pork belly YOLO vinyl synth Pitchfork dolore. +1 vinyl aliqua Bushwick, McSweeney's chillwave viral. Leggings sed deserunt, hashtag synth Blue Bottle squid eu single-origin coffee Shoreditch. Whatever American Apparel farm-to-table letterpress sapiente. Non enim meh locavore. Slow-carb est cred small batch wolf ut. Try-hard leggings cillum, umami deep v hella nisi. .sig Ms Hipster
</body>
</html>

Hipster quote callout - Script Codes CSS Codes

body { background-color: #c6cec3; color: #617675; font-family: Indie Flower;
}
.mine { position: absolute; right: 4em; overflow: hidden; width: 50%; border: 2em solid transparent; box-shadow: 3em 0 0 #617675, -1em 0 0 #9C6E37; border-radius: 1.14285714em; text-align: right; animation: slideInRight 1.5s ease-out; animation-fill-mode: forwards;
}
@keyframes showall { from { width: 10%; max-height: 1em; } to { width: 50%; max-height: 100%; }
}
h1 { color: #9C6E37; margin-top: 0; text-transform: uppercase; font-weight: bold;
}
.sig { color: #9C6E37; font-weight: bold;
}
.sig:before { content: 'By '; font-weight: normal;
}
@keyframes slideInRight { 0% { opacity: 0; transform: translateX(500px); } 100% { transform: translateX(0); }
}
@keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); }
}
@keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); }
}
Hipster quote callout - Script Codes
Hipster quote callout - Script Codes
Home Page Home
Developer Barbara Laird
Username bhlaird
Uploaded January 16, 2023
Rating 3
Size 5,030 Kb
Views 6,072
Do you need developer help for Hipster quote callout?

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!

Barbara Laird (bhlaird) Script Codes
Name
Happy New Year
Playing with colors
Atom
Codrops animated text
Barber Shop
Bullseye
TIme Since
Windows
SVG Shape Hover Effect
Man Up
Create amazing captions 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!