Ada-C12 · YasminM11 · Sep 23, 2019 · Sep 28, 2019 · Sep 29, 2019 · Sep 29, 2019
diff --git a/about.html b/about.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>About Me</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
+</head>
+
+<body>
+  <nav>
+    <div class="list2">
+      <ul>
+        <li><a href="index.html">HOME</a></li>
+        <li><a href="about.html">About me</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="hobby.html">Hobby</a></li>
+      </ul>
+    </div>
+  </nav>
+  <header>
+
+    <div class="about">
+      <h2>Hi thank you for visiting my page, I am Yasmin a student software devoloper at Ada Academy!</h2>
+        <div class="about-section">
+          <h1>About Me</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at mauris tortor. Sed efficitur luctus sem
+            pretium
+            efficitur. Curabitur pharetra blandit dignissim. Praesent luctus, eros quis lobortis euismod, libero tortor
+            molestie
+            arcu, ut iaculis est sem sit amet dui. Nam hendrerit erat in congue pharetra. Maecenas sit amet volutpat
+            orci, sed
+            semper magna. Phasellus at vulputate justo.
+
+            Donec sed felis lectus. Praesent eu lectus sit amet metus varius venenatis quis eget eros. Praesent
+            hendrerit tortor id
+            risus ultrices accumsan. Pellentesque elementum nulla vestibulum, hendrerit urna in, efficitur nibh. Nullam
+            sit amet
+            arcu vel augue interdum efficitur. Nulla vitae scelerisque arcu. In lobortis molestie lacus eget volutpat.
+            In sodales,
+            lectus quis hendrerit gravida, nunc nulla luctus lorem, ut euismod lectus justo quis odio. Integer at massa
+            diam.
+            Maecenas fringilla mattis pulvinar. Aliquam vitae odio efficitur, vehicula nibh pharetra, rhoncus arcu. Sed
+            lacinia
+            vulputate massa non sodales. Phasellus in hendrerit dolor, ac condimentum risus. Integer sagittis sapien
+            eget tincidunt
+            tincidunt. </p>
+        </div>
+        <div class="skills">
+          <h1>Skills</h1>
+          <section class="skills-section">
+              <ul>
+                <li>HTML, CSS</li>
+                <li>Ruby</li>
+                <li>SQL</li>
+                <li>Microsoft office and Excle</li>
+              </ul>
+          </section>
+         </div>
+      </div>
+  </header>
+
+  <footer>
+    <p>2019 Yasmin</p>
+    <p>Contact: <a href="mailto:[email protected]">
+        [email protected]</a></p>
+  </footer>
+
+</body>
+</html>
diff --git a/hobby.html b/hobby.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Hobby</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
+</head>
+
+<body>
+  <nav>
+    <div class="list2">
+      <ul>
+        <li><a href="index.html">HOME</a></li>
+        <li><a href="about.html">About me</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="hobby.html">Hobby</a></li>
+      </ul>
+    </div>
+    <section class="portfolio">
+      <div class="hobby">
+        <p>When I am not coding I love to crochet "dolls"</p>
+        <p>Amigurumi is a popular type of crochet.The word of two Japanese terms:
+          The first part of the word is “Ami” means knit OR crochet
+          The second part is gurumi, means stuffed doll/toy.
+          Essentially, it means "knit/crocheted stuffed toy.<br></p>
+      </div>
+    </section>
+
+    <section class="image">
+      <img src="img/doll1.jpg" alt="My picture" width="300" height="400" />
+      <img src="img/doll3.jpg" alt="My picture" width="300" height="400" />
+      <img src="img/bookmark.jpg" alt="My picture" width="300" height="400" />
+    </section>
+    </header>
+    <footer>
+      <p>2019 Yasmin</p>
+      <p>Contact: <a href="mailto:[email protected]">
+          [email protected]</a></p>
+    </footer>
+
+</body>
+</html>
diff --git a/img/Yasmin.JPG b/img/Yasmin.JPG
diff --git a/img/bookmark.JPG b/img/bookmark.JPG
diff --git a/img/doll1.jpg b/img/doll1.jpg
diff --git a/img/doll3.jpg b/img/doll3.jpg
diff --git a/img/doll4.jpg b/img/doll4.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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>Welcome to my personal portfolio</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
+  </head>
+
+  <body>
+
+      <nav>
+        <div class="list">
+          <ul>
+            <li><a href="index.html">HOME</a></li>
+            <li><a href="about.html">About me</a></li>
+            <li><a href="portfolio.html">Portfolio</a></li>
+            <li><a href="hobby.html">Hobby</a></li>
+          </ul>
+        </div>
+      </nav>
+
+      <header>
+        <section class="intro">
+          <p>Hi, I am Yasmin!</p>
+            <h3>A future junior software devoloper</h3>
+        </section>
+
+        <section class="imag">
+          <img src="img/Yasmin.JPG" alt="My picture"/>
+        </section>
+      </header>
+
+    <footer>
+      <p>2019 Yasmin</p>
+      <p>Contact: <a href="mailto:[email protected]">
+          [email protected]</a></p>
+    </footer>
+  </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Portfolio</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
+</head>
+
+<body>
+  <nav>
+    <div class="list2">
+      <ul>
+        <li><a href="index.html">HOME</a></li>
+        <li><a href="about.html">About me</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="hobby.html">Hobby</a></li>
+      </ul>
+    </div>
+  </nav>
+  <header>
+
+    <h1>My projects at Ada</h1>
+    <h2>Here are some projects I have done as a part of my assigments at Ada Academy</h2>
+    <div class="links">
+      <ul>
+        <li><a href="https://github.com/YasminM11/adagrams/blob/master/lib/adagrams.rb">Adagram</a></li>
+        <li><a href="https://github.com/YasminM11/oo-ride-share/tree/add-driver/lib">oo-Rideshare</a></li>
+        <li><a href="https://github.com/YasminM11/ride-share/blob/master/ride-share.rb">Rideshare</a></li>
+        <li><a href="https://github.com/YasminM11/hotel/tree/master/lib">Hotel</a></li>
+      </ul>
+    </div>
+  </header>
+
+  <footer>
+    <p>2019 Yasmin</p>
+    <p>Contact: <a href="mailto:[email protected]">
+        [email protected]</a></p>
+  </footer>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,152 @@
+* {
+  margin: 20px 0px 20px 0px;
+  padding: 0;
+}
+
+body {
+  font-family:"Handlee",sans-serif; 
+  background-color: rgb(142, 179, 142);
+  text-align: center;  
+  margin: 0px 0px 20px 0px;
+  padding: 50px;
+}
+
+/*index.css*/
+.list ul {
+  list-style: none;
+  width: 350px;
+  height: 350px;
+  position: fixed;
+  top: 20%;
+  margin-top: 40px;
+
+}
+.list ul li a {
+  text-decoration: none;
+  font-size: 30px;
+  font-weight: bold;
+  width: 50%;
+  height: 40px;
+  background-color: rgb(142, 179, 142);
+  color:mintcream;
+  display: inline-block;
+  text-align: center;
+  margin-right: 90px;
+}
+
+.list ul li a:hover {
+  color: brown;
+  transition: 0.5s ease;
+}
+
+header {
+  background-color: rgb(228, 228, 213);
+  grid-column: span 2;
+}
+
+.intro p {
+  margin: 0;
+  font-size: 50px;
+  color:rgb(24, 39, 24)
+}
+
+.imag {
+  border: 3px dashed;
+  padding: 10px;
+  display: inherit;
+  margin-left: auto;
+  margin-right: auto; 
+}
+
+footer {
+  background: lightgrey;
+  color:rgb(19, 77, 36);
+  font-weight: bold;
+  justify-content: center;
+  border: 3px dashed black;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+/* about.css*/
+.list2 {
+  background-color: rgb(235, 235, 216);
+  margin-right:10px;
+  padding:10px 20px 20px 5px;
+}
+
+.list2 ul {
+  list-style: none;
+}
+
+.list2 ul li {
+  display: inline;
+  margin: 15px;
+}
+.list2 ul li a {
+  color: brown;
+  text-decoration: none;
+  font-size: 20px;
+  font-weight: bold; 
+}
+
+.list2 ul li a:hover {
+  color: mintcream;
+  transition: 0.5s ease;
+}
+
+.about h1 {
+  text-decoration-line: underline;
+  color: cornflowerblue;
+
+}
+.about h2 {
+  margin-top: 50px;
+  padding-top: 50px;
+}
+
+ .about-section p {
+   margin: 3rem;
+   text-align: justify;
+   color:rgb(19, 77, 36);
+   font-weight: bold;
+   font-size: 20px;
+}
+
+
+.skills-section ul li {
+  list-style: none;
+  color:rgb(19, 77, 36);
+  font-size: 20px; 
+  font-weight: bold; 
+}
+
+/*portfolio.css*/
+.links ul{
+  padding: 50px 20px 50px 20px;
+
+}
+.links ul li {
+  list-style: none;
+  justify-content: space-between;
+  margin: 15px;
+  text-decoration: none;
+}
+
+.links a {
+  font-size: 30px;
+  text-align: left;
+
+}
+.links ul li a:hover {
+  color: red;
+  transition: 0.5s ease;
+}
+
+/*hobby.css*/
+.hobby p {
+  font-size: 20px;
+  font-weight: bold;
+  font-style: oblique;
+  color: ghostwhite;
+}