hackyourfuturecanada · aalitenaye · Aug 6, 2019
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,126 @@
+/* The body styling */
+body {
+  font-family: 'Montserrat';
+  font-weight: 250;
+  margin: 0px;
+  padding: 0;
+  background: url(https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) no-repeat fixed;
+  background-size: cover;
+}
+
+/* The navigation bar - - - - - - - - - - - - - - - - - - - */
+nav {
+  overflow: hidden;
+  background-color: rgb(222, 222, 53);
+  position: fixed;
+  top: 0;
+  width: 100%;
+  text-align: left;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+nav a {
+  float: left;
+  display: block;
+  color:black;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 13px 15px;
+  text-decoration: none;
+  font-family: 'Special Elite', cursive;
+}
+nav a:hover {
+  background: rgb(148, 128, 28);
+}
+/* page header ------------------------------------------------*/
+header {
+  background-color: rgba(207, 207, 21, 0.5);
+}
+#profile-photo {
+  float: right;
+  width: 28%;
+  border-radius: 0%;
+}
+/* sections styling --------------------------------------------*/
+#journey {
+  background-color: rgba(27, 191, 148, 0.5);
+}
+#yoga-poses {
+  background-color: rgba(184, 13, 13, 0.5)
+}
+#reach  {
+  background-color: black;
+  text-align: center;
+}
+#footer-image { /* sat footer image in centre */
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 30%;
+}
+header, section, footer {
+  padding-top: 60px;
+  padding-right: 100px;
+  padding-bottom: 60px;
+  padding-left: 100px;
+}
+/* About me Section - - - - - - - - - - - - - - - - - - - */
+div {
+  margin: 100px 150px 75px 150px; /* This div element has top 50px, right 150px, bottom 75px, left 150px */
+}
+h1 {
+  font-size: 35px;
+  color: white;
+  font-family: 'Baloo Chettan', cursive;
+}
+p {
+  line-height: 30px;
+  font-family: 'Special Elite', cursive;
+  font-size: 20px;
+}
+ul {
+  line-height: 30px;
+  font-family: 'Special Elite', cursive;
+  font-size: 20px;
+}
+strong {
+  color: white;
+  font-size: 30px;
+}
+i {
+    color: white;
+    display: inline-block;
+    border-radius: 60px;
+    border: 2px solid #ffffff;
+    padding: 0.5em 0.5em;
+    opacity: 0.6;
+    transition: all 0.5s ease-out;
+}
+.fa, .fab, .fal, .far, .fas {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    line-height: 0;
+.fa-2x {
+    font-size: 2em;
+}
+.fab {
+    font-family: "Font Awesome 5 Brands";
+}
+i {
+    margin-right: 10px;
+}
+a {
+    color: #EBBA50;
+}
+a:-webkit-any-link {
+    color: -webkit-link;
+    cursor: pointer;
+}
+.fa-github-alt:before {
+    content: "\f113";
+}
diff --git a/images/Avatar.jpg b/images/Avatar.jpg
diff --git a/images/Avatar1.png b/images/Avatar1.png
diff --git a/images/Neemo_aquanauts.jpg b/images/Neemo_aquanauts.jpg
diff --git a/images/Yoga1.png b/images/Yoga1.png
diff --git a/images/adventure-cave-climb-1659437.jpg b/images/adventure-cave-climb-1659437.jpg
diff --git a/images/background-image.jpg b/images/background-image.jpg
diff --git a/images/footer-image.png b/images/footer-image.png
diff --git a/images/leio-mclaren-leiomclaren-JvQ7Fuajna0-unsplash.jpg b/images/leio-mclaren-leiomclaren-JvQ7Fuajna0-unsplash.jpg
diff --git a/images/matthias-tillen--4bu9TQKYOI-unsplash.jpg b/images/matthias-tillen--4bu9TQKYOI-unsplash.jpg
diff --git a/images/max-fuchs-S-oHAhV_hBQ-unsplash.jpg b/images/max-fuchs-S-oHAhV_hBQ-unsplash.jpg
diff --git a/images/profile-image.png b/images/profile-image.png
diff --git a/images/yoga2.png b/images/yoga2.png
diff --git a/images/yoga3.png b/images/yoga3.png
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="Aalitenaye's personal journey to practicing Yoga and Meditation">
+  <meta name="author" content="Aalitenaye Sattari">
+  <link rel="stylesheet" type="text/css" href="css/style.css">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Baloo+Chettan&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+  <title>My Journey to Practicing Yoga and Meditation</title>
+</head>
+<body>
+<!-- navbar ------------------------------------------------------------->
+  <nav>
+    <a href="#start">Home</a>
+    <a href="#journey">My Journey</a>
+    <a href="#yoga-poses">Yoga Poses</a>
+    <a href="#reach">Connect</a>
+  </nav>
+
+<div>
+<!-- page header ---------------------------------------------------------->
+  <header id="start">
+  <img id="profile-photo" src="images/profile-image.png">
+  <h1>
+    My Yoga & Meditation Practices!
+  </h1>
+  <p>
+    I have lived most part of my life in disbelief to the existence of the <strong>Invisible Energies</strong>. Throughout life I have never felt satisfied with what I had and was living my life to attain those goals.
+  </p>
+  </header>
+<!-- about my Journey ------------------------------------------------------>
+  <section id="journey">
+    <h1>My Journey</h1>
+      <p>I started thinking about taking <strong>Meditation and Yoga</strong> seriously when I arrived at a phase of my life where material affairs lost it's meaning. I couldn't see the point, and where this is leading, nothing was convincing - I couldn't operation anymore and the only way for me to live was to connect to what has made me and to what is my origin.</p>
+  </section>
+<!-- section ends ---------------------------------------------------------->
+  <section id="yoga-poses">
+    <h1>Yoga Poses</h1>
+    <img src="images/yoga1.png" style="width:30%">
+    <img src="images/yoga2.png" style="width:30%">
+    <img src="images/yoga3.png" style="width:30%">
+    <ul>
+      <li><strong>Cobra Pose:</strong> Open the heart and roll the shoulders down to promote flexibility in Cobra Pose.
+      <li><strong>One-Legged King Pigeon Pose II:</strong> Open your chest and shoulders and challenge your balance as you move step by step into Eka Pada Rajakapotasana II.
+      <li><strong>Supported Headstand:</strong> Meet the king. Standing on your head in proper alignment not only strengthens the whole body but calms the brain.
+    </ul>
+  </section>
+<!-- section ends ---------------------------------------------------------->
+<!-- footer & contact info ------------------------------------------------->
+  <footer id="reach">
+    <h1>CONNECT</h1>
+      <img id="footer-image" src="images/footer-image.png">
+      <p style="color:white; font-family: 'Special Elite', cursive;">Interested to learn more about me and my jounry, follow me below!</p>
+      <div class="reach">
+        <a href="https://github.com/aalitenaye"><i class="fab fa-github-alt fa-2x"></i></a>
+        <a href="https://www.instagram.com/altynaisattari"><i class="fab fa-instagram fa-2x"></i></a>
+        <a href="mailto:aalitenaye.sattari@gmail.com"><i class="fas fa-envelope fa-2x"></i></a>
+        <a href="https://www.linkedin.com/in/aalitenaye-sattari"><i class="fab fa-linkedin fa-2x"></i></a>
+        <a href="https://www.facebook.com/aalitenaye.sattari"><i class="fab fa-facebook fa-2x"></i></a>
+      </div>
+  </footer>
+</div>
+</body>
+</html>