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> </head>
<body> <body>
<div class="header"> <div class="header">
<div class="left">
<div class="logo"> <div class="logo">
LOGO LOGO
</div> </div>
@ -17,10 +18,13 @@
<li><a href="https://google.com">link-two</a></li> <li><a href="https://google.com">link-two</a></li>
<li><a href="https://google.com">link-three</a></li> <li><a href="https://google.com">link-three</a></li>
</ul> </ul>
</div>
<div class ="right">
<button class="notifications"> <button class="notifications">
1 new notification 1 new notification
</button> </button>
<div class="profile-image"></div> <div class="profile-image"></div>
</div>
</div> </div>
</body> </body>
</html> </html>

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

@ -12,6 +12,10 @@ body {
background: white; background: white;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
box-shadow: 0 0 8px rgba(0,0,0,.1); box-shadow: 0 0 8px rgba(0,0,0,.1);
display: flex;
justify-content: space-between;
padding: 8px;
} }
.profile-image { .profile-image {
@ -45,4 +49,13 @@ a {
ul { ul {
list-style-type: none; 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> <body>
<div class="title">Information!</div> <div class="title">Information!</div>
<img src="./images/barberry.png" alt="barberry"> <div class="container">
<div class="text">This is a type of plant. We love this one.</div> <div class="info">
<img src="./images/barberry.png" alt="barberry">
<img src="./images/chilli.png" alt="chili"> <div class="text">This is a type of plant. We love this one.</div>
<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"> <img src="./images/chilli.png" alt="chili">
<div class="text">We have so many plants. Yay plants.</div> <div class="text">This is another type of plant. Isn't it nice?</div>
</div>
<img src="./images/saffron.png" alt="saffron"> <div class="info">
<div class="text">I'm running out of things to say about plants.</div> <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 --> <!-- disregard this section, it's here to give attribution to the creator of these icons -->
<div class="footer"> <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>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>
</div>
</body> </body>
</html> </html>

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

@ -1,5 +1,6 @@
body { body {
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
text-align: center;
} }
img { img {
@ -8,8 +9,10 @@ img {
} }
.title { .title {
border: 1px solid black;
font-size: 36px; font-size: 36px;
font-weight: 900; font-weight: 900;
margin-bottom: 32px;
} }
/* do not edit this footer */ /* do not edit this footer */
@ -24,3 +27,13 @@ img {
justify-content: center; justify-content: center;
background: #eee; background: #eee;
} }
.container{
display: flex;
border: 1px solid red;
justify-content: center;
gap: 52px;
}
.info{
max-width: 200px;
}