9 changed files with 206 additions and 18 deletions
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
@ -1,15 +1,32 @@
|
||||
body { |
||||
margin: 50px; |
||||
} |
||||
main { |
||||
background-color:rgb(219, 108, 94); |
||||
border: 5px solid rgb(44, 44, 44); |
||||
border-radius: 8px; |
||||
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3); |
||||
width: 800px; |
||||
margin: 200px auto 72px auto; |
||||
padding: 24px; |
||||
} |
||||
|
||||
img { |
||||
img { |
||||
width: 200px; |
||||
height: 200px; |
||||
border-radius: 100px; |
||||
border: 5px solid rgb(44, 44, 44); |
||||
margin-top: -134px; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: 30px; |
||||
color: rbg(31, 25, 25); |
||||
} |
||||
|
||||
h1 span { |
||||
color: rgb(66, 2, 2); |
||||
} |
||||
|
||||
#todays-challenge { |
||||
color: rgb(170, 96, 83); |
||||
#todays-challenge { |
||||
color: rgb(75, 59, 59); |
||||
font-weight: bold; |
||||
font-size: 52px; |
||||
} |
||||
@ -0,0 +1,73 @@
|
||||
body { |
||||
background-color: #f2eaff; |
||||
font-family: Roboto, sans-serif; |
||||
margin: 50px; |
||||
text-align: center; |
||||
} |
||||
|
||||
h1 { |
||||
color: #774ad8; |
||||
margin: 0 0 30px 0; |
||||
padding: 0; |
||||
font-size: 64px; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
a:hover { |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
header img { |
||||
margin: 0; |
||||
padding: 0; |
||||
width: 300px; |
||||
} |
||||
|
||||
main { |
||||
background-color: #774ad8; |
||||
border: 2px solid #290f63; |
||||
border-radius: 10px; |
||||
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); |
||||
color: white; |
||||
margin: 72px auto 24px auto; |
||||
padding: 32px; |
||||
text-align: left; |
||||
width: 800px; |
||||
} |
||||
|
||||
main ul { |
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
main li { |
||||
margin: 18px 0; |
||||
padding: 0 12px; |
||||
} |
||||
|
||||
main li.highlight { |
||||
border-left: 4px solid #fcedae; |
||||
color: #fcedae; |
||||
padding: 0 8px; |
||||
} |
||||
|
||||
main a { |
||||
background-color: #fcedae; |
||||
border-radius: 4px; |
||||
padding: 4px 8px; |
||||
} |
||||
|
||||
footer { |
||||
margin: 36px 0; |
||||
} |
||||
|
||||
footer a { |
||||
background-color: #f8c928; |
||||
border: 1px solid #774ad8; |
||||
border-radius: 4px; |
||||
padding: 12px; |
||||
} |
||||
@ -0,0 +1,46 @@
|
||||
<!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="preconnect" href="https://fonts.googleapis.com"> |
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> |
||||
|
||||
<link rel="stylesheet" href="styles/week-one-challenge.css"> |
||||
<title>Week One Challenge</title> |
||||
</head> |
||||
<body> |
||||
<header> |
||||
<h1>HTML & CSS Basics Summary</h1> |
||||
<img src="images/html-css.png" alt="HTML Logo"/> |
||||
</header> |
||||
<main> |
||||
<h2>HTML Summary</h2> |
||||
<p>HTML (HyperText Markup Language) is used to define our page content, structure and meaning. You don't use it for styling purposes. Use CSS for that instead! |
||||
</p> |
||||
<ul> |
||||
<li class="highlight">HTML uses "elements" to describe (annotate) content</li> |
||||
<li>HTML elements typically have an opening tag, content and then a closing tag</li> |
||||
<li class="highlight">You can also have void (empty) elements like images</li> |
||||
<li class="highlight">You can also configure elements with attributes</li> |
||||
<li>There's a long list of available elements but you'll gain experience over time, no worries</li> |
||||
</ul> |
||||
<p>Learn more about all available HTML elements on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">the MDN HTML element reference</a></p> |
||||
<h2>CSS Summary</h2> |
||||
<p>CSS (Cascading Style Sheets) is used for styling your page content.</p> |
||||
<ul> |
||||
<li>Styles are assigned via property-value pairs</li> |
||||
<li>You can assign styles via the "style" attribute</li> |
||||
<li class="highlight">To avoid code duplication, you typically use global styles (e.g. via the "style" element) instead</li> |
||||
<li>Alternatively, you can work with external stylesheet files which you "link" to</li> |
||||
<li class="highlight">When working with CSS, concepts like "inheritance", "specificity", and the "box model" should be understood</li> |
||||
</ul> |
||||
<p>Learn more about all available CSS properties and values on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">the MDN CSS property reference</a></p> |
||||
</main> |
||||
<footer> |
||||
<a href="docs/html-css-basics-summary.pdf" target="_blank">Download PDF Summary</a> |
||||
</footer> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue