CodeYourFuture · Samuelkau · Dec 2, 2020 · Dec 2, 2020 · Dec 2, 2020 · Dec 2, 2020
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/css/style.css b/css/style.css
@@ -1,8 +1,126 @@
 /**
  * Add your custom styles below
- * 
  * Remember: 
  * - Be organised, use comments and separate your styles into meaningful chunks
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
  */
+/*general styling*/
+body {
+  background-color: tan;
+  font-size: 20px;
+  color: black;
+  border: 4px solid black;
+  padding: 20px;
+}
+h1 {
+  font-size: 40px;
+  font-family: sans-serif;
+  color: black;
+  text-decoration: underline;
+  text-align: center;
+}
+
+h2 {
+  font-size: 30px;
+  font-family: sans-serif;
+  color: black;
+  text-decoration: underline;
+  text-align: center;
+}
+
+h3 {
+  font-size: 25px;
+  font-family: sans-serif;
+  color: rgb(27, 26, 26);
+  text-decoration: underline;
+}
+
+/*Header Styling*/
+header {
+  border: 2px solid blue;
+  height: 10%;
+}
+
+header-name {
+
+  text-shadow: darkblue;
+  font-style: oblique;
+  font-size: 40px;
+  font-stretch: expanded;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+
+#img_container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  border: 5px solid black;
+  /*flex-grow: 2;*/
+}
+
+#header_img_1 {
+  width: 30%;
+  /*height: 100px;*/
+}
+
+#header_img_2 {
+  width: 40%;
+  height: 20%;
+  /*height: 100px;*/
+}
+
+#header_img_3 {
+  width: 30%;
+}
+
+/*Article Styling*/
+
+article#sam :first-child {
+  background-color: blue;
+}
+/* #article_container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  border: solid 5px black;
+}
+
+#second_article {
+  width: 60%;
+  border: slategrey;
+  border-style: dotted;
+  text-align: center;*/
+}
+
+.bigger_picture {
+  object-fit: fill;
+  width: 100%;
+  border: solid 5px black;
+}
+
+ul {
+  text-align: left;
+}
+
+/*#third_article {
+  border: slategrey;
+  border-style: dotted;
+  width: 30%;
+  text-align: center;
+}*/
+
+/*footer Styling*/
+#contact_container {
+  width: 100%;
+  display: flex;
+  border-style: ridge;
+  border: 5px solid black;
+  justify-content: center;
+}
+
+.contact-address {
+  padding: 10px;
+  width: 40%;
+  text-align: center;
+}
diff --git a/index.html b/index.html
@@ -1,22 +1,222 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <title>Physio Leg Recovery Methods</title>
+  <link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+</head>
+
+
+<body>
+  <header>
+    <h1 id="header-name">SAMUEL MEDICAL AND HEALTH TIPS</h1>
+  </header>
+  <br>
+  <article id="sam">
+    <main>
+      <div class="first_article">
+        <h1>Knee Injury: Methods to fully recover</h1>
+        <div id="img_container">
+          <img id="header_img_1"
+            src="https://www.t-nation.com/system/publishing/articles/10006104/original/Two-Glute-Exercises-for-Knee-Health.jpg?1522345933"
+            alt="Bent Knee">
+          <img id="header_img_2" src="https://i.pinimg.com/originals/58/d8/6a/58d86af17adf4b3e4ce7204e7434ea28.jpg"
+            alt="Knee-running">
+          <img id="header_img_3"
+            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQE6ygrVX7jwQv-HBRLCM4n8zB8LiY2R3IejQ&usqp=CAU"
+            alt="knee x-ray">
+        </div>
+        <h2>The Best Leg Strengthening Exercises After Surgery</h2>
+        <br>
+        <p>After surgery to the hip, knee, ankle or foot, the muscles of the leg often become weak from decreased use or
+          from
+          inhibition due to pain. For this reason, it is important to begin strengthening these muscles once your
+          physician
+          gives
+          you the green light to do so.</p>
+        <br>
+        <p>Gaining back strength that you have lost after injury or surgery is an important step in obtaining full
+          functional
+          mobility and a full recovery.</p>
+        <p>For the exercises visit<a href="https://www.verywellhealth.com/favorite-leg-strengthening-exercises-2696602"
+            target="_blank"> Knee exercises</a>
+        </p>
+      </div>
+    </main>
+  </article>
+  <!--<div id="article_container">
+    <article>
+      <div id="second_article">
+        <img class="bigger_picture" src="https://www.knee-pain-explained.com/images/knee-rehab-exercises.jpg"
+          alt="Knee Exercises">
+        <h2>Exercises to Keep Your Knees Healthy</h2>
+        <br>
+        <p>Your knee is a major joint in the body that is responsible for walking, climbing stairs, and rising from a
+          seated
+          position. Pain in the knee can limit one or all of these activities. By keeping the knee joint mobile and
+          strong,
+          problems with knee pain may be avoided and your mobility can be maintained.</p>
+        <br>
+        <p>Exercises are your main tool in maintaining good strength and mobility in your knees, and some simple
+          exercises
+          that you
+          can do at home can help keep your knees moving right. (After injury or knee surgery, your physical therapist
+          may
+          prescribe exercises similar to these to help you return to normal activity and function.)</p>
+        <br>
+        </p>Exercise routines to help maintain healthy knees:</p>
+        <ul>
+          <li>Quad Sets</li>
+          <li>Heel Slides</li>
+          <li>Short Arc Quad Exercises</li>
+          <li>Straight Leg Raises</li>
+        </ul>
+        <br>
+        <p>Get full exercise routine details from <a
+            href="https://www.verywellhealth.com/exercises-to-maintain-healthy-knees-2696614" target="_blank">leg and
+            knee
+            stretching</a></p>
+        </p>
+      </div>
+    </article>
+    <br>
+    <article>
+      <div id="third_article">
+        <img class="bigger_picture"
+          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ60jf6uWeYN1HpBd8HYbKIacD62HDwiHQ-mg&usqp=CAU"
+          alt="Nerve Flossing technique">
+        <h2>Nerve Flossing in Physical Therapy</h2>
+        <br>
+        <h3>Nerve Glides as Part of Your PT Exercises</h3>
+        <p>Nerve flossing is an exercise technique often used in physical therapy to improve the way your nerves move.
+          Nerve
+          flossing is also known as nerve gliding or neural glides. Occasionally after injury or illness, muscles,
+          joints,
+          and
+          tendons can become tight. Guess what? Nerves can also become tight after an injury, and your physical
+          therapist
+          may
+          determine that nerve flossing is necessary to help improve neurodynamics (nerve motion) and help you move
+          better
+          and
+          feel better. Your therapist may prescribe nerve glides to help you fully recover. But what is nerve flossing,
+          and how is
+          it done?</p>
+
+        <br>
+        <p><a href="https://www.verywellhealth.com/nerve-flossing-in-physical-therapy-4797516" target="_blank">Nerve
+            flossing techniques</a>
+        </p>
+      </div>
+    </article>
+  </div>-->
+  </section>
+  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+    crossorigin="anonymous"></script>
+
+
+
+  <div class="row">
+    <div class="col-sm-6">
+      <div class="card">
+        <div class="card-block">
+          <h3 class="card-title">Exercises to Keep Your Knees Healthy</h3>
+          <img class="bigger_picture" src="https://www.knee-pain-explained.com/images/knee-rehab-exercises.jpg"
+            alt="Knee Exercises">
+
+          <p class="card-text">Your knee is a major joint in the body that is responsible for walking, climbing stairs,
+            and rising from a
+            seated
+            position. Pain in the knee can limit one or all of these activities. By keeping the knee joint mobile and
+            strong,
+            problems with knee pain may be avoided and your mobility can be maintained.</p>
+          <br>
+          <p>Exercises are your main tool in maintaining good strength and mobility in your knees, and some simple
+            exercises
+            that you
+            can do at home can help keep your knees moving right. (After injury or knee surgery, your physical therapist
+            may
+            prescribe exercises similar to these to help you return to normal activity and function.)</p>
+          <br>
+          </p>Exercise routines to help maintain healthy knees:</p>
+          <ul>
+            <li>Quad Sets</li>
+            <li>Heel Slides</li>
+            <li>Short Arc Quad Exercises</li>
+            <li>Straight Leg Raises</li>
+          </ul>
+          <a href="https://www.verywellhealth.com/exercises-to-maintain-healthy-knees-2696614"
+            class="btn btn-primary">Knee Exercises</a>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-6">
+      <div class="card">
+        <div class="card-block">
+          <h3 class="card-title">Nerve Flossing in Physical Therapy</h3>
+          <img class="bigger_picture"
+            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ60jf6uWeYN1HpBd8HYbKIacD62HDwiHQ-mg&usqp=CAU"
+            alt="Nerve Flossing technique">
+          <p class="card-text">Nerve flossing is an exercise technique often used in physical therapy to improve the way
+            your nerves move.
+            Nerve flossing is also known as nerve gliding or neural glides. Occasionally after injury or illness,
+            muscles,
+            joints, and tendons can become tight. Guess what? Nerves can also become tight after an injury, and your
+            physical
+            therapist determine that nerve flossing is necessary to help improve neurodynamics (nerve motion) and help
+            you
+            move
+            better and feel better.</p>
+          <p>Your therapist may prescribe nerve glides to help you fully recover. But what is nerve flossing,
+            and how is it done?</p>
+
+          <a href=https://www.verywellhealth.com/nerve-flossing-in-physical-therapy-4797516#"
+            class="btn btn-primary">Nerve Flossing</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <footer>
+    <div id="contact_container">
+      <div class="contact-address">
+        <h3>Contact</h3>
+        <p>Samuel Kau</p>
+        <p>079 100 0878</p>
+      </div>
+
+      <div class="contact-address">
+        <h3>Address</h3>
+        <p>1 Imaginary Lane</p>
+        <p>Milnerton</p>
+        <P>South Africa</P>
+      </div>
+    </div>
+  </footer>
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
+    integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
+    integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
+    crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
+    integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
+    crossorigin="anonymous"></script>
+
+</body>
+
+</html>