desktop-version

data.json

@@ -5,35 +5,45 @@
             "rol": "Verified Graduate",
             "studentImage" : "./images/image-daniel.jpg",
             "resume":"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.",
-            "testimonial": "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." 
+            "testimonial": "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." ,
+            "color": "hsl(263, 55%, 52%)",
+            "colorFont" : "hsl(0, 0%, 100%)"
         },
         {
             "studentName" : "Jonathan Walters",
             "rol": "Verified Graduate",
             "studentImage" : "./images/image-jonathan.jpg",
             "resume":"The team was very supportive and kept me motivated",
-            "testimonial": "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. " 
+            "testimonial": "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. " ,
+            "color": "hsl(217, 19%, 35%)",
+            "colorFont" : "hsl(0, 0%, 100%)"
         },
         {
             "studentName" : "Jeanette Harmon",
             "rol": "Verified Graduate",
             "studentImage" : "./images/image-jeanette.jpg",
             "resume":"An overall wonderful and rewarding experience",
-            "testimonial": "Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love." 
+            "testimonial": "Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love." ,
+            "color": "hsl(0, 0%, 100%)",
+            "colorFont" : "black"
         },
         {
             "studentName" : "Patrick Abrams",
             "rol": "Verified Graduate",
-            "studentImage" : "./images/image-Patrick.jpg",
+            "studentImage" : "./images/image-patrick.jpg",
             "resume":"Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy.",
-            "testimonial": "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." 
+            "testimonial": "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.",
+            "color" : "hsl(219, 29%, 14%)",
+            "colorFont" : "hsl(0, 0%, 100%)"
         },
         {
             "studentName" : "Kira Whittle",
             "rol": "Verified Graduate",
             "studentImage" : "./images/image-Kira.jpg",
             "resume":"Such a life-changing experience. Highly recommended!",
-            "testimonial": "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!" 
+            "testimonial": "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!",
+            "color": "hsl(0, 0%, 100%)" ,
+            "colorFont" : "black"
         }
     ]
 }

index.js

@@ -10,21 +10,40 @@ getElements(data => {
     data.forEach(element => {
         let section = document.createElement("section");
         section.classList.add("testimonial-container");
-        let div = document.createElement("div");
-        div.classList.add("student-info")
-        let h1 = document.createElement("h1");
-        h1.textContent = element.studentName;
-        let p = document.createElement("p");
-        p.textContent = element.rol;
-        div.appendChild(h1);
-        div.appendChild(p);
+        section.classList.add(element.studentName.toLowerCase().replace(/ /g, '-'))
+
+        let divInfo = document.createElement("div");
+        divInfo.classList.add("student-info")
+        let divText = document.createElement("div");
+        divText.classList.add("text");
+        divInfo.appendChild(divText);
+
+        let imageStudent = document.createElement("img");
+        imageStudent.src = element.studentImage;
+        let h1Name = document.createElement("h1");
+        h1Name.textContent = element.studentName;
+        let pRol = document.createElement("p");
+        pRol.textContent = element.rol;
+        divInfo.appendChild(imageStudent);
+        divText.appendChild(h1Name);
+        divText.appendChild(pRol);
+
+        let pResume = document.createElement("p");
         let bResume = document.createElement("b");
         bResume.textContent = element.resume;
-        let qTestimonial = document.createElement("b");
+        pResume.appendChild(bResume)
+
+        let pTestimonial = document.createElement("p");
+        let qTestimonial = document.createElement("q");
         qTestimonial.textContent = element.testimonial;
-        section.appendChild(div)
+        pTestimonial.appendChild(qTestimonial);
+
+        section.appendChild(divInfo)
         section.appendChild(bResume);
         section.appendChild(qTestimonial);
+
+        section.style.backgroundColor = element.color;
+        section.style.color = element.colorFont;
         main.appendChild(section);
     });
 }) 

style.css

@@ -0,0 +1,75 @@
+@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+:root{
+    --Moderateviolet: hsl(263, 55%, 52%);
+    --VerydarkGrayishblue: hsl(217, 19%, 35%);
+    --VerydarkBlackishblue: hsl(219, 29%, 14%);
+    --White: hsl(0, 0%, 100%);
+    --BackgroundBody: hsl(213, 44%, 95%);
+}
+*{
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "Barlow Semi Condensed";
+}
+
+
+.student-info, .testimonial-container{
+    display: flex;
+}
+
+body{
+    justify-content: center;
+    align-items: center;
+    background-color: var(--BackgroundBody);
+    height: 100dvh;
+    padding: 2em;
+}
+
+main{
+    display: grid;
+    /* grid-template-columns: repeat(fill-content, minmax(10em, 1fr)); */
+    /* width: 80%; */
+    /* align-items: center; */
+    grid-template-columns: repeat(4, 1fr);
+    /* grid-auto-rows: minmax(12em, auto); */
+    grid-auto-flow: dense;
+    grid-gap: 20px
+}
+
+
+.testimonial-container{
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 1.3rem;
+    border-radius: 8px;
+    .student-info{
+        flex-direction: row-reverse;
+        justify-content: start;
+        align-items: center;
+        .text{
+            padding-left: 10px;
+        }
+    }
+    h1{
+        font-size: 18px;
+    }
+    p{
+        font-size: 14px;
+    }
+    img{
+        border-radius: 50% ;
+    }
+}
+.daniel-clifford{
+    grid-column: auto / span 2;
+}
+.kira-whittle{
+    grid-row: auto / span 2;
+}
+.jeanette-harmon{
+    grid-column: 1 /span 1;
+}
+.patrick-abrams{
+    grid-column: auto /span 2;
+}
+