Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Challenge | Layouts
Introduction to CSS Part II
course content

Kurssisisältö

Introduction to CSS Part II

Introduction to CSS Part II

1. Text Styles
2. Сolors and Background
3. Layouts

book
Challenge

Note

You can write the code in the styles.css file of the following sandbox. To see the rendered page, drag it from the right edge of a sandbox window.

Task

Following are the tasks that you need to perform for the flexbox challenge:

  1. Header and footer to a width of 100% and height of 50px with fixed position.

  2. Set the header to a top value of 0.

  3. Set the footer to the bottom.

  4. Style the main element as:

    • Display to flex;

    • The elements to wrap;

    • padding to 50px for the top and bottom;

    • 0 for the rest.

  5. Fix the width of the middle column to 300px using the flex shorthand.

Here is the result you should get. If you are having problems, you can drag the code part with a solution from the left edge of the sandbox window.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 7

Kysy tekoälyä

expand
ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

course content

Kurssisisältö

Introduction to CSS Part II

Introduction to CSS Part II

1. Text Styles
2. Сolors and Background
3. Layouts

book
Challenge

Note

You can write the code in the styles.css file of the following sandbox. To see the rendered page, drag it from the right edge of a sandbox window.

Task

Following are the tasks that you need to perform for the flexbox challenge:

  1. Header and footer to a width of 100% and height of 50px with fixed position.

  2. Set the header to a top value of 0.

  3. Set the footer to the bottom.

  4. Style the main element as:

    • Display to flex;

    • The elements to wrap;

    • padding to 50px for the top and bottom;

    • 0 for the rest.

  5. Fix the width of the middle column to 300px using the flex shorthand.

Here is the result you should get. If you are having problems, you can drag the code part with a solution from the left edge of the sandbox window.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 7
Pahoittelemme, että jotain meni pieleen. Mitä tapahtui?
some-alt