We'll use Bootstrap CSS to create a simple landing page with just a hero section.
Step 1 Create a new page.
Step 2 Load Bootstrap CSS Framework files: Press : to switch to Command Mode, then type:
Step 3 While in Command Mode, type the following commands:
$div -c container $div -c jumbotron $h1 -c display-4 Welcome to the Future >p -c lead Your business. Our technology. A perfect union for the perfect future. >hr -c my-4 >form -c "form-inline mt-5" $input -c "form-control mr-2" -a 'type="text" placeholder="Email"' >button -c "btn btn-primary" -a 'type="submit"' Sign Up
The commands should give you a basic jumbotron layout with some text and a simple sign up form.
Step 4 It doesn't look like much, so let's add a background cover. Press esc to switch to Normal Mode, then press j or ↑ twice so that the jumbotron is selected. Press : again to switch to Command Mode, then run the following:
s background: url("/man_laptop.jpeg"); background-repeat: no-repeat; background-size: cover;
Looks small. Let's make it fill the entire screen's height:
s min-height: 100vh;
To see the styles used so far, type:
You should see a listing of styles from the selected element.*The background image is from Unsplash, courtesy of Bruce Mars.
Step 5 The text doesn't stand out very much from the background image. A common trick would be to put all that text into a semi-transparent box atop the background image. Let's add a padded div at the end of div.jumbotron:
$div -c p-3
s background-color: "#0000007c"
This should change its background color to a semi-transparent black.
Step 6 Switch to Normal mode. The padded div should still be selected. Press c, 0 to select its previous siblings. Alternatively, you can also use shift + ← to multi-select them.
Step 7 Press M to switch to Move Mode. Then press j or ↓ once to move them into the padded div.
Step 8 The text now seems even more subdued than before! Let's change it to half white. First, navigate to the padded div, switch to Command Mode, then run:
Step 9 Still doesn't look great. Let's change to fully white instead:
tc text-white-50 text-white
The tc command toggles off text-white-50, and toggles on text-white. Now it looks better! Let's add some rounded corners to the padded div to round it off:
It's very subtle, but it's there.
Step 10 Now's a good time to save the page. While you're still in Command Mode, run this:
It should save the page under the name landing in localStorage (provided by your browser).
To load it again, just run:
Step 11 The horizontal line isn't working well with the background image, aesthetically speaking. Let's remove it. Switch to Normal Mode. Navigate to the horizontal line with the navigational keys, then press x to remove it.
Step 12 It's hard to tell if it looks better with the selector outline in the way. Press ~ twice to turn off the selector outlines. You can press it once more to turn the selector outlines back on.
Step 13 Is it really better without the line though? Let's undo the deletion by pressing u. Then redo it again by pressing ctrl + r.
On second thought, let's keep it. Press u again to undo the deletion.
Step 14 Press r to move the selector to the root element. Now press t. The selector should automatically jump to the first text node it finds, and switches the editor to Text Mode. Let's change the text to 'The Future is Here'. Press esc to save it and switch back to Normal mode.
Step 15 The placeholder in the email input box doesn't read right. How about 'Email Address' instead? We can use Quick Navigation to get there quickly. While still in Normal Mode, and the selector on the root element, press f. You should see a gray overlay with the number 1 on it. Press 1, f. Now the div.container element is selected. Press 1, f again. Keep drilling down by pressing the number corresponding to the elements enclosing the input box, followed by f. When the email input box is selected, press f again to disable Quick Navigation.
Step 16 Alternatively, we can use query-based selection to quickly select the element we want. Again, press r to select the root element. Switch to Command Mode, then type:
The Email input box should be selected. Any valid CSS selector query should work with the q command.
Step 17 Let's change the placeholder attribute of the input box. Still in Command Mode, we type:
to look at the attributes of the input box. We then type:
a placeholder="Email Address"
to change the placeholder.
Step 18 The hero still feels bare. We want to add a little more message to our hero section. Let's copy p.lead and paste it after the horizontal line. Navigate to p.lead, then press Y to copy it.
Step 19 Next, navigate to the horizontal line, and press p to paste the copied element right after it.
The lead class doesn't feel right, so let's remove it.
Let's change the text, too. Press t to select the text node of the p element, then change it to read "Automate all the things with our patented technology so you can sit back and relax."
Step 20 And finally, it's time to export our page to HTML! Remember to save the page first:
Then use the export command to export it as HTML:
Your browser will be instructed to download the page as an HTML file.