Skip to content
This repository has been archived by the owner on Jul 23, 2020. It is now read-only.

Commit

Permalink
Merge pull request #117 from mindreeper2420/cards-as-links
Browse files Browse the repository at this point in the history 
fix(cards): update hover visuals for cards
  • Loading branch information
@mindreeper2420
mindreeper2420 committed May 1, 2017
2 parents 5d1dc20 + 274a29f commit faacad2
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 99 deletions.
210 changes: 111 additions & 99 deletions src/app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,119 +157,131 @@ <h4>
<section class="section-footer" style="margin-top: 25px;">
<div class="container">
<div class="row row-cards">
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/edit_cloud.svg" />
</div>
<h3>
<b>
A free, end-to-end, cloud-native development experience
</b>
</h3>
<p>
Collaborate at any scale across the development lifecycle, powered by Red Hat OpenShift.
<div class="learn-more">
<a href="end-to-end.html">Learn more <i class="fa fa-caret-right"></i></a>
<a href="end-to-end.html">
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/edit_cloud.svg" />
</div>
</p>
</div>
</div>
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/container-apps.svg" />
<h3>
<b>
A free, end-to-end, cloud-native development experience
</b>
</h3>
<p>
Collaborate at any scale across the development lifecycle, powered by Red Hat OpenShift.
<div class="learn-more">
Learn more <i class="fa fa-caret-right"></i>
</div>
</p>
</div>
<h3>
<b>
Create continuously deployed microservices without breaking a sweat
</b>
</h3>
<p>
Easily create and deploy modern, containerized apps composed of microservices.
<div class="learn-more">
<a href="microservices.html">Learn more <i class="fa fa-caret-right"></i></a>
</div>
</p>
</div>
</div>
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/planning-3.svg" />
</a>
<a href="microservices.html">
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/container-apps.svg" />
</div>
<h3>
<b>
Create continuously deployed microservices without breaking a sweat
</b>
</h3>
<p>
Easily create and deploy modern, containerized apps composed of microservices.
<div class="learn-more">
Learn more <i class="fa fa-caret-right"></i>
</div>
</p>
</div>
<h3>
<b>
Plan for success, regardless of project complexity
</b>
</h3>
<p>
Transform your ideas into reality, with easy-to-use agile planning tools that provide progress visibility every step of the
way.
<div class="learn-more">
<a href="planning-tools.html">Learn more <i class="fa fa-caret-right"></i></a>
</div>
</a>
<a href="planning-tools.html">
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/planning-3.svg" />
</div>
</p>
<h3>
<b>
Plan for success, regardless of project complexity
</b>
</h3>
<p>
Transform your ideas into reality, with easy-to-use agile planning tools that provide progress visibility every step of the
way.
<div class="learn-more">
Learn more <i class="fa fa-caret-right"></i>
</div>
</p>
</div>
</div>
</div>
</a>
</div>
<div class="row row-cards">
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/browser.svg" />
</div>
<h3>
<b>
Install nothing; do everything
</b>
</h3>
<p>
Planning, coding, testing, creating environments, deploying and monitoring - it's all there and immediately usable.
<div class="learn-more">
<a href="install-nothing.html">Learn more <i class="fa fa-caret-right"></i></a>
<a href="install-nothing.html">
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/browser.svg" />
</div>
</p>
</div>
</div>
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/analytics.svg" />
<h3>
<b>
Install nothing; do everything
</b>
</h3>
<p>
Planning, coding, testing, creating environments, deploying and monitoring - it's all there and immediately usable.
<div class="learn-more">
Learn more <i class="fa fa-caret-right"></i>
</div>
</p>
</div>
<h3>
<b>
Mind-meld to make better decisions
</b>
</h3>
<p>
Gain confidence in your software stack selection with crowd-sourced and AI insights flagging concerns and also recommendations
on how to address them.
<div class="learn-more">
<a href="better-decisions.html">Learn more <i class="fa fa-caret-right"></i></a>
</div>
</p>
</div>
</div>
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/community.svg" />
</a>
<a href="better-decisions.html">
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/analytics.svg" />
</div>
<h3>
<b>
Mind-meld to make better decisions
</b>
</h3>
<p>
Gain confidence in your software stack selection with crowd-sourced and AI insights flagging concerns and also recommendations
on how to address them.
<div class="learn-more">
Learn more <i class="fa fa-caret-right"></i>
</div>
</p>
</div>
<h3>
<b>
Not just a tool, but an entire community
</b>
</h3>
<p>
Your registration includes a free membership to the Red Hat Developer Program where you get access to Red Hat software for
development, books, cheat sheets, and a lot more.
<div class="learn-more">
<a href="rhdp-membership.html">Learn more <i class="fa fa-caret-right"></i></a>
</div>
</a>
<a href="rhdp-membership.html">
<div class="col-sm-4 features">
<div class="features-background">
<div class="card-image">
<img src="../assets/images/community.svg" />
</div>
</p>
<h3>
<b>
Not just a tool, but an entire community
</b>
</h3>
<p>
Your registration includes a free membership to the Red Hat Developer Program where you get access to Red Hat software for
development, books, cheat sheets, and a lot more.
<div class="learn-more">
Learn more <i class="fa fa-caret-right"></i>
</div>
</p>
</div>
</div>
</div>
</a>
</div>
</div>
</section>
Expand Down
7 changes: 7 additions & 0 deletions src/assets/stylesheets/features.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
.features {
height: 500px;
margin-bottom: 20px;
color: #363636;
&:hover {
h3, .learn-more {
color: $color-rh-blue-light;
}
}
p {
margin-top: 15px;
}
Expand All @@ -25,6 +31,7 @@
}
}
.learn-more {
font-weight: 700;
position: absolute;
left: 50px;
bottom: 20px;
Expand Down

0 comments on commit faacad2

Please sign in to comment.