Added a shitton of styling

seanpadgett88 · Aug 19, 2017 · 2012f3b · 2012f3b
1 parent 231dec9
commit 2012f3b
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -12,33 +12,39 @@
       <p class = "name-under">THE BEST FOOD BLOG ON THE WEB</p>
     </div>
       <div class = "icons">
-        <img src = "Images/fb-icon.png"/>
-        <img src = "Images/twit-icon.png"/>
-        <img src = "Images/gp-icon.png"/>
-        <img src = "Images/insta-icon.png"/>
-        <img src = "Images/flic-icon.png"/>
-        <img src = "Images/pint-icon.png"/>
-        <img src = "Images/rss-icon.png"/>
-        <img src = "Images/mail-icon.png"/>
+        <a class = "main-icons" href ="#"><img src = "Images/fb-icon.png"/></a>
+        <a class = "main-icons" href ="#"><img src = "Images/twit-icon.png"/></a>
+        <a class = "main-icons" href ="#"><img src = "Images/gp-icon.png"/></a>
+        <a class = "main-icons" href ="#"><img src = "Images/insta-icon.png"/></a>
+        <a class = "main-icons" href ="#"><img src = "Images/flic-icon.png"/></a>
+        <a class = "main-icons" href ="#"><img src = "Images/pint-icon.png"/></a>
+        <a class = "main-icons2" href ="#"><img src = "Images/rss-icon.png"/></a>
+        <a class = "main-icons" href ="#"><img src = "Images/mail-icon.png"/></a>
       </div>
     <hr class = "clearfix">
     <header>
       <h1>Chocolate Pizza</h1>
       <p class = "post-date">POSTED ON 15 DEC 2013/DESSERTS</p>
       <p class = "print">PRINT</p>
-      <img src = "Images/print-icon.png"/>
-      <img src="Images/choco-pizza.png"/>
-      <p></p>
-      <p></p>
-      <p></p>
+      <a href ="#"><img src = "Images/print-icon.png" class = "prnt-icon"/></a>
+      <img src="Images/choco-pizza.png" class = "choco"/>
+      <br>
+      <p class = "main-text">Spicy jalapeno bacon ipsum dolor amet pastrami pig doner beef ribs, ham pork belly bacon kevin. Shankle beef ribs tail ball tip corned beef cupim pig. Sausage beef ribs hamburger cow tongue. Ground round pastrami beef ribs sirloin capicola, burgdoggen meatball short ribs rump ham frankfurter jowl.</p>
+      <br>
+      <p class = "main-text">Salami flank shankle, biltong chuck cupim burgdoggen ball tip rump leberkas jerky. Short loin pork loin turkey meatball tri-tip tenderloin capicola flank tongue. Pastrami frankfurter ground round ham hock. Drumstick alcatra sirloin, boudin ribeye salami capicola. Fatback t-bone pig jerky meatball kevin tenderloin prosciutto drumstick meatloaf.</p>
+      <br>
+      <p class = "main-text">Shankle pancetta chicken, ham sausage corned beef drumstick tri-tip spare ribs. Landjaeger pork belly pig fatback meatball turducken shankle pastrami leberkas tongue pork beef ribs burgdoggen jerky. Filet mignon chuck tenderloin turkey biltong drumstick. T-bone strip steak ribeye drumstick frankfurter biltong pancetta capicola picanha alcatra fatback pig pork belly shankle brisket.</p>
+      <br>
       <div class = "ingredients">
-        <ul>
+        <ul class = "left-list">
           <li>1 1/2 cups milk</li>
           <li>1/2 cup mascarpone</li>
           <li>1/2 tsp pink salt</li>
           <li>1 lb Black Mission Figs</li>
           <li>1/2 cup brown sugar</li>
           <li>2-4 tbsp water</li>
+        </ul>
+        <ul class = "right-list">
           <li>1 1/2 cups heavy cream</li>
           <li>1/3 granulated sugar</li>
           <li>2 egg yolks</li>
@@ -47,22 +53,22 @@ <h1>Chocolate Pizza</h1>
           <li>1 cup honey roasted pecans, roughly chopped</li>
         </ul>
       </div>
-      <hr>
+      <hr class = "clearfix">
       <div class = "profile">
-        <img src = "Image/van-pic.png"/>
+        <img class = "user-pic" src = "Image/van-pic.png"/>
         <h2>Vanessa Stevenson</h2>
         <p>Food enthusiast, photography fan. Add a pinch of raw foodism and that's pretty much who I am.</p>
       </div>
-      <p class = "button"><a href="#">SHARE RECIPE</a></p>
+      <p><a class = "button" href="#">SHARE RECIPE</a></p>
       <div class = "header-end">
-        <hr>
+        <hr class = "clearfix">
         <img src = "Image/small-logo.png"/>
-        <hr>
+        <hr class = "clearfix">
       </div>
     </header>
     <footer>
-      <p>Delicious &copy; 2013 &middot; All Rights Reserved.</p>
-      <p>Proudly published with Ghost</p>
+      <p class = "foot-text">Delicious &copy; 2013 &middot; All Rights Reserved.</p>
+      <p class = "foot-text">Proudly published with Ghost</p>
     </footer>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -25,6 +25,9 @@
 
 .clearfix {
   clear: both;
+  width: 90%;
+  margin-right: 5%;
+  margin-left: 5%;
 }
 
 .name-under {
@@ -54,4 +57,68 @@ h1 {
 .print {
   float: right;
   margin-left: 0%;
+  margin-right: 5%;
+}
+
+.prnt-icon {
+  float: right;
+}
+
+.choco {
+  width: 90%;
+  margin-left: 5%;
+  margin-right: 5%;
+  margin-top: 1%;
+}
+
+.main-text {
+  width: 90%;
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
+.ingredients {
+  background-image: url("Image/list-bg.png");
+  width: 90%;
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
+.left-list {
+  float: left;
+  width: 40%;
+  margin: 0%;
+  list-style-type: square;
+}
+
+ .right-list {
+   float: right;
+   width: 50%;
+   margin: 0%;
+   list-style-type: square;
+ }
+
+ .user-pic {
+   width: 3%;
+
+ }
+
+.foot-text {
+  text-align: center;
+  color: rgb(163, 163, 163);
+}
+
+.button {
+  float: right;
+  margin-right: 5%;
+  width: 15%;
+  background-color: red;
+  text-decoration: none;
+  color: white;
+  padding: 5px;
+  text-align: center;
+}
+
+.main-icons2 {
+margin-left: 7px;
 }