diff --git a/css/style.css b/css/style.css index 75e9841e..16fd1574 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,163 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +/* ============ General styles =========== */ +:root { + --clr-light-blue: #6cd6e4; + --clr-black: #263238; + --clr-gray: #62727b; + --clr-white: #ffffff; + --clr-light-gray: #e2e2e2; +} + +*, +*::before, +*::after { + margin: 0; + font-family: inherit; + box-sizing: border-box; +} + +body { + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; +} + +/* ================ header ================ */ +header { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 14px 10vw; + background-color: var(--clr-black); +} + +header div:first-child { + font-size: clamp(1rem, 1.6vw, 1.6vw); + display: flex; + letter-spacing: 0.3rem; + gap: 12px; + color: var(--clr-white); +} + +header h4::first-letter { + color: var(--clr-light-blue); + font-size: 2rem; +} + +header img { + width: 3em; +} + +header ul { + display: flex; + gap: 1.1rem; + list-style: none; + font-weight: 500; +} + +header ul a { + text-decoration: none; + color: var(--clr-white); +} +header ul a:hover { + color: var(--clr-light-blue); +} +.active-link { + color: var(--clr-black); +} + +/* =============== Main ============== */ +section h1 { + text-align: center; + padding: 2rem 0; + font-size: 3rem; +} + +.article-container { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 10px; +} + +.article-container article:first-child { + background-color: var(--clr-light-blue); +} + +.article-container article { + width: clamp(380px, 90vw, 420px); + margin-bottom: 30px; + border: 2px solid var(--clr-light-blue); + border-radius: 6px; +} + +.article-container img { + width: 100%; + max-height: 240px; +} + +.article-text { + padding: 20px 0 0; + text-align: center; +} + +.article-text h3 { + margin: 1rem; +} +.article-text > p { + margin: 1rem; +} + +.writer { + border-top: 2px solid var(--clr-light-blue); + display: flex; + flex-direction: row-reverse; + justify-content: space-around; + align-items: center; + padding: 20px; +} + +.writer a { + background-color: var(--clr-gray); + text-decoration: none; + color: var(--clr-white); + font-size: 1.1rem; + text-shadow: 1px 1px 1px black; + padding: 8px 18px; + border-radius: 4px; +} + +.writer a:hover { + opacity: 80%; +} +.writer img { + width: 4rem; + border-radius: 50%; +} + +.writer-name { + font-weight: 800; +} + +/* ================ Footer =============== */ + +footer { + background-color: var(--clr-black); + color: var(--clr-white); + min-height: 7rem; + padding: 1vw 3vw; +} + +footer p { + letter-spacing: 0.11rem; + font-size: 0.7rem; + margin: 3vw 0; +} + +footer p:first-child { + border-top: var(--clr-light-gray) 1px solid; + padding-top: 2rem; +} + +footer p:last-child { + text-align: center; +} diff --git a/img/cadilac writer.webp b/img/cadilac writer.webp new file mode 100644 index 00000000..7518a4af Binary files /dev/null and b/img/cadilac writer.webp differ diff --git a/img/cadilac.webp b/img/cadilac.webp new file mode 100644 index 00000000..2b88d8d5 Binary files /dev/null and b/img/cadilac.webp differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 00000000..de32fc6f Binary files /dev/null and b/img/logo.png differ diff --git a/img/mercedes.webp b/img/mercedes.webp new file mode 100644 index 00000000..94a7559f Binary files /dev/null and b/img/mercedes.webp differ diff --git a/img/mercwriter.webp b/img/mercwriter.webp new file mode 100644 index 00000000..6d26618e Binary files /dev/null and b/img/mercwriter.webp differ diff --git a/img/pegeot writer.webp b/img/pegeot writer.webp new file mode 100644 index 00000000..81cfe97c Binary files /dev/null and b/img/pegeot writer.webp differ diff --git a/img/peugeot.webp b/img/peugeot.webp new file mode 100644 index 00000000..365d1955 Binary files /dev/null and b/img/peugeot.webp differ diff --git a/index.html b/index.html index 67dfc7f5..0918f6d4 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,117 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - My Blog - + Electric cars - - +
+
+

ELECTRIC

+

VEHICLES

+
+ + +
+
+
+

New electric cars

+
+
+ car photo +
+

Cadillac reveals its $300,000 Celestiq EV

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quo tenetur ipsa corrupti, omnis velit ducimus at pariatur aliquid perferendis quidem odio asperiores itaque distinctio cum magni. Possimus soluta hic perferendis totam blanditiis eaque. Necessitatibus, accusantium harum. Consequuntur ipsam veritatis quasi. Velit dolorem quidem sapiente nisi quas, quos quisquam qui dolor rem accusamus perspiciatis, quis soluta enim iusto doloremque repellendus quasi, dicta officiis suscipit laboriosam aliquid dolorum iste! Alias consequuntur nemo rem molestiae dignissimos neque quod numquam nostrum veniam cum necessitatibus, optio doloribus saepe fugit sint fuga eos tenetur in incidunt eaque quos quisquam. Quisquam quas eveniet ducimus tempore error.lorem11 Lorem ipsum dolor sit. +

+
+ Read more +
+ writer's photo +

K. Holt

+

July 22, 2022

+
+
+
+
+
+ car photo +
+

Mercedes EQXX first drive: Driving the future of Mercedes

+

+ Mercedes had a singular goal: Build a one-off concept vehicle that + could travel 1000 kilometers (621 miles) on one charge from a + battery pack slightly smaller than 100kWh. The result was the + EQXX, a coupe that looks as good as the technology that powers it. + Typically these vehicles are off limits to anyone outside of a + chosen few within an automaker. But Mercedes decided to let us + behind the wheel for a test drive. Designed to slip through the + air with as little drag as possible, the EQXX doesn’t wow with + off-the-line performance. Instead, the power really comes after + you’ve gotten to highway speed. But even then, the concept vehicle + is an efficiency machine that feels like the future. Mercedes has + no plans to put the EQXX into production, but what it's learning + now will at some point land in its vehicles. +

+
+ Read more +
+ writer's photo +

R. Baldwin

+

July 25, 2022

+
+
+
+
+
+ car photo +
+

+ Peugeot EX1 sets new lap record for electric cars at Germany's + Nürburgring circuit +

+

+ Some concept cars may just be for show, but not Peugeot's + all-electric EX1. It made its debut at the 2010 Paris Motor Show + and has continued to be fine-tuned by the automaker ever since -- + work that has now paid off in the form of a new lap record for + electric vehicles at Germany's Nürburgring circuit. Despite + "unfavorable" weather conditions, rigth lorem 3 fyd Lorem ipsum dolor sit. the car managed to post a lap + time of 9 minutes and 1.338 seconds (with an average speed of 85.9 + miles per hour), which handily beat the previous record of 9:51 + set by a modified Mini E last year. Unfortunately, that record + doesn't mean Peugeot is any closer to actually selling one of + these -- the car right was primarily was primarily created to celebrate the + automaker's 200th anniversary. +

+
+ Read more +
+ writer's photo +

D. Melanson

+

May 2, 2011

+
+
+
+
+
+
+
+