cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class= deliveryDate>

  <div data-role="page" id="edd-calculator-page">

    <!--Set the header text-->
    <div data-role="header" style="background-color:yellowgreen">
      <h1 class=page1h>Expected Delivery Date Calcluator</h1>
    </div>

    <div role="main" class="ui-content">
      <!--Set the text to insruct the user on what to do. The header id is used when updating the text to display the edd-->
      <div class=page1_intro>
        <p>
          <h3 style="color:coral">Hello and welcome to the Pregnancy Manual 101.</h3>
          </br>The Pregnancy Manual 101, is here to guide you through each step of pregnancy from Day 1 to even after labour, ensuring that you are never left in the dark and always have a helping hand to depend on.

          </br>
          </br>Select a date and use this calculator to estimate your delivery date.</p>
      </div>
      <img class=pregnant src="http://www.squaredolly.com/wp-content/uploads/2015/06/Pregnant-Woman.jpg">
      <div class=edd_date>
        <h2 id='EDD_Date'><span>When was the first day your last period?</span></h2></div>


      <div class=text>

        <h2 id='EDD_Date'><span></span></h2></div>
      </br>
      <img class=pic2 src="http://static7.depositphotos.com/1001311/767/i/450/depositphotos_7676207-Pregnant-woman-in-park.jpg">
      </br>

      <div class=page1_results>
        <h3>Congratulations! You are a soon to be mom. </h3>
        </br>
        <p>Depending on how far you are in your pregnancy, our Trimester Tips and Guidelines will put you at ease and decrease those "mommy" worries to a minimum.
          <p>
            <h3 style="color:tomato">Remember being a mom means learning about strengths you didn't know you had and dealing with fears you didn't know exited.</h3></div>

      <!--Built in calendar display using jquery mobile. The various data-options can be used to change the look and feel of the
				calendar and limit the dates to certain criteria. Fiddle around to design a calendar you like.-->
      <div class=calendar>
        <input type="text" id="EDD-input" data-role="datebox" data-theme="d" data-options='{"mode":"calbox", "overrideDateFormat":"%Y-%m-%d", "overrideHeaderFormat": "%A, %-d %B, %Y", "overrideDateFieldOrder":["d","m","y"], "useHeader":false, "useInline": true, "hideInput": true, "themeDateToday": "d", "themeDate": "a", "beforeToday": true}'
        />
      </div>
    </div>

    <!--Set the footer content. Pressing the calculate button calls the CalculateEDD() with the onclick method. This is 
			a javascript function used to determine the EDD.-->
    <div data-role="footer" style="background-color:yellowgreen">
      <a href='' data-role='button' class="calButton" onclick="CalculateEDD('EDD-input')">Calculate</a>
      <div class="trimesterButton">
        <button>Click here for Trimester Tips</button>
      </div>
    </div>

  </div>
</div>

<div class=page2>

  <div class=page2header style="background-color:yellowgreen">
    <h4 style="color:DimGray">Trimester Guidelines</h4>
  </div>
  <div id=Tri1>
    <h3 style="color:tomato"> You are currently in Trimester 1 </br> (Week 1 to the end of Week 13 of pregnancy)</h3>

    <h4 class=page2_h> <b>Trimester Guidelines for You:</b></h4>
    <p class=page2p>
      You may feel nauseous - avoid food with too much fat and spices. Eat dry bread or a dry biscuit when you wake up.You should take iron and folate pills - both help your baby grow. You will start looking rounder and your breasts will get heavier. Eat a
      variety of fresh food so that you and your baby get the vitamins you both need.</p>

    <h4 class=page2_h> <b> Guidelines on Baby Growth:</b></h4>
    <p class=page2p2> The baby's head, toes and fingernails develops. The eyes become visible.
      </br> <img src="https://en.pimg.jp/018/939/028/1/18939028.jpg">
      </br>

      <p><i>Being uncertain and scared is natural. That's why we are here to hold your hand and guide you to being the Super Mom that you are.</i></p>
      </br>

      <div class=links>
        <h4 style="color:crimson">Additional professional Information and Tips regarding Trimester 1 can be found on the followng websites:<h4>
    <ul>
    <a href="https://www.google.co.za/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cad=rja&uact=8&ved=0ahUKEwjpyc-MtM7JAhWBHxQKHQGFCtoQFggzMAM&url=http%3A%2F%2Fpregnancy.familyeducation.com%2Fpregnancy-day-by-day%2Ffirst-trimester%2F36571.html&usg=AFQjCNH7n9YDSYKDW2rfTNRY4GSj3NtMhA&sig2=aAoQoDNcC5WlkIWTgIuRFA&bvm=bv.109332125,d.d24">First Trimester of Pregnancy: What to Expect - WebMD</a>
      <a href = "https://www.google.co.za/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cad=rja&uact=8&ved=0ahUKEwjpyc-MtM7JAhWBHxQKHQGFCtoQFggzMAM&url=http%3A%2F%2Fpregnancy.familyeducation.com%2Fpregnancy-day-by-day%2Ffirst-trimester%2F36571.html&usg=AFQjCNH7n9YDSYKDW2rfTNRY4GSj3NtMhA&sig2=aAoQoDNcC5WlkIWTgIuRFA&bvm=bv.109332125,d.d24">Pregnancy: First Trimester Basics - FamilyEducation</a>
    </ul></div>
    </div>

  <div id = Tri2><h3 style="color:tomato"> You are currently in Trimester 2 </br> (Week 14 to the end of Week 27 of pregnancy)</h3>

<h4 class= page2_h> <b>Trimester Guidelines for You:</b></h4>
        <p class=page2p>
          Have your blood pressure tested at a clinic - high blood pressure is dangerous. You will feel your baby move and kick inside you. You and your baby need calcium. Drink milk or maas every day.</p>

        <h4 class=page2_h> <b> Guidelines on Baby Growth:</b></h4>
        <p class=page2p> The baby's gender becomes apparent. The skeleton develops bones. The baby can make sucking motions, fat accumulates and the baby begins to hear. Also, the baby can now swallow and the rest of the physical characteristics of the baby becomes apparent,
          namely: the hair becomes visible, the fingerprints and footprints forms and the lungs develop. The baby can now respond to the mother's voice.</p>
        </br>

        <img src="https://en.pimg.jp/018/939/028/1/18939028.jpg">
        <div class=links>
          <h4 style="color:crimson">Additional professional Information and Tips regarding Trimester 2 can be found on the followng websites:<h4>
    <ul>
    <a href="https://www.google.co.za/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjLtOrft87JAhVIuBQKHTwKASkQFggaMAA&url=http%3A%2F%2Fwww.webmd.com%2Fbaby%2Fguide%2Fsecond-trimester-of-pregnancy&usg=AFQjCNGv-ynqkdLdQJYCyH2Mq6X59Jim6w&sig2=issvSHLO1tndL0bOZR55hw&bvm=bv.109332125,d.d24">Second Trimester of Pregnancy: What to Expect - WebMD</a>
      <a href = "https://www.google.co.za/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cad=rja&uact=8&ved=0ahUKEwjLtOrft87JAhVIuBQKHTwKASkQFggvMAM&url=http%3A%2F%2Fwww.healthline.com%2Fhealth%2Fpregnancy%2Fsecond-trimester-diet-nutrition&usg=AFQjCNF0u9bI_6DElMyrr3IGpmouf9sFtA&sig2=-yBLBNMJ0wii1k6De3PRNQ&bvm=bv.109332125,d.d24">The Second Trimester of Pregnancy: Diet & Nutrition</a>
  </ul></div>
</div>

  <div id = Tri3><h3 style="color:tomato"> You are currently in Trimester 3 </br> (Week 28 to the end of Week 40 of pregnancy)</h3>
<h4 class= page2_h> <b>Trimester Guidelines for You:</b></h4>

          <p class=page2p>Your body is preparing to give birth - you may get practice contractions. Get the things you will need for birth: pyjamas and wash thing. Put them in a bag so you can go straight to the hospital when labour starts.</p>

          <h4 class=page2_h> <b> Guidelines on Baby Growth:</b></h4>
          <p class=page2p2>Baby's eyes open. The baby's bones are fully developed and nervous system development continues. The baby practices breathing, detects light, gains weight rapidly, develops a firm grasp and baby's due date arrives.
          </p>

          </br>
          <img src="https://en.pimg.jp/018/939/028/1/18939028.jpg">
          <div class=links>
            <h4 style="color:crimson">Additional professional Information and Tips regarding Trimester 3 can be found on the followng websites:<h4>
    <ul>
    <a href="https://www.google.co.za/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cad=rja&uact=8&ved=0ahUKEwjB9PLcuM7JAhVItBQKHYjpBMgQFggzMAM&url=http%3A%2F%2Fwww.webmd.com%2Fbaby%2Fguide%2Fthird-trimester-of-pregnancy&usg=AFQjCNGUK3UgQlWKXwp2roVWPJEbwRN4SA&sig2=vvNcWLXnXGG2WPn2TBBY1A&bvm=bv.109332125,d.d24">Third Trimester of Pregnancy: What to Expect - WebMD</a>
      <a href = "https://www.google.co.za/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjM8bW7uM7JAhUJPRQKHR-aAv8QFgggMAE&url=http%3A%2F%2Fwww.healthline.com%2Fhealth%2Fpregnancy%2Fthird-trimester-concerns-tips&usg=AFQjCNFcaXhWVNA4jz1DYPIE1eaaxkPpdA&sig2=zhjqn5V0HlW0Ax1g5h_5tw&bvm=bv.109332125,d.d24">Third Trimester Pregnancy: Concerns and Tips - Healthline</a>
  </ul></div>
</div>
<div class= quote><h2 style="color:lawngreen"><i>"Being a mom is the highest salaried job since the payment is pure love."<i></h2>
  </br>
  <div class = button3 style="background-color:yellowgreen"></br><button id = "depressionTest">Next</button></div>
  </div>
  </div>

<div id = page3>
  <div class= page3header style="background-color:yellowgreen">
    <h4>Depression Test</h4>
          </div>
          <p>Although pregnancy is often portrayed as a time of great joy, that's not the reality for all women. At least one in ten pregnant women suffers from bouts of depression.</p>
          </br>
          <p>It's normal to feel depressed and there is nothing to be ashamed of. But wouldn't you love to combat that sinking feeling and remain a ray of sunshine?
            <p>
              <h4 style="color:coral">The Solution is in Taking The Edinburgh Depression Test and seeking help depending on your results.</h4></br>
              <h4 style="color:coral">The Pregnancy Manual 101 provides you with a reliable depression test and solutions, tips and advice depending on your emotions.</h4>
              </br>
              <h2 style="color:crimson">Allow us to make your pregnancy 9 months of joy.</h2> </br>
              <img src="http://1aqu4j2q4p6v22zy4k1s6hw1udj.wpengine.netdna-cdn.com/wp-content/uploads/2012/04/pregnant-woman-in-green.png">
              </br>

              <div class=button4 style="background-color:yellowgreen">
                <form>
                  <input type="button" value="Take The Test" onclick="window.location.href='https://www.google.co.za/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&cad=rja&uact=8&ved=0ahUKEwiWpcju187JAhXCaRQKHQehA40QFghBMAY&url=http%3A%2F%2Fwww.babymed.com%2Fedinburgh-postpartum-depression-quiz&usg=AFQjCNHZUoSQfh0S8XfoC6FsanhZ4dt_pA&sig2=3dInr-C2HPjHs98UkOjaCg&bvm=bv.109332125,d.d24'"
                  />
                </form>

              </div>


        </div>
            
          
!
            
              body {
  text-align: center;
  background: white;
}

h5 {
  color: yellowgreen;
  background-color: #e0e0d1;
  font-size: 30px;
  margin-top: 0px;
  border-radius: 15px;
}

.text {
  background-color: salmon;
  border-radius: 10px;
  width: 300px;
  height: 70px;
  margin: auto;
}

.page1h {
  color: DimGray;
  font-size: 200%;
  text-shadow: none;
}

#DepressionTest {
  margin-bottom: 20px;
  border-radius: 10px;
  color: green;
}

h1 {
  color: black;
  background: cover;
  font: default;
}

img {
  border-radius: 100px;
  color: black;
}

.ui-header .ui-title {
  white-space: normal;
  margin: 0.6em 10% 0.8em !important;
}

.page2header {
  background-color: yellowgreen;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

.page3header {
  background-color: yellowgreen;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

.button3 {
  background-color: yellowgreen;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

.button4 {
  background-color: yellowgreen;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

h4 {
  color: default;
}

.page2h {
  color: black;
  background-size: cover;
  background-color: #e5ffe5;
  border-radius: 10px;
  font: default;
}

.ui-footer .ui-btn {
  overflow: visible !important;
  white-space: normal !important;
  padding: 12px;
  font-size: 14px;
}

.page2p {
  background-color: ;
}

.pregnant {
  width: 200px;
  height: 200px;
  border-radius: 10px;
}

.ui-datebox-inline,
.ui-datebox-inlineblind,
.ui-datebox-container {
  border: 0px !important;
}

.ui-datebox-container {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  width: 80% !important;
  background-color: #FF7F50;
  border-color: black;
  border: 20px;
  margin: auto;
}

img {
  width: 200px;
  height: 200px;
  border: 20px;
  border-radius: 20px;
}

.ui-field-contain {
  border: 0;
}

.page2 .p {
  text-align: left;
  color: ;
}

.tri1 {
  text-align: center;
}

.trimesterButton {
  width: 400px;
  length: 150px;
  margin: auto;
}

.trimesterButton:hover {
  background: #98FB98;
}

.calButton: hover {
  background: #98FB98;
}

.pic2 {
  border-radius: 100px;
}

.page2_h {
  font-size: 130%;
  color: crimson;
}

#depressionTest: hover {
  background: #98FB98;
}

#depressionTest {
  width: 100px;
  height: 30px;
  border-radius: 2px;
}

.page2 {
  background-color: #F5F5F5;
}

#page3 {
  background-color: #F5F5F5;
}
            
          
!
            
                    // This function takes an input date, defined by the name property and calculates the EDD
      // using the moment.js library. The EDD is calculated by adding 280 days to the input date
      // and the format is changed to be more reader-friendly.
      // Finally, the text of the header is then updated to display on screen.
      // This function takes an input date, defined by the name property and calculates the EDD
      // using the moment.js library. The EDD is calculated by adding 280 days to the input date
      // and the format is changed to be more reader-friendly.
      // Finally, the text of the header is then updated to display on screen.

      $(".trimesterButton").hide();
      $(".text").hide();
      $("#Tri1").hide();
      $("#Tri2").hide();
      $("#Tri3").hide();
      $("#page3").hide();
      $(".pic2").hide();
      $("#depressionTest").hide();
      $(".page1_results").hide();

      function CalculateEDD(id) {
        var date = $("#" + id).val();
        var edd = moment(date).add(280, 'days').format('DD MMM YYYY');
        $(".edd_date").hide();
        $(".text").show();
        $(".calendar").hide();
        $(".calButton").hide();
        $(".pregnant").hide();
        $(".pic2").show();
        $(".page1_intro").hide();
        $(".page1_results").show();
        $(".text").html("<h2>" + "Your EDD is:   " + edd + "</h2>");

        $(".trimesterButton").show();
        $(".trimesterButton").click(function() {

          $(".deliveryDate").hide();
          $("#depressionTest").show();

          var date_input = moment(date);
          var currentDate = moment();
          var days = parseInt(currentDate.diff(date_input, 'days'));
          var weeks = days / 7;
          if (weeks > 0 && weeks < 14) {
            $("#Tri1").show();
          } else if (weeks > 14 && weeks < 28) {
            $("#Tri2").show();
          } else {
            $("#Tri3").show();
          }
        });
        $("#depressionTest").click(function() {
          $(".page2").hide();
          $("#page3").show();
        });

        /*$(".text").hide();
        $(".edd_date").show();*/

      };
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console