Quotastic

Developer
Fred Hawk
Size
3,051 Kb
Views
10,120
  1. Quotastic Previews
  2. Quotastic HTML Codes
  3. Quotastic CSS Codes
  4. Quotastic JS Codes

How do I make an quotastic?

Quotes galore. What is a quotastic? How do you make a quotastic? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

Quotastic Previews
IQ Test

Quotastic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Quotastic</title> <link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <div class="container"> <section class="wrapper"> <article> <h1>Chuck Norris quotes</h1> <p>Found this really funny site with random Chuck Norris quotes that I thought I would do something with.</p> <button class="new-quote">New Quote</button> </article> <article class="quotes"> <blockquote class="quote"> <p class="quote-text"></p> </blockquote> <button class="tweet"> <a class="twitter-share-button" href="#" target="_blank"><img src="https://g.twimg.com/dev/documentation/image/Twitter_logo_blue_16.png" alt="Tweet this" /> Tweet this</a> </button> </article> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Quotastic - Script Codes CSS Codes

body { font-size: 16px;
}
h1 { font-size: 2em; font-family: 'Special Elite', cursive; margin-bottom: 1.2rem;
}
p { margin: 1.5rem 0; font-size: 1.2em;
}
blockquote { font-family: 'Indie Flower', cursive; font-size: 1.3em;
}
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 2rem;
}
.wrapper { width: 40%;
}
.quotes { background-color: lightblue; border-radius: 50%; padding: 3rem; box-shadow: 2px 2px 2px #888; text-align: center;
}
.quotes h1 { text-align: center;
}
.quote-text { margin: 0.5rem 0; text-align: center;
}
button { background-color: whitesmoke; color: darkblue; padding: 0.3rem; border-radius: 1rem; border: solid darkblue 0.1rem; box-shadow: 2px 2px 2px #888;
}
button a { text-decoration: none; color: darkblue;
}
button:hover { color: white; background-color: #3b89c3;
}
.tweet { margin-top: 1rem;
}
.quote-text { padding-top: 1.2rem;
}

Quotastic - Script Codes JS Codes

$(document).ready(function() { getData(); $('.new-quote').click(function() { getData(); }); function getData() { $.getJSON("https://api.icndb.com/jokes/random", function(result) { $('.quote-text').text(result.value.joke); $('.twitter-share-button').attr('href', "https://twitter.com/intent/tweet?text=" + result.value.joke); }); }
});
Quotastic - Script Codes
Quotastic - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 3,051 Kb
Views 10,120
Do you need developer help for Quotastic?

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!

Fred Hawk (osycon) Script Codes
Name
Weekly UI - Mobile design sketches
Weekly UI - Make Reservations
Weekly UI - Airbnb Footer Component
Lilli
Weekly UI - Stripe - Pricing section
Weekly UI - Become a member
Weather App
Weekly UI - Statue of liberty
Weekly UI - Paypal Navigation
Collapsing Text Animation
Create amazing blog posts 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!