body {
font-family: 'Montserrat', sans-serif;
}
#title {
background-color: #ff4c68;
color: white;
}
#title h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
font-size: 3rem;
}
.title-img {
width: 60%;
transform: rotate(25deg);
position: absolute;
right: 30%;
}
.container-fluid {
padding: 3% 15% 7%;
}
/*Navigation*/
.navbar {
padding: 0 0 4.5rem;
}
.navbar-brand {
font-size: 2.5rem;
font-family: 'Ubuntu';
font-weight: normal;
}
.nav-item {
padding: 0 18px 0 18px;
font-size: 1.2rem;
font-weight: 200;
}
.download-btn {
margin: 5% 3% 5% 0;
}
.title-img {
width: 60%;
}
/*Features Section*/
#features h3 {
font-size: 1.5rem;
font-weight: bold;
}
#features i {
color: #ef8172;
}
#features i:hover {
color: #ff4c68;
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
}
.feature-box {
text-align: center;
padding: 5%;
}
.feature-box h3 {
margin-top: 20px;
font-family: 'Montserrat';
font-weight: bold;
}
.feature-box p {
color: #8f8f8f;
}
/*Testimonials Section*/
#testimonials {
text-align: center;
color: white;
background-color: #ef8172;
}
#testimonials h2 {
font-family: 'Montserrat';
font-size: 3rem;
font-weight: bold;
line-height: 1.5;
}
@media (max-width:576px) {
#testimonials h2 {
font-size: 1.5rem;
line-height: 1.2;
}
.press-logo {
width: 25%;
}
}
.testimonial-img {
width: 10%;
border-radius: 100%;
margin: 20px;
}
.carousel-item {
margin-bottom: 2rem;
padding: 7% 15%;
}
/*Press Section*/
#press {
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
margin: 20px 20px 50px;
}
#pricing {
text-align: center;
margin-top: 150px;
}
#cta {
background-color: #ff4c68;
}
#footer {
background-color: #fff;
}
#cta h3 {
font-family: 'Montserrat';
font-size: 3rem;
font-weight: bold;
line-height: 1.5;
color: #fff;
}
@media (max-width:992px) {
#cta h3 {
font-size: 2.5rem;
}
}
@media (max-width:576px) {
#cta h3 {
font-size: 2rem;
line-height: 1.2;
}
}
#footer {
color: #000;
}
footer span {
margin: 50px 15px 30px 15px;
}
#footer {
padding: 0 0 20px;
}
@media (max-width:1028px) {
.title-img {
position: static;
transform: rotate(0);
}
#title {
text-align: center;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap /Custom CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<script src="https://kit.fontawesome.com/115370f697.js" crossorigin="anonymous"></script>
<title>tindog</title>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">tindog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-btn"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-btn"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-img" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="fas fa-check-circle fa-4x"></i>
<h3>Easy to use.</h1>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="fas fa-bullseye fa-4x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="fas fa-heart fa-4x"></i>
<h3>Guaranteed to work.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="testimonials-carousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#testimonials-carousel" data-slide-to="0" class="active"></li>
<li data-target="#testimonials-carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-img" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonials-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testimonials-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h2 class="display-4">A Plan for Every Dog's Needs</h2>
<p class="lead">Simple and affordable price plans for your and your dog.</p>
</div>
<div class="card-deck mb-3 text-center">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h3 class="my-0 font-weight-normal">Chihuahua</h3>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title">Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<p> </p>
<button type="button" class="btn btn-lg btn-block btn-outline-dark">Sign Up</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h3 class="my-0 font-weight-normal">Labrador</h3>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title">$49 <small class="text-muted">/ mo</small></h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<p> </p>
<button type="button" class="btn btn-lg btn-block btn-dark">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h3 class="my-0 font-weight-normal">Mastiff</h3>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title">$99 <small class="text-muted">/ mo</small></h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-lg btn-block btn-dark">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="cta">
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button" class="btn btn-dark btn-lg download-btn"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-btn"><i class="fab fa-google-play"></i> Download</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer" class="text-center">
<span class="fab fa-twitter fa-lg"></span>
<span class="fab fa-facebook fa-lg"></span>
<span class="fab fa-instagram fa-lg"></span>
<span class="fa fa-envelope fa-lg"></span>
<p>© Copyright 2018 TinDog</p>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
My problem is when I use an "i"
tag to select the font-awesome icons to change hover property, it works really well. But if I use a class to do the same thing it doesn’t work.I did it correctly by targeting them with #features i:hover{ color: black;}
,but when I use .fa:hover{ color: black;}
,It doesn’t work?
3
Answers
i think the issue is you targeting
.fa
while your youri
tags has the classfas
andfab
.In your HTML, you use some
fa
classes but you usefas
andfab
classes too,You must include each of them in your CSS like this
I think you have change the font awesome color in features section only.
There is no
fa
class in features section. But exists fas and fa-somewords [somewords means check-circle,…. ]Then, try this
instead of
Live Demo
You can also try this
To get all
fa-* class
by[class*="fa-"]