Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Empathy Thematic - Improve CSS for Card Pattern #2445

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Empathy Thematic - Improve CSS for Card Pattern #2445

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70a9c18
Journey labs layout work
BrahimMahadi Nov 1, 2024
202d3df
Addressed some changes
BrahimMahadi Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions méli-mélo/th-empathy/empathy.html
View file
Open in desktop
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">
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
<div class="row wb-eqht-grd">
<div class="col-xs-12 col-md-8 empathy main-content small">
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
<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>
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
<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>
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
</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>
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
<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?">
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
</div>
<h4>Code</h4>
<pre><code>&lt;div class="mrgn-tp-lg container"&gt;
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
&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
Open in desktop
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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;
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
}
}

@media screen and (min-width: 992px) {
.empathy.quiz-img {
width: 100%;
}
}
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
Loading