css 卡片样式1

Posted 2021-05-13

<section class="card slab primary cssbg puff">
		<div class="row">

			<div class="flex">
			
			<div class="large-6 medium-6 columns card tertiary breakout ">
				<h2 class="feature accent">Milestones</h2>
				Centre for Information and Guidance India- one of the largest not-for-profit organizations, is jubilant to have crossed two decades’ milestone of active, committed grassroots social development. Today, we have a full scroll of historic moments, reminiscent of our hard but sweet journey. The 20 years long interventions in the educational and social development fields benefited around three million people, especially marginalized and under privileged communities.
				<p class="btn2 feature "> <a href="#">Learn More</a></p>
			</div>
			<div class="large-6 medium-6 columns card primary m-hide" style="background-image: url(https://www2.griffith.edu.au/__data/assets/image/0036/168678/varieties/gu8.jpg);">
				
			</div>
			</div>
		</div>
	</section>

<section class="card slab primary">
		<div class="row">
			<div class="large-6 medium-6 columns card primary">
				<h2 class="feature accent">Profile</h2>
				Centre for Information and Guidance India- one of the largest not-for-profit organizations, is jubilant to have crossed two decades’ milestone of active, committed grassroots social development. Today, we have a full scroll of historic moments, reminiscent of our hard but sweet journey. The 20 years long interventions in the educational and social development fields benefited around three million people, especially marginalized and under privileged communities.
			</div>
			<div class="large-6 medium-6 columns card tertiary breakout ">
				<h2 class="feature accent">Milestones</h2>
				Centre for Information and Guidance India- one of the largest not-for-profit organizations, is jubilant to have crossed two decades’ milestone of active, committed grassroots social development. Today, we have a full scroll of historic moments, reminiscent of our hard but sweet journey. The 20 years long interventions in the educational and social development fields benefited around three million people, especially marginalized and under privileged communities.
				<img src="https://www2.griffith.edu.au/__data/assets/image/0025/66922/etch_life-brisbane-1.png" >
			</div>
		</div>
	</section>

.card.primary {
    background-color: hsla(198, 100%, 20%, 0.07);
    color: hsla(0, 0%, 0%, 1);
    border:none;
     
}

.card.tertiary {
    background-color: hsla(198, 100%, 100%, 0.9);
    color: hsla(0, 0%, 0%, 1);

}
.card{
    padding: 80px;
}
.card.breakout {
    position: relative;
    overflow: visible;
    border:none;
}
.card.breakout img:first-of-type {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 107%;
    height: calc(100% + 40px);
    max-height: 490px;
    width: auto;
    z-index: 1;
    margin: 0;
    pointer-events: none;
}
h1.accent:after, h2.accent:after, h3.accent:after, h4.accent:after, h5.accent:after, h6.accent:after, p.position.accent:after, p.intro.accent:after {
    content: "";
    display: block;
    margin: 0.75em 0;
    width: 1.5em;
    height: 2px;
    background-color: hsla(0, 68%, 45%, 1);
}
h2.feature {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.025em;
    margin: 0 0 0.2em 0;
    color: hsla(198, 0%, 20%, 0.8);
    text-transform: uppercase;
}
.slab.primary {
    background-color: hsl(210,8%,95%);
    color: hsla(0, 0%, 0%, 1);
    border:none;
    
}


    .card img:first-of-type {
    opacity: 0.4;
    right: 0!important;
    height: calc(100% + 20px);
}

.card.puff {
    padding: 80px;
}
div.cssbg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    color: hsla(0, 0%, 0%, 1);
}
p.btn2 a {
    -webkit-appearance: none;
    -webkit-font-smoothing: subpixel-antialiased;
    color: inherit;
    background-color: transparent;
    text-decoration: none;
    padding: 7px 20px;
    display: inline-block;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin: 5px 0 0.5em 0;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 2px;
    box-sizing: border-box;
    border: 1px solid;
    border-color: inherit;
    line-height: 1.5;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    overflow: hidden;
}
p.btn2.feature a {
    background-color: hsl(214,82%,41%);
    border-color: hsl(214,92%,34%);
    color: hsla(0, 100%, 100%, 1);
    -webkit-box-shadow: 1px 1px 3px hsla(198, 0%, 20%, 0.3);
    box-shadow: 1px 1px 3px hsla(198, 0%, 20%, 0.3);
}
p.btn2.feature a:hover {
    background-color: hsl(218,96%,32%);
}
p.btn2 a:after {
    font-family: "FontAwesome";
    content: "\f054";
    font-size: 0.95em;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1;
}
.flex {
    display: -webkit-flex;
    -moz-display: flex;
    -webkit-display: flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: space-between;
    -moz-align-content: space-between;
    -ms-align-content: space-between;
    align-content: space-between;
}