Skip to content

Instantly share code, notes, and snippets.

@teeerevor

teeerevor/index.html

Last active September 5, 2018 11:53
Show Gist options
  • Save teeerevor/3f2eade628e6e12531aa5449dc06366a to your computer and use it in GitHub Desktop.
Save teeerevor/3f2eade628e6e12531aa5449dc06366a to your computer and use it in GitHub Desktop.
Download ZIP
Psychwire App about page
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500" rel="stylesheet">
<style type="text/css">
body {
font-family: Montserrat, verdana, sans-serif;
font-weight: 300;
background-color: transparent;
color: #666;
font-size: 16px;
line-height: 1.75;
}
.panel {
display: flex;
flex-direction: column;
max-width: 800px;
margin: auto;
}
section {
background-color: white;
padding: 64px;
border-color: grey;
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.05);
}
section.icon-section {
display: flex;
flex-wrap: wrap;
}
section+section {
margin-top: 32px;
}
.icon-box {
width: 82px;
margin-right: 64px;
margin-bottom: 32px;
}
.content {
flex: 1 1 360px;
}
.howdy {
font-size: 18px;
}
.light-button {
display: block;
display: none;
margin: auto;
margin-top: 32px;
padding: 16px 64px;
background-color: #5A79D0;
color: white;
text-align: center;
text-decoration: none;
font-weight: 500;
letter-spacing: 1.4px;
width: 200px;
}
.light-button:hover {
background-color: #3F4E7B;
}
h2 {
font-size: 24px;
font-weight: 400;
font-color: #8C8C8C;
}
h3 {
margin-top: 0;
font-size: 18px;
font-weight: 500;
font-color: #8C8C8C;
}
.tips {
margin: 96px 64px;
position: relative;
}
.tips::after {
display: inline-block;
background-color: #5A79D0;
height: 2px;
width: 64px;
content: ' ';
position: absolute;
bottom: -16px;
left: 0;
}
</style>
</head>
<body>
<div class='panel'>
<section>
<p class='howdy'>
Howdy folks,
</p>
<p>
I am thrilled to welcome you to the Happiness Trap 8-week online program. The program is designed to help you build a rich, full and meaningful life that you&rsquo;ll love. Before we get started, I just want to share some quick tips
with you to make your learning experience as stress-free as possible.
</p>
<a class='light-button' href="/courses" target="_blank">BEGIN YOUR COURSE</a>
</section>
<h2 class="tips"> Tips to Get You Started </h2>
<section class='icon-section'>
<div class='icon-box'>
<svg xmlns="http://www.w3.org/2000/svg" width="82" height="82" viewBox="0 0 82 82">
<g fill="none" fill-rule="evenodd">
<rect width="82" height="82" fill="#1C3A61" rx="41"/>
<path fill="#FFF" d="M45.207 44.436v-.004c-.536 0-1.074.033-1.607-.008-.692-.052-.903.233-.868.833.037.653.008 1.31.008 1.964 0 1.303-.001 1.316 1.4 1.409.492.032.652.213.525.649-.22.753-.664 1.352-1.399 1.744-.284.152-.47.29-.283.635.162.298.32.452.728.364 1.822-.394 3.392-1.941 3.72-3.637.216-1.124.104-2.25.139-3.376.012-.395-.174-.583-.609-.576-.584.01-1.169.003-1.754.003m7.03-.002c-.585 0-1.17.017-1.754-.006-.544-.02-.737.21-.723.691.021.7.004 1.4.004 2.1 0 1.308 0 1.32 1.401 1.41.483.032.661.198.533.643-.218.755-.656 1.36-1.394 1.746-.334.175-.453.344-.263.698.182.338.408.392.765.285 1.939-.58 3.217-1.73 3.655-3.61.254-1.096.072-2.207.134-3.309.029-.517-.238-.674-.75-.654-.535.022-1.072.005-1.608.006m9.251 16.003c-1.932-.466-3.891-.844-5.771-1.484-.298-.101-.634-.15-.887-.311-1.504-.959-3.105-.623-4.759-.472-5.33.487-9.981-.814-13.363-4.892-3.016-3.637-2.65-8.739.78-12.058 2.854-2.762 6.407-4.032 10.482-4.129 3.505-.083 6.713.783 9.526 2.741 2.219 1.545 3.733 3.547 4.294 6.11.03.13.091.255.138.383v2.713c-.396 1.624-.988 3.169-2.124 4.491-.172.2-.118.424-.097.65.203 2.208 1.13 4.19 2.22 6.122-.057.291-.3.07-.439.136"/>
<path fill="#FFF" d="M39.525 20c1.333.254 2.696.342 4.017.677 5.145 1.303 9.364 3.796 12.118 8.134 1.235 1.943 1.826 4.078 1.894 6.337.016.523-.1.728-.696.44-.888-.427-1.828-.75-2.784-1.027-.348-.1-.585-.236-.66-.623-.719-3.73-3.16-6.282-6.6-8.1-2.952-1.563-6.177-2.259-9.552-2.145-4.777.16-9.002 1.59-12.37 4.906-3.88 3.82-3.97 9.718-.053 13.504.774.748.982 1.426.713 2.411-.341 1.248-.628 2.508-1.038 3.74-.054.162-.22.362-.049.503.157.13.374-.001.55-.058 1.871-.601 3.69-1.31 5.425-2.2.185-.094.368-.3.591-.173.23.131.112.37.072.56-.176.841.011 1.673.11 2.498.062.508-.135.73-.58.938-2.278 1.068-4.7 1.765-7.142 2.405a60.505 60.505 0 0 1-4.552 1.013c-.311.056-.62.133-.939.048v-.136c1.701-2.893 3.005-5.909 3.314-9.232.025-.276-.129-.462-.296-.664a13.73 13.73 0 0 1-2.181-3.657c-.376-.935-.552-1.912-.837-2.866V33.57c.044-.128.106-.253.13-.385.565-2.993 2.078-5.529 4.38-7.659 2.636-2.439 5.847-3.945 9.413-4.855 1.295-.33 2.634-.412 3.941-.67h3.66z"/>
<path fill="#FFF" d="M39.675 36.146h-2.046c-.37.002-.62-.123-.607-.508.043-1.26-.147-2.528.135-3.78.45-1.997 1.767-3.258 3.84-3.883.486-.147.824-.107 1.065.38.225.455.08.664-.356.912-.604.343-1.098.816-1.33 1.477-.151.431-.03.622.482.656 1.585.105 1.584.117 1.584 1.601 0 .79-.022 1.581.006 2.37.02.59-.252.814-.873.786-.632-.03-1.267-.007-1.9-.007v-.004M32.438 36.146c-.682 0-1.364-.004-2.046.002-.457.005-.678-.196-.668-.617.028-1.193-.086-2.389.12-3.58.33-1.891 1.963-3.542 3.977-4.017.529-.125.749.085.96.475.218.402.08.603-.308.81a2.906 2.906 0 0 0-1.35 1.462c-.196.464-.145.754.49.714h.073c1.559-.007 1.451-.108 1.453 1.365 0 .903-.016 1.806.005 2.71.01.49-.199.7-.733.684-.657-.02-1.315-.005-1.973-.005v-.003"/>
</g>
</svg>
</div>
<div class='content'>
<h3>The Forum</h3>
<p>
You&rsquo;ll notice that you have access to a page called &lsquo;Forum&rsquo; - this is an interactive forum where you can share your experiences with not only your peers, but also The Happiness Trap faculty. Feel free to
post on there any time of the day or night, and one of our team members will respond to you within a few hours. Just one request from me: please do not post anything about technical difficulties or administration queries in the
forum. Kindly read the
&lsquo;customer service&rsquo; section below for information on where to direct those types of queries.
</p>
</div>
</section>
<section class='icon-section'>
<div class="icon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="82" viewBox="0 0 82 82">
<defs>
<path id="a" d="M17 21h48.265v39.54H17z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<rect width="82" height="82" fill="#EBB23F" rx="41"/>
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<path fill="#FFF" d="M39.436 53.363c.077-.138.045-.26.045-.375.003-2.206.002-4.411.002-6.617 0-6.168-.002-12.336.006-18.503 0-.265-.073-.453-.269-.627a9.84 9.84 0 0 0-1.386-1.054c-2.647-1.622-5.591-2.29-8.624-2.668-.958-.12-1.92-.177-2.883-.234-.413-.024-.412-.045-.412.374l-.001 25.745c0 .684 0 .692.695.715 1.963.066 3.91.29 5.835.677 2.288.46 4.495 1.159 6.54 2.311.148.085.298.17.452.256m3.343.006c.085-.034.126-.044.16-.064 2.371-1.41 4.965-2.17 7.656-2.655 1.804-.325 3.626-.475 5.454-.561.251-.013.303-.09.303-.326-.006-8.724-.006-17.448 0-26.173 0-.252-.05-.347-.324-.323-1.135.097-2.272.158-3.403.306-1.973.26-3.903.681-5.76 1.404-1.4.544-2.709 1.242-3.827 2.266-.193.177-.266.363-.266.628.008 8.362.007 16.724.007 25.087v.41m-5.167 2.809c-.647-.42-1.269-.706-1.902-.966-1.948-.799-3.986-1.248-6.066-1.528-2.214-.297-4.438-.352-6.665-.32-.28.004-.37-.053-.37-.356.01-10.901.01-21.802 0-32.703 0-.303.093-.36.371-.357 1.427.016 2.854-.01 4.279.083 3.528.233 6.988.783 10.252 2.227 1.23.544 2.39 1.206 3.418 2.079.144.122.242.135.393.009 1.72-1.44 3.724-2.337 5.845-2.992 2.08-.642 4.214-.997 6.38-1.206 1.937-.188 3.876-.192 5.818-.198.211 0 .31.054.28.275-.009.064-.001.131-.001.197l-.001 32.473c0 .536.073.46-.478.462-1.284.006-2.568-.014-3.85.07-3.22.212-6.382.698-9.353 2.045-.427.194-.846.4-1.24.663.054.094.129.055.185.055 4.907.003 9.814.004 14.721.001 1.162 0 2.048-.698 2.291-1.79.06-.27.037-.547.037-.82l.001-26.447c0-.945.453-1.574 1.286-1.79.967-.253 1.971.496 2.007 1.497.002.088.002.176.002.264 0 8.914-.02 17.828.013 26.742.01 2.607-1.82 5.036-4.51 5.54a5.638 5.638 0 0 1-1.046.102c-12.393-.002-24.788 0-37.183-.004-2.797-.001-5.17-2.116-5.494-4.873-.033-.283-.025-.57-.025-.856 0-8.87.003-17.74-.007-26.611 0-.68.19-1.235.781-1.597 1.111-.683 2.471.084 2.522 1.414.005.143.001.286.001.428 0 8.805.003 17.61-.003 26.414 0 .984.396 1.71 1.273 2.163.286.148.598.221.92.222 4.973.003 9.946.003 14.918.003.039 0 .077-.005.2-.014" mask="url(#b)"/>
</g>
</svg>
</div>
<div class="content">
<h3> The Library </h3>
<p>
By clicking on the &lsquo;library&rsquo; page, you will find all of the supplementary audio and text resources for the program. Keep checking the library because new material will be uploaded each week.
</p>
</div>
</section>
<section class='icon-section'>
<div class="icon-box">
<svg xmlns="http://www.w3.org/2000/svg" width="82" height="82" viewBox="0 0 82 82">
<g fill="none">
<rect width="82" height="82" fill="#34C8A9" rx="41"/>
<path fill="#FFF" d="M33.04,52.017 C31.502,49.27 29.979,46.6 28.507,43.902 C27.182,41.472 27.207,41.46 29.747,40.349 C31.823,39.441 31.817,39.443 32.726,41.577 C33.202,42.694 33.686,43.808 34.196,44.909 C34.71,46.017 35.503,46.362 36.487,45.954 C37.501,45.534 37.826,44.656 37.334,43.498 C36.652,41.89 35.967,40.281 35.204,38.711 C34.928,38.143 35.008,37.908 35.561,37.691 C36.4423019,37.3386942 37.3158415,36.9672731 38.181,36.577 C39.011,36.207 39.575,36.417 39.878,37.286 L42.532,44.896 C42.649,45.233 42.622,45.436 42.196,45.544 C38.557,46.466 35.933,48.854 33.541,51.574 C33.421,51.711 33.267,51.818 33.04,52.017"/>
<path fill="#FFF" d="M41.84 61.686C34.529 61.686 27.218 61.684 19.906 61.692 19.246 61.692 18.662 61.695 19.23 60.805 21.387 57.428 24.016 54.608 28.007 53.398 29.52 52.94 31.039 52.963 32.461 53.62 33.231 53.975 33.579 53.758 34.044 53.18 35.586 51.274 37.387 49.651 39.509 48.392 41.94 46.948 44.42 46.755 47.031 47.885 49.367 48.897 51.402 50.339 53.258 52.053 53.718 52.477 54.113 52.725 54.836 52.676 56.282 52.576 57.579 53.204 58.746 54.036 61.073 55.696 62.938 57.786 64.356 60.264 65.099 61.562 65.007 61.704 63.546 61.704 56.311 61.708 49.076 61.706 41.84 61.706L41.84 61.686zM26.6 16C27.33 15.995 27.65 16.335 27.8 16.857 27.957 17.409 27.725 17.796 27.247 18.09 25.822 18.969 25.849 18.966 26.547 20.544 28.927 25.927 31.293 31.317 33.659 36.705 34.666 38.997 35.652 41.295 36.669 43.582 37.004 44.333 37.101 45.024 36.201 45.382 35.34 45.724 34.977 45.102 34.681 44.429 31.346 36.859 28.32 29.154 24.767 21.679 24.67 21.472 24.564 21.268 24.492 21.053 24.117 19.947 23.576 19.441 22.398 20.237 21.752 20.672 21.03 20.532 20.711 19.715 20.421 18.967 20.816 18.513 21.513 18.213 22.976 17.582 24.42 16.907 25.875 16.259 26.15 16.137 26.441 16.056 26.6 16"/>
</g>
</svg>
</div>
<div class="content">
<h3> Dig Deeper </h3>
<p>
As you move through the program, you will see prompts to &lsquo;dig deeper&rsquo; and it is here that you can find out more about a particular topic, should you wish to. It is not essential that you &lsquo;dig deeper&rsquo;,
it is just an opportunity for you to learn even more and get more bang for your buck!
</p>
</div>
</section>
<section class='icon-section'>
<div class="icon-box">
<svg xmlns="http://www.w3.org/2000/svg" width="82" height="82" viewBox="0 0 82 82">
<g fill="none" fill-rule="evenodd">
<rect width="82" height="82" fill="#85B2E4" rx="41"/>
<path fill="#FDFDFD" d="M51.691 20H29.31C25.289 20 22 23.294 22 27.32v23.329c0 4.025 3.289 7.32 7.309 7.32h17.13L59 63V27.319C59 23.294 55.711 20 51.691 20"/>
<path fill="#79B2E9" d="M40.387 53a24.254 24.254 0 0 1-13.778-4.275 1.418 1.418 0 0 1-.372-1.95 1.37 1.37 0 0 1 1.92-.379 21.521 21.521 0 0 0 12.23 3.795c4.476 0 8.779-1.363 12.443-3.942a1.372 1.372 0 0 1 1.924.354 1.42 1.42 0 0 1-.349 1.955A24.242 24.242 0 0 1 40.387 53"/>
</g>
</svg>
</div>
<div class="content">
<h3> Customer Service </h3>
<p>
As mentioned, if you have any administration queries or technical difficulties, please direct them to our customer service team. You can contact customer services via the clickable blue button that is located at the
bottom-right of your screen.
</p>
</div>
</section>
<section class='icon-section'>
<div class="icon-box">
<svg xmlns="http://www.w3.org/2000/svg" width="82" height="82" viewBox="0 0 82 82">
<g fill="none" fill-rule="evenodd">
<rect width="82" height="82" fill="#FC6E57" rx="41"/>
<path fill="#FFF" d="M25.302 32.6a16.743 16.743 0 0 1 10.034-7.083c.325-.073.588-.302.715-.61a1.02 1.02 0 0 0-.083-.934 7.547 7.547 0 0 0-6.402-3.55A7.565 7.565 0 0 0 22 27.985a7.53 7.53 0 0 0 1.637 4.692c.202.26.518.402.852.385.329-.013.631-.186.813-.463zM52.611 20.423a7.542 7.542 0 0 0-6.384 3.523 1.02 1.02 0 0 0 .632 1.55 16.694 16.694 0 0 1 10.076 7.029 1.036 1.036 0 0 0 1.675.06 7.517 7.517 0 0 0 1.568-4.596 7.568 7.568 0 0 0-7.567-7.566zM57.81 43.59c0-2.923-.757-5.666-2.081-8.057a16.7 16.7 0 0 0-12.052-8.397 16.822 16.822 0 0 0-2.532-.211c-.9 0-1.774.09-2.64.229a16.71 16.71 0 0 0-11.982 8.45 16.584 16.584 0 0 0-2.043 7.985c0 4.953 2.186 9.393 5.622 12.444l-1.401 1.983a1.89 1.89 0 1 0 3.086 2.186l1.403-1.978a16.519 16.519 0 0 0 7.955 2.03 16.54 16.54 0 0 0 7.96-2.03l1.403 1.978a1.888 1.888 0 0 0 2.635.45 1.893 1.893 0 0 0 .451-2.636l-1.407-1.983c3.442-3.051 5.623-7.491 5.623-12.444zM41.145 55.591c-6.618 0-12.003-5.384-12.003-12.003 0-2.064.524-4.008 1.446-5.705a12.014 12.014 0 0 1 8.708-6.142c.607-.095 1.222-.16 1.849-.16.597 0 1.178.06 1.748.143a12.02 12.02 0 0 1 8.797 6.129 11.933 11.933 0 0 1 1.462 5.735c0 6.62-5.384 12.003-12.007 12.003z"/>
<path fill="#FFF" d="M47.872 46.398l-4.58-2.83a2.207 2.207 0 0 0-.792-1.325l.212-5.744a1.337 1.337 0 0 0-1.281-1.381 1.33 1.33 0 0 0-1.377 1.282l-.211 5.752a2.215 2.215 0 0 0 1.277 4.026c.345 0 .67-.086.964-.23l4.394 2.71a1.323 1.323 0 0 0 1.826-.429 1.324 1.324 0 0 0-.432-1.83z"/>
</g>
</svg>
</div>
<div class="content">
<h3> Course Time </h3>
<p>
Finally, to make your whole course as easy as we can, we have added an indication of how long each module will take to do. Keep in mind everyone is different, some people like to press pause and ponder or practice - and
others like to get through the content as quickly as they can. The length of the module includes the video and audio content, but doesn&rsquo;t allow for time taken to read written materials, or for taking notes.
</p>
</div>
</section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment