responsive card html css codepen

CARD

HTML CODE

  
    <!DOCTYPE html>
<html lang="en">
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@200&family=Roboto&display=swap" rel="stylesheet">
    <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>Document</title>
</head>
<body class="bolp">
    <div class="cart">

       <img style="height:156px; box-shadow: rgb(167, 167, 167) 0 0 13px; width: 158px; margin-left:80px; margin-top: 17px; border-radius: 50%;" src=" https://s8.favim.com/orig/72/beautifull-justin-bieber-justin-bieber-x27-swagg-Favim.com-720985.jpg" alt="">



      
        <h1 style="font-family: 'Noto Sans Display', sans-serif; margin-left: 66px;">@justinbieber</h1>
        <a style=" font-size: 14px; font-weight: 500; font: size 16px;; font-family: 'Noto Sans Display', sans-serif;" class="button1" href="">VIEW PROFILE</a>
      </div>
      <div class="hjh">
        <img class="shose" src="https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/a760c51c-7927-4d79-a854-65d15db9c348/custom-nike-mercurial-superfly-8-elite-by-you.png" alt="">
       <h1 style="color: rgb(245, 143, 9); font-size: 35px; margin-bottom: px;" id="hhj" class="iop">78$</h1>
        <h1 id="hjk" class="iop">FOOTBALL SHOSE</h1>
       
       <a id="hjgk" class="button2" href="">ADD TO CARD</a>
       
      </div>
    
</body>
</html>

CSS CODE

  
    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
.bolp{
   
    position: absolute;
    background-color: rgb(255, 255, 255);

}

.cart{
    box-shadow: #8d9192 0 0 35px;
    background-color: rgb(255, 255, 255);
    border-radius: 13px;
    margin-top: 162px;
  
    position: absolute;
    margin-left: 944px;

    height: 470px;
    width: 344px;


    margin-top: 162px;
    position: absolute;
  
    margin-left: 444px;
  
    height: 500px;
    width: 344px;
}


   
.photo{
    position: absolute;
    margin-left:177px;
    height: 44px;
    width: 44px;
}
.phot{
    position: absolute;
    margin-left: 677px;
    height: 210px;
    width: 200px;
    border-radius: 60%;
}
.hjh{
    box-shadow: #494742 0 0 32px;
  
    background-color: rgba(250, 245, 245, 0.945);
    border-radius: 13px;
    margin-top: 162px;
  
    position: absolute;
    margin-left: 944px;

    height: 470px;
    width: 344px;

}
.button1:hover{
    box-shadow: #5482ec 0 0 17px;
}

.button2:hover{
    box-shadow: #000000 0 0 17px;
}
.button1{
    text-align: center;
    border-radius: 5px;
    margin-top: 140px;
    font-family: 'Roboto', sans-serif;
    width: 99px;
    position: absolute;
    margin-left: 90px;
    border-radius: 7px;
    background: linear-gradient(to left, #cc00ff -76%, #66ccff 119%);
    font-size: 13px;
    color: white;
    text-decoration: none;
    padding: 15px;
    background-color: black;

 
}
.button2{
    font-size: 17px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    border-radius: 5px;
    margin-top: 40px;
    position: absolute;
    margin-left: 69px;
    color: rgba(233, 233, 233, 0.945);
  
    background: linear-gradient(to left, #ff0066 -26%, #66ccff 119%);
    text-decoration: none;
    padding: 19px;
    width: 177px;

}
.shose{

    border-radius: 15px;
  
    height: 196px;
    width: 247px;
    margin-left: 38px;
}
#hjgk{

}
.iop{
    margin-left:100px;
    font-size: large;
    font-family: 'Roboto', sans-serif;
}
#hjk{

}
#hhj{
    margin-left: 146px;
}

MILAN YADAV

responsive card html css codepen

0 Comments

Contact Info

Contact List

Contact Form