Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

NW - Terry Calderbank - HTML-CSS-Coursework-Week1 #51

Closed
Texx45 wants to merge 2 commits into from
Closed

NW - Terry Calderbank - HTML-CSS-Coursework-Week1 #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
84c12b7
Commit befor e first-child psuedo class
Texx45 May 17, 2021
fb71f0c
Sorted :first-of-type issue
Texx45 May 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added css/images/2019-Yamaha-Tracer-900GT.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/images/Honda_Fireblade_01.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/images/suzuki.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 76 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,79 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

/* Standard page style */
body {
box-sizing: border-box;
font-family: Lato, Arial, Helvetica, sans-serif;
letter-spacing: 0.3px;
line-height: 1.3rem;
background-color: rgb(233, 218, 218);
}

header {
text-align: center;
}

h1 {
border: 5px solid lightslategray;
text-align: center;
padding: 1rem;
display: inline-block;
border-radius: 0.3rem;
}

h2 {
font-weight: 700;
font-size: 1.5rem;
margin: 3rem 3rem;
text-decoration: underline;
}

img {
width: 50%;
border: 5px solid black;
border-radius: 0.5rem;
display: block;
margin: 3rem auto;
}

p {
margin: 2rem 3rem;
font-size: 1.1rem;
}

a {
display: inline-block;
margin: 1.5rem 3rem;
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: orangered;
}

article:first-child {
background-color: darkgrey;
padding: 2rem 2rem;
border: 2px solid black;
border-radius: 0.3rem;
}
/* article-container > article:first-child {
border: 5px solid lime;
background-color: sandybrown; */

footer {
border: 4px solid rgb(46, 44, 44);
background-color: grey;
color: #fff;
margin: 2rem 2rem;
border-radius: 0.1rem;
}

footer p {
font-size: 0.7rem;
}
86 changes: 85 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<title>Motorcycle Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
Expand All @@ -17,6 +17,90 @@
</head>
<body>
<!-- Add your HTML markup here -->
<header>
<h1>The Motorcycle Rider monthly blog</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam animi
et laudantium adipisci impedit dolor nostrum, quae odit quibusdam,
recusandae rerum repellat corporis vero ut explicabo aspernatur
cupiditate voluptatum, porro provident eos nobis. Eaque a debitis, eos
dicta repellendus consequuntur laudantium unde quae, animi ab adipisci
velit perferendis magnam ratione.
</p>
</header>

<main>
<section>
<article class="Yamaha">
<!-- title -->
<h2>Yamaha</h2>
<img
src="css/images/2019-Yamaha-Tracer-900GT.jpg"
alt="Yamaha tracer 900GT Motorbike"
/>
<!-- summary -->
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa quasi
nesciunt illo nemo placeat exercitationem. Rerum non vel voluptatem
ratione incidunt nisi eligendi magnam maiores sequi earum porro
reiciendis reprehenderit ducimus, labore repudiandae dicta corrupti
vero aliquam illum ipsam neque nam eaque! Vitae officiis ipsa
incidunt. Cumque, consequuntur dolores modi dignissimos animi at
labore numquam officia, voluptatum magni libero quis qui non?
Excepturi, totam. Ex facere nostrum natus accusantium optio!
</p>
<a href="https://www.yamaha-motor.eu/gb/en/#/" target="_blank"
>Yamaha UK website</a
>
</article>

<article class="Honda">
<!-- title -->
<h2>Honda</h2>
<img
src="css/images/Honda_Fireblade_01.jpg"
alt="CBR1000RR Motorbike"
/>
<!-- summary -->
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa quasi
nesciunt illo nemo placeat exercitationem. Rerum non vel voluptatem
ratione incidunt nisi eligendi magnam maiores sequi earum porro
reiciendis reprehenderit ducimus, labore repudiandae dicta corrupti
vero aliquam illum ipsam neque nam eaque! Vitae officiis ipsa
incidunt. Cumque, consequuntur dolores modi dignissimos animi at
labore numquam officia, voluptatum magni libero quis qui non?
Excepturi, totam. Ex facere nostrum natus accusantium optio!
</p>
<a href="https://www.honda.co.uk/motorcycles.html" target="_blank"
>Honda UK website</a
>
</article>

<article class="Suzuki">
<!-- title -->
<h2>Suzuki</h2>
<img src="css/images/suzuki.jpg" alt="Suzuki Gixxer SF Motorcycle" />
<!-- summary -->
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa quasi
nesciunt illo nemo placeat exercitationem. Rerum non vel voluptatem
ratione incidunt nisi eligendi magnam maiores sequi earum porro
reiciendis reprehenderit ducimus, labore repudiandae dicta corrupti
vero aliquam illum ipsam neque nam eaque! Vitae officiis ipsa
incidunt. Cumque, consequuntur dolores modi dignissimos animi at
labore numquam officia, voluptatum magni libero quis qui non?
Excepturi, totam. Ex facere nostrum natus accusantium optio!
</p>
<a href="https://bikes.suzuki.co.uk/bikes/" target="_blank"
>Suzuki UK website</a
>
</article>
</section>
</main>
<footer>
<p>&#xA9; Motorcycle Rider monthly blog 2021</p>
</footer>
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>