microverseinc · alvintan626 · Apr 24, 2019 · Apr 24, 2019
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,100 @@
+/* .project-tile {
+  margin: 2000px;
+} */
+
+@media only screen and (min-width: 768px) {
+    /* desktop */
+  body {
+      background: #b3b3e7 !important;
+  }
+}
+
+
+@media only screen and (min-width: 600px) {
+    /* mobiles */
+  body {
+      background: rgb(0, 238, 159) !important;
+  }
+}
+
+
+/* body{
+    background: red;
+} */
+
+
+
+body{
+
+  background-color: rgb(236, 240, 255);
+
+}
+@media only screen and (max-width:500px){
+  h1{
+    color: rgb(24, 29, 24);
+  }
+
+  body{
+    background: rgb(207, 240, 157);
+  }
+
+
+}
+
+
+#navbar {
+  background-color: rgb(0, 238, 159) ;
+  position: fixed; /* Set the navbar to fixed position */
+  top: 0; /* Position the navbar at the top of the page */
+  /* Full width */
+  width: 100%; 
+}
+
+.heightEqual{
+  height : 760px ;
+  width: 100%;
+}
+
+.projectColor{
+  color: white !important;
+  font-weight: 600;
+
+}
+
+.projectsElements{
+  text-align: center;
+  margin-top: 2%;
+}
+.headerDiv{
+  background: rgb(140, 173, 245);
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+
+
+
+}
+
+.lastDiv{
+  background-color: rgb(135, 240, 135);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.imagesSize{
+  width: 40%;
+
+}
+a{
+  font-size: 30px;
+}
+
+.portafolioColor{
+  background: rgb(198, 200, 209);
+
+} 
+
diff --git a/index.html b/index.html
@@ -1,26 +1,127 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Fork Me! FCC: Test Suite Template</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
   </head>
 
-  <body>
-    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
 
-    <!--
+  <body>    
+    <nav class="navbar fixed-top navbar-dark bg-dark d-flex justify-content-end" id="navbar">
+          <span class="navbar-brand mb-0 h1 text-white ">
+              <a href="#projects" class="projectColor">Projects</a>  </span>
+        </nav>  
+        <br>
+        <br>
+        <div class="container-fluid" >
+          <div class="row">
+            <div class="col-12 headerDiv" id="welcome-section">
+              <h1 class="animated bounce">personal portafolio</h1>
+              <p class="animated bounceInDown">I am  a web Developer</p>
+              </div>
+
+            </div>
+
+            <div class="row border border-dark portafolioColor" id="projects">
+              <div class="col-12 col-md-6 ">
+                  <div class="project-tile projectsElements delay-1s animated bounceInLeft" >
+                    <a href="https://www.google.com">Project Google</a>
+                    <br>
+                    <img src="https://cdn.pixabay.com/photo/2013/01/29/00/47/google-76517__480.png" alt="" class="imagesSize">
+
+                  </div>
+
+
+              </div>
+              <div class="col-12 col-md-6">
+                  <div class="project-tile projectsElements delay-1s animated bounceInRight">
+                    <a href="https://www.amazon.com">Project Amazon</a>
+                    <br>
+                  <img src="https://cdn.pixabay.com/photo/2017/03/01/09/12/shop-2107916__480.jpg" alt="" class="imagesSize">
+
+                  </div>
+
+              </div>
+              <div class="col-12 col-md-6 ">
+                  <div class="project-tile projectsElements delay-1s animated bounceInLeft">
+                    <a href="https://www.facebook.com">Project facebook</a>
+                    <br>
+                  <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__480.jpg" alt="" class="imagesSize">
+
+                  </div>
+
+              </div>
+              <div class="col-12 col-md-6">
+                  <div class="project-tile projectsElements delay-1s animated bounceInRight">
+                    <a href="https://www.twitter.com">Project twitter</a>
+                    <br>
+                  <img src="https://cdn.pixabay.com/photo/2014/03/22/22/17/twitter-292994__480.jpg" alt="" class="imagesSize">
+
+                  </div>
+
+              </div>
+
+
+
+
+            </div>
 
-    Hello Camper!
+            <div class="row">
+              <div class="col-12 lastDiv">
+                <br>
+                  <h3 class="text-center mt-1">Media Links </h3>  
+                    <a id="profile-link" class="text-center mx-auto" target="_blank" href="https://www.github.com">Github</a>
+                </div>
+              </div>
+            </div>
 
-    For now, the test suite only works in Chrome!
-    Please read the README below in the JS Editor before beginning.
-    Feel free to delete this message once you have read it.
-    Good luck and Happy Coding!
 
-    - The freeCodeCamp Team
 
+
+
+          </div>
+
+
+
+
+
+
+
+
+
+
+
+      <!-- end of projects -->
+
+
+
+
+    <!-- end of welcome section -->
+
+
+    <!--
+
+      Hello Camper!
+
+      For now, the test suite only works in Chrome!
+      Please read the README below in the JS Editor before beginning.
+      Feel free to delete this message once you have read it.
+      Good luck and Happy Coding!
+
+      - The freeCodeCamp Team
+
     -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
     <script  src="js/index.js"></script>
+    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
+
+
   </body>
 </html>
diff --git a/try.html b/try.html