Initial commit

maa17019 · Feb 3, 2020 · 9fc1ac1 · 9fc1ac1
1 parent be2c4e3
commit 9fc1ac1
Show file tree

Hide file tree

Showing 11 changed files with 232 additions and 37 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/week-2/.DS_Store b/week-2/.DS_Store
diff --git a/week-2/basic-site.html b/week-2/basic-site.html
@@ -0,0 +1,57 @@
+<!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>My Boilerplate Website</title>
+    <link href="css/basic-site.css" type="text/css" rel="stylesheet"/>
+</head>
+<body>
+    <header>
+        <div class="image">
+            <img src="img/head.jpg" alt="header image"/>
+            <div class="text">Mahnoor Afteb</div>
+        </div>
+    </header>
+   <main>
+       <nav>   
+           <h2>About Me</h2>
+        </nav>
+
+        <section class="row-one">
+            <div class="me">
+                <img src="img/me.jpg" alt="picture of Mahnoor" /> 
+                </div>
+                <p>I’m currently an undergraduate enrolled in the Digital Media and Design program at the <em>University of Connecticut</em>. My intended path is a Bachelor of Arts in the Web Design concentration. I have always been an artistic child growing up and throughout high school, I was eager to take every possible art and digital technology course offered to me including digital imaging, web design, video production, ceramics and advanced photography.
+                    I would describe my personal style as vibrant, bold and festive. My artistic statement for most of my work pays attention to detail as I am especially inspired by abstract art.
+        </section> 
+        <section class="row-two">
+            <div class="column-one">
+            <h3>My Interests</h3>
+            <ul class="interests">
+                <li>Photography</li>
+                <li>Traveling</li>
+                <li>Social Media</li>
+                <li>Films</li>
+                <li>Reading</li>
+                <li>Calligraphy</li>
+                <li>Music</li> 
+            </ul> 
+            </div>
+            <ul class="websites">
+                <h3>My Favorite Websites</h3>
+                <li></li>
+
+
+
+            </ul>
+
+
+        </section>
+    </main> 
+   <!--- <footer>
+        © Mahnoor Afteb 2020
+    </footer>-->
+</body>
+</html>
diff --git a/week-2/css/basic-site.css b/week-2/css/basic-site.css
@@ -0,0 +1,119 @@
+html, body {
+    margin: 0; 
+    padding: 0;
+    /*background-image: url("../img/back.jpg");
+    background-size: 100%;*/
+  }
+
+  @media (min-width: 320px){
+     div .text{
+         top: 70px;
+         font-size: 50px;
+     }
+}
+
+@media (min-width: 480px){
+    div .text{
+        top: 60px;
+        font-size: 70px;
+    }
+}
+@media (min-width: 620px){
+    div .text{
+        top: 50px;
+        font-size: 80px;
+    }
+}
+@media (min-width: 768px){
+    div .text{
+        top: 50px;
+        font-size: 95px;
+    }
+}
+    img{
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    height: 240px;
+
+}
+
+.image {
+    position:relative;
+}
+.text {
+    white-space: nowrap;
+    left: 0;
+    position:absolute;
+    text-align:center;
+    top: 60px;
+    width: 100%;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: lighter;
+    color: white;
+    font-size: 90px;
+}
+h2{
+    text-align: center;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: lighter;
+    font-size: 50px;
+    margin: 0 auto;
+    background-color: #5c0553;
+    color: whitesmoke;
+
+}
+
+.row-one{
+    display: flex;
+    justify-content: center;
+}
+
+.me img{
+    width: 350px;
+    height: auto;
+    border-radius: 50%;
+    margin: 50px 5px;
+    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
+}
+
+p{
+    font-family: 'Open Sans', sans-serif;
+    font-weight: lighter;
+    font-size: 20px;
+    margin-top: 60px;
+    margin-left: 30px;
+    margin-right: 30px;
+    margin-bottom: 10px;
+    text-indent: 50px;
+    padding: 5px;
+    max-width: 490px;
+    min-width: 200px;
+    max-height: 500px;
+}
+.row-one{
+    display: flex;
+    justify-content: center;
+}
+
+ul li{
+    list-style: circle;
+}
+
+
+
+
+
+
+
+
+
+
+footer{
+    width: 100%;
+    text-align: left;
+    background-color: #0f0029;
+    color: white;
+    font-family: 'Open Sans', sans-serif;
+
+}
diff --git a/week-2/img/.DS_Store b/week-2/img/.DS_Store
diff --git a/week-2/img/UvafGZ.gif b/week-2/img/UvafGZ.gif
diff --git a/week-2/img/head.jpg b/week-2/img/head.jpg
diff --git a/week-2/img/header.jpg b/week-2/img/header.jpg
diff --git a/week-2/img/me.jpg b/week-2/img/me.jpg
diff --git a/week-2/index.html b/week-2/index.html
@@ -1,41 +1,57 @@
-<!doctype html>
-<html class="no-js" lang="">
-
+<!DOCTYPE html>
+<html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title></title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <link rel="manifest" href="site.webmanifest">
-  <link rel="apple-touch-icon" href="icon.png">
-  <!-- Place favicon.ico in the root directory -->
-
-  <link rel="stylesheet" href="css/normalize.css">
-  <link rel="stylesheet" href="css/main.css">
-
-  <meta name="theme-color" content="#fafafa">
+    <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>My Boilerplate Website</title>
+    <link href="css/basic-site.css" type="text/css" rel="stylesheet"/>
 </head>
-
 <body>
-  <!--[if IE]>
-    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
-  <![endif]-->
-
-  <!-- Add your site or application content here -->
-  <p>Hello world! This is HTML5 Boilerplate.</p>
-  <script src="js/vendor/modernizr-3.8.0.min.js"></script>
-  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
-  <script src="js/plugins.js"></script>
-  <script src="js/main.js"></script>
-
-  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
-  <script>
-    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
-    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
-  </script>
-  <script src="https://www.google-analytics.com/analytics.js" async></script>
+    <header>
+        <div class="image">
+            <img src="img/head.jpg" alt="header image"/>
+            <div class="text">Mahnoor Afteb</div>
+        </div>
+    </header>
+   <main>
+       <nav>   
+           <h2>About Me</h2>
+        </nav>
+
+        <section class="row-one">
+            <div class="me">
+                <img src="img/me.jpg" alt="picture of Mahnoor" /> 
+                </div>
+                <p>I’m currently an undergraduate enrolled in the Digital Media and Design program at the <em>University of Connecticut</em>. My intended path is a Bachelor of Arts in the Web Design concentration. I have always been an artistic child growing up and throughout high school, I was eager to take every possible art and digital technology course offered to me including digital imaging, web design, video production, ceramics and advanced photography.
+                    I would describe my personal style as vibrant, bold and festive. My artistic statement for most of my work pays attention to detail as I am especially inspired by abstract art.
+        </section> 
+        <section class="row-two">
+            <div class="column-one">
+            <h3>My Interests</h3>
+            <ul class="interests">
+                <li>Photography</li>
+                <li>Traveling</li>
+                <li>Social Media</li>
+                <li>Films</li>
+                <li>Reading</li>
+                <li>Calligraphy</li>
+                <li>Music</li> 
+            </ul> 
+            </div>
+            <ul class="websites">
+                <h3>My Favorite Websites</h3>
+                <li></li>
+
+
+
+            </ul>
+
+
+        </section>
+    </main> 
+   <!--- <footer>
+        © Mahnoor Afteb 2020
+    </footer>-->
 </body>
-
-</html>
+</html>