tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into frontendmentor 

# Conflicts:
#	index.html
This commit is contained in:
Robert McGovern 2022-01-30 20:22:17 +00:00
parent cae394a79d 61fce00bd6
commit a818164942
26 changed files with 726 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
FrontendMentor/newbie/profile-card-component/css/style.css
View File

@ -8,20 +8,17 @@
} }
:root { :root {
--site-color: hsl(185, 75%, 39%);
--dark-cyan: hsl(185, 75%, 39%); --dark-cyan: hsl(185, 75%, 39%);
--dark-grayish-blue: hsl(227, 10%, 46%); --dark-grayish-blue: hsl(227, 10%, 46%);
--very-dark-desaturated-blue: hsl(229, 23%, 23%); --very-dark-desaturated-blue: hsl(229, 23%, 23%);
--dark-gray: hsl(0, 0%, 59%); --dark-gray: hsl(0, 0%, 59%);
--border-gray: hsla(228, 9%, 92%, 1); --border-gray: hsla(228, 9%, 92%, 1);
/* default font stuff */ /* default font stuff */
--page-base-font-size: 16px; /* for rem calculations*/ --page-base-font-size: 16px; /* for rem calculations*/
--default-font-size: 18px; --default-font-size: 18px;
--location-font-size: 14px; --location-font-size: 14px;
--label-font-size: 10px; --label-font-size: 10px;
} }
html { html {
@ -30,7 +27,7 @@ html {
} }
body { body {
background-color: var(--site-color); background-color: var(--dark-cyan);
font-size: var(--default-font-size); font-size: var(--default-font-size);
font-weight: 700; font-weight: 700;
font-family: 'Kumbh Sans', sans-serif; font-family: 'Kumbh Sans', sans-serif;
@ -66,18 +63,39 @@ body {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
background: url(../images/image-victor.jpg); background: url(../images/image-victor.jpg);
background-size: contain;
width: 96px; width: 96px;
height: 96px; height: 96px;
border: 5px solid #FFFFFF;
border-radius: 50%; border-radius: 50%;
/* left: calc(50% - 96px/2); */
top: calc(100% - 96px/2); top: calc(100% - 96px/2);
} }
.photo:after {
border-radius: 50%;
padding: 5px;
border: 5px solid white;
position: absolute;
content: '';
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
}
.nameAndAge { .nameAndAge {
margin-top: 4.5rem; margin-top: 4.5rem;
display: inline-flex; display: inline-flex;
padding-bottom: 0.25rem;
}
.name, .stat {
font-weight: bold;
}
.border {
border: 1px solid var(--border-gray);
margin-top: 1.5rem;
} }
.stats { .stats {
@ -98,19 +116,17 @@ body {
font-size: var(--location-font-size); font-size: var(--location-font-size);
margin-top: 0.5rem; margin-top: 0.5rem;
} padding-bottom: 0.25rem;
.border {
border: 1px solid var(--border-gray);
margin-top: 1.5rem;
} }
.label { .label {
font-weight: 400; font-weight: 400;
font-size: var(--label-font-size); font-size: var(--label-font-size);
color: var(--dark-grayish-blue); color: var(--dark-grayish-blue);
letter-spacing: 1.5px;
margin-top: 0.5625rem; margin-top: 0.5625rem;
padding-bottom: 0.1875rem;
} }
.topCircle, .bottomCircle { .topCircle, .bottomCircle {
@ -137,14 +153,14 @@ body {
left: 100%; left: 100%;
} }
.attribution { footer {
position: absolute; position: absolute;
bottom: 1rem;
}
.attribution {
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
bottom: 1rem; bottom: 1rem;
} }
.attribution a { color: hsl(228, 45%, 44%); } .attribution a { color: hsl(228, 45%, 44%); }
@media screen and (min-width: 1100px) {
}

76
FrontendMentor/newbie/profile-card-component/index.html
View File

@ -17,46 +17,50 @@
</style> --> </style> -->
</head> </head>
<body> <body>
<div class="page"> <main>
<div class="topCircle"></div> <div class="page">
<div class="card"> <div class="topCircle"></div>
<div class="details"> <div class="card">
<div class="cardHeader"> <div class="details">
<div class="photo"></div> <div class="cardHeader">
</div> <div class="photo"></div>
<div class="nameAndAge"> </div>
<div class="name"> <div class="nameAndAge">
Victor Crest <div class="name">
Victor Crest
</div>
<div class="age">
26
</div>
</div>
<div class="location">
London
</div> </div>
<div class="age">
26
</div>
</div> </div>
<div class="location"> <div class="border"></div>
London <div class="stats">
</div> <div class="followers">
</div> <div class="stat">80K</div>
<div class="border"></div> <div class="label">Followers</div>
<div class="stats"> </div>
<div class="followers"> <div class="likes">
<div class="stat">80K</div> <div class="stat">803K</div>
<div class="label">Followers</div> <div class="label">Likes</div>
</div> </div>
<div class="likes"> <div class="photos">
<div class="stat">803K</div> <div class="stat">1.4K</div>
<div class="label">Likes</div> <div class="label">Photos</div>
</div> </div>
<div class="photos">
<div class="stat">1.4K</div>
<div class="label">Photos</div>
</div> </div>
</div> </div>
<div class="bottomCircle"></div>
</div> </div>
<div class="bottomCircle"></div> </main>
</div> <footer>
<div class="attribution"> <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://www.frontendmentor.io/profile/tarasis">Robert McGovern</a>. Coded by <a href="https://www.frontendmentor.io/profile/tarasis">Robert McGovern</a>.
</div> </div>
</footer>
</body> </body>
</html> </html>

2
README.md
View File

@ -1,3 +1,3 @@
# tarasis.github.io # tarasis.github.io
Temporary store for various completed Web Development exercises A repo for completed Web Development exercises

0
playground.css → css/playground.css
View File

76
css/reset.css Normal file
View File

@ -0,0 +1,76 @@
/* Andy Bell CSS Modern Reset https://piccalil.li/blog/a-modern-css-reset/ */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

159
style.css → css/style.css
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,49 +29,56 @@ 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;
width: 90%; width: 90%;
max-width: 700px; max-width: 700px;
box-sizing: border-box; box-sizing: border-box;
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%;
@ -99,4 +112,118 @@ footer * {
footer > a { 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%;
/* margin-left: auto; */
}
.stacked {
display: grid;
}
.stacked > * {
grid-column: 1/2;
grid-row: 1/2;
}
.card__content {
z-index: 10;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(100px);
-webkit-backdrop-filter: blur(100px);
align-self: end;
margin: 0.5rem; /*.5rem 2rem;*/
padding: 0.5rem;
box-shadow: 0 0.25rem 1rem rgba(0 0 0 / 0.1);
border: gray 2px dashed;
border-radius: 5px;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
gap: 0.25rem;
margin-top: 0.5rem;
}
.projectsDiv > * {
margin-bottom: 1rem;
}
.project-card {
border: 3px solid var(--projects-border-color);
border-radius: 10px;
aspect-ratio: 1 / 1.4;
overflow: hidden;
}
.card__img {
width: 100%;
aspect-ratio: 1 / 1.25;
object-fit: cover;
}
.card__techUsed {
list-style: none;
display: flex;
/* align-content: space-evenly; */
justify-content: space-evenly;
align-items: center;
/* font-size: 0.625rem; */
}
/* .card__techUsed > li {
margin: 0;
} */
.card__techUsed img {
margin-top: 0.25rem;
width: 100%;
height: 100%;
}
.card__title {
font-size: 0.75rem;
font-weight: 600;
line-height: 1.1;
color: darkred;
text-align: center;
}
.card__description {
font-size: 0.625rem;
line-height: 1.2;
}
@media (min-width: 38em) {
.card__img {
aspect-ratio: 1 / 1;
}
.project-card.featured {
grid-row: span 2;
grid-column: span 2;
}
.project-card.featured .card__img {
aspect-ratio: 1 / 1.33;
}
.project-card.featured .card__title {
font-size: 1.25rem;
}
}

372
index.html
View File

@ -1,11 +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="style.css"> <link rel="stylesheet" href="./FrontendMentor/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
</head> </head>
<body> <body>
<header> <header>
<!-- some logo here --> <!-- some logo here -->
@ -16,63 +19,328 @@
</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="frontEndMentorChallenges">
<h2>Frontend Mentor Challenges</h2>
<div class="newbieChallenges">
<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>
<li><a href="./FrontendMentor/newbie/order-summary-component/">Order Summary Component</a></li>
</ul>
</div>
</div>
<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>
<ul>
<li><a href="./freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">Project 1 - Tribute Page</a></li>
<li><a href="./freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">Project 2 - Build a Survey Form</a></li>
<li><a href="./freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/">Project 3 - Product Landing Page</a></li>
<li><a href=""></a></li>
<li><a href=""></a></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">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> </div>
</main> </main>
<footer> <footer>
<!-- some blurb here --> <!-- some blurb here -->
<p>All projects are the work of Robert McGovern, 2020. <a href="emailto:work@tarasis.net">Email</a>, <a href="https://tarasis.net">Website/Blog</a></p> <p>
<a href='http://www.heropatterns.com/'>Background SVG provided by Steve Schoger @ Hero Patterns</a> 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> </footer>
<script src="./js/script.js"></script>
</body> </body>
</html>
</html>

3
js/script.js Normal file
View File

@ -0,0 +1,3 @@
// use strict
// An empty JS for the moment :) Shh

83
notes.md
View File

@ -1,66 +1,73 @@
# Notes # Notes
## Overview ## Overview
--- ---
Aim of this document is to make notes of various things as I encounter them. Consider it learning from working through specific challenges or other exercises. Probably should be in a note app, or a wiki, or something, but for now they are here. Aim of this document is to make notes of various things as I encounter them. Consider it learning from working through specific challenges or other exercises. Probably should be in a note app, or a wiki, or something, but for now they are here.
Think of it as a combination of learning, and tips and tricks. They will start unorganised, and then should be put into some semblance of order; where that is possible. Think of it as a combination of learning, and tips and tricks. They will start unorganised, and then should be put into some semblance of order; where that is possible.
Note took far to long, but site now using main for branch. Note took far to long, but site now using main for branch.
## The Notes Themselves (unorganised) ## The Notes Themselves (unorganised)
--- ---
* Now little difference between `<input type="submit">` and `<button>`. - Now little difference between `<input type="submit">` and `<button>`.
* It used to be the case that IE6 didn't properly support it, so your website would look broken.
* By default `<button>` implies `type="submit"`
* A `button` can have child elements, an `<input type="submit">` can't. (**verify**)
* When using `em` the increases are compound, so if you have a `p`, inside a `div`, inside `body`. The `body` font size is set in `px`. The `div` and `p` both set a font size using `em` to set a relative size, then that relative size would be - It used to be the case that IE6 didn't properly support it, so your website would look broken.
* in `div`: body font size * font size em - By default `<button>` implies `type="submit"`
* in `p`: div relative font size * p's font size in em - A `button` can have child elements, an `<input type="submit">` can't. (**verify**)
* ```css
body {
font-size: 20px;
}
div { - When using `em` the increases are compound, so if you have a `p`, inside a `div`, inside `body`. The `body` font size is set in `px`. The `div` and `p` both set a font size using `em` to set a relative size, then that relative size would be
font-size: 2em; /* font size is 40px */
}
p { - in `div`: body font size \* font size em
font-size: 2em; /* font size in this div is now 80px */ - in `p`: div relative font size \* p's font size in em
} - ```css
``` body {
font-size: 20px;
}
* Random aside: can't carry on a list after putting a codeblock inside a list div {
* Found useful site for Regex writing / testing https://regex101.com font-size: 2em; /* font size is 40px */
* this specific address has regex for email validation https://regex101.com/r/uP2oL7/1 }
* CSS - The "!important" rule should only be used as a last resort - nuclear option p {
* better to do elementName.className when wanting to temp add a class to override some css (like say a border color) font-size: 2em; /* font size in this div is now 80px */
}
```
* Blah ... its been a while. Oops. - Random aside: can't carry on a list after putting a codeblock inside a list
- Found useful site for Regex writing / testing https://regex101.com
- this specific address has regex for email validation https://regex101.com/r/uP2oL7/1
- CSS - The "!important" rule should only be used as a last resort - nuclear option
- better to do elementName.className when wanting to temp add a class to override some css (like say a border color)
- Blah ... its been a while. Oops.
## Articles ## Articles
* https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/ - https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/
* https://thoughtbot.com/blog/transitions-and-transforms - https://thoughtbot.com/blog/transitions-and-transforms
* https://www.sitepoint.com/hide-elements-in-css/ - https://www.sitepoint.com/hide-elements-in-css/
* https://www.markheath.net/post/font-awesome-circle-background - https://www.markheath.net/post/font-awesome-circle-background
* https://matthewjamestaylor.com/responsive-banner-ads - https://matthewjamestaylor.com/responsive-banner-ads
* https://uxengineer.com/padding-vs-margin/ - https://uxengineer.com/padding-vs-margin/
* http://specificity.keegan.st/ - http://specificity.keegan.st/
* https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ - https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
* https://css-tricks.com/how-do-you-do-max-font-size-in-css/ - https://css-tricks.com/how-do-you-do-max-font-size-in-css/
* https://css-tricks.com/simplified-fluid-typography/ - https://css-tricks.com/simplified-fluid-typography/
## Useful Links ## Useful Links
* http://www.heropatterns.com/ << Free repeatable background SVG's - http://www.heropatterns.com/ << Free repeatable background SVG's
- https://projects.verou.me/css3patterns/ << CSS3 Patterns Gallery
## API's to test with ## API's to test with
* https://api.chucknorris.io/jokes/random - https://api.chucknorris.io/jokes/random
* https://jsonplaceholder.typicode.com/ - https://jsonplaceholder.typicode.com/

62
playground.html
View File

@ -1,22 +1,80 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playground</title> <title>Playground</title>
<link rel="stylesheet" href="./playground.css"> <link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/playground.css">
</head> </head>
<body> <body>
<h1>Tricks</h1> <h1>Tricks</h1>
<h2>Gradient text with CSS</h2> <h2>Gradient text with CSS</h2>
This one comes from Kevin Powell, on a YouTube video short <a href="https://www.youtube.com/watch?v=IQT4aI_Iup4">"Gradient text with CSS | CSS Tip of the Day"</a>. It applies a colored gradient to text. This one comes from Kevin Powell, on a YouTube video short <a
href="https://www.youtube.com/watch?v=IQT4aI_Iup4">"Gradient text with CSS | CSS Tip of the Day"</a>. It applies
a colored gradient to text.
Note that the -webkit- is needed to make this trick work in Safari. Note that the -webkit- is needed to make this trick work in Safari.
<h1 class="gradient-text">Thingy Text thats with a gradient</h1> <h1 class="gradient-text">Thingy Text thats with a gradient</h1>
<h2>Tip for screen sized approriate images</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-480.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-960.jpg 2x,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1440.jpg 3x,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1920.jpg 4x" alt="shiny black dog looking pensive"
width="480" height="360">
<pre>
&ltimg src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-480.jpg"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-960.jpg 2x,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1440.jpg 3x,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog-1920.jpg 4x"
alt="shiny black dog looking pensive"
width="480" height="360"&gt
</pre>
Better though is
<picture>
<source media="(min-width:600px)" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-320.jpg 320w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg 480w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-720.jpg 720w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-960.jpg 960w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1440.jpg 1440w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1920.jpg 1920w">
<source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-320.jpg 320w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-480.jpg 480w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-720.jpg 720w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-960.jpg 960w">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg" alt="smiling black dog"
height="360px" width="480px">
</picture>
<pre>
&ltpicture&gt
&ltsource media="(min-width:600px)"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-320.jpg 320w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg 480w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-720.jpg 720w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-960.jpg 960w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1440.jpg 1440w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-1920.jpg 1920w" &gt
&ltsource srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-320.jpg 320w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-480.jpg 480w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-720.jpg 720w,
https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-cropped-960.jpg 960w" &gt
&ltimg src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/dog2-480.jpg"
alt="smiling black dog"
height="360px" width="480px"&gt
&lt/picture&gt
</pre>
<h2>???</h2> <h2>???</h2>
</body> </body>
</html> </html>

BIN
screenshots/fcc-web-Project1-TributePage.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 414 KiB

BIN
screenshots/fcc-web-Project2-BuildaSurveyForm.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 143 KiB

BIN
screenshots/fcc-web-Project3-ProductLandingPage.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 KiB

BIN
screenshots/fem-newbie-article-preview-component.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
screenshots/fem-newbie-four-card-feature-section.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 317 KiB

BIN
screenshots/fem-newbie-ping-coming-soon-page.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
screenshots/fem-newbie-profile-card-component.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
screenshots/fem-newbie-single-price-grid-component.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
screenshots/fem-newbie-stats-preview-card-component.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

1
svgs/css3.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" height="28" role="img" aria-label="CSS3"><title>CSS3</title><g shape-rendering="crispEdges"><rect width="77" height="28" fill="#1572b6"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="100"><image x="9" y="7" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+Q1NTMzwvdGl0bGU+PHBhdGggZD0iTTEuNSAwaDIxbC0xLjkxIDIxLjU2M0wxMS45NzcgMjRsLTguNTY1LTIuNDM4TDEuNSAwem0xNy4wOSA0LjQxM0w1LjQxIDQuNDFsLjIxMyAyLjYyMiAxMC4xMjUuMDAyLS4yNTUgMi43MTZoLTYuNjRsLjI0IDIuNTczaDYuMTgybC0uMzY2IDMuNTIzLTIuOTEuODA0LTIuOTU2LS44MS0uMTg4LTIuMTFoLTIuNjFsLjI5IDMuODU1TDEyIDE5LjI4OGw1LjM3My0xLjUzTDE4LjU5IDQuNDE0eiIvPjwvc3ZnPg=="/><text transform="scale(.1)" x="485" y="175" textLength="330" fill="#fff" font-weight="bold">CSS3</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
svgs/freecodecamp.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="149" height="28" role="img" aria-label="FREECODECAMP"><title>FREECODECAMP</title><g shape-rendering="crispEdges"><rect width="149" height="28" fill="#0a0a23"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="100"><image x="9" y="7" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+ZnJlZUNvZGVDYW1wPC90aXRsZT48cGF0aCBkPSJNMTkuODg1IDMuOTA2YS42MjEuNjIxIDAgMDAtLjM1NC4xMmMtLjA4LjA4LS4xNjEuMTk2LS4xNjEuMzEzIDAgLjIuMjM2LjQ3NC42NzMuOTIzIDEuODIyIDEuNzU0IDIuNzM4IDMuOTAzIDIuNzMyIDYuNDk0LS4wMDcgMi44NjctLjk3IDUuMTctMi44NDQgNi45NTQtLjM5NC4zNTMtLjU1Ni42My0uNTU3Ljg2NyAwIC4xMTYuMDguMjM3LjE2LjM1My4wNzYuMDguMjM3LjE2Mi4zNTMuMTYyLjQzNCAwIDEuMDQtLjUxMiAxLjgzMy0xLjUwOSAxLjU0Mi0xLjg5IDIuMjQtMy45NzggMi4yNzktNi44MjQuMDM2LTIuODQ3LS44NTctNC43NzctMi42MDMtNi43Ny0uNjMtLjcxMi0xLjE1My0xLjA4Mi0xLjUxMS0xLjA4M3ptLTE1Ljc2OS4wMDJjLS4zNTggMC0uODgyLjM3LTEuNTEgMS4wODNDLjg1OCA2Ljk4NC0uMDM1IDguOTE0LjAwMSAxMS43NjFjLjA0IDIuODQ2LjczNyA0LjkzMyAyLjI4IDYuODI0Ljc5MS45OTcgMS4zOTggMS41MSAxLjgzMiAxLjUwOWEuNTczLjU3MyAwIDAwLjM1Mi0uMTYyYy4wOC0uMTE2LjE2LS4yMzcuMTYtLjM1MyAwLS4yMzctLjE2Mi0uNTE0LS41NTYtLjg2Ni0xLjg3My0xLjc4NS0yLjgzNy00LjA4Ny0yLjg0NC02Ljk1NS0uMDA2LTIuNTkxLjkxLTQuNzQgMi43MzItNi40OTQuNDM3LS40NDkuNjc0LS43MjIuNjczLS45MjMgMC0uMTE3LS4wOC0uMjMzLS4xNjEtLjMxM2EuNjIxLjYyMSAwIDAwLS4zNTQtLjEyem03LjA1Ni44OTVzLjY1NSAyLjA4MS0yLjY0OSA2LjcyN2MtMy4xNTYgNC40MzMgMS4wNDUgNy4xNSAxLjQzMiA3LjM4Ni0uMjgxLS4xOC0yLjAwMS0xLjUuNDAyLTUuNDIzLjQ2Ni0uNzcgMS4wNzYtMS40NyAxLjgzNC0zLjA0MSAwIDAgLjY3Ljk0Ni4zMiAyLjk5OC0uNTIzIDMuMTAxIDIuMjcxIDIuMjE0IDIuMzE0IDIuMjU3Ljk3NiAxLjE1LS44MDggMy4xNy0uOTE3IDMuMjMzLS4xMDguMDYxIDUuMDk2LTMuMTMgMS4zOTktNy45MzUtLjI1My4yNTMtLjU4MiAxLjQ0Mi0xLjI2NyAxLjI2Ni0uNjg0LS4xNzQgMi4xMjUtMy40OTQtMi44NjgtNy40Njh6TTkuOTU1IDE4LjkxNmMuMDIzLjAxNi4wMzguMDI0LjAzOC4wMjRsLS4wMzgtLjAyNHoiLz48L3N2Zz4="/><text transform="scale(.1)" x="845" y="175" textLength="1050" fill="#fff" font-weight="bold">FREECODECAMP</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

1
svgs/frontendmentor.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="175.75" height="28" role="img" aria-label="FRONTEND MENTOR"><title>FRONTEND MENTOR</title><g shape-rendering="crispEdges"><rect width="175.75" height="28" fill="#3f54a3"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="100"><image x="9" y="7" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+RnJvbnRlbmQgTWVudG9yPC90aXRsZT48cGF0aCBkPSJNMTIuMTcwNiAxLjI3MTlhLjczMi43MzIgMCAwMC0uNzE4Ni43MzJ2MTMuOTE0YS43MzIuNzMyIDAgMDAuNzMyLjczMi43MzIuNzMyIDAgMDAuNzMxOC0uNzMyVjIuMDA0YS43MzIuNzMyIDAgMDAtLjc0NTItLjczMnptMTEuMDc0MSA0LjE2ODVhLjczMzkuNzMzOSAwIDAwLS4yNzY0LjA2M0wxNi42ODYgOC4zMDdhLjczMjkuNzMyOSAwIDAwMCAxLjMzNjFsNi4yODIzIDIuODEzNGEuNzM3OC43Mzc4IDAgMDAuMjk5My4wNjQ4LjczMi43MzIgMCAwMC4yOTczLTEuNDAxbC00Ljc4Ni0yLjE0NDMgNC43ODYtMi4xMzY2YS43MzM5LjczMzkgMCAwMC4zNjk4LS45NjY0LjczMzkuNzMzOSAwIDAwLS42OS0uNDMyN3ptLTIyLjQ5OSA1LjAzMmEuNzMxNi43MzE2IDAgMDAtLjcyMjMuOTE0OWMxLjczNiA2LjY3NyA3Ljc3NDggMTEuMzQxIDE0LjY4MjIgMTEuMzQxYS43MzIuNzMyIDAgMDAwLTEuNDY0IDEzLjcwNTUgMTMuNzA1NSAwIDAxLTEzLjI2Ni0xMC4yNDQ5LjczMTYuNzMxNiAwIDAwLS42OTM5LS41NDd6Ii8+PC9zdmc+"/><text transform="scale(.1)" x="978.75" y="175" textLength="1317.5" fill="#fff" font-weight="bold">FRONTEND MENTOR</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
svgs/html5.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88.25" height="28" role="img" aria-label="HTML5"><title>HTML5</title><g shape-rendering="crispEdges"><rect width="88.25" height="28" fill="#e34f26"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="100"><image x="9" y="7" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+SFRNTDU8L3RpdGxlPjxwYXRoIGQ9Ik0xLjUgMGgyMWwtMS45MSAyMS41NjNMMTEuOTc3IDI0bC04LjU2NC0yLjQzOEwxLjUgMHptNy4wMzEgOS43NWwtLjIzMi0yLjcxOCAxMC4wNTkuMDAzLjIzLTIuNjIyTDUuNDEyIDQuNDFsLjY5OCA4LjAxaDkuMTI2bC0uMzI2IDMuNDI2LTIuOTEuODA0LTIuOTU1LS44MS0uMTg4LTIuMTFINi4yNDhsLjMzIDQuMTcxTDEyIDE5LjM1MWw1LjM3OS0xLjQ0My43NDQtOC4xNTdIOC41MzF6Ii8+PC9zdmc+"/><text transform="scale(.1)" x="541.25" y="175" textLength="442.5" fill="#fff" font-weight="bold">HTML5</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
svgs/javascript.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="126.5" height="28" role="img" aria-label="JAVASCRIPT"><title>JAVASCRIPT</title><g shape-rendering="crispEdges"><rect width="126.5" height="28" fill="#222222"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="100"><image x="9" y="7" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZjdkZjFlIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+SmF2YVNjcmlwdDwvdGl0bGU+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6bTIyLjAzNCAxOC4yNzZjLS4xNzUtMS4wOTUtLjg4OC0yLjAxNS0zLjAwMy0yLjg3My0uNzM2LS4zNDUtMS41NTQtLjU4NS0xLjc5Ny0xLjE0LS4wOTEtLjMzLS4xMDUtLjUxLS4wNDYtLjcwNS4xNS0uNjQ2LjkxNS0uODQgMS41MTUtLjY2LjM5LjEyLjc1LjQyLjk3Ni45IDEuMDM0LS42NzYgMS4wMzQtLjY3NiAxLjc1NS0xLjEyNS0uMjctLjQyLS40MDQtLjYwMS0uNTg2LS43OC0uNjMtLjcwNS0xLjQ2OS0xLjA2NS0yLjgzNC0xLjAzNGwtLjcwNS4wODljLS42NzYuMTY1LTEuMzIuNTI1LTEuNzEgMS4wMDUtMS4xNCAxLjI5MS0uODExIDMuNTQxLjU2OSA0LjQ3MSAxLjM2NSAxLjAyIDMuMzYxIDEuMjQ0IDMuNjE2IDIuMjA1LjI0IDEuMTctLjg3IDEuNTQ1LTEuOTY2IDEuNDEtLjgxMS0uMTgtMS4yNi0uNTg2LTEuNzU1LTEuMzM2bC0xLjgzIDEuMDUxYy4yMS40OC40NS42ODkuODEgMS4xMDkgMS43NCAxLjc1NiA2LjA5IDEuNjY2IDYuODcxLTEuMDA0LjAyOS0uMDkuMjQtLjcwNS4wNzQtMS42NWwuMDQ2LjA2N3ptLTguOTgzLTcuMjQ1aC0yLjI0OGMwIDEuOTM4LS4wMDkgMy44NjQtLjAwOSA1LjgwNSAwIDEuMjMyLjA2MyAyLjM2My0uMTM4IDIuNzExLS4zMy42ODktMS4xOC42MDEtMS41NjYuNDgtLjM5Ni0uMTk2LS41OTctLjQ2Ni0uODMtLjg1NS0uMDYzLS4xMDUtLjExLS4xOTYtLjEyNy0uMTk2bC0xLjgyNSAxLjEyNWMuMzA1LjYzLjc1IDEuMTcyIDEuMzI0IDEuNTE3Ljg1NS41MSAyLjAwNC42NzUgMy4yMDcuNDA1Ljc4My0uMjI2IDEuNDU4LS42OTEgMS44MTEtMS40MTEuNTEtLjkzLjQwMi0yLjA3LjM5Ny0zLjM0Ni4wMTItMi4wNTQgMC00LjEwOSAwLTYuMTc5bC4wMDQtLjA1NnoiLz48L3N2Zz4="/><text transform="scale(.1)" x="732.5" y="175" textLength="825" fill="#fff" font-weight="bold">JAVASCRIPT</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

1
svgs/udemy.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90.25" height="28" role="img" aria-label="UDEMY"><title>UDEMY</title><g shape-rendering="crispEdges"><rect width="90.25" height="28" fill="#a435f0"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="100"><image x="9" y="7" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+VWRlbXk8L3RpdGxlPjxwYXRoIGQ9Ik0xMiAwTDUuODEgMy41NzN2My41NzRsNi4xODktMy41NzQgNi4xOTEgMy41NzRWMy41NzN6TTUuODEgMTAuMTQ4djguMTQ0YzAgMS44NS41ODkgMy4yNDMgMS43NDEgNC4yMzRTMTAuMTc3IDI0IDExLjk3MyAyNHMzLjI2OS0uNDgyIDQuNDQ4LTEuNDc0YzEuMTc5LS45OTEgMS43NjgtMi40MzkgMS43NjgtNC4zMTR2LTguMDY0aC0zLjI0MnY3Ljg1YzAgMi4wMzYtMS41MDkgMy4wNTUtMi45NDggMy4wNTUtMS40MjggMC0yLjk0Ny0uOTkxLTIuOTQ3LTMuMDI3di03Ljg3OHoiLz48L3N2Zz4="/><text transform="scale(.1)" x="551.25" y="175" textLength="462.5" fill="#fff" font-weight="bold">UDEMY</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB