current formating, needs some tweaking and tidying css and classnames

This commit is contained in:
Robert McGovern 2022-01-03 16:14:31 +00:00
parent ba72dc3f73
commit c5b5bb6868
2 changed files with 386 additions and 188 deletions

View File

@ -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. * 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 * For instance was thinking of swapping to a 3 column affair, with the title running
@ -11,8 +11,12 @@
*/ */
:root { :root {
font-size: 20px; font-size: 1.25rem;
--marginTop: 0.5rem; --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"); 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); background-color: rgba(0, 0, 0, 0.1);
border: 5px solid; border: 5px solid;
margin: 0 auto; margin: 0 auto;
@ -35,39 +41,44 @@ body {
border-radius: 10px; border-radius: 10px;
} }
.blurb, .projectsDiv { .blurb,
.projectsDiv {
padding: 10px 20px; padding: 10px 20px;
margin-top: 2rem; margin-top: 2rem;
font-family: 'Source Sans Pro', sans-serif; font-family: "Source Sans Pro", sans-serif;
} }
.header { .header {
text-align: center; text-align: center;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
border-color: lightcoral; border-color: var(--lightcoral-color);
} }
.header > h1 { .header > h1 {
font-family: 'Black Ops One', cursive; font-family: "Black Ops One", cursive;
/* scale the font from size used on mobile to "desktop" */ /* scale the font from size used on mobile to "desktop" */
font-size: min(max(2.5rem, 8vw), 3rem); font-size: min(max(2.5rem, 8vw), 3rem);
} }
.blurb { .blurb {
border-color: rgba(216, 81, 201, 0.632); border-color: var(--pinky-color);
} }
.projectsDiv { .projectsDiv {
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
} }
.frontEndMentorChallenges, .freecodeCampProjects, .completeWebDev2020Projects, .vanillaJSProjects { .frontEndMentorChallenges,
.freecodeCampProjects,
.completeWebDev2020Projects,
.vanillaJSProjects {
margin-top: var(--marginTop); margin-top: var(--marginTop);
} }
.projectsDiv h2 { .projectsSection__title {
font-weight: 400; font-weight: 600;
font-size: 1.8rem;
} }
/* .frontEndMentorChallenges {} */ /* .frontEndMentorChallenges {} */
@ -76,8 +87,10 @@ body {
margin-left: 1rem; margin-left: 1rem;
} }
.newbieChallenges h3 { .newbieChallenges > h3,
.responsiveProjects > h3 {
font-weight: 600; font-weight: 600;
font-size: 1.3rem;
} }
/* .freecodeCampProjects {} */ /* .freecodeCampProjects {} */
@ -87,7 +100,7 @@ body {
footer { footer {
margin-top: 3rem; margin-top: 3rem;
text-align: center; text-align: center;
font-size: 16px; font-size: 0.9rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 85%; width: 85%;
@ -101,6 +114,20 @@ footer > a {
display: block; 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 { .stacked {
display: grid; display: grid;
} }
@ -112,23 +139,32 @@ footer > a {
.card__content { .card__content {
z-index: 10; z-index: 10;
background: white; background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(100px);
-webkit-backdrop-filter: blur(100px);
align-self: end; 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 { .projects-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
gap: .25rem; gap: 0.25rem;
}
.projectsDiv > * {
margin-bottom: 1rem;
} }
.project-card { .project-card {
/* border: 3px solid hotpink; */ border: 3px solid var(--projects-border-color);
border-radius: 5%;
aspect-ratio: 1 / 1.5; aspect-ratio: 1 / 1.5;
overflow: hidden;
/* display: inline-bloc; */
} }
.card__img { .card__img {
@ -142,18 +178,26 @@ footer > a {
display: flex; display: flex;
/* align-content: space-evenly; */ /* align-content: space-evenly; */
justify-content: space-evenly; justify-content: space-evenly;
align-items: center;
font-size: 0.625rem; /* font-size: 0.625rem; */
} }
/* .card__techUsed > li { /* .card__techUsed > li {
margin: 0; margin: 0;
} */ } */
.card__techUsed img {
width: 100%;
height: 100%;
}
.card__title { .card__title {
font-size: .75rem; font-size: 0.75rem;
font-weight: 600;
line-height: 1.1; line-height: 1.1;
color: firebrick; color: darkred;
text-align: center;
} }
.card__description { .card__description {
@ -162,9 +206,8 @@ footer > a {
} }
@media (min-width: 38em) { @media (min-width: 38em) {
.card__img { .card__img {
aspect-ratio: 1 / 1.; aspect-ratio: 1 / 1;
} }
.project-card.featured { .project-card.featured {

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <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> <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> </head>
<body> <body>
<header> <header>
<!-- some logo here --> <!-- some logo here -->
@ -17,174 +19,327 @@
</header> </header>
<main> <main>
<div class="blurb"> <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; &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; &nbsp;
<p>Robert McGovern</p> <p>Robert McGovern</p>
</div> </div>
<div class="projectsDiv"> <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"> <div class="newbieChallenges">
<h3>Newbie Challenges</h3> <h3>Newbie Challenges</h3>
<div class="projects-grid"> <div class="projects-grid">
<div class="project-card stacked featured"> <div class="project-card stacked featured">
<a href="./FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/"> <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> </a>
<div class="card__content"> <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"> <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> </ul>
</div> </div>
</div> </div>
<div class="project-card stacked"> <div class="project-card stacked">
<a href="./FrontendMentor/newbie/ping-coming-soon-page-master/"> <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> </a>
<div class="card__content"> <div class="card__content">
<h3 class="card__title">Ping Coming-Soon</h3> <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"> <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> </ul>
</div> </div>
</div> </div>
<div class="project-card stacked"> <div class="project-card stacked">
<a href="./FrontendMentor/newbie/single-price-grid-component-master/"> <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> </a>
<div class="card__content"> <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"> <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> </ul>
</div> </div>
</div> </div>
<div class="project-card stacked"> <div class="project-card stacked">
<a href="./FrontendMentor/newbie/four-card-feature-section/"> <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> </a>
<div class="card__content"> <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"> <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> </ul>
</div> </div>
</div> </div>
<div class="project-card stacked"> <div class="project-card stacked">
<a href="./FrontendMentor/newbie/article-preview-component/"> <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> </a>
<div class="card__content"> <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"> <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> </ul>
</div> </div>
</div> </div>
<div class="project-card stacked"> <div class="project-card stacked">
<a href="./FrontendMentor/newbie/stats-preview-card-component/"> <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> </a>
<div class="card__content"> <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"> <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> </ul>
</div> </div>
</div> </div>
<div class="project-card stacked"> <div class="project-card stacked">
<a href="./FrontendMentor/newbie/profile-card-component/"> <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> </a>
<div class="card__content"> <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"> <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> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="projectsDiv"> <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> <div class="responsiveProjects">
<div class="freecodeCampProjects">
<h2>FreecodeCamp</h2>
<div class="responsiveWebDesignProjects">
<h3>Responsive Web Design Projects</h3> <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> </ul>
</div> </div>
</div> </div>
<div class="completeWebDev2020Projects">
<h2>Complete Web Development 2020</h2>
<p>coming soon</p>
</div> </div>
<div class="vanillaJSProjects">
<h2>Vanilla JS Projects</h2>
<p>coming soon</p>
</div> </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>
<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> </div>
</main> </main>
<footer> <footer>
<!-- some blurb here --> <!-- 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> </footer>
</body> </body>
</html> </html>