Skip to content

Commit

Permalink
Journey labs layout work
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrahimMahadi
BrahimMahadi committed Nov 4, 2024
1 parent 57843fb commit 70a9c18
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 0 deletions.
108 changes: 108 additions & 0 deletions méli-mélo/th-empathy/empathy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,3 +92,111 @@ <h4>Code</h4>
<pre><code>&lt;div class="wb-frmvld provisional wb-steps quiz empathy panel-body"&gt;
&lt;!-- Steps Quiz Form --&gt;
&lt;/div&gt;</code></pre>

<h3>Life Journey Home Page Layout</h3>
<div class="mrgn-tp-lg container">
<div class="row wb-eqht-grd">
<div class="col-xs-12 col-md-8 empathy main-content small">
<div class="row wb-eqht-grd">
<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
<div class="empathy cards h-100 full-width">
<a href="#" class="stretched-link"><h2 class="h4">Preparing for end of life</h6></a>
<p>Information on how to prepare, organize your affairs and leave instructions to your survivors.
</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
<div class="empathy cards h-100 full-width">
<a href="#" class="stretched-link"><h2 class="h4">Notify of a death</h2></a>
<p>Programs and departments to notify to cancel benefits or return ineligible benefits.</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
<div class="empathy cards h-100 full-width">
<a href="#" class="stretched-link"><h2 class="h4">Benefits and Programs</h2></a>
<p>Applying for benefits to which you may be entitled following a death.</p><br>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
<div class="empathy cards h-100 full-width">
<a href="#" class="stretched-link"><h2 class="h4">Representing someone who died</h2></a>
<p>The legal, financial, estate planning, and other aspects of representing someone who has died.</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
<div class="empathy cards h-100 full-width">
<a href="#" class="stretched-link"><h2 class="h4">Taxes and finances related to death</h2></a>
<p>Information on managing finances of an individual who died, including preparing and filing their taxes.
</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
<div class="empathy cards h-100 full-width">
<a href="#" class="stretched-link"><h2 class="h4">Estates and wills</h2></a>
<p>Find information about estate planning and preparing a will, as well as what to do when there is no will.</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
<div class="empathy cards h-100 full-width">
<a href="#" class="stretched-link"><h2 class="h4">Death-related documents</h2></a>
<p>Documents you may need to obtain following a death.</p><br>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>

<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
<div class="empathy cards h-100 full-width">
<a href="#" class="stretched-link"><h2 class="h4">Contacting services</h2></a>
<p>Contact information for various federal or provincial programs, departments, or agencies.</p>
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>

<div class="col-xs-12 col-md-4 cards empathy quiz-content mrgn-bttm-lg">
<h2>Someone died, <br>what do I do?</h2>
<p class="mrgn-tp-lg">Answer a few simple questions for guidance on your situation.</p>
<p class="mrgn-tp-lg"><span class="fas fa-clock"></span> This will take less than a minute.</p>
<a href="#" class="mrgn-tp-lg btn btn-default btn-empathy btn-block btn-lg">Start questionnaire</a>

<img class="quiz-img mrgn-tp-lg center-block hidden-xs hidden-sm" src="./images/lloj-direction-cloud.256.png" alt="Someone died, what do I do?">
</div>
</div>
</div>
<h4>Code</h4>
<pre><code>&lt;div class="mrgn-tp-lg container"&gt;
&lt;div class="row wb-eqht-grd"&gt;
&lt;div class="col-xs-12 col-md-8 empathy main-content small"&gt;
&lt;div class="row wb-eqht-grd"&gt;
&lt;div class="col-sm-12 col-md-6 mrgn-bttm-lg"&gt;
&lt;div class="empathy cards h-100 full-width"&gt;
&lt;a href="#" class="stretched-link"&gt;&lt;h2 class="h4"&gt; Lorem ipsum &lt;/h2&gt;&lt;/a&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectet&lt;/p&gt;
&lt;span class="fas fa-arrow-right" aria-hidden="true"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="col-xs-12 col-md-4 cards empathy quiz-content mrgn-bttm-lg"&gt;
&lt;h2&gt;Lorem ipsum?&lt;/h2&gt;
&lt;p class="mrgn-tp-lg"&gt;Lorem ipsum dolor sit amet, consectet&lt;/p&gt;
&lt;p class="mrgn-tp-lg"&gt;&lt;span class="fas fa-clock"&gt;&lt;/span&gt; This will take less than a minute.&lt;/p&gt;
&lt;a href="#" class="mrgn-tp-lg btn btn-default btn-empathy btn-block btn-lg"&gt;Start questionnaire&lt;/a&gt;
&lt;img class="quiz-img mrgn-tp-lg center-block hidden-xs hidden-sm" src="./images/lloj-direction-cloud.256.png" alt=""&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
Binary file added méli-mélo/th-empathy/images/lloj-direction-cloud.256.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions méli-mélo/th-empathy/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,42 @@ h1#wb-cont.empathy {
color: #5c2790;;

}

/* Thematic Journey Labs homepage layout */

.empathy.cards {
padding: 20px;
box-shadow: 0px 2px 3px 0px #cccccc;
border-radius: 10px;
}

.empathy.main-content .empathy.cards:hover {
background-color: #6c3c9b;
color: #fff;
cursor: pointer;
}

/* Added to specifically target the link*/
.empathy.main-content .empathy.cards:hover a {
color: #fff;
}

.empathy.quiz-content {
background-color: #6c3c9b;
color: #fff;
}

/*
Might be able to accomplish something similar by adding the purple box first and floating it right -- doesn't work in a display flex
*/
@media screen and (max-width: 991px) {
.empathy.main-content {
order: 1;
}
}

@media screen and (min-width: 992px) {
.empathy.quiz-img {
width: 100%;
}
}

0 comments on commit 70a9c18

Please sign in to comment.