maratgaip · aiday0503 · Oct 20, 2017
diff --git a/Portfolio/Portfolio.zip b/Portfolio/Portfolio.zip
diff --git a/Portfolio/Portfolio_images/CSS.png b/Portfolio/Portfolio_images/CSS.png
diff --git a/Portfolio/Portfolio_images/HTML.png b/Portfolio/Portfolio_images/HTML.png
diff --git a/Portfolio/Portfolio_images/JavaScript.png b/Portfolio/Portfolio_images/JavaScript.png
diff --git a/Portfolio/Portfolio_images/LAMP.png b/Portfolio/Portfolio_images/LAMP.png
diff --git a/Portfolio/Portfolio_images/MEAN.png b/Portfolio/Portfolio_images/MEAN.png
diff --git a/Portfolio/Portfolio_images/RUBY.png b/Portfolio/Portfolio_images/RUBY.png
diff --git a/Portfolio/Portfolio_images/ajax.png b/Portfolio/Portfolio_images/ajax.png
diff --git a/Portfolio/Portfolio_images/angular.png b/Portfolio/Portfolio_images/angular.png
diff --git a/Portfolio/Portfolio_images/bootstrap.png b/Portfolio/Portfolio_images/bootstrap.png
diff --git a/Portfolio/Portfolio_images/c-sharp.png b/Portfolio/Portfolio_images/c-sharp.png
diff --git a/Portfolio/Portfolio_images/codeigniter.png b/Portfolio/Portfolio_images/codeigniter.png
diff --git a/Portfolio/Portfolio_images/codepen.png b/Portfolio/Portfolio_images/codepen.png
diff --git a/Portfolio/Portfolio_images/d3.png b/Portfolio/Portfolio_images/d3.png
diff --git a/Portfolio/Portfolio_images/django.png b/Portfolio/Portfolio_images/django.png
diff --git a/Portfolio/Portfolio_images/expressjs.png b/Portfolio/Portfolio_images/expressjs.png
diff --git a/Portfolio/Portfolio_images/familycontacts.png b/Portfolio/Portfolio_images/familycontacts.png
diff --git a/Portfolio/Portfolio_images/fiveEleven.png b/Portfolio/Portfolio_images/fiveEleven.png
diff --git a/Portfolio/Portfolio_images/github.png b/Portfolio/Portfolio_images/github.png
diff --git a/Portfolio/Portfolio_images/iOS-Swift.png b/Portfolio/Portfolio_images/iOS-Swift.png
diff --git a/Portfolio/Portfolio_images/jQuery.png b/Portfolio/Portfolio_images/jQuery.png
diff --git a/Portfolio/Portfolio_images/lamode.png b/Portfolio/Portfolio_images/lamode.png
diff --git a/Portfolio/Portfolio_images/linkedin.png b/Portfolio/Portfolio_images/linkedin.png
diff --git a/Portfolio/Portfolio_images/materialize.png b/Portfolio/Portfolio_images/materialize.png
diff --git a/Portfolio/Portfolio_images/mongodb.png b/Portfolio/Portfolio_images/mongodb.png
diff --git a/Portfolio/Portfolio_images/mysql.png b/Portfolio/Portfolio_images/mysql.png
diff --git a/Portfolio/Portfolio_images/nodejs.png b/Portfolio/Portfolio_images/nodejs.png
diff --git a/Portfolio/Portfolio_images/photo_of_me.jpg b/Portfolio/Portfolio_images/photo_of_me.jpg
diff --git a/Portfolio/Portfolio_images/php.png b/Portfolio/Portfolio_images/php.png
diff --git a/Portfolio/Portfolio_images/portfolio_assignment.png b/Portfolio/Portfolio_images/portfolio_assignment.png
diff --git a/Portfolio/Portfolio_images/python.png b/Portfolio/Portfolio_images/python.png
diff --git a/Portfolio/Portfolio_images/socket.png b/Portfolio/Portfolio_images/socket.png
diff --git a/Portfolio/Portfolio_images/sqlite.png b/Portfolio/Portfolio_images/sqlite.png
diff --git a/Portfolio/Portfolio_images/twitter.png b/Portfolio/Portfolio_images/twitter.png
diff --git a/Portfolio/index.html b/Portfolio/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="styles.css">
+    <title>Blog</title>
+</head>
+<body>
+<div class="header"> <h1>Jayne Doe</h1>  <h2>Master of shadows and the internet</h2></div>
+<img class="me" src="portfolio_images/photo_of_me.jpg" width="450px"/>
+<div class="about">
+    <div class="title">About </div>
+    Hello! I am an extremely driven and creative Full Stack Developer who is currently open for career opportunities as a front and back - end developer in Seattle Area.<br>
+    <br>
+    Im a recent graduate of Coding Dojo, a coding school located in Seattle, WA that teachs 3 stacks in three month.
+    I am capable of learning new technologies, very quickly and always looking for opportunities to further expands
+    my skills and grow as developer.<br>
+    <a href="#">Continue reading</a>
+</div>
+
+<div class="content">
+   <div class="box">
+       <div class="title">La Mode</div>
+       <img src="Portfolio_images/lamode.png" width="300px"/>
+       <p> La Mode is an Ecommerece website for designed products. Users are able to view
+           the available garments</p>
+       <div class="title">Technologies:</div>
+       <div class="logos">
+           <img src="Portfolio_images/php.png"/>
+           <img src="Portfolio_images/codeigniter.png" />
+           <img src="Portfolio_images/jQuery.png" />
+           <img src="Portfolio_images/ajax.png" />
+           <img src="Portfolio_images/mysql.png" />
+           <img src="Portfolio_images/HTML.png" />
+           <img src="Portfolio_images/CSS.png" />
+           <img src="Portfolio_images/bootstrap.png" />
+         <div>  <input class="button" type="button" value="La Mode"></div>
+       </div>
+   </div>
+
+    <div class="box">
+        <div class="title">Family Contacts </div>
+        <img src="Portfolio_images/familycontacts.png" width="300px"/>
+        <p> Family Contacts is a free application for managing, sharing, and vizualizing
+        your family relationship for both extended and immediate family. As an esssential
+        feature of the project, your log-in information determines who you can see and reveals how people
+        are related to you.</p>
+        <div class="title">Technologies:</div>
+        <div class="logos">
+            <img src="Portfolio_images/JavaScript.png"/>
+            <img src="Portfolio_images/mongodb.png" />
+            <img src="Portfolio_images/expressjs.png" />
+            <img src="Portfolio_images/angular.png" />
+            <img src="Portfolio_images/nodejs.png" />
+            <img src="Portfolio_images/HTML.png" />
+            <img src="Portfolio_images/CSS.png" />
+            <img src="Portfolio_images/socket.png" />
+            <div> <input class="button" type="button" value="Family Contacts"> </div>
+        </div>
+    </div>
+    <div class="box">
+        <div class="title">fiveEleven </div>
+        <img src="Portfolio_images/fiveEleven.png" width="300px"/>
+        <p> Five Eleven is a data visualization project built on the Python software stack.
+        The application transforms the developer job-hunt into a more visual, user friendly experience.
+        Based on location, technology popularity and other vast data sets, users  may easily
+        visualize the varying sizes and concentration of the junior developer job market across the nation.
+        </p>
+        <div class="title"> <b>Technologies:</b></div>
+        <div class="logos">
+            <img src="Portfolio_images/python.png"/>
+            <img src="Portfolio_images/django.png" />
+            <img src="Portfolio_images/d3.png" />
+            <img src="Portfolio_images/angular.png" />
+            <img src="Portfolio_images/sqlite.png" />
+            <img src="Portfolio_images/HTML.png" />
+            <img src="Portfolio_images/CSS.png" />
+            <img src="Portfolio_images/JavaScript.png" />
+            <img src="Portfolio_images/materialize.png"/>
+           <div> <input class="button" type="button" value="fiveEleven"> </div>
+        </div>
+    </div>
+
+    <div class="footer">
+        <div>Jdoe@gmails.com | 206 - 555 - 1212</div>
+        <span class="social">
+            <img src="Portfolio_images/github.png"/> jaynedev
+            <img src="Portfolio_images/linkedin.png"/> jayne-doe
+            <img src="Portfolio_images/twitter.png"/> jdtweets
+            <img src="Portfolio_images/codepen.png"/> jayneved
+        </span>
+
+    </div>
+
+</div>
+
+</body>
+</html>
diff --git a/Portfolio/styles.css b/Portfolio/styles.css
@@ -0,0 +1,104 @@
+body{
+    background-color:#6f5964;
+    width: 970px;
+    margin: 0 auto;
+    font-family: calibri;
+}
+.header{
+
+    border: 0px solid white;
+    background-color: lightgrey;
+    width: 960px;
+
+}
+
+h1{
+
+    display: inline-block;
+    margin-left: 20px;
+}
+h2{
+    display: inline-block;
+    margin-left: 350px;
+}
+.me{
+    border: 5px solid lightgrey;
+    margin-top: 2px;
+}
+.about {
+    display: inline-block;
+    border: 2px solid lightgrey;
+    background-color: lightgrey;
+    width: 470px;
+    position: inherit;
+    vertical-align: top;
+    height: 300px;
+    display: inline-block;
+    margin-left: 20px;
+    margin-top: 2px;
+}
+
+.box{
+    border: 0px solid lightgrey;
+    width: 307px;
+    background-color: lightgrey;
+    display: inline-block;
+    height: 600px;
+    margin: 5px;
+}
+
+.title {
+    border: 2px solid #a3a2a9;
+    color: white;
+    background-color: #a3a2a9;
+    padding: 8px;
+    font-size: large;
+    font-weight: bolder;
+
+}
+p{
+    border: 2px solid lightgrey;
+    background-color: lightgrey;
+    height: 150px;
+
+
+}
+.logos img {
+    width:44px;
+    height: 40px;
+    position:inherit;
+    padding: 2px;
+    margin: 3px;
+
+}
+.logos{
+    border: 2px solid lightgrey;
+    background-color: lightgrey;
+    width: 280px;
+    margin: 10px;
+    display: inline;
+}
+.button{
+    text-align: center;
+    color: white;
+    background-color: green;
+    position: relative;
+    padding: 5px;
+    border-radius: 10px;
+    font-weight: bolder;
+    margin-left: 100px;
+}
+.footer{
+
+    background-color: lightgrey;
+    text-align: center;
+    width: 960px;
+    margin-top: 10px;
+    height: 70px;
+}
+.social img{
+    width: 30px;
+    height: 30px;
+
+}
+