Your Multi-column Portfolio Project

Introduction

In this portfolio project, you will use the Lunevedy app and custom CSS styles to design and create six multi-column, responsive web page layouts.

Project folders and files

Your first task is to download the zip file you need for this project.

1. Download the following zip file:   project-multi-column.zip
2. Unzip this file into your portfolio folder, where it will create a new folder named project-multi-column.

All the text you need for this portfolio project is in the file below. Only <p> tags have been used for basic formatting.

text.html

You do not need to download this file. You can simply copy-and-paste from it.

In creating the gallery of six section blocks, you will use options within the Lunevedy app.

Working with the index.html and custom.css files

In VS Code, open the index.html web page and custom.css stylesheet you downloaded for this project.

The .section-selector-1 block

Your finished layout should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Two-column split layout.
2. On the Section menu, choose the following option.
3. On the Text menu, choose the following option.
4. On the Buttons menu, choose the following options.
5. Near the bottom-right of the screen, click the HTML button.
6. Switch to VS Code, display the index.html web page, select the first empty <section> tag.
7. Paste the copied HTML.
8. Update the content with the relevant words from the text.html file and the 800x480-credit-card.jpg image file.   Delete the <p> tag and its sample text. See below.

When finished, save your index.html file.

Working with the custom.css file

Follow the steps below:

1. Return to the Lunevedy app, and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css file, paste in copied style rule for background-color.
3. Open your web browser’s DevTools by pressing Ctrl + Shift + i (Windows) or ⌘ Command + Shift + i (Mac), and display the Inspector (Firefox) or Elements (Brave/Chrome) tab.
4. Click the arrow icon at the top-left of the DevTools window, and then click anywhere in the <h2> text area in the main browser window.
5. In the second pane of the DevTols window, right-click on the h2 style rule and choose the Copy Rule command.
6. Switch to VS Code and paste the style rule into the custom.css file.
7. Edit the h2 selector as follows.

   .section-selector-1.cols-2-half .col-2 h2 {
       font-family: 'Saira Condensed', sans-serif;
       letter-spacing: 1px;
       font-size: calc(28px + (42 - 28) * ((100vw - 320px) / (1140 - 320)));
       margin-top: 32px;
       margin-bottom: 0;
   }

When finished, save your custom.css file.

✅   All done. Your first <section> layout is now complete.

The .section-selector-2 block

Your finished layout should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Three columns layout.
2. On the Section menu, choose the following option.
3. On the Columns menu, choose the following option.
4. On the Buttons menu, choose the following options.
5. On the Illustrations menu, choose the following options.
6. Near the bottom-right of the screen, click the HTML button.   (Note that the CSS button is not enabled because you have not updated any default colours.)
7. Switch to VS Code, display the index.html web page, and paste the copied HTML over the second empty <section> tag pair.
8. Update the pasted content with the relevant words and hyperlinks from the text.html file.   To copy a hyperlink, right-click on the link in the text and choose Copy link (Firefox) or Copy link address (Brave or Chrome) from the context menu. Also replace the placeholder images with the images of the three candles. See below.

When finished, save your index.html file.

Working with the custom.css file

Follow these steps:

1. In VS Code, in the custom.css file, add the following style rule.

   .section-selector-2 { font-family: 'Playfair Display', serif }

When finished, save your custom.css file.

✅   All done. Your second <section> layout is now complete.

The .section-selector-3 block

Your finished layout should look similar to that shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Three columns layout.
2. On the Section menu, choose the following options.
3. On the Upper menu, choose the following options.
4. On the Columns menu, choose the following options.
5. On the Illustrations menu, choose the following options.
6. Click the HTML button near the bottom-right of the screen.
7. Switch to VS Code, display the index.html web page, and paste the copied HTML over the third empty <section> tag pair.
8. Update the three Line Awesome icons as follows:

   <i class="las la-swatchbook"></i>

   <i class="las la-border-all"></i>

   <i class="lar la-file-video"></i>

   

When finished, save your index.html file.

Working with the custom.css file

Follow the steps below:

1. Return to the Lunevedy app, and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css file, paste in copied style rules.
3. Edit and add these style rules for the entire section:

   .section-selector-3 {
      background-image: linear-gradient(to top right, #0f172a, #1c2c51);
      font-family: 'Inter', sans-serif;
   }

4. Add these font style rules:

   .section-selector-3 .col-1 h2 { font-weight: 200 }
   .section-selector-3 .col-3 h3 { font-weight: 400 }
   

5. Add these style rules to control the size and position of the three icons:

   .section-selector-3 .flex-cols-3 > .col-3 > figure.icon.icon-small i[class^="la"] {
       font-size: 60px;
       margin-bottom: -24px !important;
   }
   
   .section-selector-3 .cols-padding div[class^="col-"] figure.icon-left i { margin-left: 16px }
   .section-selector-3 div[class^="col-"] figure.icon { margin-bottom: 20px }  

6. Finally, add this fluid font-size rule:

   .section-selector-3 .col-1 > h2 {
       font-size: calc(28px + (64 - 28) * ((100vw - 320px) / (1140 - 320)));
   }

When finished, save your custom.css file.

✅   All done. Your third <section> layout is now complete.

The .section-selector-4 block

Your finished layout should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Single column layout.
2. On the Section menu, choose the following options.
3. On the Upper menu, choose the following options.
4. Click the HTML button near the bottom-right of the screen.
5. Switch to VS Code, display the index.html web page, and paste the copied HTML inside the fourth empty <section> tag pair.
6. Update the pasted content with the relevant words from the text.html file. See below.

When finished, save your index.html file.

Working with the custom.css file

Follow these steps:

1. Return to the Lunevedy app and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css stylesheet, paste in the copied styles.
3. Update the CSS as follows:

   .section-selector-4 {
       font-family: 'Inter', sans-serif;
       background-color: #73c9b7;
   }
   .section-selector-4 > h2 span.highlight {
       color: var(--gray-700);
   }
   
   .section-selector-4.w-1140px h2 {
       font-size: calc(22px + (42 - 22) * ((100vw - 320px) / (1140 - 320)));
       line-height: 1.3;
       max-width: 30ch;
   }

When finished, save your custom.css file.

✅   All done. Your fourth section is now complete.

The .section-selector-5 block

Your finished layout should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Four columns layout.
2. On the Section menu, choose the following option.
3. On the Upper menu, choose the following option.
4. On the Illustrations menu, choose the following options.
5. Near the bottom-right of the screen, click the HTML button.
6. Switch to VS Code, display the index.html web page, and paste the copied HTML over the fifth empty <section> tag pair.
7. Update the pasted content with the relevant words and hyperlinks from the text.html file. See below.

When finished, save your index.html file.

Working with the custom.css file

Follow these steps:

1. Return to the Lunevedy app, and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css file, paste in the copied style rules.
3. Update the first CSS style rule as follow:

   .section-selector-5 {
       background-color: var(--slate-050);
       font-family: 'Inter', sans-serif;
   }

4. Add the following new CSS style rule as follow:

   .section-selector-5 .flex-cols-4 > .col-4 > h3 {
       font-size: calc(18px + (56 - 18) * ((100vw - 768px) / (1920 - 768)));
   }

When finished, save your custom.css file.

✅   All done. Your fifth <section> layout is now complete.

The .section-selector-6 block

Your finished layout should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Three columns layout.
2. On the Section menu, choose the following option.
3. On the Columns menu, choose the following options.
4. On the Illustrations menu, choose the following options.
5. Near the bottom-right of the screen, click the HTML button.
6. Switch to VS Code, display the index.html web page, and paste the copied HTML over the final empty <section> tag pair.   You need not update the placeholder text or images.

When finished, save your index.html file.

Working with the custom.css file

Follow these steps:

1. Return to the Lunevedy app, and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css file, paste in the copied style rule.
3. Edit and simplify this style rule as follow:

   .section-selector-6.theme-light .flex-cols-3 .col-3 {
       background-color: var(--green-200)
   }

4. To display each of the three columns with a different background-color, use the :nth-child() selector as follows:

   .section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(1) {
       background-color: var(--green-200)
   }
   
   .section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(2) {
       background-color: var(--blue-200)
   }
   
   .section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(3) {
       background-color: var(--red-300)
   }

When finished, save your custom.css file.

✅   All done. Your sixth and final <section> layout is now complete.

Updating the meta tags

As a final touch, update the web page’s title and description tags in the <head> as follows:

<title>Multi-column layout gallery</title>
<meta name="description" content="A gallery of responsive multi-column layouts">

Uploading your project folder to GitHub

After finishing your project, you are now ready to upload them to your account on GitHub.

1. Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now.
2. On your GitHub home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io
3. On the next GitHub screen displayed, click the portfolio folder.
4. With your portfolio folder displayed on GitHub, click Add file button.
5. From the dropdown list displayed, choose the option Upload files.
6. In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your 📁 project-multi-column folder to upload it to the portfolio folder within your repository on GitHub.
7. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
8. Finally, click the green Commit changes button to upload your files.

Your portfolio project web page is now published on GitHub at a web address similar to the following:

https://username.github.io/portfolio/project-multi-column/index.html

or simply:

https://username.github.io/portfolio/project-multi-column

It may take a few minutes for your uploaded files to appear on GitHub.