Fan made page for Stargate (SG1) tv series, a show that I loved growing up.
This page was a 1 week challenge set by @cbccss. The goal, to create a fan made site of a tv show or movie of our choosing.
As a big fan of Stargate SG1, all of the series, I went for it.
Visit live site
Really enjoyed coding these two features, specially the carousel as it was a bit more challenging.
Flip card for the characters section. Each person gets their own card with the profile picture at the front and a little bio at the back. JS is only used to toggle between class names.
Endless Carousel for the vehicles section. Created a custom endless carousel to show case the vehicles from the show. Could not find somewhere to guide me on this and the other options was to use Bootstrap (but did not want to add it just for this) so I created it fresh.
I use JS to keep track of the slide on show and to toggle between animations. It uses translate and opacity which does not mess with Paint on a browser to make smooth transitions.
large screens screenshot
mobile screens screenshot
| Color | Hex |
|---|---|
| soft colour | |
| medium colour | |
| dark colour | |
| black | |
| white | |
| box-shadow | |
| Blue |
- Pen and paper (design)
- Mobile first approach
- HTML5
- SASS
- JavaScript
Note even though I used SASS the style.css file is also available so the project can be used straight away.
-
Font Kaisei Opti
-
Hero image: sg1-cast-wiki
-
Tealc image: tealc.jpg
-
Daniel image: daniel.jpg
-
Oneill image: oneill.jpg
-
Samantha image: samantha.jpg
-
MALP image: sg1-malp
-
F-302 image:sg1-f-302
-
BC-304 image s1-bc-304
-
Thor Chariot image sg1-thor-chariot