Transcriptic Typography

Developer
Alexander Hadik
Size
4,188 Kb
Views
16,192
  1. Transcriptic Typography Previews
  2. Transcriptic Typography HTML Codes
  3. Transcriptic Typography CSS Codes

How do I make an transcriptic typography?

What is a transcriptic typography? How do you make a transcriptic typography? This script and codes were developed by Alexander Hadik on 16 September 2022, Friday.

Transcriptic Typography Previews
IQ Test

Transcriptic Typography - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Transcriptic Typography</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card"> <header class="column column--2 column--blue"> <h1>Hero Header</h1> <h2>Page Header</h2> </header> <section class="row"> <div class="column column--1"> <h3>Section Header</h3> </div> <div class="column column--1"> <h3>Section Header</h3> </div> </section> <section class="row"> <div class="column column--1"> <h4>Large Card/Sub-section Header</h4> </div> <div class="column column--1"> <h4>Large Card/Sub-section Header</h4> </div> </section> <section class="row"> <div class="column column--1"> <h5>Small Card Header</h5> </div> <div class="column column--1"> <h5>Small Card Header</h5> </div> </section> <section class="row"> <div class="column column--1"> <p class="paragraph--large">Long body header for text like efficient characterisation of patient derived tumour cell sensitivity to novel drug cocktails.</p> </div> <div class="column column--1"> <p class="paragraph--large">Long body header for text like efficient characterisation of patient derived tumour cell sensitivity to novel drug cocktails.</p> </div> </section> <section class="row"> <div class="column column--1"> </div> <div class="column column--1"> <p class="paragraph--black">Body copy that has something long and descriptive to say like, to predict tumor sensitivity to targeted therapies, we used the Transcriptic cloud laboratory to perform high-throughput screening of PDC samples against multiple concentrations of 48 antitumor agents (currently being used in the clinic). </p> </div> </section> <section class="row"> <div class="column column--1"> <p>Body copy for short, product driven statements like "Unlike CRO’s that require extensive back forth communication, Transcriptic enables clear experiment specification and monitoring to ensure experiment accuracy and transparency."</p> </div> <div class="column column--1"> <p>Body copy for short, product driven statements like "Unlike CRO’s that require extensive back forth communication, Transcriptic enables clear experiment specification and monitoring to ensure experiment accuracy and transparency."</p> </div> </section> <section class="row"> <div class="column column--1"> <button class="button button--action">Button Text</button> </div> <div class="column column--1"> <button class="button button--action">Button Text</button> </div> </section> <section class="row"> <div class="column column--1"> <a href="">Link</a> </div> <div class="column column--1"> <a href="">Link</a> </div> </section>
</div>
</body>
</html>

Transcriptic Typography - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i");
html, body { width: 100%;
}
body { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-family: 'Source Sans Pro', sans-serif; margin: 0;
}
h1, h2, h3, h4, h5, .button { font-weight: 900; text-transform: uppercase;
}
h1 { font-size: 4.375em; line-height: 0.97em; letter-spacing: 2px; margin: 0 0 .5em 0;
}
h1::before { content: "h1. ";
}
@media screen and (max-width: 1080px) { h1 { font-size: 3.645em; line-height: 1.039em; }
}
@media screen and (max-width: 768px) { h1 { font-size: 2.25em; line-height: 1.15em; }
}
h2 { font-size: 3em; line-height: 1.17em; letter-spacing: 1.55px; margin: 0 0 0.833em 0;
}
h2::before { content: "h2. ";
}
@media screen and (max-width: 1080px) { h2 { font-size: 2.5em; line-height: 1.125em; }
}
@media screen and (max-width: 768px) { h2 { font-size: 2em; line-height: 1.25em; }
}
h3 { font-size: 2.25em; line-height: 1.11em; letter-spacing: 1.55px; margin: 0 0 0.833em 0;
}
h3::before { content: "h3. ";
}
@media screen and (max-width: 1080px) { h3 { font-size: 2em; line-height: 1.25em; }
}
@media screen and (max-width: 768px) { h3 { font-size: 1.625em; line-height: 1.154em; }
}
h4 { font-size: 1.375em; line-height: 1.455em; margin: 0 0 0.45em 0;
}
h4::before { content: "h4. ";
}
@media screen and (max-width: 1080px) { h4 { font-size: 1.179em; line-height: 1.25em; }
}
@media screen and (max-width: 768px) { h4 { font-size: 1.08em; line-height: 1.32em; }
}
h5, .button { font-size: 0.9375em; letter-spacing: 1.55px; line-heigh: 1.31em;
}
h5::before, .button::before { content: "h5. ";
}
h5 { margin: 0 0 0.67em 0;
}
p { font-size: 0.875em; font-weight: 300; line-height: 1.57; letter-spacing: 0.7px; margin: 0 0 3em 0;
}
p::before { content: "p. ";
}
@media screen and (max-width: 768px) { p { line-height: 1.375em; }
}
p.paragraph--large { font-size: 1.375em; letter-spacing: 0.4px; line-height: 1.63em; color: #525B68; font-weight: 400; margin: 0 0 1.36em 0;
}
p.paragraph--black { font-size: 0.9375em; color: #525B68; letter-spacing: 0.6px; line-height: 1.87em; font-weight: 400; margin: 0 0 1em 0;
}
p.paragraph--black:last-child { margin: 0 0 2.27em 0;
}
a { color: #FFC40C; text-decoration: none;
}
.button { border: none; border-radius: 3px; padding: 1.75em 2em; color: #fff;
}
.button--action { background-color: #FFC40C;
}
/* ----- END ----- */
.card { width: calc(100% - 100px); height: auto; box-shadow: 0 0 10px 2px #888; display: flex; flex-wrap: wrap; margin: 40px 0;
}
@media screen and (max-width: 768px) { .card { width: 100%; margin: 0; }
}
.row { width: 100%; display: flex;
}
.row:last-child .column { padding: 0 20px 20px 20px;
}
.column { box-sizing: border-box;
}
.column--1 { width: 50%; padding: 0 20px;
}
.column--2 { width: 100%;
}
.column--2:first-child { padding: 20px 20px 0 20px;
}
.column--blue, .column:first-child { background-color: #0E202E; color: #fff;
}
.column--white, .column:last-child { background-color: #fff; color: #0E202E;
}
Transcriptic Typography - Script Codes
Transcriptic Typography - Script Codes
Home Page Home
Developer Alexander Hadik
Username ahadik
Uploaded September 16, 2022
Rating 3
Size 4,188 Kb
Views 16,192
Do you need developer help for Transcriptic Typography?

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!

Alexander Hadik (ahadik) Script Codes
Name
Geometric Header
A Pen by Alexander Hadik
Protocol Card
D3 Learnings
Red Pill or Blue Pill But Only CSS
Pricing Cards V3
Pricing View with Map
Welcome to Transcriptic
HSL SVG Gradient
Transcriptic Header
Create amazing SEO content 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!