Incendiary

Developer
Jonathan Garner
Size
3,420 Kb
Views
28,336
  1. Incendiary Previews
  2. Incendiary HTML Codes
  3. Incendiary CSS Codes

How do I make an incendiary?

What is a incendiary? How do you make a incendiary? This script and codes were developed by Jonathan Garner on 13 August 2022, Saturday.

Incendiary Previews
IQ Test

Incendiary - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Incendiary</title> <link href='https://fonts.googleapis.com/css?family=Amiri:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Crimson+Text:400,600,400italic' 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> <!-- Inspired by: http://bookcoverarchive.com/book/incendiary/ -->
<section class="cover"> <div class="top-half gradient"> <div class="text text-top"> <h1>incendiary </h1> <p>a novel</p> <span>Chris</span> <br /> <span>Cleave</span> </div> </div> <div class="bottom-half"> <div class="text text-bottom"> <blockquote> <p>"A mesmerizing tour de force; ragged, breathless, full of raw emotion, the blackest of humour and relentless action."</p> <footer>
— <cite><a href="https://syndication.washingtonpost.com/book-world">The Washington Post Book World</a></cite> </footer> </blockquote> </div> </div>
</section>
</body>
</html>

Incendiary - Script Codes CSS Codes

.top-half { width: 100vw; height: 50vh; display: flex; align-items: flex-end;
}
.bottom-half { width: 100vw; height: 50vh; position: relative; overflow: hidden; display: flex; align-items: center;
}
.text { width: 70%; max-width: 300px; margin: 0 auto;
}
@media (min-width: 900px) { .text { font-size: 1.2em; }
}
.text-top { text-transform: uppercase; margin-bottom: 2em; font-family: 'Amiri', serif;
}
.text-top h1 { letter-spacing: 6px; margin-bottom: 0; font-weight: 100;
}
.text-top p { font-size: 0.7em; margin-top: 0;
}
.text-top span { letter-spacing: 3px;
}
.text-bottom { font-family: 'Crimson Text', serif;
}
blockquote { margin: 0;
}
blockquote p { margin-bottom: 0.2em; line-height: 1.7em; font-weight: 600;
}
blockquote a { color: black; text-decoration: none; letter-spacing: -0.75px; font-size: 1.1em;
}
.bottom-half:before { content: ""; position: absolute; width: 160%; height: 160%; top: -20%; right: -20%; z-index: -1; background: url("http://www.inabowl.com/photos/albums/London%20(Sept%2028%20-%2030)/24-Big-Ben.jpg"); background-position: bottom; background-size: cover; transform: rotate(180deg); -webkit-filter: brightness(1.1); -moz-filter: brightness(1.1); -o-filter: brightness(1.1); -ms-filter: brightness(1.1); filter: brightness(1.1);
}
@media (min-width: 680px) { .bottom-half:before { background-position: center; top: 0%; }
}
@media (min-width: 900px) { .bottom-half:before { background-position: bottom; top: -55%; }
}
.gradient { background: #C02425; /* fallback for old browsers */ background: -webkit-linear-gradient(bottom, #C02425, #F0CB35); background: -moz-linear-gradient(bottom, #C02425, #F0CB35); background: -o-linear-gradient(top, #C02425, #F0CB35); background: linear-gradient(top, #C02425, #F0CB35); /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
Incendiary - Script Codes
Incendiary - Script Codes
Home Page Home
Developer Jonathan Garner
Username jonathangarner
Uploaded August 13, 2022
Rating 3
Size 3,420 Kb
Views 28,336
Do you need developer help for Incendiary?

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!

Jonathan Garner (jonathangarner) Script Codes
Name
JM Nav 2nd Gen prototype x
Mr Peanut
A Pen by Jonathan Garner
JM Top Nav v1
Inside the Stalin Archives
Testing flexbox
JM Nav 2nd Gen prototype x3
Search Form2
After America
Search Form
Create amazing art & images 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!