Skip to content
Snippets Groups Projects
Commit 5eaeb418 authored by Jonathon Stadon's avatar Jonathon Stadon
Browse files

sea wolf css start

parent 60911381
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
CSS Grids example/index.html
+ 30
− 24
View file @ 5eaeb418
...@@ -4,69 +4,75 @@ ...@@ -4,69 +4,75 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles/main.css">
<title>Extract from The Sea Wolf</title> <title>Extract from The Sea Wolf</title>
</head> </head>
<body> <body>
Johansen called out to Harrison to go out the halyards. It was patent to <section>
everybody that the boy was afraid. <article id="heading">
<h1>Extract from The Sea Wolf</h1>
<h5>Johansen called out to Harrison to go out the halyards. It was patent to
everybody that the boy was afraid. </h5>
</article>
And well he might be, eighty feet above the deck, to trust himself on those <article id="text-left"><p>And well he might be, eighty feet above the deck, to trust himself on those
thin and jerking ropes. Had thin and jerking ropes. Had
there been a steady breeze it would not have been so bad, but the _Ghost_ there been a steady breeze it would not have been so bad, but the _Ghost_
was rolling emptily in a long sea, and with each roll the canvas flapped was rolling emptily in a long sea, and with each roll the canvas flapped
and boomed and the halyards slacked and jerked taut. They were capable and boomed and the halyards slacked and jerked taut. They were capable
of snapping a man off like a fly from a whip-lash. of snapping a man off like a fly from a whip-lash.<br><br>
Harrison heard the order and understood what was demanded of him, but Harrison heard the order and understood what was demanded of him, but
hesitated. It was probably the first time he had been aloft in his life. hesitated. It was probably the first time he had been aloft in his life.
Johansen, who had caught the contagion of Wolf Larsen’s masterfulness, Johansen, who had caught the contagion of Wolf Larsen’s masterfulness,
burst out with a volley of abuse and curses. burst out with a volley of abuse and curses.<br><br>
“That’ll do, Johansen,” Wolf Larsen said brusquely. “I’ll have you know “That’ll do, Johansen,” Wolf Larsen said brusquely. “I’ll have you know
that I do the swearing on this ship. If I need your assistance, I’ll that I do the swearing on this ship. If I need your assistance, I’ll
call you in.” call you in.”<br><br>
“Yes, sir,” the mate acknowledged submissively. “Yes, sir,” the mate acknowledged submissively.<br><br>
In the meantime Harrison had started out on the halyards. I was looking In the meantime Harrison had started out on the halyards. I was looking
up from the galley door, and I could see him trembling, as if with ague, up from the galley door, and I could see him trembling, as if with ague,
in every limb. He proceeded very slowly and cautiously, an inch at a in every limb. He proceeded very slowly and cautiously, an inch at a
time. Outlined against the clear blue of the sky, he had the appearance time. Outlined against the clear blue of the sky, he had the appearance
of an enormous spider crawling along the tracery of its web. of an enormous spider crawling along the tracery of its web.<br><br></p></article>
It was a slight uphill climb, for the foresail peaked high; and the <article id="text-right"><p>It was a slight uphill climb, for the foresail peaked high; and the
halyards, running through various blocks on the gaff and mast, gave him halyards, running through various blocks on the gaff and mast, gave him
separate holds for hands and feet. But the trouble lay in that the wind separate holds for hands and feet. But the trouble lay in that the wind
was not strong enough nor steady enough to keep the sail full. When he was not strong enough nor steady enough to keep the sail full. When he
was half-way out, the _Ghost_ took a long roll to windward and back again was half-way out, the _Ghost_ took a long roll to windward and back again
into the hollow between two seas. Harrison ceased his progress and held into the hollow between two seas. Harrison ceased his progress and held
on tightly. Eighty feet beneath, I could see the agonized strain of his on tightly.<br><br> Eighty feet beneath, I could see the agonized strain of his
muscles as he gripped for very life. The sail emptied and the gaff swung muscles as he gripped for very life. The sail emptied and the gaff swung
amid-ships. The halyards slackened, and, though it all happened very amid-ships. The halyards slackened, and, though it all happened very
quickly, I could see them sag beneath the weight of his body. Then the quickly, I could see them sag beneath the weight of his body.<br> <br> Then the
gag swung to the side with an abrupt swiftness, the great sail boomed gag swung to the side with an abrupt swiftness, the great sail boomed
like a cannon, and the three rows of reef-points slatted against the like a cannon, and the three rows of reef-points slatted against the
canvas like a volley of rifles. Harrison, clinging on, made the giddy canvas like a volley of rifles. Harrison, clinging on, made the giddy
rush through the air. This rush ceased abruptly. The halyards became rush through the air. This rush ceased abruptly. The halyards became
instantly taut. It was the snap of the whip. His clutch was broken. instantly taut. It was the snap of the whip. His clutch was broken.<br><br>
One hand was torn loose from its hold. The other lingered desperately One hand was torn loose from its hold. The other lingered desperately
for a moment, and followed. His body pitched out and down, but in some for a moment, and followed. His body pitched out and down, but in some
way he managed to save himself with his legs. He was hanging by them, way he managed to save himself with his legs. He was hanging by them,
head downward. A quick effort brought his hands up to the halyards head downward. A quick effort brought his hands up to the halyards
again; but he was a long time regaining his former position, where he again; but he was a long time regaining his former position, where he
hung, a pitiable object. hung, a pitiable object.</p></article>
<div class="right-images"> <article class="right-images">
<img id="r1" src="images/Tallship.jpg" /> <img id="r1" src="images/Tallship.jpg" />
<img id="r2" src="images/rope-climbing-sky.jpeg" /> <img id="r2" src="images/rope-climbing-sky.jpeg" />
<img id="r3" src="images/4.jpg" /> <img id="r3" src="images/4.jpg" />
</div> </article>
<div class="left-images"> <article class="left-images">
<img id="l1" src="images/sea.jpg" /> <img id="l1" src="images/sea.jpg" />
<img id="l2" src="images/mfaC0nw.jpg" /> <img id="l2" src="images/mfaC0nw.jpg" />
<img id="l3" src="images/dave_mast.small.jpg" /> <img id="l3" src="images/dave_mast.small.jpg" />
</div> </article>
</section>
</body> </body>
</html> </html>
\ No newline at end of file
CSS Grids example/styles/main.css
+ 33
− 0
View file @ 5eaeb418
section{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
grid-template-areas:
"heading heading"
"left-text right-images"
"left-images right-text";
}
#heading{
grid-area: heading;
text-align: center;
}
#text-left{
grid-area: left-text;
}
#right-images{
grid-area: right-images;
}
#text-right{
grid-area: right-text;
}
#left-images{
grid-area: left-images;
}
p, h1, h5{
font-family: Arial, Helvetica, sans-serif;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment