Skip to content

Commit 3e4abaf

Browse files
NateWrNateWr
committed
Add exercise on CSS properties
1 parent 1b77ba0 commit 3e4abaf

File tree

4 files changed

+62
-1
lines changed

4 files changed

+62
-1
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"2": "live-server --open=week-1/2-html-attributes",
1111
"3": "live-server --open=week-1/3-semantic-html",
1212
"4": "live-server --open=week-1/4-links-scripts",
13-
"5": "live-server --open=week-1/5-css-selectors"
13+
"5": "live-server --open=week-1/5-css-selectors",
14+
"6": "live-server --open=week-1/6-css-properties"
1415
}
1516
}

‎week-1/6-css-properties/index.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>6. CSS Properties - HTML, CSS and Git Exercises</title>
7+
<link rel="stylesheet" href="/css/normalize.css">
8+
<link rel="stylesheet" href="/css/base.css">
9+
<link rel="stylesheet" href="/css/message.css">
10+
<link rel="stylesheet" href="styles.css">
11+
</head>
12+
13+
<body>
14+
<div class="site-wrapper">
15+
<div class="site-header">
16+
<div class="site-header__title">Messages</div>
17+
</div>
18+
<div class="messages">
19+
<div class="message">
20+
<div class="message__author">Won</div>
21+
<p class="message__content">
22+
Where should we meet tomorrrow?
23+
</p>
24+
<time class="message__time message__time--old">Yesterday, 7:25pm</time>
25+
</div>
26+
<div class="message">
27+
<div class="message__author">Luke</div>
28+
<p class="message__content">
29+
Let's meet at the iCafe in Merchant City.
30+
<a href="https://goo.gl/maps/aza4h9nUBhn" class="link link--map">
31+
https://goo.gl/maps/aza4h9nUBhn
32+
</a>
33+
</p>
34+
<time class="message__time">7:35pm</time>
35+
</div>
36+
<div class="message message--unread">
37+
<div class="message__author">Won</div>
38+
<p class="message__content">
39+
Ok!
40+
<a href="https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif" class="link link--gif">https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif</a>
41+
</p>
42+
<time class="message__time">7:38pm</time>
43+
</div>
44+
</div>
45+
</div>
46+
</body>
47+
48+
</html>

‎week-1/6-css-properties/readme.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# CSS Properties
2+
3+
There are many CSS properties you can use to change how your website looks. Add rules to the `styles.css` file to complete the steps below. _Do not edit the `index.html` file._
4+
5+
1. Make the links in the messages red and bold, and remove the underline.
6+
2. Reduce the font size of the message times to `0.8rem`.
7+
3. Put a blue border on the left side of the last message to show it is unread.
8+
4. Make yesterday's message partially transparent to show it is old.
9+
5. Increase the space between each line in a message.
10+
11+
_Hint: You can use Google to learn new CSS properties. Try searching for color, font-weight, text-decoration, font-size, border, opacity, and line-height._

‎week-1/6-css-properties/styles.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* Add your CSS code below */

0 commit comments

Comments
 (0)