layout fix

cyr15103 · Oct 5, 2017 · f5e5dbd · f5e5dbd
1 parent 64f738b
commit f5e5dbd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/layout-practice/bg-img.png b/layout-practice/bg-img.png
diff --git a/layout-practice/index.html b/layout-practice/index.html
@@ -18,13 +18,13 @@ <h4><a href="#">TRY NOW</a></h4>
     </header>
     <article id="white-bg-1">
     	<div class="two-column">
-        <section>
+        <section class="para-spacing">
         	<h4 class="headings-1">JANUARY 28, 2016</h4>
             <h2>And here's a random photo of a dog <span>....</span></h2>
             <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.</p><p>Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
         </section>
         <section>
-        <img src="images/dog-1.png" alt="golden dog" class="full-width dog-1">
+         <div class="dog-spacing-1"><img src="images/dog-1.png" alt="golden dog" class="full-width dog-1"></div>
         </section>
         </div>
         <section>
@@ -50,7 +50,7 @@ <h3>Some awesome features</h3>
         </section>
   		<div class="two-column">
          <section>
-        <img src="images/dog-2.png" alt="reddish golden dog" class="full-width">
+        <div class="dog-spacing-2"><img src="images/dog-2.png" alt="reddish golden dog" class="full-width"></div>
         </section>
         <section class="center-content">
         	<h4 class="headings-3">Start ASAP</h4>

diff --git a/layout-practice/layout-practice.css b/layout-practice/layout-practice.css
@@ -217,6 +217,7 @@ footer {
 	main header {
 		background-image:url("bg-img.png");
 		background-size:cover;
+		background-position:center;		
 		height:450px;
 		width:100%;
 		margin:0;
@@ -552,12 +553,17 @@ footer {
 		margin-top:30px;
 	}
 
-	.dog-1 {
-		margin-left:60px;
+	.dog-spacing-1 {
+		margin-left:5%;
+		margin-right:;
 		margin-top:-90px;
 		margin-bottom:100px;
 	}
 
+	.dog-spacing-2 {
+		margin-left:15%;
+	}
+
 	.headings-1 {
 		margin-top:70px;
 	}
@@ -626,6 +632,6 @@ footer {
 	}
 
 	#brand-names .shrink-1st {
-		margin-left:15%;
+		margin-left:10%;
 	}
 }