Miah-Davis · Miah-Davis · Aug 6, 2020 · Aug 10, 2020
diff --git a/index.html b/index.html
@@ -1,11 +1,69 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <link rel="stylesheet" href="style\index.css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-</head>
-<body>
-
-</body>
-</html>
+  </head>
+  <body>
+    <section class="heading">
+      <div>
+        <h1>
+          Miah Bandicoot
+        </h1>
+      </div>
+      <div>
+        <nav>
+          <a class=b1 href="C:\Users\thefa\desktop\Git-Flow-Assignments\User-Interface-II\index.html"
+            >Home</a
+          >
+          <a class=b2
+            href="C:\Users\thefa\desktop\Git-Flow-Assignments\User-Interface-II\about.html"
+            >About</a
+          >
+          <a class=b3
+            href="C:\Users\thefa\desktop\Git-Flow-Assignments\User-Interface-II\contact.html"
+            >Contact</a
+          >
+          <a class=b4
+            href="C:\Users\thefa\desktop\Git-Flow-Assignments\User-Interface-II\projects.html"
+            >Projects</a
+          >
+        </nav>
+      </div>
+      <div>
+        <h2>Introducing My Site</h2>
+        <p>
+          Once your repository is set up, practice what you learned today to
+          create a portfolio site from the wireframe of your choosing. **You may
+          choose any of the three wireframes in the "Wireframe Options" folder
+          above.** Your complete project should look similar to the wireframe
+          you chose, and include all of the following elements:Yes this was
+          copied.
+        </p>
+      </div>
+    </section>
+
+    <div class="maini">
+      <img src=https://picsum.photos/seed/picsum/200/300>
+    </div>
+    <div class="actimg">
+      <img src=https://picsum.photos/seed/picsum/200/300> 
+      <img src=https://picsum.photos/seed/picsum/200/300> 
+      <img src=https://picsum.photos/seed/picsum/200/300> 
+      <img src=https://picsum.photos/seed/picsum/200/300>
+
+      <p class="descr">
+        Some text will go here to describe the images to the left
+      </p>
+
+    </div>
+    <nav class=footer>
+      <a
+        href="C:\Users\thefa\desktop\Git-Flow-Assignments\User-Interface-II\contact.html"
+        >Contact Me</a
+      >
+    </nav>
+  </body>
+</html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,105 @@
-/* Add CSS styling here */
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  max-width: 100%;
+  /* border: 2px solid teal; */
+}
+head {
+  font-size: 62.5%;
+}
+body {
+  font-size: 1.5rem;
+}
+h1 {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+nav {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2rem;
+
+}
+nav a{
+      text-decoration: none;
+  border: 2px solid black;
+}
+h2 {
+  text-align: center;
+}
+
+.heading p {
+  width: 70%;
+  margin: 0 auto;
+  margin-bottom: 2rem;
+}
+
+.maini {
+  height: 30rem;
+}
+.maini img {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+}
+.actimg {
+  display: flex;
+  flex-direction: row;
+  width: 60%;
+
+}
+.descr {
+  display: flex;
+  width: 20%;
+  justify-content: center;
+}
+.footer{
+padding: 2rem 0;
+background-color: cadetblue;
+}
+@media(max-width:800px){
+nav{
+
+  flex-direction: column;
+  align-items: center;
+
+}
+nav a{
+  text-align: center;
+}
+.b1, .b2{
+width:45%;
+ justify-content: center;
+}
+.b3, .b4{
+  width: 45%;
+  justify-content: center;
+}
+.maini{
+  display: flex;
+}
+.maini img{
+  width:90%;
+  margin:0 auto;
+}
+.actimg{
+  flex-flow: row wrap;
+ justify-content: center;
+ margin:2rem auto;
+ width:80%;
+}
+.actimg img{
+  width:45%;
+  justify-content: center;
+  margin: 1rem auto;
+}
+.descr{
+  text-align: center;
+}
+}
+@media(max-width:500px){
+.descr{
+  width: 50%;
+}
+}