diff --git a/css/images/2019-Yamaha-Tracer-900GT.jpg b/css/images/2019-Yamaha-Tracer-900GT.jpg new file mode 100644 index 00000000..03a23a1b Binary files /dev/null and b/css/images/2019-Yamaha-Tracer-900GT.jpg differ diff --git a/css/images/Honda_Fireblade_01.jpg b/css/images/Honda_Fireblade_01.jpg new file mode 100644 index 00000000..ac50d0bd Binary files /dev/null and b/css/images/Honda_Fireblade_01.jpg differ diff --git a/css/images/suzuki.jpg b/css/images/suzuki.jpg new file mode 100644 index 00000000..13e8cd17 Binary files /dev/null and b/css/images/suzuki.jpg differ diff --git a/css/style.css b/css/style.css index 75e9841e..45c63cd6 100644 --- a/css/style.css +++ b/css/style.css @@ -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; +} diff --git a/index.html b/index.html index 67dfc7f5..77b37431 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - My Blog + Motorcycle Blog +
+

The Motorcycle Rider monthly blog

+

+ 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. +

+
+ +
+
+
+ +

Yamaha

+ Yamaha tracer 900GT Motorbike + +

+ 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! +

+ Yamaha UK website +
+ +
+ +

Honda

+ CBR1000RR Motorbike + +

+ 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! +

+ Honda UK website +
+ +
+ +

Suzuki

+ Suzuki Gixxer SF Motorcycle + +

+ 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! +

+ Suzuki UK website +
+
+
+