Add files via upload

gauravgorane · May 27, 2024 · 75f631b · 75f631b
1 parent 0b9ec04
commit 75f631b
Show file tree

Hide file tree

Showing 9 changed files with 308 additions and 0 deletions.
diff --git a/Testimonials_grid_section/images/bg-pattern-quotation.svg b/Testimonials_grid_section/images/bg-pattern-quotation.svg
diff --git a/Testimonials_grid_section/images/favicon-32x32.png b/Testimonials_grid_section/images/favicon-32x32.png
diff --git a/Testimonials_grid_section/images/image-daniel.jpg b/Testimonials_grid_section/images/image-daniel.jpg
diff --git a/Testimonials_grid_section/images/image-jeanette.jpg b/Testimonials_grid_section/images/image-jeanette.jpg
diff --git a/Testimonials_grid_section/images/image-jonathan.jpg b/Testimonials_grid_section/images/image-jonathan.jpg
diff --git a/Testimonials_grid_section/images/image-kira.jpg b/Testimonials_grid_section/images/image-kira.jpg
diff --git a/Testimonials_grid_section/images/image-patrick.jpg b/Testimonials_grid_section/images/image-patrick.jpg
diff --git a/Testimonials_grid_section/index.html b/Testimonials_grid_section/index.html
@@ -0,0 +1,160 @@
+<!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">
+  <link rel="stylesheet" href="style.css">
+
+  <title>Frontend Mentor | Testimonials grid section </title>
+
+</head>
+
+<body>
+
+  <main>
+
+    <div class="container">
+
+      <div class="cards quote">
+
+        <div class="image">
+          <img src="images/image-daniel.jpg" alt="">
+
+          <div>
+            <h4>Daniel Clifford</h4>
+            <small>Verified Graduate</small>
+          </div>
+
+        </div>
+
+        <h2>
+          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.
+        </h2>
+
+        <p>
+          “ 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 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="cards gray">
+
+        <div class="image">
+          <img src="images/image-jonathan.jpg" alt="">
+
+          <div>
+            <h4>Jonathan Walters</h4>
+            <small>Verified Graduate</small>
+          </div>
+
+        </div>
+
+        <h2>
+          The team was very supportive and kept me motivated
+        </h2>
+
+        <p>
+          “ 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="cards white">
+
+        <div class="image">
+          <img src="images/image-jeanette.jpg" alt="">
+
+          <div>
+            <h4>Jeanette Harmon</h4>
+            <small>Verified Graduate</small>
+          </div>
+
+        </div>
+
+        <h2>
+          An overall wonderful and rewarding experience
+        </h2>
+
+        <p>
+          “ 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="cards black">
+
+        <div class="image">
+          <img src="images/image-patrick.jpg" alt="">
+
+          <div>
+            <h4>Patrick Abrams</h4>
+            <small>Verified Graduate</small>
+          </div>
+
+        </div>
+
+        <h2>
+          Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and
+          learning from their experiences was easy.
+        </h2>
+
+        <p>
+          “ 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="cards white vertical">
+
+        <div class="image">
+          <img src="images/image-kira.jpg" alt="">
+
+          <div>
+            <h4>Kira Whittle</h4>
+            <small>Verified Graduate</small>
+          </div>
+
+        </div>
+
+        <h2>
+          Such a life-changing experience. Highly recommended!
+        </h2>
+
+        <p>
+          “ 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>
+
+    </div>
+
+  </main>
+
+  <!-- <div class="attribution">
+    <p>
+      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://github.com/gauravgorane">Gaurav Gorane</a>.
+    </p>
+  </div> -->
+
+</body>
+
+</html>
diff --git a/Testimonials_grid_section/style.css b/Testimonials_grid_section/style.css
@@ -0,0 +1,147 @@
+@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,500;0,600;1,500;1,600&display=swap');
+
+:root {    
+    --Light_gray: hsl(0, 0%, 81%);
+    --Light_gray_70: hsl(0, 0%, 81%, 70%);
+    --Light_grayish_blue: hsl(210, 46%, 95%);
+    --Light_grayish_blue_50: hsl(210, 46%, 95%, 50%);
+    --Light_grayish_blue_70: hsl(210, 46%, 95%, 70%);
+
+    --Moderate_violet: hsl(263, 55%, 52%);
+    --Very_dark_grayish_blue: hsl(217, 19%, 35%);
+    --Very_dark_grayish_blue_50: hsl(217, 19%, 35%, 50%);
+    --Very_dark_grayish_blue_70: hsl(217, 19%, 35%, 70%);
+    --Very_dark_blackish_blue: hsl(219, 29%, 14%);
+    --White: hsl(0, 0%, 100%);
+
+    /* font-family: "Barlow Semi Condensed", sans-serif; */
+}
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+img{
+    max-width: 100%;
+    display: block;
+}
+
+body{
+    min-height: 100vh;
+    font-family: "Barlow Semi Condensed", sans-serif;
+    font-size: 13px;
+    background-color: var(--Light_grayish_blue);
+    display: grid;
+    place-content: center;
+
+}
+
+.container{
+    margin: 4.5rem 1.5rem;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.7rem;
+}
+
+.cards{
+    padding: 1.6rem 2rem;
+    border-radius: 8px;
+    box-shadow: 5px 5px 10px var(--Light_gray);
+}
+
+.cards .image{
+    display: flex;
+    align-items: center;
+}
+
+.cards .image img{
+    border-radius: 50%;
+    width: 2rem;
+    margin-right: 0.8rem;
+}
+
+.cards h4{
+    color: var(--Light_grayish_blue);
+}
+
+.cards small{
+    color: var(--Light_grayish_blue_50);
+}
+
+.cards h2{
+    font-size: 20.1px;
+    margin: 1rem 0;
+    color: var(--Light_gray);
+}
+
+.cards p{
+    line-height: 1.4;
+    color: var(--Light_gray_70);
+}
+
+.quote{
+    background-color: var(--Moderate_violet);
+    background-image: url(./images/bg-pattern-quotation.svg);
+    background-repeat: no-repeat;
+    background-position: top right 1.6rem;
+}
+
+.gray{
+    background-color: var(--Very_dark_grayish_blue);
+}
+
+.white{
+    background-color: var(--White);
+}
+
+.black{
+    background-color: var(--Very_dark_blackish_blue);
+}
+
+.white h4, 
+.white h2{
+    color: var(--Very_dark_grayish_blue);
+}
+
+.white small{
+    color: var(--Very_dark_grayish_blue_50);
+}
+
+.white p{
+    color: var(--Very_dark_grayish_blue_70);
+}
+
+.attribution {
+    font-size: 11px;
+    text-align: center;
+}
+
+.attribution a {
+    color: hsl(228, 45%, 44%);
+}
+
+@media screen and (min-width: 768px) {
+    .container{
+        max-width: 69rem;
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media screen and (min-width: 1280px) {
+    .container{
+        max-width: 69rem;
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .quote{
+        grid-column: 1/3;
+    }
+    .vertical{
+        grid-column: 4;
+        grid-row: 1/3;
+    }
+    .black{
+        grid-column: 2/4;
+    }
+}