diff --git a/index.php b/index.php index ab4c9e1..586a485 100644 --- a/index.php +++ b/index.php @@ -35,39 +35,43 @@
-

Baxter facts!

+

Baxter facts!

+

Baxter is:

- + -

Baxter is not:

- +

Baxter is not:

+ +
-

Baxter loves:

- +
+

Baxter loves:

+ -

Baxter hates:

- +

Baxter hates:

+ +
diff --git a/style/style.css b/style/style.css index e69de29..81e1d8e 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,60 @@ +*, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +main { + display: flex; + flex-direction: column; + align-items: center; +} + +.welcome-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + width: 50rem; + height: auto; +} + +.baxter-info { + display: grid; + grid-template-rows: 1.5rem 1fr; + grid-template-columns: 1fr 1fr; + justify-items: center; + gap: 2rem; + width: 50rem; + height: auto; +} + +.baxter-info p { + margin: 1rem; +} + +.baxter-info ul { + margin: 1rem; + list-style-type: none; +} + +.facts-header { + grid-column: 1/4; + grid-row: 1/2; +} + +.baxter-is { + grid-column: 1/3; + grid-row: 2/3; + padding-right: 20rem; +} + +.baxter-loves { + grid-column: 2/4; + grid-row: 2/3; + padding-left: 5rem; +}