Subtle Quote

Developer
Nick Colley
Size
3,379 Kb
Views
12,144
  1. Subtle Quote Previews
  2. Subtle Quote HTML Codes
  3. Subtle Quote CSS Codes

How do I make an subtle quote?

CSS go at http://codepen.io/tholman/pen/KEzbq. What is a subtle quote? How do you make a subtle quote? This script and codes were developed by Nick Colley on 12 November 2022, Saturday.

Subtle Quote Previews
IQ Test

Subtle Quote - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subtle Quote</title> <link href='https://fonts.googleapis.com/css?family=Prata' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/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> <hr>
<blockquote> What is a scientist after all?<br> It is a curious man looking through<br>	a keyhole, the keyhole of nature,<br> trying to know what&rsquo;s going on.
</blockquote> <cite>Jacques-Yves Cousteau</cite>
<hr> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Subtle Quote - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { height: 100%; width: 100%;
}
body { overflow: hidden; position: absolute; top: 50%; right: 0; bottom: 0; left: 0; margin: auto; background-color: #154065; background-image: -webkit-linear-gradient(transparent 50%, rgba(0, 0, 0, 0.1)), -webkit-radial-gradient(center -50%, #304c64, transparent 50%), -webkit-radial-gradient(center -100%, transparent, #000000), -webkit-radial-gradient(center -25%, transparent 30%, #154065 40%), -webkit-linear-gradient(55deg, transparent 45%, #284c6b 50%, transparent 55%, #284c6b 60%, transparent 65%, #284c6b 73%, transparent 75%); background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.1)), radial-gradient(center -50%, #304c64, transparent 50%), radial-gradient(center -100%, transparent, #000000), radial-gradient(center -25%, transparent 30%, #154065 40%), linear-gradient(35deg, transparent 45%, #284c6b 50%, transparent 55%, #284c6b 60%, transparent 65%, #284c6b 73%, transparent 75%); line-height: 1.2;
}
body::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-radial-gradient(circle, rgba(255, 255, 255, 0.075) 1%, transparent 1%) 0 0, -webkit-radial-gradient(circle, rgba(255, 255, 255, 0.1) 1%, transparent 1%) 50% 50%, -webkit-radial-gradient(circle, rgba(255, 255, 255, 0.05) 1%, transparent 1%) 100% 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.075) 1%, transparent 1%) 0 0, radial-gradient(circle, rgba(255, 255, 255, 0.1) 1%, transparent 1%) 50% 50%, radial-gradient(circle, rgba(255, 255, 255, 0.05) 1%, transparent 1%) 100% 100%; background-size: 10% 10%;
}
blockquote { background-image: -webkit-linear-gradient(left, #A7161A, #7B97A8); background-image: linear-gradient(to right, #A7161A, #7B97A8); background-clip: text; text-align: center; font-family: Prata, serif; font-size: 2em; -webkit-text-fill-color: transparent; -webkit-animation: flyin 0.9s cubic-bezier(0.165, 0.84, 0.44, 1), hue 10s infinite alternate; animation: flyin 0.9s cubic-bezier(0.165, 0.84, 0.44, 1), hue 10s infinite alternate;
}
blockquote::before { content: '\201c';
}
blockquote::after { content: '\201d';
}
blockquote + cite { margin-top: -1em; margin-bottom: 2em;
}
cite { display: block; color: white; font-size: .8em; font-family: Raleway, sans-serif; font-style: normal; text-align: center; text-transform: uppercase; -webkit-animation: flyin 0.9s cubic-bezier(0.165, 0.84, 0.44, 1); animation: flyin 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}
hr { width: 15%; -webkit-animation: width 0.9s cubic-bezier(0.165, 0.84, 0.44, 1); animation: width 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@-webkit-keyframes hue { to { -webkit-filter: saturate(150%) hue-rotate(-35deg); filter: saturate(150%) hue-rotate(-35deg); }
}
@keyframes hue { to { -webkit-filter: saturate(150%) hue-rotate(-35deg); filter: saturate(150%) hue-rotate(-35deg); }
}
@-webkit-keyframes width { from { opacity: 0; width: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } to { width: 15%; }
}
@keyframes width { from { opacity: 0; width: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } to { width: 15%; }
}
@-webkit-keyframes flyin { from { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); }
}
@keyframes flyin { from { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); }
}
Subtle Quote - Script Codes
Subtle Quote - Script Codes
Home Page Home
Developer Nick Colley
Username nickcolley
Uploaded November 12, 2022
Rating 3
Size 3,379 Kb
Views 12,144
Do you need developer help for Subtle Quote?

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!

Nick Colley (nickcolley) Script Codes
Name
Henry Homesweet Boxmodel
Raincoat PC
A Pen by Nick Colley
Wip elementary os navbar
One element icon
Custom Soundcloud Player
Music
Banner hover test
Close animation
Brightness regulation UI design
Create amazing sales emails 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!