CodeYourFuture · 8maziar · Jul 25, 2022 · Jul 25, 2022 · Jul 25, 2022
diff --git 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
diff --git a/img/cadilac.webp b/img/cadilac.webp
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/mercedes.webp b/img/mercedes.webp
diff --git a/img/mercwriter.webp b/img/mercwriter.webp
diff --git a/img/pegeot writer.webp b/img/pegeot writer.webp
diff --git a/img/peugeot.webp b/img/peugeot.webp
diff --git a/index.html b/index.html
@@ -6,17 +6,117 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
-    />
+    <title>Electric cars</title>
     <link rel="stylesheet" href="css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <header> 
+       <div>
+          <h4>ELECTRIC</h4>
+          <h4>VEHICLES</h4>
+        </div>
+      <div class="logo">
+        <a href="#"
+          ><img src="./img/logo.png" alt="site logo" /></a
+        >
+       </div>
+      <nav>
+        <ul>
+          <li><a href="#">Store</a></li>
+          <li><a href="#">Blog</a></li>
+          <li><a href="#">Help</a></li>
+          <li><a href="#">Login</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <section>
+        <h1>New electric cars</h1>
+        <div class="article-container">
+          <article>
+            <img src="./img/cadilac.webp" alt="car photo" />
+            <div class="article-text">
+              <h3>Cadillac reveals its $300,000 Celestiq EV</h3>
+              <p>
+                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.
+              </p>
+              <div class="writer">
+                <a href="https://www.engadget.com/cadillac-celestiq-luxury-ev-reveal-174256350.html">Read more</a>
+                <div>
+                  <img src="./img/cadilac writer.webp" alt="writer's photo" />
+                  <p class="writer-name">K. Holt</p>
+                  <p>July 22, 2022</p>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article>
+            <img src="./img/mercedes.webp" alt="car photo" />
+            <div class="article-text">
+              <h3>Mercedes EQXX first drive: Driving the future of Mercedes</h3>
+              <p>
+                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.
+              </p>
+              <div class="writer">
+                <a href="https://www.engadget.com/mercedes-vision-eqxx-first-drive-video-070023887.html">Read more</a>
+                <div>
+                  <img src="./img/mercwriter.webp" alt="writer's photo" />
+                  <p class="writer-name">R. Baldwin</p>
+                  <p>July 25, 2022</p>
+                </div>
+              </div>
+            </div>
+            </article>
+          <article>
+            <img src="./img/peugeot.webp" alt="car photo" />
+            <div class="article-text">
+              <h3>
+                Peugeot EX1 sets new lap record for electric cars at Germany's
+                Nürburgring circuit
+              </h3>
+              <p>
+                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.
+              </p>
+              <div class="writer">
+                <a href="https://www.engadget.com/2011-05-02-peugeot-ex1-sets-new-lap-record-for-electric-cars-at-germanys-n.html">Read more</a>
+                <div>
+                  <img src="./img/pegeot writer.webp" alt="writer's photo" />
+                  <p class="writer-name">D. Melanson</p>
+                  <p>May 2, 2011</p>
+                </div>
+              </div>
+            </div>
+          </article>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <p>Learn more about the types of electric vehicles, their benefits. Electric vehicles are an increasingly attractive option, due to their lower running costs, the expanding choice of models available and intensifying concerns about air quality and climate change.</p>
+      <p><span>&#169</span>Electric cars, Inc. Created by Maziar Mansouri</p>
+    </footer>
   </body>
 </html>