Style exercises page

Related #27
CYPIAPT-LNDSE · Feb 1, 2017 · 53b4690 · 53b4690
1 parent 6b01499
commit 53b4690
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 11 deletions.
diff --git a/assets/images/glasses.png b/assets/images/glasses.png
diff --git a/assets/images/monster-path.png b/assets/images/monster-path.png
diff --git a/...ay-route-pin-icon-on-the-way-track-vector-roadmap-template-design-503823823.jpg b/...ay-route-pin-icon-on-the-way-track-vector-roadmap-template-design-503823823.jpg
diff --git a/html/exercises.html b/html/exercises.html
@@ -11,6 +11,50 @@
     <title>SocialUp</title>
   </head>
   <body>
+    <header class="container-fluid">
+      <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container-fluid">
+          <div class="navbar-header">
+            <a class="navbar-brand" href="index.html">
+              <object id="cloud-logo" type="image/svg+xml" data="../assets/icons/cloud.svg" width="40"></object>
+            </a>
+          </div>
+          <ul class="nav navbar-nav">
+            <li class=""><a href="index.html">Home</a></li>
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="facts.html">Facts</a></li>
+            <li><a href="exercises.html">Exercises</a></li>
+            <li><a href="testimonials.html">Testimonials</a></li>
+          </ul>
+        </div>
+      </nav>
+      </header>
+        <div class="container-fluid" id="exercises-content">
+        <div class="row">
+          <div class="col-xs-5 col-xs-offset-1">
+            <h2>Pick your challenge!</h2>
+            <img src="../assets/images/monster-path.png" alt="" id="monster-path">
+          </div>
+          <div class="col-xs-5">
+            <h2>Exercise 1: Core beliefs</h2>
+            <p>Everyone looks at the world differently. Two people can have the same experience, yet have very different interpretations of what happened.</p>
+            <img src="../assets/images/glasses.png" alt="" id="glasses-image">
+            <p id="glasses-caption">Think of core beliefs like a pair of sunglasses. Everyone has a different ‘shade’ that causes them to see things differently.</p>
+            <p></p>
+            <h2 id="beliefs-exercise">Exploring your core beliefs</h2>
+            <p>To begin challenging your negative core beliefs, you first need to identify what they are. Some common examples are: ‘I’m not good enough’, I’m stupid’, ‘I’m unlovable’ and ‘I’m undeserving’.</p>
+            <ol id="beliefs-list">
+              <li>What is one of your negative core beliefs?</li>
+              <li>Write down any emotions that you have about your core belief.</li>
+              <li>List three pieces of evidence contrary to your negative core belief.</li>
+              <li>Write down your emotions again; have any of them changed?</li>
+            </ol>
+            <button class="btn btn-primary" id="button-share" type="button">share your thoughts</button>
+            <button class="btn btn-primary" id="button-next" type="button">next exercise</button>
+          </div>
+        </div>
+        </div>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
     <script src="../js/app.js"></script>

diff --git a/styles/exercises.css b/styles/exercises.css
@@ -0,0 +1,91 @@
+/*
+color1: hsla(0, 0%, 99%, 1);
+color2: hsla(231, 80%, 80%, 1); 163 175 245
+color3: hsla(30, 91%, 56%, 1); 245 143 41
+color4: hsla(163, 100%, 33%, 1); 0 168 121
+color5: hsla(211, 56%, 43%, 1); 48 108 171
+*/
+
+body {
+  counter-reset: item;
+}
+
+p, ol {
+  font-size: 1.4em;
+}
+
+#exercises-content {
+  margin-top: 100px;
+}
+
+#monster-path {
+  width: 85%;
+}
+
+#glasses-image {
+  width: 80%;
+  margin-left: 20px;
+  margin-bottom: 20px;
+}
+
+#glasses-caption {
+  font-style: italic;
+}
+
+#beliefs-exercise {
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+
+#beliefs-list {
+  list-style: none;
+  padding-left: 15px;
+}
+
+#beliefs-list li {
+  counter-increment: item;
+  margin-bottom: 5px;
+}
+
+#beliefs-list li:before {
+  margin-right: 15px;
+  content: counter(item);
+  background: hsla(211, 56%, 43%, 1);
+  border-radius: 100%;
+  color: white;
+  width: 1.2em;
+  text-align: center;
+  display: inline-block;
+}
+
+#button-share, #button-share:hover, #button-share:active,
+#button-next, #button-next:hover, #button-next:active {
+  background-color: white;
+  background-image: url('../assets/images/panel-blue.png'); !important;
+  background-size: 100% 100%;
+  height: 50px;
+  width: 200px;
+  border: 0px solid white !important;
+  font-size: 1.3em;
+  color: black;
+  outline: none;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  margin-top: 20px;
+  margin-bottom: 40px;
+}
+
+#button-share:hover, #button-next:hover {
+  cursor: pointer;
+}
+
+#button-share:active, #button-next:active {
+  position: relative;
+  top: 5px;
+  cursor: pointer;
+}
+
+#button-share {
+  margin-right: 10px;
+  margin-left: 30px;
+}
diff --git a/styles/index.css → styles/landing.css b/styles/index.css → styles/landing.css
@@ -5,14 +5,6 @@
 body {
   background-color: hsla(0, 0%, 99%, 1);
 }
-/*
-color1: hsla(0, 0%, 99%, 1);
-color2: hsla(231, 80%, 80%, 1); 163 175 245
-color3: hsla(30, 91%, 56%, 1); 245 143 41
-color4: hsla(163, 100%, 33%, 1); 0 168 121
-color5: hsla(211, 56%, 43%, 1); 48 108 171
-*/
-
 
 .heading, h2, h4 {
   font-family: 'Gloria Hallelujah', cursive;
@@ -54,12 +46,13 @@ color5: hsla(211, 56%, 43%, 1); 48 108 171
   background-image: url('../assets/images/panel-blue.png'); !important;
   background-size: 100% 100%;
   height: 40px;
-  width: 100px;
+  width: 160px;
   border: 0px solid white !important;
   font-size: 1.3em;
-  width: 160px;
   color: black;
   outline: 0;
+  box-shadow: none;
+  -webkit-box-shadow: none;
 }
 
 .caret {

diff --git a/styles/main.css b/styles/main.css
@@ -1,5 +1,6 @@
-@import url("index.css");
+@import url("landing.css");
 @import url("facts-styles.css");
+@import url("exercises.css");
 
 * {
   box-sizing: border-box;