diff --git a/coder-dojo-homepage/v1/README.md b/coder-dojo-homepage/v1/README.md index 89d5009..0a8ea4f 100644 --- a/coder-dojo-homepage/v1/README.md +++ b/coder-dojo-homepage/v1/README.md @@ -12,8 +12,10 @@ - Size images better with CSS - Add margins between sections with CSS - Using divs/container classes to center content and impose max width on centred content. +- Using grid for section images and text - Using flex/grid to place grouped elements side by side -- Make the coderdojo and raspberry pi logos links +- Make all clickable images links +- Style buttons and links - Add embedded video with placeholder image - Add some Javascript to the site (on the form, on the login button) - Get everyone's attempts hosted on a subdir of the repo's GitHub page diff --git a/coder-dojo-homepage/v2/README.md b/coder-dojo-homepage/v2/README.md index e1d3c60..5b800b8 100644 --- a/coder-dojo-homepage/v2/README.md +++ b/coder-dojo-homepage/v2/README.md @@ -7,11 +7,13 @@ - Size images better with CSS - Add margins between sections with CSS - Using divs/container classes to center content and impose max width on centred content. +- Using grid for section images and text ## Hold for later -- Using flex/grid to place grouped elements side by side -- Make the coderdojo and raspberry pi logos links +- Using flex to place grouped elements side by side +- Make all clickable images links +- Style buttons and links - Add embedded video with placeholder image - Add some Javascript to the site (on the form, on the login button) - Get everyone's attempts hosted on a subdir of the repo's GitHub page diff --git a/coder-dojo-homepage/v2/index.html b/coder-dojo-homepage/v2/index.html index 30a85ce..90172c7 100644 --- a/coder-dojo-homepage/v2/index.html +++ b/coder-dojo-homepage/v2/index.html @@ -1,65 +1,77 @@ - - Coding clubs for kids and teens | CoderDojo - - - - - - - -
-
- Raspberry Pi logo - -
-
- - -
-
- - CoderDojo logo - - - - -
-
- - -
- -
-
- Youtube video placeholder. CoderDojo mentor teaches kids. + + Coding clubs for kids and teens | CoderDojo + + + + + + + + + + +
+ +
+ + CoderDojo logo + + + + +
+
+ + +
+ +
+ +
+ + Youtube video placeholder. CoderDojo mentor teaches kids. + + +

The community of free, local coding clubs for kids and teens

In over 100 countries, CoderDojo is the free, fun way to learn coding for kids and teens.

Find a Dojo Start a Dojo
-
+
+
- -
-
+ +
+ +
+ +

Public, accessible venues

Dojos take place in public, accessible spaces such as libraries, community centres, and even cinemas. Some venues provide equipment for kids and teens (Ninjas) to use.

@@ -69,16 +81,24 @@

Enthusiastic volunteers

Free learning resources

Our website provides cool, free projects and other learning resources that anyone can use!

- - CoderDojo ninjas celebrating
-
- -
-
- CoderDojo volunteer helps class + + CoderDojo ninjas celebrating +
+
+ + +
+ +
+ + CoderDojo volunteer helps class + +

Volunteer at a Dojo

There are lots of ways for volunteers to support their computer coding club: they can plan coding sessions, promote sessions locally, communicate with parents, decide on learning resources, mentor young coders, and @@ -92,13 +112,15 @@

Volunteer at a Dojo

Learn more about volunteering
-
- - -
-
- CoderDojo mentor writes on whiteboard +
+
+ +
+ +
+ +

Start a Dojo

Another way to volunteer is to start your own Dojo and become a CoderDojo champion. A CoderDojo champion takes @@ -111,13 +133,22 @@

Start a Dojo

Find out more
-
- -
-
- Cartoon characters waving towards the viewer + + CoderDojo mentor writes on whiteboard + +
+
+ + +
+ +
+ Cartoon characters waving towards the viewer's screen +

Get in touch

@@ -142,61 +173,65 @@

Get in touch

-
-
- - -
-
-

Keep up to date with our newsletter

-

You can unsubscribe at any time.

- -
- - - -
+ + + +
+ +
+

Keep up to date with our newsletter

+

You can unsubscribe at any time.

+ +
+ + + +
+
+
+ + + - diff --git a/coder-dojo-homepage/v2/styles.css b/coder-dojo-homepage/v2/styles.css index b1873e7..5945ede 100644 --- a/coder-dojo-homepage/v2/styles.css +++ b/coder-dojo-homepage/v2/styles.css @@ -7,10 +7,15 @@ --sky-blue: #e9f5f6; --off-white: #fdf6f5; --coderdojo-black: #1a1a1a; + + /* reusable sizes */ + --section-height: 600px; + --footer-raspberry-pi-promotion-icon-size: 64px; } html, body { all: unset; color: var(--coderdojo-black); + font-size: 1.2rem; } /* reused class */ @@ -40,6 +45,11 @@ html, body { } +/* reused class */ +section { + height: var(--section-height); +} + /* reused class */ .landing-section { background-color: var(--scarlet-gum); @@ -61,9 +71,51 @@ html, body { .newsletter-section { background-color: var(--scarlet-gum); color: white; + max-height: 200px; } .footer { background-color: var(--coderdojo-black); color: white; } + +/* reused class */ +.section-image { + width: 100%; + max-height: calc(var(--section-height) * 0.8); +} + +/* reused class */ +.description-container { + height: 100%; + padding-top: 100px; +} + +/* reused class */ +.grid { + display: grid; + column-gap: 100px; + height: 100%; +} + +/* reused class */ +.grid-item { + grid-row: 1; + min-width: 50%; + margin: auto; +} + +/* reused class */ +.grid-right { + grid-column: 2; +} + +/* reused class */ +.grid-left { + grid-column: 1; +} + +.footer-raspberry-pi-promotion-icon { + height: var(--footer-raspberry-pi-promotion-icon-size); + width: var(--footer-raspberry-pi-promotion-icon-size); +} diff --git a/coder-dojo-homepage/v3/README.md b/coder-dojo-homepage/v3/README.md index b0b8d3b..9e51899 100644 --- a/coder-dojo-homepage/v3/README.md +++ b/coder-dojo-homepage/v3/README.md @@ -1,9 +1,10 @@ -# CoderDojo Homepage V2 +# CoderDojo Homepage V3 ## Goals -- Using flex/grid to place grouped elements side by side -- Make the coderdojo and raspberry pi logos links +- Using flex to place grouped elements side by side header + footer +- Style buttons and links +- Make all clickable images links - Add embedded video with placeholder image ## Hold for later diff --git a/coder-dojo-homepage/v4/README.md b/coder-dojo-homepage/v4/README.md index 3fe945b..7c4954d 100644 --- a/coder-dojo-homepage/v4/README.md +++ b/coder-dojo-homepage/v4/README.md @@ -1,4 +1,4 @@ -# CoderDojo Homepage V2 +# CoderDojo Homepage V4 ## Goals