AdaGold · Ramora6627 · May 18, 2022 · May 23, 2022 · May 23, 2022 · May 23, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/feedback.md b/feedback.md
@@ -8,7 +8,7 @@ Appropriate Git Usage |
 Answered comprehension questions |
 Page fully loads |
 No broken links (regular or images) |
-Includes at least 4 pages and styling |
+Includes at least 3 pages and styling |
 **HTML** |
 Uses the high-level tags for organization: `header, footer, main` |
 Appropriately using semantic tags: `section, article`, etc. |

diff --git a/footerstyle.css b/footerstyle.css
@@ -0,0 +1,108 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
+
+* {
+    font-family: Roboto;
+}
+
+.footer-left {
+    color: #8f9296;
+    font-size: 14px;
+    margin-left:80px;
+    align-content: center;
+}
+.footer-center p {
+    color: #ffffff;
+    block-size: 2rem;
+    width:80rem;
+    font-size: 18px;
+    padding-left: 45rem;
+    padding-top: 0.5rem;
+    letter-spacing: 1rem;
+    background-color: rgba(10, 10, 10);
+
+}
+/* Footer links */
+.footer-text {    
+    position:relative;
+    block-size: 3rem;
+    font-size: 2rem;
+    font-weight:lighter;
+    width: 100rem;
+    letter-spacing: 30px;
+    margin-left:16rem;
+    text-align: center;
+    color: white;
+}
+
+.footer-distributed p.footer-links a {
+    display: inline-block;
+    line-height: 1.8;
+    text-decoration: none;
+    color: inherit;
+    transition: ease .25s;
+}
+
+
+
+.footer-distributed .footer-right {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    width: 70rem;
+    align-items: center;
+    margin-left: 29rem;
+    /* margin-right: 10em; */
+    height: 130px;
+    background-color: rgba(184, 236, 217, 0.462);
+}
+
+.footer-distributed .footer-right a {
+    display:inline-block;
+    width: 40px;
+    height: 35px;
+    padding-right: 4px;
+    padding-top: 10px;
+    background-color: #ffffff;
+    border-radius: 15px;
+    font-size: 20px;
+    color: #ffffff;
+    text-align: center;
+    line-height: 30px;
+    margin-top: 14px;
+    margin-left: 0rem;
+    transition:all .25s;
+}
+
+
+a[href*="twitter.com/"] {
+    background:url(https://twitter.com/favicon.ico) no-repeat left center;
+    padding: 0.5rem;
+    background-size:2rem;
+    background-position: center;
+
+    }
+
+a[href*="linkedin.com/"] {
+    background:url(https://www.linkedin.com/favicon.ico) no-repeat left center;
+    padding: 0.5rem;
+    background-size:2rem;
+    background-position: center;
+
+    }
+
+a[href*="github.com/"] {
+    background:url(https://www.github.com/favicon.ico) no-repeat left center;
+    padding: 0.5rem;
+    background-size:2rem;
+    background-position: center;
+
+    }
+
+a[href*="instagram.com/"] {
+    background:url(https://www.instagram.com/favicon.ico) no-repeat left center;
+    padding: 0.5rem;
+    background-size:2rem;
+    background-position: center;
+
+    }
diff --git a/images/2022-05-21 12.10.30.jpg b/images/2022-05-21 12.10.30.jpg
diff --git a/images/2022-05-22 00.48.27.jpg b/images/2022-05-22 00.48.27.jpg
diff --git a/images/2022-05-22.jpg b/images/2022-05-22.jpg
diff --git a/...-How-Effective-Is-the-Studio-System-in-Architecture-And-Design-Education-1.jpeg b/...-How-Effective-Is-the-Studio-System-in-Architecture-And-Design-Education-1.jpeg
diff --git a/images/animation-_1_.gif b/images/animation-_1_.gif
diff --git a/images/animation-_2_.gif b/images/animation-_2_.gif
diff --git a/images/image-1.png b/images/image-1.png
diff --git a/images/image-3.jpg b/images/image-3.jpg
diff --git a/images/image.jpg b/images/image.jpg
diff --git a/images/image.png b/images/image.png
diff --git a/images/image6-modified.png b/images/image6-modified.png
diff --git a/images/image6.jpg b/images/image6.jpg
diff --git a/images/output-onlinegiftools.gif b/images/output-onlinegiftools.gif
diff --git a/images/output-onlinegiftools1.gif b/images/output-onlinegiftools1.gif
diff --git a/images/output-onlinejpgtools.jpg b/images/output-onlinejpgtools.jpg
diff --git a/images/social-modified.png b/images/social-modified.png
diff --git a/images/social.jpeg b/images/social.jpeg
diff --git a/images/tasky-free-ui-kit-h49-modified.png b/images/tasky-free-ui-kit-h49-modified.png
diff --git a/images/teaserGIF.gif b/images/teaserGIF.gif
diff --git a/images/tuxpi.com.1653170220.jpg b/images/tuxpi.com.1653170220.jpg
diff --git a/images/tuxpi.com.1653175765.jpg b/images/tuxpi.com.1653175765.jpg
diff --git a/images/twitter-social-media-icon-design-template-vector-22340032.webp b/images/twitter-social-media-icon-design-template-vector-22340032.webp
diff --git a/images/virus-simulation.gif b/images/virus-simulation.gif
diff --git a/images/what-is-human-centered-design-1160x387.jpeg b/images/what-is-human-centered-design-1160x387.jpeg
diff --git a/pages/about.html b/pages/about.html
diff --git a/pages/aboutme.html b/pages/aboutme.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>-Raha Rastegar Portfolio-</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- linking css file -->
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="../portfoliostyles.css">
+    <link rel="stylesheet" href="../footerstyle.css">
+</head>
+
+<body class="last">
+    <!-- navbar -->
+    <nav class="border">
+        <div class="container">
+            <a class="navbar-name" href="#">RahaRastegar</a>
+            <ul class="navbar-nav ms-auto">
+                <li >
+                    <a class="nav-link" href="aboutme.html">Home  </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="portfolio.html">Portfolio</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="contact.html">Contact</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <section id="about">
+        <div class="container">
+            <h1 class="text-center">About.Me</h1>
+            <div>
+                <div class="about-img">
+                    <img src="../images/2022-05-22.jpg" class= "imageAboutPage" alt="">
+                </div>
+
+                <div class="about-text">
+                    <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
+
+                    </p>
+                    <div class="row mt-3">
+                        <div class="col-md-6">
+                            <ul>
+                                <li>Name: Raha M.Rastegar</li>
+                                <li>Education: Software Development student at ADA <br> PhD in Architecture</li>
+
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="row mt-3">
+                        <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
+                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
+                        </p>
+                    </div>
+                </div>
+            </div>
+    </section>
+    <footer class="footer-distributed">
+
+        <div class="footer-right">  
+        </div>
+
+
+
+        <div class="footer-center">
+            <p>Ra.ha.Mo.Ra &copy; 2022</p>
+        </div>
+    </footer>  
+</body>
+</html>
diff --git a/pages/index.html b/pages/index.html
@@ -1,12 +1,82 @@
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+    <title>-Raha Rastegar Portfolio-</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- linking css file -->
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="../portfoliostyles.css">
+    <link rel="stylesheet" href="../footerstyle.css">
 </head>
-<body>
-
+
+<body class="last">
+    <!-- navbar -->
+    <nav class="border">
+        <div class="container">
+            <a class="navbar-name" href="#">RahaRastegar</a>
+            <ul class="navbar-nav ms-auto">
+                <li >
+                    <a class="nav-link" href="aboutme.html">About</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="portfolio.html">Portfolio</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="contact.html">Contact</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <!-- main banner -->
+    <section class="bgimage" id="home">
+        <div class="container-fluid">
+            <div class="row">
+            <div class="hero-text">
+                <h2 class="hero_title">The broader one's <br> understanding<br> of the human experience, <br>the better design we will have.<br></h2>
+                <h2 class="hero_desc"> "Steve Jobs" </h2>
+            </div>
+            </div>
+        </div>
+    </section>
+
+
+    <section>
+        <h3 class="portfolio-text">--Portfolio--</h3>
+    </section>
+    <section class="container-4" >
+            <object  class="project-1 hide-text " width="70" height="100" data="image.jpg" type="image/jpg"></object>
+            <object  class="project-2 hide-text " width="70" height="100" data="image.jpg" type="image/jpg"></object>
+            <object   class="project-3 hide-text " width="70" height="100" data="image.jpg" type="image/jpg"></object>
+            <object   class="project-4 hide-text " width="70" height="100" data="image.jpg" type="image/jpg"></object>
+            <object   class="project-5 hide-text " width="70" height="100" data="image.jpg" type="image/jpg"></object>
+            <object   class="project-6 hide-text " width="70" height="100" data="image.jpg" type="image/jpg"></object>
+            <object   class="project-7 hide-text " width="70" height="100" data="image.jpg" type="image/jpg"></object>
+            <object   class="project-8 hide-text  " width="70" height="100" data="image.jpg" type="image/jpg"></object>
+
+    </section>
+
+    <section>
+        <div class="footer-text">--Find Me on--</div>
+    </section>
+    <footer class="footer-distributed">
+
+        <div class="footer-right">
+
+            <a href="https://github.com/Ramora6627/" ></a>
+            <a href="https://www.instagram.com/"></a>
+            <a href="https://www.twitter.com/"></a>
+            <a href="https://www.linkedin.com/in/raha-mo-rastegar-7a08b682"></a>    
+        </div>
+
+
+
+        <div class="footer-center">
+            <p>Ra.ha.Mo.Ra &copy; 2022</p>
+        </div>
+    </footer>    
 </body>
-</html>
+</html>
+
+