snyder/resources/views/app/about-hem.blade.php

@extends('layouts.app')
@section('content')
<div class="bg-light">
    <div class="container pt-3">
        <nav class="mb-0">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('index')}}"><u>Home</u></a></li>
                <li class="breadcrumb-item active" aria-current="page">About hemorrhoids</li>
            </ol>
        </nav>
    </div>
</div>
<div class="bg-grey">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <div class="container py-lg-5 py-4" style="max-width:700px">
                  <div class="row align-items-center justify-content-end">
                    <div class="col-xl-10 p-0 py-lg-4">
                      <h4 class="subtitle mb-4">What are hemorrhoids?</h4>
                      <p>Hemorrhoids emerge when the veins around your anus or your lower rectum get swollen and inflammed. It can be Internal and external.</p>
                      <div class="row justify-content-between mt-5">
                        <div class="col-xl-6">
                          <h4 class="mb-3 fw-thin border-top border-white pt-4">External Hemorrhoids</h4>
                          <p>External Hemorrhoids irritate under the skin around the rectum. Hemorrhoids are prevalent in both men and women and affects 1 in 20 Americans. It is mostly common in adults over the age of 50.</p>
                        </div>
                        <div class="col-xl-6">
                          <h4 class="mb-3 border-top border-white pt-4 fw-thin">Internal Hemorrhoids</h4>
                          <p>Internal Hemorrhoids irritate the lining of anus and lower rectum. </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div class="d-lg-none d-block col-10 offset-1">
              <img src="{{asset('/img/about-hem.png')}}" class="w-100" alt="">
            </div>
            <div class="col-lg-6 p-0 about-hem"></div>
        </div>
    </div>
</div>
<div class="container py-5">
  <div class="row">
    <div class="col-lg-3 mb-4">
      <h4 class="subtitle mb-3">What causes <br class="d-lg-block d-none"> hemorrhoids:</h4>
      <a href="#" class="btn btn-pry">Learn more</a>
    </div>
    <div class="col-lg-4">
      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
        <div class="d-flex align-items-center">
          <div class="">
            <img src="{{asset('img/causes/cause-1.svg')}}" width="25" alt="">
          </div>
          <div class="ms-3">
            <h5 class="m-0 mt-2">Low Fiber Diet</h5>
          </div>
        </div>
        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
      </a>
      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
        <div class="d-flex align-items-center">
          <div class="">
            <img src="{{asset('img/causes/cause-2.svg')}}" width="28" alt="">
          </div>
          <div class="ms-3">
            <h5 class="m-0 mt-2">Constipation</h5>
          </div>
        </div>
        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
      </a>
      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
        <div class="d-flex align-items-center">
          <div class="">
            <img src="{{asset('img/causes/cause-3.svg')}}" width="25" alt="">
          </div>
          <div class="ms-3">
            <h5 class="m-0 mt-2">Poor hydration</h5>
          </div>
        </div>
        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
      </a>
    </div>
    <div class="col-lg-4 offset-lg-1">
      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
        <div class="d-flex align-items-center">
          <div class="">
            <img src="{{asset('img/causes/cause-4.svg')}}" width="25" alt="">
          </div>
          <div class="ms-3">
            <h5 class="m-0 mt-2">Longer time on Toilet</h5>
          </div>
        </div>
        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
      </a>
      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
        <div class="d-flex align-items-center">
          <div class="">
            <img src="{{asset('img/causes/cause-5.svg')}}" width="28" alt="">
          </div>
          <div class="ms-3">
            <h5 class="m-0 mt-2">Pregnancy / Childbirth</h5>
          </div>
        </div>
        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
      </a>
      <a href="#" class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3 cause">
        <div class="d-flex align-items-center">
          <div class="">
            <img src="{{asset('img/causes/cause-6.svg')}}" width="25" alt="">
          </div>
          <div class="ms-3">
            <h5 class="m-0 mt-2">Obesity</h5>
          </div>
        </div>
        <h5 class="m-0 mt-2"><i class="ms-1 far fa-angle-right"></i></h5>
      </a>
    </div>
  </div>
</div>
<div class="bg-light py-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <h4 class="subtitle mb-3">What are the <br class="d-lg-block d-none"> symptoms?</h4>
      </div>
      <div class="col-lg-9">
        <div class="fx-symptoms">
          <div class="d-center">
            <img src="{{asset('img/symps/symp-1.svg')}}" class="w-75" alt="">
            <p class="mt-2">Blood in stool</p>
          </div>
          <div class="d-center">
            <img src="{{asset('img/symps/symp-2.svg')}}" class="w-75" alt="">
            <p class="mt-2">Rectal pain</p>
          </div>
          <div class="d-center">
            <img src="{{asset('img/symps/symp-3.svg')}}" class="w-75" alt="">
            <p class="mt-2">Burning</p>
          </div>
          <div class="d-center">
            <img src="{{asset('img/symps/symp-4.svg')}}" class="w-75" alt="">
            <p class="mt-2">Itching</p>
          </div>
          <div class="d-center">
            <img src="{{asset('img/symps/symp-5.svg')}}" class="w-75" alt="">
            <p class="mt-2">Swelling around <br> anal canal</p>
          </div>
          <div class="d-center">
            <img src="{{asset('img/symps/symp-6.svg')}}" class="w-75" alt="">
            <p class="mt-2">Bulging of <br> tissue</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container py-5">
  <h4 class="subtitle text-center mb-5">How to prevent hemorrhoids?</h4>
  <div class="row">
    <div class="col-lg-6">
      <div class="pe-lg-4">
        <img src="{{asset('img/prevent-hem.png')}}" class="w-100 mb-3" alt="">
        <div class="border-top mt-4 py-4">
          <h5 class="header mb-3">Stay physically active</h5>
          <p>Moderate exercise has a positive effect on improving and preventing many bowel and digestive issues including hemorrhoids. When there is no movement of the body, there is no movement of the bowel. Exercise helps to avoid constipation. It can include walking, running, biking, yoga. Choice is yours to have an active lifestyle. In case you have hemorrhoids, please avoid heavy weight lifting squats that increase abdominal pressure as it can do more harm.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="ps-lg-4">
        <div class="border-top py-4">
          <h5 class="header mb-3">Stay hydrated</h5>
          <p class="m-0">Drinking plenty of water helps to prevent constipation which in turn reduces straining during the bowel movement. Most healthy people can stay well hydrated by drinking water and other fluids whenever they feel thirsty. For some people, fewer than 8 glasses may be enough. Other people may need more than 8 glasses each day.</p>
        </div>
        <div class="border-top mt-3 py-4">
          <h5 class="header mb-3">Eat a healthy, high-fiber diet</h5>
          <p class="m-0">Eating foods that are high in fiber can make stools softer and easier to pass and can help treat and prevent hemorrhoids. Recommended dietary fiber intake is 28 grams per day based on 2000 calories intake. Drinking water and other liquids can help the fiber in your diet work better. If constipation is  causing the hemorrhoids, try to avoid foods with less or no fiber such as cheese, chips, ice cream, fast food, meat, frozen prepared foods and processed microwavable dinners.</p>
        </div>
        <div class="border-top mt-3 py-4">
          <h5 class="header mb-3">Timed bathroom trips</h5>
          <p class="m-0">Don’t  take your phone or newspaper in the toilet. A timed bathroom trip can help to avoid longer time spent on the toilet seat.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex align-items-center justify-content-center my-4">
    <a href="#" class="btn btn-pry">Treatment guide</a>
    <a href="#" class="text-dark ms-5">Post-treatment care <i class="ms-2 fal fa-angle-right"></i> </a>
  </div>
</div>
@endsection