Mobile View Template design With CSS

Card design :-

CODE

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Template_design</title>

    <style>

        body{

            text-align: center;

            margin: 0;

            padding:0;

        

        }

        #container{

            background-color:rgb(15, 13, 13);

            position: absolute;

            width:17%;

            top: 10%;

            left: 40%; 

            border-radius: 15px;

            color: white;

        }

        .head-text h1{

            margin-top: 10px;

            font-size: 3.3rem;

            letter-spacing: 7px;

            font-weight: 500;

        }

       

        .side-number h2 {

            margin: 0;

            margin-left: 15px;

            margin-bottom: 0;

            text-align: left;

            font-weight: normal;

            transform-origin:0;

            transform:rotate(-90deg);

        }

        .side-number {

            margin-top: 80px;

            margin-left: 10px;

        }

       .side-hr{

            background-color:rgb(204, 182, 182) ;

            margin: 0;

            margin-top:-6px;

            margin-left: 15px;

            margin-bottom: 15px;

            height: 50px;

            width: 0.1px;

            border: 0.3px solid;

        }

        .img{

            background-color: lightgray;

            position: absolute;

            width: 78%;

            height: 59%;

            left: 20%;

            top: 10%;

        }

        .down-text h3{

            text-align: left;

            margin-top: 0px;

            margin-left: 44px;

            margin-bottom:0 ;

            font-weight: 500;

            color: rgb(204, 182, 182);

        }

        .down-hr{

            background-color:gray;

            margin-left: 45px;

            width: 23px;

            border: 0.3px solid;

        }

        .footer-text{

            color: rgb(197, 174, 174);

            font-size: 0.65em;

            margin-left: -67px;

            margin-bottom: 15%;

        }

        *::selection{

            user-select: none;

        }

    </style>

</head>

<body>

    <div id="container">

        <div class="head-text">

            <h1>YORK</h1>

        </div>

        <div class="side-number">

            <h2 class="num1">03</h2>

            <hr class="side-hr">

            <h2 class="num2">02</h2>

        </div>

        <div>

            <div class="img">

                <img src="resources/v.jpg" width="100%" height="100%" none>

            </div>

            <div class="down-text">

                <h3>Exclusive Offer<br>Every Week</h3>

                <hr class="down-hr">

                <p class="footer-text">SHOP NOW</p>

            </div>

        </div>

    </div>

</body>

</html>

RESULT

******