ChatGPT Blockquote style examples


<!DOCTYPE html>

<html>

<head>

    <title>Blockquote Styles</title>

    <style>

        /* Style 1 */

        .style1 blockquote {

            color: white;

            background-color: black;

        }


        /* Style 2 */

        .style2 blockquote {

            border-left: 5px solid gray;

            padding: 10px 20px;

        }


        /* Style 3 */

        .style3 blockquote {

            font-family: 'Courier New', monospace;

            font-size: 1.2em;

        }


        /* Style 4 */

        .style4 blockquote {

            float: right;

            transform: rotate(5deg);

            margin: 0 0 20px 20px;

        }


        /* Style 5 */

        .style5 blockquote {

            background: linear-gradient(to left, #242424 , #474747);

            color: white;

            padding: 1.5em;

        }


        /* Style 6 */

        .style6 blockquote {

            background-image: url(image.jpg);

            color: white;

            padding: 20px;

        }


        /* Style 7 */

        .style7 blockquote {

            color: black;

            background-color: white;

            padding: 20px;

            transition: all 0.2s ease-in-out;

        }

        .style7 blockquote:hover {

            color: white;

            background-color: black;

        }


        /* Style 8 */

        @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

        .style8 blockquote {

            font-family: 'Great Vibes', cursive;

            text-shadow: 2px 2px 4px #000000;

            padding: 20px;

        }


        /* Style 9 */

        .style9 blockquote {

            animation: slide-in-left 0.5s ease-in-out;

            padding: 20px;

        }

        @keyframes slide-in-left {

            from {

                transform: translateX(-100%);

            }

            to {

                transform: translateX(0);

            }

        }


        /* Style 10 */

        .style10 blockquote {

            background: linear-gradient(to right, #fad961 , #f76b1c);

            color: #fff;

            padding: 1.5em;

            transition: all 0.2s ease-in-out;

        }

        .style10 blockquote:hover {

            color: #f76b1c;

        }

    </style>

</head>

<body>

    <h1>Blockquote Styles</h1>


    <h2>Style 1</h2>

    <div class="style1">

        <blockquote>

            "The greatest glory in living lies not in never falling, but in rising every time we fall." -Nelson Mandela

        </blockquote>

    </div>

    <br>

    <h2>Style 2</h2>

<div class="style2">

<blockquote>

"The best way to predict your future is to create it." -Abraham Lincoln

</blockquote>

</div>

<br>

<h2>Style 3</h2>

<div class="style3">

<blockquote>

"You miss 100% of the shots you don't take." -Wayne Gretzky

</blockquote>

</div>

<br>

<h2>Style 4</h2>

<div class="style4">

<blockquote>

"Life is not about waiting for the storm to pass, it's about learning to dance in the rain." -Vivian Greene

</blockquote>

</div>

<br>

<h2>Style 5</h2>

<div class="style5">

<blockquote>

"You can't build a reputation on what you are going to do." -Henry Ford

</blockquote>

</div>

<br>

<h2>Style 6</h2>

<div class="style6">

<blockquote>

"The only way to do great work is to love what you do." -Steve Jobs

</blockquote>

</div>

<br>

<h2>Style 7</h2>

<div class="style7">

<blockquote>

"You miss 100% of the shots you don't take." -Wayne Gretzky

</blockquote>

</div>

<br>

<h2>Style 8</h2>

<div class="style8">

<blockquote>

"I have not failed. I've just found 10,000 ways that won't work." -Thomas Edison

</blockquote>

</div>

<br>

<h2>Style 9</h2>

<div class="style9">

<blockquote>

"The only way to do great work is to love what you do." -Steve Jobs

</blockquote>

</div>

<br>

<h2>Style 10</h2>

<div class="style10">

<blockquote>

"The only limit to our realization of tomorrow will be our doubts of today." -Franklin D. Roosevelt

</blockquote>

</div>


</body>

</html>


ChatGPT blockquote styles