css FMG学习内容

Posted 2021-05-13

<section id="learningContent">
    <a href="/resource-center/retirement">
    <section class="matter" id="retire">
        <h2>Retirement</h2>
        <p>Steps to consider so you can potentially accumulate the money you'll need to pursue the retirement activities you want.</p>
    </section></a>

    <a href="/resource-center/investment">
    <section class="matter" id="invest">
        <h2>Investment</h2>
        <p>Create an investment strategy that’s designed to pursue your risk tolerance, time horizon, and goals.</p>
    </section></a>

    <a href="/resource-center/estate">
    <section class="matter" id="estate">
        <h2>Estate</h2>
        <p>Manage personal affairs while you're alive and control the distribution of wealth upon your death.</p>
    </section></a>

    <a href="/resource-center/insurance">
    <section class="matter" id="insurance">
        <h2>Insurance</h2>
        <p>A well-structured insurance program can help protect your loved ones from the financial consequences of unexpected events.</p>
    </section></a>

    <a href="/resource-center/tax">
    <section class="matter" id="tax">
        <h2>Tax</h2>
        <p>Understanding tax strategies can potentially help you better manage your overall tax situation.</p>
    </section></a>

    <a href="/resource-center/money">
    <section class="matter" id="money">
        <h2>Money</h2>
        <p>Managing your money involves more than simply making and following a budget.</p>
    </section></a>

    <a href="/resource-center/lifestyle">
    <section class="matter" id="life">
        <h2>Lifestyle</h2>
        <p>How to strike a balance between work and leisure is just one aspect of the wide-ranging Lifestyle matters.</p>
    </section></a>
</section>

.homepage #learningContent {
  text-align: center;
  margin: 0 -10px;
}
.homepage #learningContent a {
  width: 33%;
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  box-sizing: border-box;
}
.homepage #learningContent section {
  float: none;
  width: auto;
  margin: 0;
  min-height: 200px;
  padding: 15px;
  display: block;
  position: relative;
  border: 1px solid #D7D7D7;
}
.homepage #learningContent a:hover section {
  border: 1px solid #5D043B;
}
.homepage #learningContent section:after {
  content: "";
  background-color: #eee;
  background-image: url(https://s3.amazonaws.com/PlatinumStrategies/PWS/members/dochinez/dochinez-learning-bg.jpg);
  background-repeat: no-repeat;
  opacity: 0.25;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  /*z-index: -1;*/
}
.homepage #learningContent a:hover section:after {
  opacity: 0.15;
}
.homepage #learningContent #retire:after {
  background-position: top left;
}
.homepage #learningContent #invest:after {
  background-position: top center; 
}
.homepage #learningContent #estate:after {
  background-position: top right;  
}
.homepage #learningContent #insurance:after {
  background-position: center left; 
}
.homepage #learningContent #tax:after {
  background-position: center;  
}
.homepage #learningContent #money:after {
  background-position: center right; 
}
.homepage #learningContent #life:after {
  background-position: bottom center;  
}