Editing Course Time Machine (section)

=== Class 2 ===
'''Demos'''
# BRUTALIST
## Take a look at [https://brutalistwebsites.com/ BrutalistWebsites.com]
# Code
## Build a two-column layout with an image over the layout
# Tasks
## Whiteboard drawing on the tasks for today

'''Class'''

* During the class we work in groups of 2
* Complete the tasks below
* Then make the website your own by adding content and changing design
* Make sure both your GIF's are visible on the website 

First watch the following videos to understand CSS selectors: 
1. [https://www.linkedin.com/learning/css-essential-training-3/type-and-universal-selectors Type and universal selectors] 
2. [https://www.linkedin.com/learning/css-essential-training-3/class-and-id-selectors Class and ID selectors]

''It is recommended to first try and complete the tasks with only the instructions below. However, feel free to use these [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/Eplujb6NkU9JkvXQL7en_wwBeJ63tLkAcRfWzVtE0jrXUg?e=fTdQah demo videos] when you get stuck.''

'''Tasks'''

To start a project and create a file, see VsCode [http://ps.wdka.nl/wiki/Visual_Studio_Code#File_explorer documentation].

# CSS Grid
## A reference on CSS grid can be found on [https://www.w3schools.com/css/css_grid.asp W3Schools CSS Grid].
## Create a two column website similar to [https://kostasmurkudis.org/about kostasmurkudis.org]
## '''Bonus:''' You can learn more about CSS grid on this [https://www.linkedin.com/learning/responsive-layout/intro-to-css-grid?autoplay=true LinkedIn Learning Course]
## '''Bonus:''' Create the list with links on the left side like [https://kostasmurkudis.org/about kostasmurkudis.org]
# Position absolute and fixed
## A reference on position can be found on [https://www.w3schools.com/cssref/pr_class_position.asp W3Schools Position]
## Add a position absolute element over the grid like the flower on [https://www.bigzh.ch/ bigzh.ch]
## '''Bonus:''' Add a couple of position fixed and sticky elements randomly over the page. Have a look at [http://www.waltersantomauro.com/#/list waltersantomauro.com] for some inspiration.
## '''Bonus:''' You can learn more about position on this [https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid/position-relative-and-absolute LinkedIn Learning course]
# Fonts
## Look at [https://brutalistwebsites.com/ Brutalistwebsites.com] for some inspiration
## Watch [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/Eplujb6NkU9JkvXQL7en_wwBeJ63tLkAcRfWzVtE0jrXUg?e=fTdQah this video] on how to add select and add Google fonts
## Pick some nice [https://fonts.google.com Google Fonts]
## Add the fonts to your project
## '''Bonus:''' Maytal approves of your font selection 😁
## '''Bonus:''' Learn more about fonts on the web by watching this [https://www.linkedin.com/learning/css-essential-training-3/typography-for-the-web LinkedIn Learning Course]

'''Starter'''
<source lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* In here we type CSS */
    </style>
</head>
<body>
    <div class="twoColumns">
        <div class="leftColumn">
            <h1>BRUTALIST</h1>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, consectetur cumque inventore fugiat ullam dolores sint quaerat debitis perspiciatis, placeat officiis veritatis magni ducimus enim minima qui sequi tempore quos.
            </p>
        </div>
        <div class="rightColumn">
            <h1>BRUTALIST-ER</h1>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, consectetur cumque inventore fugiat ullam dolores sint quaerat debitis perspiciatis, placeat officiis veritatis magni ducimus enim minima qui sequi tempore quos.
            </p>
        </div>
    </div>
    <img id="overlayImage" src="./brutalist.gif" />
</body>
</html>
</source>