Compare commits
No commits in common. "a038fa6818d0b23847f98deefd14b62bf098bc72" and "22c7f8e30716f8402c27344d9c221d64b11d9afe" have entirely different histories.
a038fa6818
...
22c7f8e307
@ -1 +0,0 @@
|
||||
# COMPLETE
|
||||
@ -3,9 +3,6 @@
|
||||
border: 4px solid midnightblue;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
|
||||
@ -1 +0,0 @@
|
||||
# COMPLETE
|
||||
@ -1,10 +1,6 @@
|
||||
.header {
|
||||
font-family: monospace;
|
||||
background: papayawhip;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: papayawhip;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@ -18,11 +14,6 @@
|
||||
ul {
|
||||
/* this removes the dots on the list items*/
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
gap: 8px;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
@ -31,5 +22,4 @@ a {
|
||||
padding: 8px;
|
||||
/* this removes the line under the links */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
# COMPLETE
|
||||
@ -9,7 +9,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
LOGO
|
||||
</div>
|
||||
@ -18,13 +17,10 @@
|
||||
<li><a href="https://google.com">link-two</a></li>
|
||||
<li><a href="https://google.com">link-three</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class ="right">
|
||||
<button class="notifications">
|
||||
1 new notification
|
||||
</button>
|
||||
<div class="profile-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -12,10 +12,6 @@ body {
|
||||
background: white;
|
||||
border-bottom: 1px solid #ddd;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
@ -49,13 +45,4 @@ a {
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
gap: 16px;
|
||||
}
|
||||
.left, .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
# COMPLETE
|
||||
@ -10,29 +10,21 @@
|
||||
<body>
|
||||
<div class="title">Information!</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="info">
|
||||
<img src="./images/barberry.png" alt="barberry">
|
||||
<div class="text">This is a type of plant. We love this one.</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<img src="./images/chilli.png" alt="chili">
|
||||
<div class="text">This is another type of plant. Isn't it nice?</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<img src="./images/pepper.png" alt="pepper">
|
||||
<div class="text">We have so many plants. Yay plants.</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<img src="./images/saffron.png" alt="saffron">
|
||||
<div class="text">I'm running out of things to say about plants.</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="./images/barberry.png" alt="barberry">
|
||||
<div class="text">This is a type of plant. We love this one.</div>
|
||||
|
||||
<img src="./images/chilli.png" alt="chili">
|
||||
<div class="text">This is another type of plant. Isn't it nice?</div>
|
||||
|
||||
<img src="./images/pepper.png" alt="pepper">
|
||||
<div class="text">We have so many plants. Yay plants.</div>
|
||||
|
||||
<img src="./images/saffron.png" alt="saffron">
|
||||
<div class="text">I'm running out of things to say about plants.</div>
|
||||
|
||||
<!-- disregard this section, it's here to give attribution to the creator of these icons -->
|
||||
<div class="footer">
|
||||
<div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,6 +1,5 @@
|
||||
body {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -9,10 +8,8 @@ img {
|
||||
}
|
||||
|
||||
.title {
|
||||
border: 1px solid black;
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/* do not edit this footer */
|
||||
@ -26,14 +23,4 @@ img {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eee;
|
||||
}
|
||||
.container{
|
||||
display: flex;
|
||||
border: 1px solid red;
|
||||
justify-content: center;
|
||||
gap: 52px;
|
||||
}
|
||||
|
||||
.info{
|
||||
max-width: 200px;
|
||||
}
|
||||
@ -4,16 +4,15 @@ Let's build a little off the previous exercise. Here, you're going to give two e
|
||||
|
||||
This will help you further practice adding classes and using class selectors, so be sure you add the class attribute in the HTML file. For the remainder of these exercises, the format of any colors is entirely up to you; we trust you'll practice using the different values! The properties you need to add to each element are:
|
||||
|
||||
- **The first element**: a black background and white text
|
||||
- **The second element**: a yellow background
|
||||
- **Both elements**: a font size of 28px and a list of fonts containing `Helvetica` and `Times New Roman`, with `sans-serif` as a fallback
|
||||
* **The first element**: a black background, white text color, and a bold font weight
|
||||
* **The second element**: a yellow background
|
||||
* **Both elements**: a font size of 28px and a list of fonts containing `Helvetica` and `Times New Roman`, with `sans-serif` as a fallback
|
||||
|
||||
## Desired Outcome
|
||||
|
||||
|
||||
|
||||
### Self Check
|
||||
|
||||
### Self Check
|
||||
- Does each element have a unique class name?
|
||||
- Did you use the grouping selector for styles that both elements share?
|
||||
- Did you make separate rules for the styles unique to each element?
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
.inverted,
|
||||
.fancy {
|
||||
font-family: Helvetica, "Times New Roman", sans-serif;
|
||||
@ -7,8 +8,9 @@
|
||||
.inverted {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fancy {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
# COMPLETE
|
||||
@ -15,7 +15,6 @@ body {
|
||||
|
||||
.para {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
|
||||
@ -1 +0,0 @@
|
||||
# COMPLETE
|
||||
@ -7,15 +7,15 @@ body {
|
||||
background: pink;
|
||||
border: 3px solid blue;
|
||||
/* CHANGE ME */
|
||||
padding: 32px;
|
||||
margin: 12px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.two {
|
||||
background: lightblue;
|
||||
border: 3px solid purple;
|
||||
/* CHANGE ME */
|
||||
margin-bottom: 48px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.three {
|
||||
@ -23,6 +23,6 @@ body {
|
||||
border: 3px solid brown;
|
||||
width: 200px;
|
||||
/* CHANGE ME */
|
||||
padding: 32px;
|
||||
margin-left: auto;
|
||||
padding: 0px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
# COMPLETE
|
||||
@ -11,7 +11,7 @@
|
||||
<div class="card">
|
||||
<h1 class="title">I'm a card</h1>
|
||||
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
|
||||
<div class="button-container">and a <br><button>BIG BUTTON</button></div>
|
||||
<div class="button-container">and a <button>BIG BUTTON</button></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -6,34 +6,22 @@ body {
|
||||
.card {
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
margin: 8px;
|
||||
padding: 15px;
|
||||
}
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
background: #e3f4ff;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #e3f4ff;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
background: #e3f4ff;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: white;
|
||||
border: 1px solid #eee;
|
||||
padding: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user