diff --git a/Two-Truths-One-Lie/assets/image-casa-cristal.jpg b/Two-Truths-One-Lie/assets/image-casa-cristal.jpg new file mode 100644 index 00000000..f3d5dbec Binary files /dev/null and b/Two-Truths-One-Lie/assets/image-casa-cristal.jpg differ diff --git a/Two-Truths-One-Lie/assets/image-lago-retiro.jpg b/Two-Truths-One-Lie/assets/image-lago-retiro.jpg new file mode 100644 index 00000000..eb1f6c57 Binary files /dev/null and b/Two-Truths-One-Lie/assets/image-lago-retiro.jpg differ diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html index 37cdbfa1..b785f1cb 100644 --- a/Two-Truths-One-Lie/index.html +++ b/Two-Truths-One-Lie/index.html @@ -1,24 +1,59 @@ - - - - Our Grid Project - - - - - - - -
-

Two Truths, One Lie

+ + + + + Our Grid Project + + + + + + + + + +
+

Two Truths, One Lie

+

Can you guess which statement is false?

-
- + +
+ +
+
+ image-casa-cristal +

Abel Cañas

+
+
+
    +
  1. I have successfully climbed Mount Everest in Nepal during spring.
    2. +
  2. I speak three languages fluently: Spanish, English, and Japanese.
    3. +
  3. I have a pet iguana named Spike at home.
    4. +
+
+
+ +
+
+ image-lago-retiro +

Jonathan Estor

+
+
+
    +
  1. I have never been on an airplane in my entire life yet.
    2. +
  2. I can play the piano by ear quite beautifully.
    3. +
  3. I once met a famous movie star at a Hollywood premiere event.
    4. +
+
+
+
+ - + + \ No newline at end of file diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css index b8e36944..97dab153 100644 --- a/Two-Truths-One-Lie/styles.css +++ b/Two-Truths-One-Lie/styles.css @@ -28,6 +28,104 @@ * take a screenshot at laptop and Moto G4 device sizes in Devtools */ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap"); + +:root { + --primary-color: #82977a; + --secondary-color: #d9ead3; + --text-color: #333333; + --text-font: "Poppins", sans-serif; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body { - font: 100% "Poppins", sans-serif; + background-color: var(--primary-color); + width: 100%; + max-width: 100%; + margin: 0 auto; +} + +h1, +h2, +h3, +p, +a, +li { + margin: 0; + font-family: var(--text-font); + color: var(--text-color); +} + +img { + width: 7.25rem; + height: 6.25rem; +} + +header, +footer { + text-align: center; + padding: 3rem 0 1.5rem; +} + +.container { + padding: 0 1.5rem 0; +} + +.content { + background-color: var(--secondary-color); + margin: 1rem 0 2rem; + padding: 1.5rem; +} + +.content-header { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + margin-bottom: 2rem; +} + +.content-header-title { + font-weight: 500; + font-size: 1.5rem; +} + +.content-body { + padding: 0 1rem; + font-size: 1.15rem; + line-height: 1.5rem; + text-align: left; +} + +.content-body li { + margin-bottom: 0.8rem; + font-size: 0.95rem; + line-height: 1.3rem; +} + +@media screen and (min-width: 768px) { + .container { + padding: 0 3rem 0; + display: flex; + align-items: center; + gap: 2rem; + } + + .content { + margin: 2rem auto; + width: 26.25rem; + height: 20rem; + } + + footer { + position: absolute; + width: 100%; + bottom: 0; + padding-bottom: 2rem; + } }