<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Practice Projects</title>
    <link rel="stylesheet" href="./FrontendMentor/reset.css" />
    <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
    <header>
        <!-- some logo here -->
        <div class="header">
            <h1 class="test">Practice Projects</h1>
        </div>
        <!-- consider a menu for jumping down page -->
    </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>
            &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>
            &nbsp;
            <p>Robert McGovern</p>
        </div>

        <div class="projectsDiv">
            <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." />
                        </a>
                        <div class="card__content">
                            <h3 class="card__title">
                                The Huddle 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>
                                <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" />
                        </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>
                            <ul class="card__techUsed">
                                <li>
                                    <img src="./svgs/html5.svg" alt="HTML5" />
                                </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" />
                        </a>
                        <div class="card__content">
                            <h3 class="card__title">
                                Single Price Grid Component
                            </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="./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" />
                        </a>
                        <div class="card__content">
                            <h3 class="card__title">
                                Four Card Feature Section
                            </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="./FrontendMentor/newbie/article-preview-component/">
                            <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>
                            <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="./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" />
                        </a>
                        <div class="card__content">
                            <h3 class="card__title">
                                Stats Preview Card Component
                            </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="./FrontendMentor/newbie/profile-card-component/">
                            <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>
                            <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>
            </div>
        </div>

        <div class="projectsDiv">
            <div class="alignedHeader">
                <h2 class="projectsSection__title">Freecodecamp</h2>
                <img src="./svgs/freecodecamp.svg" alt="Freecodecamp" />
            </div>
            <div class="responsiveProjects">
                <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>
                <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>
            </div>
        </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 />
            <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>