Finished project

alberto-rj · Apr 10, 2024 · ecdd099 · ecdd099
1 parent 7537840
commit ecdd099
Show file tree

Hide file tree

Showing 17 changed files with 442 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,63 @@
+# Frontend Mentor - Testimonials grid section solution
+
+This is a solution to the [Testimonials grid section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
+
+## Table of contents
+
+- [Overview](#overview)
+  - [The challenge](#the-challenge)
+  - [Screenshot](#screenshot)
+  - [Links](#links)
+- [My process](#my-process)
+  - [Built with](#built-with)
+- [Author](#author)
+
+## Overview
+
+### The challenge
+
+Users should be able to:
+
+- View the optimal layout for the site depending on their device's screen size
+
+### Screenshot
+
+<details>
+  <summary>Mobile version</summary>
+  <img alt="Mobile version screenshot" src="./screenshot/screenshot-mobile.png">
+</details>
+
+<details>
+  <summary>Tablet version</summary>
+  <img alt="Tablet version screenshot" src="./screenshot/screenshot-tablet.png">
+</details>
+
+<details>
+  <summary>Laptop version</summary>
+  <img alt="Laptop version screenshot" src="./screenshot/screenshot-laptop.png">
+</details>
+
+<details>
+  <summary>Desktop version</summary>
+  <img alt="Desktop version screenshot" src="./screenshot/screenshot-desktop.png">
+</details>
+
+### Links
+
+- [Solution](#)
+- [Live Site](#)
+
+## My process
+
+### Built with
+
+- Semantic HTML5 markup
+- CSS custom properties
+- CSS Grid
+- Mobile-first workflow
+
+## Author
+
+- GitHub - [Alberto Raúl José](https://www.github.com/alberto-rj)
+- Frontend Mentor - [@alberto-rj](https://www.frontendmentor.io/profile/alberto-rj)
+- Twitter - [@albertorauljose](https://www.twitter.com/albertorauljose)
diff --git a/design/desktop-design.jpg b/design/desktop-design.jpg
diff --git a/design/desktop-preview.jpg b/design/desktop-preview.jpg
diff --git a/design/mobile-design.jpg b/design/mobile-design.jpg
diff --git a/images/bg-pattern-quotation.svg b/images/bg-pattern-quotation.svg
diff --git a/images/favicon-32x32.png b/images/favicon-32x32.png
diff --git a/images/image-daniel.jpg b/images/image-daniel.jpg
diff --git a/images/image-jeanette.jpg b/images/image-jeanette.jpg
diff --git a/images/image-jonathan.jpg b/images/image-jonathan.jpg
diff --git a/images/image-kira.jpg b/images/image-kira.jpg
diff --git a/images/image-patrick.jpg b/images/image-patrick.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+
+  <title>Frontend Mentor | Testimonials grid section</title>
+  <meta name="auhtor" content="Frontend Mentor">
+  <meta name="title" content="Frontend Mentor | Testimonials grid section">
+  <meta name="description" content="Frontend mentor challenge solution for: Testimonials grid section">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap" rel="stylesheet">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <main class="grid">
+    <h1 class="visually-hidden">
+      What our verified graduates are saying
+    </h1>
+    <div class="grid__item-1 card card--violet">
+      <div class="card__user">
+        <img
+          class="card__user-image"
+          src="images/image-daniel.jpg"
+          alt="Daniel Clifford"
+          height="56"
+          width="56"
+        />
+        <span class="card__user-name bold">
+          Daniel Clifford
+        </span>
+        <span class="card__user-status">
+          Verified Graduate
+        </span>
+      </div>
+      <p class="card__intro bold">
+        I received a job offer mid-course, and the subjects I learned were current, if not more so,
+        in the company I joined. I honestly feel I got every penny’s worth.
+      </p>
+      <p class="card__description">
+        “ I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a
+        transition and have heard some people who had an amazing experience here. I signed up
+        for the free intro course and found it incredibly fun! I enrolled shortly thereafter.
+        The next 12 weeks was the best - and most grueling - time of my life. Since completing
+        the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ”
+      </p>
+    </div>
+    <div class="grid__item-2 card card--gray">
+      <div class="card__user">
+        <img
+          class="card__user-image"
+          src="images/image-jonathan.jpg"
+          alt="Jonathan Walters"
+          height="56"
+          width="56"
+        />
+        <span class="card__user-name bold">
+          Jonathan Walters
+        </span>
+        <span class="card__user-status">
+          Verified Graduate
+        </span>
+      </div>
+      <p class="card__intro bold">
+        The team was very supportive and kept me motivated
+      </p>
+      <p class="card__description">
+        “ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer
+        for a big company. This was one of the best investments I’ve made in myself. ”
+      </p>
+    </div>
+    <div class="grid__item-3 card card--white">
+      <div class="card__user">
+        <img
+          class="card__user-image"
+          src="images/image-jeanette.jpg"
+          alt="Jeanette Harmon"
+          height="56"
+          width="56"
+        />
+        <span class="card__user-name bold">
+          Jeanette Harmon
+        </span>
+        <span class="card__user-status">
+          Verified Graduate
+        </span>
+      </div>
+      <p class="card__intro bold">
+        An overall wonderful and rewarding experience
+      </p>
+      <p class="card__description">
+        “ Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living
+        while doing something I love. ”
+      </p>
+    </div>
+    <div class="grid__item-4 card card--dark">
+      <div class="card__user">
+        <img
+          class="card__user-image"
+          src="images/image-patrick.jpg"
+          alt="Patrick Abrams"
+          height="56"
+          width="56"
+        />
+        <span class="card__user-name bold">
+          Patrick Abrams
+        </span>
+        <span class="card__user-status">
+          Verified Graduate
+        </span>
+      </div>
+      <p class="card__intro bold">
+        Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy.
+      </p>
+      <p class="card__description">
+        “ The staff seem genuinely concerned about my progress which I find really refreshing. The program gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer. The standard is above the rest. You will get the personal attention you need from an incredible community of smart and amazing people. ”
+      </p>
+    </div>
+    <div class="grid__item-5 card card--white">
+      <div class="card__user">
+        <img
+          class="card__user-image"
+          src="images/image-kira.jpg"
+          alt="Kira Whittle"
+          height="56"
+          width="56"
+        />
+        <span class="card__user-name bold">
+          Kira Whittle
+        </span>
+        <span class="card__user-status">
+          Verified Graduate
+        </span>
+      </div>
+      <p class="card__intro bold">
+        Such a life-changing experience. Highly recommended!
+      </p>
+      <p class="card__description">
+        “ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from
+        professionals who can help me learn programming step by step. I was encouraged to enroll by a former
+        student of theirs who can only say wonderful things about the program. The entire curriculum and staff
+        did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team
+        project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial
+        could ever have. In fact, I’ve often referred to it during interviews as an example of my developent
+        experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers.
+        100% recommend! ”
+      </p>
+    </div>
+  </main>
+
+  <!-- attribution -->
+  <footer class="attribution">
+    <p>
+      Challenge by 
+      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
+      Coded by <a href="https://www.github.com/alberto-rj" target="_blank">Alberto Raúl José</a>.
+    </p>
+  </footer>
+</body>
+</html>
diff --git a/screenshot/screenshot-desktop.png b/screenshot/screenshot-desktop.png
diff --git a/screenshot/screenshot-laptop.png b/screenshot/screenshot-laptop.png
diff --git a/screenshot/screenshot-mobile.png b/screenshot/screenshot-mobile.png
diff --git a/screenshot/screenshot-tablet.png b/screenshot/screenshot-tablet.png