diff --git a/css/style.css b/css/style.css index 75e9841e..ee7f66a7 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,56 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ + header, footer { + margin: 0 2em; + padding: 1em 0em; + background-color: aquamarine; + } + + h1 { + font-size: 40px; + } + + img { + width: 40rem; + height: 18rem; + display: block; + margin: 2rem 0; + } + + + body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + background-color: lightcyan; + } + + .menu { + display: flex; + flex-direction: row; + justify-content: center; + } + + button { + padding: 1rem 1rem; + margin: 1rem; + font-size: 20px; + border-radius: 10px; + } + + main { + padding: 2rem; + } + + article { + margin: 5rem 0; + } + + + article:first-child { + font-size: larger; + color: darkblue; + } + + footer { + text-align: center; + } diff --git a/index.html b/index.html index 67dfc7f5..4558bb22 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,36 @@ +
+ +
+
+
+

Experiencing Peace and Joy

+ Lake reflecting green trees surronding the lake. There is a long wooden bridge over the lake +

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium officiis ipsa rerum, deserunt nihil quod blanditiis dolorem, omnis possimus aspernatur maxime at eos ex pariatur! Things that bring me both peace and joy. Read more...

+
+
+

Experiencing Peace

+ Small house in a forest. Morning sunrays falling over the trees and top of the house.Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, vero inventore quas nam mollitia excepturi? Things that bring me peace. Read more...

+
+

Experiencing Joy

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dignissimos sed aut culpa ullam cumque!Things that bring me joy. Read more...

+
+ +
+
+