Swaroopaamruthwar · Swaroopaamruthwar · Jan 6, 2022
diff --git a/src/Assignment-4/assignment4.css b/src/Assignment-4/assignment4.css
@@ -5,3 +5,136 @@
 width: 100%;
 height: 100%;
 }
+  body {
+    font-family: 'Raleway', sans-serif;
+  }
+  header {
+    background: #92E0E5;
+    color: white;
+    height: 50px;
+    padding: 0 25px;
+  }
+  header h1 {
+    float: left;
+    text-indent: -9999px;
+    background-image: url('./images/image4.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding:0px;
+    height: 35px;
+    width: 35px;
+    margin-top: 8px;
+  }
+
+
+  header nav {
+    float: right;
+  }
+  nav li {
+    display: inline-block;
+    padding: 17px 10px;
+  }
+  nav li:hover {
+    background: #3F8DA7;
+    color: white;
+    cursor: pointer;
+  }
+  #hero {
+    background: url('./images/image11.jpg') no-repeat;
+    background-size: cover;
+    text-align: center;
+    padding: 50px 0;
+    margin-bottom: 50px;
+  }
+  #hero img {
+    display: block;
+  }
+  #hero img {
+    display: block;
+    margin: auto;
+    margin-bottom: 25px;
+    border-radius: 50%;
+    border: 5px solid #3F8DA7;
+  }
+  #hero h2 {
+    font-size: 30px;
+    margin-bottom: 25px;
+  }
+  #hero a {
+    background: white;
+    border: 5px solid #3F8DA7;
+    color: #3F8DA7;
+    padding: 5px 10px;
+    text-decoration: none;
+  }
+  #hero a:hover {
+    padding: 5px 10px;
+    background: #3F8DA7;
+    color: white;
+  }
+  .three-col {
+    width: 30%;
+    display: inline-block;
+    text-align: center;
+    vertical-align: top;
+    margin: 0 10px;
+  }
+  h3{
+    color:#06445898;
+  }
+  .three-col img {
+    border-radius: 50%;
+    border: 3px solid #3F8DA7;
+    height: 200px;
+    width: 200px;
+    margin: 25px 0;
+  }
+  .btn {
+    background: white;
+    border: 5px solid #3F8DA7;
+    color: #3F8DA7;
+    padding: 5px 10px;
+    text-decoration: none;
+  }
+
+  .btn:hover {
+    background: #3F8DA7;
+    color: white;
+    padding: 5px 10px;
+  }
+
+  .three-col p {
+    margin-bottom: 40px;
+  }
+footer {
+  background: #3F8DA7;
+  color: white;
+  margin-top: 40px;
+  padding: 20px 0;
+  text-align: center;
+}
+footer ul {
+  margin: 40px 0;
+}
+footer li {
+  display: inline-block;
+  margin: 0 25px;
+}
+.link {
+  color: white;
+  /* text-underline-position: below; */
+}
+
+.link:hover {
+  color: #92E0E5;
+}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/Assignment-4/assignment4.html b/src/Assignment-4/assignment4.html
@@ -5,16 +5,69 @@
 	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 	<meta http-equiv="Pragma" content="no-cache" />
 	<meta http-equiv="Expires" content="0" />
+	<link rel="stylesheet" type="text/css" href="./reset.css">
+	<link rel="stylesheet" type="text/css" href="./assignment4.css">
+	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 	<script src="bundle.js" type="text/javascript"></script>
 </head>
 
 <body>
 	<div id="container">
+			<header>
+			  <h1>Dog Party!</h1>
+			  <nav>
+				<ul>
+				  <li>Home</li>
+				  <li>Things</li>
+				  <li>Stuff</li>
+				</ul>
+			  </nav>
+			</header>
+
+			<section id="hero">
+			  <h2>A Site About Some Dogs</h2>
+			  <img src="images/image3.jpg" alt="hero dog"/>
+              <a href="http://corgis-in-space.tumblr.com/" target="_blank" class="btn">What are Dogs</a>
 
-	<!-- Start your code from here -->
-
-
-	<!-- End your code -->
+			</section>
+
+			<section>
+				<article class="three-col">
+				  <h3>Home</h3>
+				  <img src="./images/image6.jpg" alt="first image"/>
+				  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias obcaecati ratione error tempora dolorem totam, tempore minus rerum magnam consequatur.</p>
+				  <a href="https://en.wikipedia.org/wiki/Dog" class="btn">Go Home</a>
+				</article>
+
+				<article class="three-col">
+				  <h3>Things</h3>
+				  <img src="./images/image5.jpg" alt="second image"/>
+				  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti dolorum, in, harum maxime adipisci eos ea reprehenderit sapiente impedit laudantium cupiditate sed voluptatum similique illum?</p>
+				  <a href="http://www.dog-adoption-and-training-guide.com/about-dogs.html" class="btn">More Things</a>
+				</article>
+
+				<article class="three-col">
+				  <h3>Stuff</h3>
+				  <img src="./images/image8.jpg" alt="third image"/>
+				  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil ipsa quia, unde asperiores fuga iste? Possimus asperiores eligendi labore doloremque.</p>
+				  <a href="http://www.livescience.com/13305-facts-dog-breeds-genetics-pets.html" class="btn">Some Stuff</a>
+				</article>
+			  </section>
+
+
+			<footer>
+			  <h4>Learn About Dogs Online</h4>
+			  <ul>
+				<li><img src="images/image13.png"/></li>
+				<li><img src="images/image10.png"/></li>
+				<li><img src="images/image7.png"/></li>
+				<li><img src="images/image9.png"/></li>
+			  </ul>
+			  <a href="https://github.com/turingschool-examples/introductory-static-site" target="_blank" class="link">See this on GitHub</a>
+			</footer>
+
+
+
 
 	</div>
 

diff --git a/src/Assignment-4/images/image1.png b/src/Assignment-4/images/image1.png
diff --git a/src/Assignment-4/images/image10.png b/src/Assignment-4/images/image10.png
diff --git a/src/Assignment-4/images/image11.jpg b/src/Assignment-4/images/image11.jpg
diff --git a/src/Assignment-4/images/image12.png b/src/Assignment-4/images/image12.png
diff --git a/src/Assignment-4/images/image13.png b/src/Assignment-4/images/image13.png
diff --git a/src/Assignment-4/images/image14.png b/src/Assignment-4/images/image14.png
diff --git a/src/Assignment-4/images/image15.png b/src/Assignment-4/images/image15.png
diff --git a/src/Assignment-4/images/image16.png b/src/Assignment-4/images/image16.png
diff --git a/src/Assignment-4/images/image17.png b/src/Assignment-4/images/image17.png
diff --git a/src/Assignment-4/images/image18.png b/src/Assignment-4/images/image18.png
diff --git a/src/Assignment-4/images/image19.png b/src/Assignment-4/images/image19.png
diff --git a/src/Assignment-4/images/image2.png b/src/Assignment-4/images/image2.png
diff --git a/src/Assignment-4/images/image20.png b/src/Assignment-4/images/image20.png
diff --git a/src/Assignment-4/images/image21.png b/src/Assignment-4/images/image21.png
diff --git a/src/Assignment-4/images/image3.jpg b/src/Assignment-4/images/image3.jpg
diff --git a/src/Assignment-4/images/image4.png b/src/Assignment-4/images/image4.png
diff --git a/src/Assignment-4/images/image5.jpg b/src/Assignment-4/images/image5.jpg
diff --git a/src/Assignment-4/images/image6.jpg b/src/Assignment-4/images/image6.jpg
diff --git a/src/Assignment-4/images/image7.png b/src/Assignment-4/images/image7.png
diff --git a/src/Assignment-4/images/image8.jpg b/src/Assignment-4/images/image8.jpg
diff --git a/src/Assignment-4/images/image9.png b/src/Assignment-4/images/image9.png
diff --git a/src/Assignment-4/reset.css b/src/Assignment-4/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}