why mu footer is not sticking with bottom?
*{ padding: 0px;
margin: 0px;
font-family: sans-serif ;
}
body{background: #f0f0f0;}
.wraper{background-image: url(b1.png);
height: 450px;
color: white;}
header{
padding: 20px 0px;
width: 1250px;
display: flex;
justify-content: space-between;
text-align: center;
margin:0 auto;
align-items: center;
}
.navi a{text-decoration: none;
color:white;
letter-spacing: -1px;
font-size: 25px;
font-weight: 500;
text-transform:uppercase;
margin-left: 10px;}
.note{text-align: center;
width: auto;
margin-top: 25px;
padding: 10px;
position: relative;
right: 10px;
}
.note h1{font-size: 60px;
margin-bottom: 30px;
letter-spacing: 1px;}
.note h2{
font-size: 33px;
font-weight: 200;
line-height: 45px;}
.main-wraper{width: 1300px;
height: 500px;
margin: 0 auto;
}
.hdrs{ display: flex;}
.hdrs h2{ font-size: 2.1rem;
font-weight: 700;
letter-spacing: 1px;
}
.sec{ display: flex;
justify-content: space-between;
clear: both;}
.card a img{border-radius: 10px;}
.card1{ background: white;
width: 410px;
border-radius: 20px;
box-shadow: 0px 0px 1px 1px gray , -0px -0px 0px 1px gray;}
.script{padding: 10px;}
.script h3{padding: 0px 0px;
font-size: 20px;}
.script p{font-size: 16px;
letter-spacing: 1px;
padding: 15px 0px;
padding-bottom: 20px;}
.link{padding: 15px;}
.link a{text-decoration: none;
color: black;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 15px;
border: 1px solid #28429f;
border-radius: 15px;
font-weight: 600;
margin-left:10px;
}
.link a:hover{background:#3b88c3;
color: white;}
footer{ background: black;
color: white;
padding:20px;
}
and the html is
<!doctype html>
</head>
Want to learn how to code?
We've got tutorials and resources geared towards
self-taught web developers. Check it out below!
</div>
</div>
<main class="main-wraper">
<br><br><br><br>
<div class="hdrs" ><img src="h2pic.png" alt=""><h2 class="">Helpfull resources to get you started!</h2>
</div><br><br>
<section class="sec sec1">
<div class="card"><a href="#"><img src="crd1.png" alt="logo" width="410px;"></a></div>
<div class="card"><a href="#"><img src="crd2.png" alt="" width="410px"></a></div>
<div class="card"><a href="#"><img src="crd3.png" alt="" width="410px"></a></div>
</section>
<br><br><br><br><br>
<div class="hdrs" ><img src="h2pic2.png" alt=""><h2 class="">Helpfull resources to get you started!</h2>
</div><br><br>
<section class="sec sec1">
<div class="card1">
<img src="1.png" alt="" width="410px;">
<div class="script">
<h3>4 reason your z-indux isn't working (and how to fix it)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis dolore facere rem, voluptatibus! Labore ratione dolores error quae aperiam vitae,
</p>
</div>
<div class="link"><a href="#">read more</a></div>
</div>
<div class="card1">
<img src="2.png" alt="" width="410px;">
<div class="script">
<h3>4 reason your z-indux isn't working (and how to fix it)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis dolore facere rem, voluptatibus! Labore ratione dolores error quae aperiam vitae,
</p>
</div>
<div class="link"><a href="#">read more</a></div>
</div>
<div class="card1">
<img src="3.png" alt="" width="410px;">
<div class="script">
<h3>4 reason your z-indux isn't working (and how to fix it)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis dolore facere rem, voluptatibus! Labore ratione dolores error quae aperiam vitae,
</p>
</div>
<div class="link"><a href="#">read more</a></div>
</div>
</section>
</main>
Our website cookies to make your experience betterby using site you agree to our coolie term and policies learn more here. GOT IT!