I'm trying to build an ecommerce website by watching a YouTube video. I am stuck at apply CSS style to some classes. I have given my html CSS code below. In that from the class "#product1 .pro.des{ "onwards CSS styling is not applying to its content.on #product1 .pro.des{ element in CSS I tried to align text to start but it is not reflecting. Not only that but also the styling of other elements which comes after "#product1 .pro.des{" also are not working. Hope someone will resolve this?
@import url('https://fonts.googleapis.com/css2?family=Roboto Slab&family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan' sans-serif;
}
h1{
font-size: 50PX;
line-height: 64px;
color: #222;
}
h2{
font-size: 46PX;
line-height: 54px;
color: #222;
}
h4{
font-size: 20PX;
color: #222;
}
h6{
font-weight: 700;
font-size: 12px
}
p{
font-size: 16PX;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1{
padding: 40px 80px;
}
.section-p1{
margin: 40px 0;
}
body{
width: 100%;
}
/*header start*/
#header{
display: flex;
justify-content: space-between ;
align-items: center;
padding: 20px 80px;
background-color: #e3e6f3;
box-shadow: 0px 5px 15p rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar{
display: flex;
justify-content: center;
align-items: center;
}
#navbar li{
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a{
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active{
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after{
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#hero{
background-image: url("img/hero4.png");
height: 90vh;
width: 100%;
background-position: top 25 right 0;
background-size: cover;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button{
background-image: url(img/button.png);
background-color: transparent;
color: #088178;
border:0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#feature{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#feature .fe-box{
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#feature .fe-box:hover{
box-shadow: 10px 10px 34px rgba(0, 0, 0, 0.03);
}
#feature .fe-box h6{
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#feature .fe-box img{
width: 100%;
margin-bottom: 10px;
}
#product1{
text-align: center;
}
#product1 .pro{
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
}
#product1 .pro img{
width: 100%;
border-radius: 20px;
}
#product1 .pro.des{
text-align: start;
padding: 10px 0;
}
#product1.pro.des span{
color: #606063;
font-size: 50px;
}
#product1 .pro.des h5{
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro.des i{
font-size: 25px;
color: rgb(241, 183, 25);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<a href="#"><img src="img/logo.png" ></a>
<div>
<ul id="navbar">
<li><a href="index.html">Home</a></l1>
<li><a href="shop.html">Shop</a></l1>
<li><a href="blog.html">Blog</a></l1>
<li><a href="about.html">About</a></l1>
<li><a href="contact.html">Contact</a></li>
<li><a href="cart.html"><i ></i></a></li>
</ul>
</div>
</section>
<section id="hero">
<h4>Trade-in-offer</h4>
<h2>Super Value Deals</h2>
<h1>On all products</h1>
<p>Save more with coupons & upto 70%off</p>
<button>Shop Now</button>
</section>
<section id="feature" >
<div >
<img src="img/features/f1.png">
<h6>Free Shipping</h6>
</div>
<div >
<img src="img/features/f2.png">
<h6>Online Order</h6>
</div>
<div >
<img src="img/features/f3.png">
<h6>Save Money</h6>
</div>
<div >
<img src="img/features/f4.png">
<h6>Promotions</h6>
</div>
<div >
<img src="img/features/f5.png">
<h6>Happy Sell</h6>
</div>
<div >
<img src="img/features/f6.png">
<h6>Support</h6>
</div>
</section>
<section id="product1" >
<h2>Featured Products</h2>
<p>Summer Collections</p>
<div >
<div >
<img src="img/products/f1.jpg">
<div >
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div >
<i ></i>
<i ></i>
<i ></i>
<i ></i>
<i ></i>
</div>
<h4>$78</h4>
</div>
<a href="#"><i ></i></a>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
CodePudding user response:
Add Spaces Between your selectors like:
#product1 .pro .des h5{
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro .des i{
font-size: 25px;
color: rgb(241, 183, 25);
}
CodePudding user response:
Should be .pro > .des
or .pro .des
(with a space) because .des
is a child to .pro
.
.pro.des
would only be valid if those classes shared the same element.
@import url('https://fonts.googleapis.com/css2?family=Roboto Slab&family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan' sans-serif;
}
h1 {
font-size: 50PX;
line-height: 64px;
color: #222;
}
h2 {
font-size: 46PX;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20PX;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px
}
p {
font-size: 16PX;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1 {
padding: 40px 80px;
}
.section-p1 {
margin: 40px 0;
}
body {
width: 100%;
}
/*header start*/
#header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 80px;
background-color: #e3e6f3;
box-shadow: 0px 5px 15p rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#hero {
background-image: url("img/hero4.png");
height: 90vh;
width: 100%;
background-position: top 25 right 0;
background-size: cover;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#hero h4 {
padding-bottom: 15px;
}
#hero h1 {
color: #088178;
}
#hero button {
background-image: url(img/button.png);
background-color: transparent;
color: #088178;
border: 0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#feature {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#feature .fe-box {
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#feature .fe-box:hover {
box-shadow: 10px 10px 34px rgba(0, 0, 0, 0.03);
}
#feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#feature .fe-box img {
width: 100%;
margin-bottom: 10px;
}
#product1 {
text-align: center;
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro>.des {
text-align: start;
padding: 10px 0;
}
#product1.pro>.des span {
color: #606063;
font-size: 50px;
}
#product1 .pro >.des h5 {
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro >.des i {
font-size: 25px;
color: rgb(241, 183, 25);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<a href="#"><img src="img/logo.png" ></a>
<div>
<ul id="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="cart.html"><i ></i></a></li>
</ul>
</div>
</section>
<section id="hero">
<h4>Trade-in-offer</h4>
<h2>Super Value Deals</h2>
<h1>On all products</h1>
<p>Save more with coupons & upto 70%off</p>
<button>Shop Now</button>
</section>
<section id="feature" >
<div >
<img src="img/features/f1.png">
<h6>Free Shipping</h6>
</div>
<div >
<img src="img/features/f2.png">
<h6>Online Order</h6>
</div>
<div >
<img src="img/features/f3.png">
<h6>Save Money</h6>
</div>
<div >
<img src="img/features/f4.png">
<h6>Promotions</h6>
</div>
<div >
<img src="img/features/f5.png">
<h6>Happy Sell</h6>
</div>
<div >
<img src="img/features/f6.png">
<h6>Support</h6>
</div>
</section>
<section id="product1" >
<h2>Featured Products</h2>
<p>Summer Collections</p>
<div >
<div >
<img src="img/products/f1.jpg">
<div >
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div >
<i ></i>
<i ></i>
<i ></i>
<i ></i>
<i ></i>
</div>
<h4>$78</h4>
</div>
<a href="#"><i ></i></a>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Side note: markup was invalid due to missing closing <li>
- you had </ll>
instead.