current formating, needs some tweaking and tidying css and classnames

css/style.css

@@ -1,7 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
 
 /* 
-* Hi, thank you for checking out my CSS. Layout is currently Rev 1.
+* Hi, thank you for checking out my CSS. Layout is currently Rev 2.
 * Plan is to do more interesting ones as I feel more comfortable doing things.
 *
 * For instance was thinking of swapping to a 3 column affair, with the title running
@@ -11,8 +11,12 @@
 */
 
 :root {
-    font-size: 20px;
+    font-size: 1.25rem;
     --marginTop: 0.5rem;
+
+    --pinky-color: rgba(216, 81, 201, 0.632);
+    --lightcoral-color: lightcoral;
+    --projects-border-color: green;
 }
 
 * {
@@ -25,7 +29,9 @@ body {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ac2e2e' fill-opacity='0.24'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
-.header, .blurb, .projectsDiv {
+.header,
+.blurb,
+.projectsDiv {
     background-color: rgba(0, 0, 0, 0.1);
     border: 5px solid;
     margin: 0 auto;
@@ -35,39 +41,44 @@ body {
     border-radius: 10px;
 }
 
-.blurb, .projectsDiv {
+.blurb,
+.projectsDiv {
     padding: 10px 20px;
     margin-top: 2rem;
-    font-family: 'Source Sans Pro', sans-serif;
+    font-family: "Source Sans Pro", sans-serif;
 }
 
 .header {
     text-align: center;
     padding-top: 10px;
     padding-bottom: 10px;
-    border-color: lightcoral;
+    border-color: var(--lightcoral-color);
 }
 
 .header > h1 {
-    font-family: 'Black Ops One', cursive;
+    font-family: "Black Ops One", cursive;
     /* scale the font from size used on mobile to "desktop" */
     font-size: min(max(2.5rem, 8vw), 3rem);
 }
 
 .blurb {
-    border-color:  rgba(216, 81, 201, 0.632);
+    border-color: var(--pinky-color);
 }
 
 .projectsDiv {
     border-color: rgba(0, 0, 0, 0.7);
 }
 
-.frontEndMentorChallenges, .freecodeCampProjects, .completeWebDev2020Projects, .vanillaJSProjects {
+.frontEndMentorChallenges,
+.freecodeCampProjects,
+.completeWebDev2020Projects,
+.vanillaJSProjects {
     margin-top: var(--marginTop);
 }
 
-.projectsDiv h2 {
+.projectsSection__title {
-    font-weight: 400;
+    font-weight: 600;
+    font-size: 1.8rem;
 }
 
 /* .frontEndMentorChallenges {} */
@@ -76,8 +87,10 @@ body {
     margin-left: 1rem;
 }
 
-.newbieChallenges h3 {
+.newbieChallenges > h3,
+.responsiveProjects > h3 {
     font-weight: 600;
+    font-size: 1.3rem;
 }
 
 /* .freecodeCampProjects {} */
@@ -87,7 +100,7 @@ body {
 footer {
     margin-top: 3rem;
     text-align: center;
-    font-size: 16px;
+    font-size: 0.9rem;
     margin-left: auto;
     margin-right: auto;
     width: 85%;
@@ -101,6 +114,20 @@ footer > a {
     display: block;
 }
 
+.alignedHeader {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+/* .alignedHeader img {
+    width: 100%; 
+    height: 100%;
+
+} */
+
 .stacked {
     display: grid;
 }
@@ -112,23 +139,32 @@ footer > a {
 
 .card__content {
     z-index: 10;
-    background: white;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(100px);
+    -webkit-backdrop-filter: blur(100px);
     align-self: end;
-    margin: .5rem; /*.5rem 2rem;*/
+    margin: 0.5rem; /*.5rem 2rem;*/
-    padding: .5rem;
+    padding: 0.5rem;
 
-    box-shadow: 0 .25rem 1rem rgba(0 0 0 / 0.1);
+    box-shadow: 0 0.25rem 1rem rgba(0 0 0 / 0.1);
 }
 
 .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
-    gap: .25rem;
+    gap: 0.25rem;
+}
+
+.projectsDiv > * {
+    margin-bottom: 1rem;
 }
 
 .project-card {
-    /* border: 3px solid hotpink; */
+    border: 3px solid var(--projects-border-color);
+    border-radius: 5%;
     aspect-ratio: 1 / 1.5;
+    overflow: hidden;
+    /* display: inline-bloc; */
 }
 
 .card__img {
@@ -142,18 +178,26 @@ footer > a {
     display: flex;
     /* align-content: space-evenly; */
     justify-content: space-evenly;
+    align-items: center;
 
-    font-size: 0.625rem;
+    /* font-size: 0.625rem; */
 }
 
 /* .card__techUsed > li {
     margin: 0;
 } */
 
+.card__techUsed img {
+    width: 100%;
+    height: 100%;
+}
+
 .card__title {
-    font-size: .75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
     line-height: 1.1;
-    color: firebrick;
+    color: darkred;
+    text-align: center;
 }
 
 .card__description {
@@ -162,9 +206,8 @@ footer > a {
 }
 
 @media (min-width: 38em) {
-
     .card__img {
-        aspect-ratio: 1 / 1.;
+        aspect-ratio: 1 / 1;
     }
 
     .project-card.featured {

index.html

@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Practice Projects</title>
-    <link rel="stylesheet" href="./css/reset.css">
+    <link rel="stylesheet" href="./FrontendMentor/reset.css" />
-    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/style.css" />
 </head>
+
 <body>
     <header>
         <!-- some logo here -->
@@ -17,174 +19,327 @@
     </header>
     <main>
         <div class="blurb">
-            <p>These are completed projects done to practice using HTML, CSS & Javascript. They come from different services, and most are freely available for anyone to practice with.</p>
+            <p>
+                These are completed projects done to practice using HTML,
+                CSS & Javascript. They come from different services, and
+                most are freely available for anyone to practice with.
+            </p>
             &nbsp;
-            <p>I have put them all into a single GIT repository rather than litter my github page with many different projects. This may change in future depending on how many of these that I do.</p>
+            <p>
+                I have put them all into a single GIT repository rather than
+                litter my github page with many different projects. This may
+                change in future depending on how many of these that I do.
+            </p>
             &nbsp;
             <p>Robert McGovern</p>
         </div>
 
         <div class="projectsDiv">
-            <h2>Frontend Mentor</h2>
+            <div class="alignedHeader">
+                <h2 class="projectsSection__title">Frontend Mentor</h2>
+                <img src="./svgs/frontendmentor.svg" alt="Frontend Mentor" />
+            </div>
+            <p>Collection of challenges I completed for Frontend Mentor</p>
             <div class="newbieChallenges">
                 <h3>Newbie Challenges</h3>
 
                 <div class="projects-grid">
                     <div class="project-card stacked featured">
                         <a href="./FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/">
-                        <img class="card__img" src="./screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png" alt="The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section.">
+                            <img class="card__img"
+                                src="./screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png"
+                                alt="The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section." />
                         </a>
                         <div class="card__content">
-                        <h3 class="card__title">The Huddle Landing Page</h3>
+                            <h3 class="card__title">
-                        <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                                The Huddle Landing Page
+                            </h3>
+                            <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p>
                             <ul class="card__techUsed">
-                            <li>HTML</li>
+                                <li>
-                            <li>CSS</li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                            <li>JavaScript</li>
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/javascript.svg" alt="JavaScript" />
+                                </li>
                             </ul>
                         </div>
                     </div>
 
                     <div class="project-card stacked">
                         <a href="./FrontendMentor/newbie/ping-coming-soon-page-master/">
-                        <img class="card__img" src="./screenshots/fem-newbie-ping-coming-soon-page.jpeg" alt="Ping Coming-Soon Challenge from FrontendMentor">
+                            <img class="card__img" src="./screenshots/fem-newbie-ping-coming-soon-page.jpeg"
+                                alt="Ping Coming-Soon Challenge from FrontendMentor" />
                         </a>
                         <div class="card__content">
                             <h3 class="card__title">Ping Coming-Soon</h3>
-                        <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                            <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p>
                             <ul class="card__techUsed">
-                            <li>HTML</li>
+                                <li>
-                            <li>CSS</li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
-                            <li>JavaScript</li>
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/javascript.svg" alt="JavaScript" />
+                                </li>
                             </ul>
                         </div>
                     </div>
 
                     <div class="project-card stacked">
                         <a href="./FrontendMentor/newbie/single-price-grid-component-master/">
-                        <img class="card__img" src="./screenshots/fem-newbie-single-price-grid-component.jpeg" alt="Single Price Grid Component Challenge from FrontendMentor">
+                            <img class="card__img" src="./screenshots/fem-newbie-single-price-grid-component.jpeg"
+                                alt="Single Price Grid Component Challenge from FrontendMentor" />
                         </a>
                         <div class="card__content">
-                        <h3 class="card__title">Single Price Grid Component</h3>
+                            <h3 class="card__title">
-                        <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                                Single Price Grid Component
+                            </h3>
+                            <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p>
                             <ul class="card__techUsed">
-                            <li>HTML</li>
+                                <li>
-                            <li>CSS</li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
                             </ul>
                         </div>
                     </div>
 
                     <div class="project-card stacked">
                         <a href="./FrontendMentor/newbie/four-card-feature-section/">
-                        <img class="card__img" src="./screenshots/fem-newbie-four-card-feature-section.jpeg" alt="Four Card Feature Section Challenge from FrontendMentor">
+                            <img class="card__img" src="./screenshots/fem-newbie-four-card-feature-section.jpeg"
+                                alt="Four Card Feature Section Challenge from FrontendMentor" />
                         </a>
                         <div class="card__content">
-                        <h3 class="card__title">Four Card Feature Section</h3>
+                            <h3 class="card__title">
-                        <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                                Four Card Feature Section
+                            </h3>
+                            <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p>
                             <ul class="card__techUsed">
-                            <li>HTML</li>
+                                <li>
-                            <li>CSS</li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
                             </ul>
                         </div>
                     </div>
 
                     <div class="project-card stacked">
                         <a href="./FrontendMentor/newbie/article-preview-component/">
-                        <img class="card__img" src="./screenshots/fem-newbie-article-preview-component.jpeg" alt="Article Preview Component Challenge from FrontendMentor">
+                            <img class="card__img" src="./screenshots/fem-newbie-article-preview-component.jpeg"
+                                alt="Article Preview Component Challenge from FrontendMentor" />
                         </a>
                         <div class="card__content">
-                        <h3 class="card__title">Article Preview Component</h3>
+                            <h3 class="card__title">
-                        <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                                Article Preview Component
+                            </h3>
+                            <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p>
                             <ul class="card__techUsed">
-                            <li>HTML</li>
+                                <li>
-                            <li>CSS</li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
                             </ul>
                         </div>
                     </div>
 
                     <div class="project-card stacked">
                         <a href="./FrontendMentor/newbie/stats-preview-card-component/">
-                        <img class="card__img" src="./screenshots/fem-newbie-stats-preview-card-component.jpeg" alt="Stats Preview Card Component Challenge from FrontendMentor">
+                            <img class="card__img" src="./screenshots/fem-newbie-stats-preview-card-component.jpeg"
+                                alt="Stats Preview Card Component Challenge from FrontendMentor" />
                         </a>
                         <div class="card__content">
-                        <h3 class="card__title">Stats Preview Card Component</h3>
+                            <h3 class="card__title">
-                        <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                                Stats Preview Card Component
+                            </h3>
+                            <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p>
                             <ul class="card__techUsed">
-                            <li>HTML</li>
+                                <li>
-                            <li>CSS</li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
                             </ul>
                         </div>
                     </div>
 
                     <div class="project-card stacked">
                         <a href="./FrontendMentor/newbie/profile-card-component/">
-                        <img class="card__img" src="./screenshots/fem-newbie-profile-card-component.jpeg" alt="Profile Card Component Challenge from FrontendMentor">
+                            <img class="card__img" src="./screenshots/fem-newbie-profile-card-component.jpeg"
+                                alt="Profile Card Component Challenge from FrontendMentor" />
                         </a>
                         <div class="card__content">
-                        <h3 class="card__title">Profile Card Component</h3>
+                            <h3 class="card__title">
-                        <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                                Profile Card Component
+                            </h3>
+                            <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p>
                             <ul class="card__techUsed">
-                            <li>HTML</li>
+                                <li>
-                            <li>CSS</li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
                             </ul>
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>
 
         <div class="projectsDiv">
-            <div class="frontEndMentorChallenges">
+            <div class="alignedHeader">
-                <h2>Frontend Mentor Challenges</h2>
+                <h2 class="projectsSection__title">Freecodecamp</h2>
-                <div class="newbieChallenges">
+                <img src="./svgs/freecodecamp.svg" alt="Freecodecamp" />
-                    <h3>Newbie Challenges</h3>
-                    <ul>
-                        <li><a href="./FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/index.html">Huddle Landing Page with a Single Introductory Section</a></li>
-                        <li><a href="./FrontendMentor/newbie/ping-coming-soon-page-master/index.html">Ping Coming-Soon page</a></li>
-                        <li><a href="./FrontendMentor/newbie/single-price-grid-component-master/index.html">Single Price Grid Component page</a></li>
-                        <li><a href="./FrontendMentor/newbie/four-card-feature-section/index.html">Four Card Feature Section page</a></li>
-                        <li><a href="./FrontendMentor/newbie/article-preview-component/index.html">Article Preview Component</a></li>
-                        <li><a href="./FrontendMentor/newbie/stats-preview-card-component/index.html">Stats Preview Card Component</a></li>
-                        <li><a href="./FrontendMentor/newbie/profile-card-component/">Profile Card Component</a></li>
-                    </ul>    
             </div>
-            </div>
+            <div class="responsiveProjects">
-            <div class="freecodeCampProjects">
-                <h2>FreecodeCamp</h2>
-                <div class="responsiveWebDesignProjects">
                 <h3>Responsive Web Design Projects</h3>
-                    <p>Note: As of 11 Oct 2020, these require a partial rework to look good on mobile. 1-3 where written much earlier in my learning, so while they fufill all the requirements, they don't look great on mobile.</p>
+                <p>
-                    <ul>
+                    Note: As of 11 Oct 2020, these require a partial rework
-                        <li><a href="./freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">Project 1 - Tribute Page</a></li>
+                    to look good on mobile. 1-3 where written much earlier
-                        <li><a href="./freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">Project 2 - Build a Survey Form</a></li>
+                    in my learning, so while they fufill all the
-                        <li><a href="./freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/">Project 3 - Product Landing Page</a></li>
+                    requirements, they don't look great on mobile.
-                        <li><a href=""></a></li>
+                </p>
-                        <li><a href=""></a></li>
+                <div class="projects-grid">
+                    <div class="project-card stacked">
+                        <a href="../freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">
+                            <img class="card__img" src="./screenshots/fcc-web-Project1-TributePage.jpeg"
+                                alt="Project 1 - Tribute Page" />
+                        </a>
+                        <div class="card__content">
+                            <h3 class="card__title">
+                                Project 1 - Tribute Page
+                            </h3>
+                            <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p>
+                            <ul class="card__techUsed">
+                                <li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="project-card stacked">
+                        <a href="./freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">
+                            <img class="card__img" src="./screenshots/fcc-web-Project2-BuildaSurveyForm.jpeg"
+                                alt="Project 2 - Build A Survey Form" />
+                        </a>
+                        <div class="card__content">
+                            <h3 class="card__title">
+                                Project 2 - Build A Survey Form
+                            </h3>
+                            <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p>
+                            <ul class="card__techUsed">
+                                <li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="project-card stacked">
+                        <a href="./freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/">
+                            <img class="card__img" src="./screenshots/fcc-web-Project3-ProductLandingPage.jpeg"
+                                alt="Project 3 - Product Landing Page" />
+                        </a>
+                        <div class="card__content">
+                            <h3 class="card__title">
+                                Project 3 - Product Landing Page
+                            </h3>
+                            <p class="card__description">
+                                Lorem ipsum dolor sit amet consectetur
+                                adipisicing elit.
+                            </p>
+                            <ul class="card__techUsed">
+                                <li>
+                                    <img src="./svgs/html5.svg" alt="HTML5" />
+                                </li>
+                                <li>
+                                    <img src="./svgs/css3.svg" alt="CSS3" />
+                                </li>
                             </ul>
                         </div>
                     </div>
-            <div class="completeWebDev2020Projects">
-                <h2>Complete Web Development 2020</h2>
-                <p>coming soon</p>
                 </div>
-            <div class="vanillaJSProjects">
-                <h2>Vanilla JS Projects</h2>
-                <p>coming soon</p>
             </div>
-            <div class="playground">
-                <h2>Playground</h2>
-                <p>Intended for just little snippets of code that look useful</p>
-                <a href="./playground.html">The Playground</a>
         </div>
 
+        <div class="projectsDiv">
+
+            <div class="alignedHeader">
+                <h2 class="projectsSection__title">
+                    The Complete 2022 Web Development Bootcamp
+                </h2>
+                <img src="./svgs/udemy.svg" alt="The Complete 2022 Web Development Bootcamp Udemy Course" />
+            </div>
+            <p>coming soon</p>
+        </div>
+
+        <div class="projectsDiv">
+            <h2 class="projectsSection__title">Vanilla JS Projects</h2>
+            <p>coming soon</p>
+        </div>
+
+        <div class="projectsDiv">
+            <h2 class="projectsSection__title">Playground</h2>
+            <p>
+                Intended for just little snippets of code that look useful
+            </p>
+            <a href="./playground.html">The Playground</a>
         </div>
     </main>
     <footer>
         <!-- some blurb here -->
-        <p>All projects are the work of Robert McGovern, 2020-2022. <br>
+        <p>
-            <a href="emailto:work@tarasis.net">Email</a>, <a href="https://tarasis.net">Website/Blog</a></p>
+            All projects are the work of Robert McGovern, 2020-2022. <br />
-        <a href='http://www.heropatterns.com/'>Background SVG provided by Steve Schoger @ Hero Patterns</a>
+            <a href="emailto:work@tarasis.net">Email</a>,
+            <a href="https://tarasis.net">Website/Blog</a>
+        </p>
+        <a href="http://www.heropatterns.com/">Background SVG provided by Steve Schoger @ Hero Patterns</a>
     </footer>
 </body>
+
 </html>