punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add solutions

Browse source
This commit is contained in:
Cody Loyd 2021-08-24 08:32:36 -05:00
parent a7067c9b9c
commit 51afc97c19
19 changed files with 349 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
flex/flex-center/solution/solution.css Normal file
View file

@ -0,0 +1,20 @@
.container {
background: dodgerblue;
border: 4px solid midnightblue;
width: 400px;
height: 300px;
/* look at this! */
display: flex;
align-items: center;
justify-content: center;
}
.box {
background: palevioletred;
font-weight: bold;
text-align: center;
border: 6px solid maroon;
width: 80px;
height: 80px;
}

15
flex/flex-center/solution/solution.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CENTER THIS DIV</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="container">
<div class="box">center this div</div>
</div>
</body>
</html>

18
flex/flex-header-2/index.html
View file

@ -8,15 +8,15 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="logo">
LOGO
</div>
<ul class="links">
<li><a href="google.com">link-one</a></li>
<li><a href="google.com">link-two</a></li>
<li><a href="google.com">link-three</a></li>
</ul>
<div class="right">
<div class="header">
<div class="logo">
LOGO
</div>
<ul class="links">
<li><a href="google.com">link-one</a></li>
<li><a href="google.com">link-two</a></li>
<li><a href="google.com">link-three</a></li>
</ul>
<button class="notifications">
1 new notification
</button>

63
flex/flex-header-2/solution/solution.css Normal file
View file

@ -0,0 +1,63 @@
/* this is some magical font-importing.
you'll learn about it later. */
@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,900&display=swap');
body {
margin: 0;
background: #eee;
font-family: Besley, serif;
}
.header {
background: white;
border-bottom: 1px solid #ddd;
box-shadow: 0 0 8px rgba(0,0,0,.1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
}
.profile-image {
background: rebeccapurple;
box-shadow: inset 2px 2px 4px rgba(0,0,0,.5);
border-radius: 50%;
width: 48px;
height: 48px;
}
.logo {
color: rebeccapurple;
font-size: 32px;
font-weight: 900;
font-style: italic;
}
button {
border: none;
border-radius: 8px;
background: rebeccapurple;
color: white;
padding: 8px 24px;
}
a {
/* this removes the line under our links */
text-decoration: none;
color: rebeccapurple;
}
ul {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
gap: 16px;
}
.left, .right {
display: flex;
align-items: center;
gap: 16px;
}

30
flex/flex-header-2/solution/solution.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Header 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="header">
<div class="left">
<div class="logo">
LOGO
</div>
<ul class="links">
<li><a href="google.com">link-one</a></li>
<li><a href="google.com">link-two</a></li>
<li><a href="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>

34
flex/flex-header/solution/solution.css Normal file
View file

@ -0,0 +1,34 @@
.header {
font-family: monospace;
background: papayawhip;
padding: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 48px;
font-weight: 900;
color: tomato;
background: white;
padding: 4px 32px;
}
ul {
/* this removes the dots on the list items*/
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
gap: 8px;
}
a {
font-size: 22px;
background: white;
padding: 8px;
/* this removes the line under the links */
text-decoration: none;
}

29
flex/flex-header/solution/solution.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Header</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="header">
<div class="left-links">
<ul>
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
</ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
<ul>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
<li><a href="#">SIX</a></li>
</ul>
</div>
</div>
</body>
</html>

BIN
flex/flex-information/solution/images/barberry.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
flex/flex-information/solution/images/chilli.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
flex/flex-information/solution/images/pepper.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
flex/flex-information/solution/images/saffron.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

0
flex/flex-information/solution.css → flex/flex-information/solution/solution.css
View file

0
flex/flex-information/solution.html → flex/flex-information/solution/solution.html
View file

2
flex/flex-layout/README.md
View file

@ -15,7 +15,7 @@ Flexbox is useful for laying out entire pages as well as the smaller components
- Header and footer have padding.
- Links in header and footer are pushed to either side.
- There is space between the links in the header and footer.
- Footer has a light gray background (#eeeeee).
- Footer has a light gray background (`#eeeeee`).
- Logo, input and buttons are centered in the screen.
- Buttons have an appropriate amount of padding.
- There is space between the logo, input and buttons.

BIN
flex/flex-layout/solution/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

0
flex/flex-layout/solution.css → flex/flex-layout/solution/solution.css
View file

42
flex/flex-layout/solution/solution.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAYOUT</title>
<link rel="stylesheet" href="./solution.css">
</head>
<body>
<div class="header">
<ul class="left-links">
<li><a href="google.com">About</a></li>
<li><a href="google.com">Store</a></li>
</ul>
<ul class="right-links">
<li><a href="google.com">Profile</a></li>
<li><a href="google.com">Settings</a></li>
</ul>
</div>
<div class="content">
<img src="./logo.png" alt="">
<div class="input">
<input type="text">
</div>
<div class="buttons">
<button>Do the thing!</button>
<button>Do the other thing!</button>
</div>
</div>
<div class="footer">
<ul class="left-links">
<li><a href="google.com">Advertising</a></li>
<li><a href="google.com">Business</a></li>
</ul>
<ul class="right-links">
<li><a href="google.com">Privacy</a></li>
<li><a href="google.com">Terms</a></li>
</ul>
</div>
</body>
</html>

83
flex/flex-modal/solution/solution.css Normal file
View file

@ -0,0 +1,83 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
html, body {
height: 100%;
}
body {
font-family: Roboto, sans-serif;
margin: 0;
background: #aaa;
color: #333;
/* I'll give you this one for free lol */
display: flex;
align-items: center;
justify-content: center;
}
.modal {
background: white;
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0,0,0,.2);
display: flex;
gap: 16px;
padding: 16px;
}
.icon {
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
button {
padding: 8px 16px;
border-radius: 8px;
}
button.continue {
background: royalblue;
border: 1px solid royalblue;
color: white;
}
button.cancel {
background: white;
border: 1px solid #ddd;
color: royalblue;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.text {
margin-bottom: 16px;
}

23
flex/flex-modal/solution/solution.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="solution.css">
<title>Modal</title>
</head>
<body>
<div class="modal">
<div class="icon">!</div>
<div class="container">
<div class="header">Are you sure you want to do that?
<div class="close-button">✖</div>
</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>
</body>
</html>