t








HTML Coding

<html> <head> <title>Coding TutorialsDesign</title> <link type="text/css" rel="stylesheet" href="css/stylesheet.css"> </head> <body> <div class="backgorund_s"> <div class="conatiner_s"> <div class="img_s"> <img src="images/shoes.png"> </div> <div class="Deatil_s"> <div class="contant_s"> <h2>DESIGN<br><span>Jahangir Ansari </span></h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry </p> <h3>$160.99</h3> <button>Buy Now</button> </div> </div> </div> </div> </body> </html>

CSS Coding

                
.conatiner_s
{
    position:relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 900px;
    height: 600px;
    background:#fff;
    margin:20px;
}
.conatiner_s .img_s
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width:50%;
    height:100%;
    background:#006dbc;
}
.conatiner_s .img_s:before
{    content: 'Nike';
    position:absolute;
    top:20px;
   left:20px;
    color:#000;
    opacity:0.1;
    font-size:8em;
    font-weight:800;
}
.conatiner_s .img_s img
{
    position: relative;
    width:600px;
    transform: rotate(-10deg);
    left:-40px;
}
.conatiner_s .Deatil_s
{
    
    display: flex;
    justify-content: center;
    align-items: center;
    width:50%;
    height:100%;
    box-sizing: border-box;
    padding:40px;
}
.conatiner_s .Deatil_s h2
{
    margin:0;
    padding:0;
    font-size:2.5em;
    line-height:0.8em;
    color:#444;
}
.conatiner_s .Deatil_s h2 span
{
    font-size:0.4em;
    text-transform: uppercase;
    letter-spacing:2px;
    color:#999; 
}
.conatiner_s .Deatil_s p
{
    
    max-width:85%;
    margin-left:15%;
    color:#333;
    font-size:15px;
}
.conatiner_s .Deatil_s h3
{
     margin:0;
    padding:0;
    font-size:2.5em;
    color:#a2a2a2; 
    float: left;
}
.conatiner_s .Deatil_s button
{
    background:#006dbc;
    color:#fff;
    border:none;
    box-shadow:none;
    outline:none;
    padding:15px 20px;
    margin-top:5px;
    font-size:16px;
    letter-spacing:1px;
    text-transform  : uppercase;
    font-weight:600;
    border-radius:40px;
    float: right;
    cursor: pointer;
}
@media (max-width:1080px)
{
    .conatiner_s
    {
        height: auto;
    }
    .conatiner_s .img_s
    {
        padding:40px;
        box-sizing: border-box;
        width:100% !important;
        height: auto;
        text-align: center;
        overflow: hidden;
    }
    
    .conatiner_s .img_s img
    {
        left: initial;
        max-width:100%;
        transform: rotate(0deg);
    }
    .conatiner_s .Deatil_s
    {
         width:100% !important;
        height: auto;
        padding:20px;
    }
   .conatiner_s .Deatil_s p
    {
        max-width:100%;
        margin-left:0;
        
        
    }
}