added borders and margins

Reese1243 · Oct 21, 2023 · db7b5fb · db7b5fb
1 parent f368af6
commit db7b5fb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/wwr/index.html b/wwr/index.html
@@ -35,7 +35,7 @@ <h4>Make memories with Dry Oar!</h4>
             </section>
         </div>
         <main class="home-grid">
-            <section class="river-card">
+            <section class="rivers-card">
                 <img class="card-img" src="images/rivers.jpg" alt="river in forest">
                 <img class="icon" src="images/river_icon.png" alt="river icon">
                 <h2>Rivers</h2>

diff --git a/wwr/styles/style.css b/wwr/styles/style.css
@@ -27,6 +27,9 @@
 body {
     background-color: var(--primary-color);
     font-family: var(--paragraph-font);
+    font-size: 20px;
+    margin: 0;
+    padding: 0;
 }
 
 h2 {
@@ -43,6 +46,10 @@ header {
     background-color: var(--secondary-color);
 }
 
+#logo_link {
+    padding-top: 5px;
+}
+
 .logo {
     width: 80px;
 }
@@ -51,6 +58,7 @@ nav a {
     color: var(--nav-link-color);
     text-align: center;
     text-decoration: none;
+    padding: 35px;
 }
 nav a:hover {
     color: var(--nav-hover-link-color);
@@ -68,6 +76,8 @@ nav a:hover {
 .home-title {
     color: var(--headline-color-on-color);
     font-family: var(--heading-font);
+    font-size: 2em;
+    margin-top: 10px;
 }
 
 h4 {
@@ -82,6 +92,10 @@ h4 {
     background-color: var(--nav-background-color);
     color: var(--nav-link-color);
     text-decoration: none;
+    font-size: 18px;
+    padding: 15px 30px;
+    margin-top: 50px;
+    border-radius: 5px;
 }
 .book:hover, .join:hover {
     background-color: var(--nav-hover-background-color);
@@ -91,31 +105,53 @@ h4 {
 main section {
     text-align: center;
 }
+main section img {
+    box-sizing: border-box;
+}
+
+.rivers-card, .camping-card, .rapids.card {
+    margin: 200px 0;
+}
+
+.card-img {
+    border: 10px solid var(--secondary-color);
+}
 
 .icon {
     width: 80px;
+    padding-top: 10px;
 }
 
 #background {
     background-color: var(--secondary-color);
     height: 725px;
 }
 
+.mountains {
+    margin: 100px 0;
+}
+
 .msg {
     background-color: var(--paragraph-background-color);
+    line-height: 1.5em;
+    padding: 35px;
 }
 .msg h2 {
     color: var(--accent2-color);
     font-family: var(--heading-font);
 }
 .msg p {
     color: var(--accent2-color);
+    font-size: .8em;
+    padding-bottom: 15px;
 }
 
 
 footer {
     background-color: var(--secondary-color);
     color: var(--accent2-color);
+    padding: 25px 50px;
+    margin-top: 200px;
 }
 footer a {
     color: var(--nav-link-color);
@@ -130,4 +166,7 @@ footer p {
 footer p a:hover {
     background-color: var(--nav-hover-background-color);
     color: var(--nav-hover-link-color);
+}
+footer .social img {
+    padding-top: 15px;
 }