Typography

Developer
Graham
Size
9,755 Kb
Views
30,360
  1. Typography Previews
  2. Typography HTML Codes
  3. Typography CSS Codes
  4. Typography JS Codes

How do I make an typography?

What is a typography? How do you make a typography? This script and codes were developed by Graham on 12 October 2022, Wednesday.

Typography Previews
IQ Test

Typography - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Typography</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="theText">
<div id="type-widget">	<div id="range">	<input id="one" max="80" min="15" step=".5" type="range" value="40">	</div>	<div id="getWidth"><span></span></div>	<div id="output"></div>
</div>
<p class="intro">
"Doctors is all swabs," he said; "and
that doctor there, why, what do he know about seafaring
men? I been in places hot as pitch, and mates dropping
round with Yellow Jack, and the blessed land a-heaving
like the sea with earthquakes&mdash;what to the doctor know
of lands like that?&mdash;and I lived on rum, I tell you.
</p>
<div id="theLetters">
<p>
But he broke in cursing the doctor, in a feeble voice
but heartily. "Doctors is all swabs," he said; "and
that doctor there, why, what do he know about seafaring
men? I been in places hot as pitch, and mates dropping
round with Yellow Jack, and the blessed land a-heaving
like the sea with earthquakes&mdash;what to the doctor know
of lands like that?&mdash;and I lived on rum, I tell you.
It's been meat and drink, and man and wife, to me; and
if I'm not to have my rum now I'm a poor old hulk on a
lee shore, my blood'll be on you, Jim, and that doctor
swab"; and he ran on again for a while with curses.
</p>
<p>
"Look, Jim, how my fingers fidges," he continued in the
pleading tone. "I can't keep 'em still, not I. I
haven't had a drop this blessed day. That doctor's a
fool, I tell you. If I don't have a drain o' rum, Jim,
I'll have the horrors; I seen some on 'em already.
I seen old Flint in the corner there, behind you; as
plain as print, I seen him; and if I get the horrors,
I'm a man that has lived rough, and I'll raise Cain.
Your doctor hisself said one glass wouldn't hurt me.
I'll give you a golden guinea for a noggin, Jim."
</p>
<p>
"Thunder!" he cried. "A week! I can't do that; they'd
have the black spot on me by then. The lubbers is
going about to get the wind of me this blessed moment;
lubbers as couldn't keep what they got, and want to
nail what is another's. Is that seamanly behaviour,
now, I want to know? But I'm a saving soul. I never
wasted good money of mine, nor lost it neither; and
I'll trick 'em again. I'm not afraid on 'em. I'll
shake out another reef, matey, and daddle 'em again."
</p>
<p>
As he was thus speaking, he had risen from bed with
great difficulty, holding to my shoulder with a grip
that almost made me cry out, and moving his legs like
so much dead weight. His words, spirited as they were
in meaning, contrasted sadly with the weakness of the
voice in which they were uttered. He paused when he
had got into a sitting position on the edge.
</p>
<p><img src='http://uqgarrow.uqcloud.net/filething/get/41/5488_93932_Aerial_images_of_Heron_Island_Research_Station_Single_use_request_permission.jpg'></p>
<p>
"Ah! Black Dog," says he. "HE'S a bad un; but there's
worse that put him on. Now, if I can't get away nohow,
and they tip me the black spot, mind you, it's my old
sea-chest they're after; you get on a horse&mdash;you can,
can't you? Well, then, you get on a horse, and go to&mdash;
well, yes, I will!&mdash;to that eternal doctor swab, and
tell him to pipe all hands&mdash;magistrates and sich&mdash;and
he'll lay 'em aboard at the Admiral Benbow&mdash;all old
Flint's crew, man and boy, all on 'em that's left. I
was first mate, I was, old Flint's first mate, and I'm
the on'y one as knows the place. He gave it me at
Savannah, when he lay a-dying, like as if I was to now,
you see. But you won't peach unless they get the black
spot on me, or unless you see that Black Dog again or a
seafaring man with one leg, Jim&mdash;him above all."
</p>
<blockquote class="pullquote">
"But what is the black spot, captain?" I asked.
"That's a summons, mate. I'll tell you if they get
that. But you keep your weather-eye open, Jim, and
I'll share with you equals, upon my honour."
</blockquote>
<p>
He wandered a little longer, his voice growing weaker;
but soon after I had given him his medicine, which he
took like a child, with the remark, "If ever a seaman
wanted drugs, it's me," he fell at last into a heavy,
swoon-like sleep, in which I left him. What I should
have done had all gone well I do not know. Probably I
should have told the whole story to the doctor, for I
was in mortal fear lest the captain should repent of
his confessions and make an end of me. But as things
fell out, my poor father died quite suddenly that
evening, which put all other matters on one side. Our
natural distress, the visits of the neighbours, the
arranging of the funeral, and all the work of the inn
to be carried on in the meanwhile kept me so busy that
I had scarcely time to think of the captain, far less
to be afraid of him.
</p>
<p>
He got downstairs next morning, to be sure, and had his
meals as usual, though he ate little and had more, I am
afraid, than his usual supply of rum, for he helped
himself out of the bar, scowling and blowing through
his nose, and no one dared to cross him. On the night
before the funeral he was as drunk as ever; and it was
shocking, in that house of mourning, to hear him
singing away at his ugly old sea-song; but weak as he
was, we were all in the fear of death for him, and the
doctor was suddenly taken up with a case many miles
away and was never near the house after my father's
death. I have said the captain was weak, and indeed he
seemed rather to grow weaker than regain his strength.
He clambered up and down stairs, and went from the
parlour to the bar and back again, and sometimes put
his nose out of doors to smell the sea, holding on to
the walls as he went for support and breathing hard and
fast like a man on a steep mountain. He never
particularly addressed me, and it is my belief he had
as good as forgotten his confidences; but his temper
was more flighty, and allowing for his bodily weakness,
more violent than ever. He had an alarming way now
when he was drunk of drawing his cutlass and laying it
bare before him on the table. But with all that, he
minded people less and seemed shut up in his own
thoughts and rather wandering. Once, for instance, to
our extreme wonder, he piped up to a different air, a
king of country love-song that he must have learned in
his youth before he had begun to follow the sea.
</p>
<p>
So things passed until, the day after the funeral, and
about three o'clock of a bitter, foggy, frosty
afternoon, I was standing at the door for a moment,
full of sad thoughts about my father, when I saw
someone drawing slowly near along the road. He was
plainly blind, for he tapped before him with a stick
and wore a great green shade over his eyes and nose;
and he was hunched, as if with age or weakness, and wore
a huge old tattered sea-cloak with a hood that made him
appear positively deformed. I never saw in my life a
more dreadful-looking figure. He stopped a little from
the inn, and raising his voice in an odd sing-song,
addressed the air in front of him, "Will any kind friend
inform a poor blind man, who has lost the precious sight
of his eyes in the gracious defence of his native country,
England&mdash;and God bless King George!&mdash;where or in what part
of this country he may now be?"
</p>
<p class="pullquote">
"You are at the Admiral Benbow, Black Hill Cove, my
good man," said I. "I hear a voice," said he, "a young voice. Will you give
me your hand, my kind young friend, and lead me in?"
</p>
<p>
I held out my hand, and the horrible, soft-spoken,
eyeless creature gripped it in a moment like a vise. I
was so much startled that I struggled to withdraw, but
the blind man pulled me close up to him with a single
action of his arm.
</p>
<p>
"Now, boy," he said, "take me in to the captain."
"Sir," said I, "upon my word I dare not." "Oh," he sneered, "that's it! Take me in straight or
I'll break your arm." And he gave it, as he spoke, a wrench that made me cry out.
</p>
<p>
"Sir," said I, "it is for yourself I mean. The captain
is not what he used to be. He sits with a drawn
cutlass. Another gentleman&mdash;"
</p>
<p>
"Come, now, march," interrupted he; and I never heard a
voice so cruel, and cold, and ugly as that blind man's.
It cowed me more than the pain, and I began to obey him
at once, walking straight in at the door and towards
the parlour, where our sick old buccaneer was sitting,
dazed with rum. The blind man clung close to me,
holding me in one iron fist and leaning almost more of
his weight on me than I could carry. "Lead me straight
up to him, and when I'm in view, cry out, 'Here's a
friend for you, Bill.' If you don't, I'll do this,"
and with that he gave me a twitch that I thought would
have made me faint. Between this and that, I was so
utterly terrified of the blind beggar that I forgot my
terror of the captain, and as I opened the parlour door,
cried out the words he had ordered in a trembling voice.
</p>
<p>
The poor captain raised his eyes, and at one look the
rum went out of him and left him staring sober. The
expression of his face was not so much of terror as of
mortal sickness. He made a movement to rise, but I do
not believe he had enough force left in his body.
<p>
"Now, Bill, sit where you are," said the beggar. "If I
can't see, I can hear a finger stirring. Business is
business. Hold out your left hand. Boy, take his left
hand by the wrist and bring it near to my right."
<p>
We both obeyed him to the letter, and I saw him pass
something from the hollow of the hand that held his
stick into the palm of the captain's, which closed upon
it instantly.
</p>
<p>
"And now that's done," said the blind man; and at the words
he suddenly left hold of me, and with incredible accuracy
and nimbleness, skipped out of the parlour and into the road,
where, as I still stood motionless, I could hear his stick
go tap-tap-tapping into the distance.
</p>
<p>
It was some time before either I or the captain seemed
to gather our senses, but at length, and about at the
same moment, I released his wrist, which I was still
holding, and he drew in his hand and looked sharply
into the palm.
</p>
<p>
"Ten o'clock!" he cried. "Six hours. We'll do them
yet," and he sprang to his feet. Even as he did so, he reeled, put his hand to his
throat, stood swaying for a moment, and then, with a
peculiar sound, fell from his whole height face
foremost to the floor.</p>
<p>I ran to him at once, calling to my mother. But haste
was all in vain. The captain had been struck dead by
thundering apoplexy. It is a curious thing to
understand, for I had certainly never liked the man,
though of late I had begun to pity him, but as soon as
I saw that he was dead, I burst into a flood of tears.
It was the second death I had known, and the sorrow of
the first was still fresh in my heart.
</p>
<table class="border striped vertical"> <thead> <tr> <th>OS</th> <th>Browser</th> <th>Sans-serif</th> <th>Serif</th> <th>Mono</th> </tr> </thead> <tbody> <tr> <td>Windows</td> <td>Chrome</td> <td>Arial</td> <td>Times New Roman</td> <td>Courier New</td> </tr> <tr> <td>Mac OS X</td> <td>Chrome</td> <td>Helvetica</td> <td>Times-Roman</td> <td>Courier</td> </tr> <tr> <td>Linux</td> <td>Chrome</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody> </table>
</div>
</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>

Typography - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500,300,300italic,400italic,500italic,700italic);
body { font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 400;
}
/*!!!*/
/* why @dlg, why? */
.uq-content { padding: 0;
}
.block { margin-bottom: 0;
}
.container { padding: 0;
}
.block-content > :last-child { margin-bottom: 0; /* remove this, craps on valid margins */
}
.padding-top { padding-top: 2em;
}
#page-title { margin-top: 0.6em;
}
/* fix excessive li padding due to 
, only allow if adjacent siblings 
 
 */
li > p,
li > p:last-child,
li > *:last-child,
li > *:last-child > *:last-child,
li > *:last-child > *:last-child > *:last-child { margin-top: 0; margin-bottom: 0;
}
p + li > p { margin-bottom: 1em;
}
h1, h2, h3, h4, h5, h6 { font-weight: 500;
}
#page-title { margin-bottom: 0.5em;
}
p { font-weight: 400; line-height: 1.84em;
}
p > strong { font-weight: 500;
}
.intro { margin-bottom: 1.6em; font-size: 21px; line-height: 1.6em; font-weight: 500;
}
.subheading { letter-spacing: 2px; margin-top: 1em; padding-bottom: 0.3em; margin-bottom: 1.6em; font-weight: 400; text-transform: uppercase; color: #555; border-width: 0 0 1px 0; border-style: dotted; border-color: #B1B1B1;
}
blockquote, .pullquote { line-height: 1.625em; margin-bottom: 1.625em; padding-left: 1em; border: 6px solid #444; border-width: 0 0 0 6px; font-weight: 500;
}
.caption { display: block; line-height: 1.625em; margin-bottom: 1.625em; padding: 1.625em 2em; font-weight: 400; border-width: 0 0 1px 0; border-style: dotted; border-color: #ccc;
}
dl dt { font-weight: 400;
}
.warning { color: red;
}
table { width: 100%; margin-bottom: rem-calc(20); border: 0; cell-padding: 0; border-spacing: 0; background: white; margin-bottom: 1.25rem;
}
table th, table td { margin: 0; border: 0; border-bottom: 1px solid #ccc; border-collapse: collapse;
}
table thead { font-weight: bold;
}
table thead tr th, table thead tr td, table tfoot tr th, table tfoot tr td { padding: 0.625rem 0.625rem; color: #222222; text-align: left;
}
table thead tr th,
table tfoot tr th,
table tbody tr td, table tbody tr td,
table tfoot tr td { display: table-cell; line-height: 1.125rem;
}
table tr th, table tr td { padding: 0.5625rem 0.625rem; color: #222222;
}
table tr.even, table tr.alt, table table tr:nth-of-type(even) { background: #f9f9f9;
}
table caption { text-align: left; padding: 0.5rem 0.625rem 0.625rem;
}
table.border { border: solid 1px #ccc; border-collapse: collapse;
}
table.vertical.border th:last-child { border-right: none;
}
table.vertical th { border-right: 1px solid #ccc;
}
table.vertical td { border-right: 1px solid #ccc;
}
table.vertical td:first-child { border-left: 1px solid #ccc;
}
table.stripe tbody tr.odd, table.stripe tbody tr:nth-of-type(even), table.striped tbody tr.odd, table.striped tbody tr:nth-of-type(even) { background-color: white;
}
table.stripe tbody tr.even, table.stripe tbody tr.alt, table.stripe tbody tr:nth-of-type(odd), table.striped tbody tr.even, table.striped tbody tr.alt, table.striped tbody tr:nth-of-type(odd) { background-color: #ebebeb;
}
.table-responsive { overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: -ms-autohiding-scrollbar;
}
.slick { margin-bottom: 0;
}
.slide__caption { width: auto; top: auto; bottom: 10%; padding: 0; min-height: inherit;
}
.slide__data { color: #fff; font-weight: 300; font-size: 1.625em; background-color: rgba(0, 0, 0, 0.65); padding: 1em 1.625em;
}
.slick-prev:hover, .slick-next:hover, .slick-down:hover { background: transparent;
}
/* !! ignore this widget !! **/
#type-widget { position: fixed; top: 40px; right: 0; text-align: center; background-color: rgba(0, 0, 0, 0.8); color: #ccc; padding: 1em; z-index: 999;
}

Typography - Script Codes JS Codes

;(function ( $, window, document, undefined ) {
$(function() {	setValues();	$('#one').change(function(){	setValues();	});
});
function setValues() {	var theWidth = $('#one').val();	$('.region-content').css('max-width',theWidth + 'em');	$('#miniImage > div').css('max-width',theWidth + 'em');	$('#getWidth span').text('@media (max-width: '+ theWidth + 'em)')	var elem = document.getElementById("theLetters"),	theText = $('#theLetters p').text(),	textLength = elem.textContent.length,	textHeight = elem.offsetHeight,	lineCount = textHeight/24,	wordCount = theText.split(/\s+/g).length;	/*$('#output').html('±<strong>' + Math.ceil(textLength/lineCount) + '</strong> characters and ±<strong>' + Math.ceil(wordCount/lineCount) + "</strong> words");*/	updateMiniImage();
}
function updateMiniImage() {	var theText = $('#realText').html();	$('#miniImage > div').html(theText);
}
})( jQuery, window, document );
Typography - Script Codes
Typography - Script Codes
Home Page Home
Developer Graham
Username uqgarrowsmith
Uploaded October 12, 2022
Rating 3
Size 9,755 Kb
Views 30,360
Do you need developer help for 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!

Graham (uqgarrowsmith) Script Codes
Name
Drupal View Table Style Markup
A Pen by Graham
CSS Hanging indent
Interactive Branded Tables
Foundation 5 grids.scss
JavaScript Closure
UQ Colour Swatch 0.1b
UI
Example Tables using UQ Theme
Code style sample
Create amazing captions 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!