Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

replaced cool looking box link with inline code blocks #37522

Merged
merged 1 commit into from
Jan 6, 2025
+49 −3
Merged

replaced cool looking box link with inline code blocks #37522

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 49 additions & 3 deletions files/en-us/learn_web_development/core/styling_basics/cool-looking_box/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,59 @@ page-type: learn-module-assessment

{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper", "Learn_web_development/Core/Text_styling", "Learn_web_development/Core/Styling_basics")}}

In this challenge, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box.
In this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box.

<table>
<tbody>
<tr>
<th scope="row">Prerequisites:</th>
<td>
Before attempting this assessment you should have already worked
through all the articles in this module.
</td>
</tr>
<tr>
<th scope="row">Objective:</th>
<td>
To test comprehension of the CSS box model and other box-related
features such as borders and backgrounds.
</td>
</tr>
</tbody>
</table>

## Starting point

To start this challenge, you should:
To get this assessment started, you should:

- Make local copies of the starting [HTML](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/cool-information-box-start/index.html) and [CSS](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/cool-information-box-start/style.css) — save them as `index.html` and `style.css` in a new directory.
- Save the HTML and CSS shown below as two separate files — `index.html` and `style.css` — in a new directory.

### HTML

```html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Cool box</title>
<!-- your css link goes here -->
</head>
<body>
<div>This is a cool box</div>
</body>
</html>
```

### CSS

```css
html {
font-family: sans-serif;
}

/* Your CSS below here */
```

Alternatively, you could use an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
You could paste the HTML and fill in the CSS into one of these online editors.
Expand Down
Loading