From 7310427c8eb14e882554ea054b89f34aaed50b4b Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Thu, 24 Sep 2020 00:36:00 +0100 Subject: [PATCH] First pass at a styled front page. Have some ideas of things to do, which are mentioned in the CSS file :) --- index.html | 49 +++++++++++++++++++------- style.css | 101 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 136 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 8530d3a..0f3f540 100644 --- a/index.html +++ b/index.html @@ -9,27 +9,50 @@
-

Practice Projects

+
+

Practice Projects

+
+
-

These are projects completed to practice using HTML, CSS and Javascript. They come from different services, and most are freely available for anyone to practice with.

+

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.

+  

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.

+   +

Robert McGovern

+
+
+
+

Frontend Mentor Challenges

+
+

Newbie Challenges

+ +
+
+
+

FreecodeCamp

+

coming soon

+
+
+

Complete Web Development 2020

+

coming soon

+
+
+

Vanilla JS Projects

+

coming soon

+
-
\ No newline at end of file diff --git a/style.css b/style.css index a8d9bd7..efabb16 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,102 @@ +@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. +* Plan is to do more interesting ones as I feel more comfortable doing things. +* +* For instance was thinking of swapping to a 3 column afair, with the title running +* vertically in the first column. Second column is the projects, third the blurb +* +* I'd like to add some animations and transitions, and a light and dark theme. +*/ + +:root { + font-size: 20px; + --marginTop: 0.5rem; +} + +* { + margin: 0; +} + body { - background-color: whitesmoke; + /* background-color: whitesmoke; */ + background-color: #f2f2f2; + 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 { + background-color: rgba(0, 0, 0, 0.1); + border: 5px solid; + margin: 0 auto; + width: 50%; + box-sizing: border-box; + border-radius: 10px; +} + +.blurb, .projectsDiv { + padding: 10px 20px; +} + +.header { + text-align: center; + padding-top: 10px; + padding-bottom: 10px; + border-color: lightcoral; +} + +.header > h1 { + font-family: 'Black Ops One', cursive; + font-size: 3rem; +} + +.blurb { + margin-top: 2rem; + border-color: rgba(216, 81, 201, 0.632); + font-family: 'Source Sans Pro', sans-serif; +} + +.projectsDiv { + margin-top: 2rem; + font-family: 'Source Sans Pro', sans-serif; + border-color: rgba(0, 0, 0, 0.7); +} + +.frontEndMentorChallenges, .freecodeCampProjects, .completeWebDev2020Projects, .vanillaJSProjects { + margin-top: var(--marginTop); +} + +.projectsDiv h2 { + font-weight: 400; +} + +.frontEndMentorChallenges { +} + +.frontEndMentorChallenges .newbieChallenges { + margin-left: 1rem; +} + +.newbieChallenges h3 { + font-weight: 600; +} + +.freecodeCampProjects { +} +.completeWebDev2020Projects { +} +.vanillaJSProjects { +} + +footer { + margin-top: 3rem; + text-align: center; +} + +footer * { + margin-top: 1rem; +} + +footer > a { + display: block; } \ No newline at end of file