diff --git a/100-days/docs/html-css-basics-summary.pdf b/100-days/docs/html-css-basics-summary.pdf new file mode 100644 index 0000000..43d2518 Binary files /dev/null and b/100-days/docs/html-css-basics-summary.pdf differ diff --git a/100-days/full-week.html b/100-days/full-week.html index 5e24e49..34d5b1c 100644 --- a/100-days/full-week.html +++ b/100-days/full-week.html @@ -12,12 +12,30 @@ -

My Upcoming Challenges

- View Today's Challenge -
    -
  1. Repeat what I learned about HTML & CSS
    2. -
  2. Do the exercises on HTML & CSS
    3. -
  3. Dive deeper into HTML & CSS and build more complex websites
    4. -
+
+

My Upcoming Challenges

+

These are my goals for the next days

+ View Today's Challenge +
+
+
    +
  1. +

    Tuesday, April 2nd

    +

    Repeat what I learned about HTML & CSS

    +
    2. +
  2. +

    Wednesday, April 3rd

    +

    Do the exercises on HTML & CSS

    +
    3. +
  3. +

    Thursday, April 4th

    +

    Dive deeper into HTML & CSS and build more complex websites

    +
    4. +
  4. +

    Friday, April 5th

    +

    Learn all about forms

    +
    5. +
+
\ No newline at end of file diff --git a/100-days/images/html-css.png b/100-days/images/html-css.png new file mode 100644 index 0000000..caf89c5 Binary files /dev/null and b/100-days/images/html-css.png differ diff --git a/100-days/index.html b/100-days/index.html index 8477286..ee542ba 100644 --- a/100-days/index.html +++ b/100-days/index.html @@ -13,13 +13,18 @@ My Daily Challenge - + +
A trophy -

100 Day Challenges

+

My Challenge for Thursday, November 30th

Learn about the basics of web development - specifically dive into HTML & CSS.

+
+ \ No newline at end of file diff --git a/100-days/styles/daily-challenge.css b/100-days/styles/daily-challenge.css index 4bd8b4f..7515826 100644 --- a/100-days/styles/daily-challenge.css +++ b/100-days/styles/daily-challenge.css @@ -1,15 +1,32 @@ -body { - margin: 50px; - } - - img { +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 { 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; } \ No newline at end of file diff --git a/100-days/styles/full-week.css b/100-days/styles/full-week.css index 2d93eaf..30d274a 100644 --- a/100-days/styles/full-week.css +++ b/100-days/styles/full-week.css @@ -1,13 +1,22 @@ h1 { font-size: 48px; color: rgb(71, 62, 62); + margin: 0; +} + +header p { + margin: 12px 0; } a { background-color: rgb(167, 1, 78); color: white; + border: 1px solid black; border-radius: 4px; font-size: 24px; + padding: 12px 48px; + display:inline-block; + margin: 0; } a:hover { background-color: rgb(180, 12, 90); @@ -16,10 +25,29 @@ a:hover { ol { list-style: none; + width: 500px; + margin: 36px auto 0 auto; + padding: 0; } li { + padding: 16px; margin: 32px; background-color: rgb(223, 136, 124); border-radius: 6px; -} \ No newline at end of file + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); +} + +h2 { + color: rgb(78, 13, 5); + font-family: 'Oswald', sans-serif; +} + +main p { + margin: 12px; + color: rgb(185, 139, 86); +} + +.highlight-goal { + background-color: rgb(218, 60, 39); +} diff --git a/100-days/styles/shared.css b/100-days/styles/shared.css index dadb138..5084fbd 100644 --- a/100-days/styles/shared.css +++ b/100-days/styles/shared.css @@ -2,6 +2,7 @@ body { background-color: rgb(233, 215, 207); text-align: center; color: rgb(83, 75, 75); + margin: 50px; } h1 { diff --git a/100-days/styles/week-one-challenge.css b/100-days/styles/week-one-challenge.css new file mode 100644 index 0000000..c6cf07a --- /dev/null +++ b/100-days/styles/week-one-challenge.css @@ -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; +} \ No newline at end of file diff --git a/100-days/week-one-challenge.html b/100-days/week-one-challenge.html new file mode 100644 index 0000000..5df0648 --- /dev/null +++ b/100-days/week-one-challenge.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + Week One Challenge + + +
+

HTML & CSS Basics Summary

+ HTML Logo +
+
+

HTML Summary

+

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! +

+ +

Learn more about all available HTML elements on the MDN HTML element reference

+

CSS Summary

+

CSS (Cascading Style Sheets) is used for styling your page content.

+ +

Learn more about all available CSS properties and values on the MDN CSS property reference

+
+ + + \ No newline at end of file