It’s finally time to build a real splash page! We’ve created 3 simple designs and recorded a video tutorial and Codepen example for each one, so you can get your creative juices flowing. Tomorrow we’ll show you had to add interactive elements like a google map and how to actually make it live if you want to!
Apologies if I moved a bit fast in this one, I introduced a few extra topics that weren’t supposed to be included in the free challenge but I just knew that you would want to learn them!
Splash Page 1
Splash Page 2
Splash Page 3
BONUS: Splash Page 4
In this one, we’ll build it from scratch using Atom including setting up the HTML and linking the CSS. Then in tomorrow’s video will upload it to the hosting & domain name!
Video uploading now, check back in one hour….
Embedding Responsive Google Maps or Youtube Videos
Embedding Responsive Google Maps
- Find the map you want to share on google maps
- Click on Share > Embed Map
- Copy the html and adjust the width to 100%
- Paste in into whatever container element (div, section etc) you want.
Embedding Responsive Youtube Videos
- Copy the URL of the video you want to embed (not the embed code)
- Paste the URL into embedresponsively.com
- Copy the outputted code into your HTML
The advantage of this method over the standard copy + paste embed is that the video is responsive, you can put it in any container div or section and it will fill the width while maintaining it’s aspect ratio (no black bars at the top or sides!)