index.html

code

  <!DOCTYPE html>
	<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<div class="center_div">
        <div class="frame">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <h1>Panasonic</h1>
            
            <div class="screen"></div>
            
        </div>
    </div>
	</body>
	</html>

style.css

code

			*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html{
            font-size: 62.5%;
        }

        .center_div{
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .frame{
            box-shadow: -1px 1px 40px 6px rgb(0, 0, 0),
                        1px 1px 40px 6px white,
                        1px 1px 40px rgba(57, 110, 55, 0),
                        2px 2px 60px #000;
            z-index: 4;
            position: relative;
            height: 20rem;
            width: 37rem;
            border: -10px solid black;
            background: rgba(0, 0, 0, 0.836);
        }

        
        
        h1{
            color: white;
            position: absolute;
            font-size: 1rem;
            top: 98%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        .circle1, .circle3{
            box-shadow: 0.5px 0.5px 2px white;
            position: absolute;
            height: 4rem;
            width: 4rem;
            border-radius: 50%;border: 2px solid rgba(255, 255, 255, 0.445);
            background: black;
            top: 25%;
            left: 6%;
            transform: translate(-50%,-50%);
        }

        .circle3{
            left: 6%;
            top: 75%;
        }

        .circle1::before, .circle3::before{
            box-shadow: 0.5px 0.5px 2px white;
            position: absolute;
            content: '';
            top: 0;
            left: 888%;
            border: 2px solid rgba(255, 255, 255, 0.445);
            background: black;
            height: 4rem;
            width: 4rem;
            border-radius: 50%;
        }

        .screen{
            z-index: 1;
            height: 18rem;
            position: absolute;
            width: 28rem;
            border: 1px solid black;
            background: rgba(0, 0, 0, 0.596);
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        .circle2{
            box-shadow: 0.5px 1px 1px white;
            position: absolute;
            height: 2rem;
            width: 2rem;
            border-radius: 50%;
            border: 4px solid rgba(255, 255, 255, 0.192);
            background: black;
            top: 50%;
            left: 6%;
            transform: translate(-50%,-50%);
        }
        
        .circle2::before{
            content: '';
            position: absolute;
            height: 1rem;
            width: 1rem;
            border-radius: 50%;
            border: 4px solid rgba(255, 255, 255, 0.192);
            box-shadow: 0.5px 1px 1px white;
            background: black;
            top: 0;
            left: 2650%;
            
        }

        .back{
            position: absolute;
            height: 2rem;
            width: 28rem;
            border: 1px solid white;
            top: 105%;
            left: 50%;
            transform: translate(-50%, -50%);
        }