From 5eaeb418dcdf700f41ba63ba70e2b309b4645ff7 Mon Sep 17 00:00:00 2001
From: J3-Stadon <Jonathon.Stadon@uwe.ac.uk>
Date: Fri, 1 Dec 2023 08:52:40 +0000
Subject: [PATCH] sea wolf css start
---
CSS Grids example/index.html | 54 +++++++++++++++++--------------
CSS Grids example/styles/main.css | 33 +++++++++++++++++++
2 files changed, 63 insertions(+), 24 deletions(-)
diff --git a/CSS Grids example/index.html b/CSS Grids example/index.html
index 19c4dc0..6f07246 100644
--- a/CSS Grids example/index.html
+++ b/CSS Grids example/index.html
@@ -4,69 +4,75 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="styles/main.css">
<title>Extract from The Sea Wolf</title>
</head>
<body>
- Johansen called out to Harrison to go out the halyards. It was patent to
- everybody that the boy was afraid.
+ <section>
+ <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
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
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
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,
- 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 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
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
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
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 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
- 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
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
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
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
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,
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
- hung, a pitiable object.
+ hung, a pitiable object.</p></article>
- <div class="right-images">
- <img id="r1" src="images/Tallship.jpg" />
- <img id="r2" src="images/rope-climbing-sky.jpeg" />
- <img id="r3" src="images/4.jpg" />
- </div>
-
- <div class="left-images">
- <img id="l1" src="images/sea.jpg" />
- <img id="l2" src="images/mfaC0nw.jpg" />
- <img id="l3" src="images/dave_mast.small.jpg" />
- </div>
+ <article class="right-images">
+ <img id="r1" src="images/Tallship.jpg" />
+ <img id="r2" src="images/rope-climbing-sky.jpeg" />
+ <img id="r3" src="images/4.jpg" />
+ </article>
+
+ <article class="left-images">
+ <img id="l1" src="images/sea.jpg" />
+ <img id="l2" src="images/mfaC0nw.jpg" />
+ <img id="l3" src="images/dave_mast.small.jpg" />
+ </article>
+ </section>
</body>
</html>
\ No newline at end of file
diff --git a/CSS Grids example/styles/main.css b/CSS Grids example/styles/main.css
index e69de29..681c494 100644
--- a/CSS Grids example/styles/main.css
+++ b/CSS Grids example/styles/main.css
@@ -0,0 +1,33 @@
+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;
+}
--
GitLab