Flexbox quote box

Developer
Mitch Pruitt
Size
3,441 Kb
Views
22,264
  1. Flexbox quote box Previews
  2. Flexbox quote box HTML Codes
  3. Flexbox quote box CSS Codes

How do I make an flexbox quote box?

Perfectly centered pure-CSS quote box.. What is a flexbox quote box? How do you make a flexbox quote box? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.

Flexbox quote box Previews
IQ Test

Flexbox quote box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox quote box</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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! */ @charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body { background: url(https://images.artnet.com/aoa_lot_images/79933/chuck-close-self-portrait-prints-and-multiples-serigraph-screenprint-zoom.jpg) center center no-repeat fixed; background-size: cover;
}
section { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center;
}
.quote { width: 80%;
}
.quote p { padding: 0 2em; background-color: #212121; color: white;
}
.quote .text { padding-top: 2em; font: normal 400 1em/1.5em 'Montserrat', sans-serif; letter-spacing: 0.04em;
}
.quote .attr { padding-bottom: 1em; font: normal 700 1.5em/1.5em 'Montserrat', sans-serif; letter-spacing: 0.07em; text-align: right;
}
.quote .attr:before { content: " - ";
}
.quote:after { content: "◤"; font-size: 2em; color: #212121; margin: 0 0 0 75%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section> <div class="quote"> <p class="text">Inspiration is for amateurs - the rest of us just show up and get to work. And the belief that things will grow out of the activity itself and that you will - through work - bump into other possibilities and kick open other doors that you would never have dreamt of if you were just sitting around looking for a great ‘art [idea].' And the belief that process, in a sense, is liberating and that you don't have to reinvent the wheel every day. Today, you know what you'll do, you could be doing what you were doing yesterday, and tomorrow you are gonna do what you [did] today, and at least for a certain period of time you can just work. If you hang in there, you will get somewhere.</p> <p class="attr">Chuck Close</p> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Flexbox quote box - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body { background: url(https://images.artnet.com/aoa_lot_images/79933/chuck-close-self-portrait-prints-and-multiples-serigraph-screenprint-zoom.jpg) center center no-repeat fixed; background-size: cover;
}
section { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center;
}
.quote { width: 80%;
}
.quote p { padding: 0 2em; background-color: #212121; color: white;
}
.quote .text { padding-top: 2em; font: normal 400 1em/1.5em 'Montserrat', sans-serif; letter-spacing: 0.04em;
}
.quote .attr { padding-bottom: 1em; font: normal 700 1.5em/1.5em 'Montserrat', sans-serif; letter-spacing: 0.07em; text-align: right;
}
.quote .attr:before { content: " - ";
}
.quote:after { content: "◤"; font-size: 2em; color: #212121; margin: 0 0 0 75%;
}
Flexbox quote box - Script Codes
Flexbox quote box - Script Codes
Home Page Home
Developer Mitch Pruitt
Username mitchdot
Uploaded November 08, 2022
Rating 3
Size 3,441 Kb
Views 22,264
Do you need developer help for Flexbox quote box?

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!

Mitch Pruitt (mitchdot) Script Codes
Name
ASCII triangle image overlay
Sliding image
Image caption overlay
Off-screen navigation
Image header overlay
Segmented control
Sooper cool article header image
Contact Card Flip
Threadless-style rollover menu
Snazzy fixed backgrounds
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!