cheeks/css-exercises
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Completed Sections

Browse Source
This commit is contained in:
cheeks 2024-07-13 22:27:26 -04:00
parent ab37fe0e0a
commit 86baf2e8ef
6 changed files with 51 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
flex/03-flex-header-2/COMPLETE.md Normal file
View File

@ -0,0 +1 @@
# COMPLETE

4
flex/03-flex-header-2/index.html
View File

@ -9,6 +9,7 @@
</head>
<body>
<div class="header">
<div class="left">
<div class="logo">
LOGO
</div>
@ -17,10 +18,13 @@
<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>

13
flex/03-flex-header-2/style.css
View File

@ -12,6 +12,10 @@ 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 {
@ -45,4 +49,13 @@ a {
ul {
list-style-type: none;
display: flex;
margin: 0px;
padding: 0px;
gap: 16px;
}
.left, .right {
display: flex;
align-items: center;
gap: 8px;
}

1
flex/04-flex-information/COMPLETE.md Normal file
View File

@ -0,0 +1 @@
# COMPLETE

30
flex/04-flex-information/index.html
View File

@ -10,21 +10,29 @@
<body>
<div class="title">Information!</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>
<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>
<!-- 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>

13
flex/04-flex-information/style.css
View File

@ -1,5 +1,6 @@
body {
font-family: 'Courier New', Courier, monospace;
text-align: center;
}
img {
@ -8,8 +9,10 @@ img {
}
.title {
border: 1px solid black;
font-size: 36px;
font-weight: 900;
margin-bottom: 32px;
}
/* do not edit this footer */
@ -23,4 +26,14 @@ 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;
}