freeCodeCamp/part-011.md at b9c9a9522387ca8e450b5dd2b9a9ece87bdb4ded

Files

Randell Dawson b9c9a95223 chore(learn): Renamed all project-based curriculum project step filenames to use 3-digit format of part-ddd.md (#39463 )

* fix: renamed basic html cat photo app steps

* fix: renamed css-variables project steps

* fix: renamed d3-dashboard filenames

* fix: renamed rpg-game filenames

* fix: renamed functional-progamming-spreadsheet filenames

* fix: renamed calorie-counter project filenames

2020-09-16 11:54:12 +05:30

1.4 KiB

Raw Blame History

id, title, challengeType, isHidden

id	title	challengeType	isHidden
5d8a4cfbe6b6180ed9a1c9e8	Part 11	0	true

Description

Later on, you will be adding more elements to the dashboard container. Set the display to flex and the align-items to center so those items will be vertically centered.

Instructions

Tests

tests:
  - text: test-text
    testString: const dashboard = $(".dashboard"); assert(dashboard.css("display") === "flex" && dashboard.css("align-items") === "center");

Challenge Seed

<style>
body {
  background-color: #ccc;
  padding: 100px 10px;
}

.dashboard {
  width: 980px;
  height: 500px;
  background-color: white;
  box-shadow: 5px 5px 5px 5px #888;
  margin: auto;

  
}
</style>

Before Test

<!DOCTYPE html>
<html>
  <head>
    <title>D3 Dashboard</title>
  </head>

  <body>
    <div class="dashboard"></div>
  </body>
</html>

Solution

<style>
body {
  background-color: #ccc;
  padding: 100px 10px;
}

.dashboard {
  width: 980px;
  height: 500px;
  background-color: white;
  box-shadow: 5px 5px 5px 5px #888;
  margin: auto;
  display: flex;
  align-items: center;  
}
</style>

1.4 KiB Raw Blame History