Advertisement
Hadi1989

Untitled

Aug 17th, 2022
705
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.08 KB | None | 0 0
  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     padding: 5%;
  5.   }
  6.   
  7.   .iphone-x {
  8.     position: relative;
  9.     z-index: 1;
  10.     height: 694px;
  11.     width: 342px;
  12.   }
  13.   .iphone-x *, .iphone-x *::before, .iphone-x *::after {
  14.     box-sizing: border-box;
  15.     display: block;
  16.   }
  17.   .iphone-x .side {
  18.     background: #1c1c1c;
  19.     border-radius: 54px;
  20.     box-shadow: inset 0 0 2px 2px dimgrey, inset 0 0 0 6px #e2e3e9, 0px -1px 13px 9px 
  21. rgba(255,255,255,0.8) inset;
  22.     height: 694px;
  23.     padding: 15px 22px;
  24.     width: 342px;
  25.     z-index: 1;
  26.   }
  27.   .iphone-x .screen {
  28.     background:#000;
  29.     background-position: center center;
  30.     background-size: cover;
  31.     border-radius: 33px;
  32.     position: relative;
  33.     height: 652px;
  34.     width: 300px;
  35.     margin-left: -1px;
  36.     margin-top: 6px;
  37.     z-index:198;
  38.     overflow:hidden;
  39.   }
  40.   video {
  41.     height: 700px;
  42.     width: 350px;
  43.     margin-top: -30px;
  44.     margin-left:-10px;
  45.   }
  46.   .iphone-x .line::after, .iphone-x .line::before {
  47.     content: "";
  48.     position: absolute;
  49.     border: solid rgba(68, 68, 68, 0.25);
  50.     border-width: 0 6px;
  51.     height: 5px;
  52.     left: 0;
  53.     width: 100%;
  54.     z-index: 9;
  55.   }
  56.   .iphone-x .line::after {
  57.     top: 68px;
  58.   }
  59.   .iphone-x .line::before {
  60.     bottom: 68px;
  61.   }
  62.   .iphone-x .header {
  63.     background: #1c1c1c;
  64.     border-bottom-left-radius: 13px;
  65.     border-bottom-right-radius: 13px;
  66.     height: 24px;
  67.     left: 50%;
  68.     margin-left: -82px;
  69.     position: absolute;
  70.     top: 15px;
  71.     width: 164px;
  72.     z-index: 199;
  73.   }
  74.   .iphone-x .sensor-1::after, .iphone-x .sensor-1::before {
  75.     content: "";
  76.     position: absolute;
  77.   }
  78.   .iphone-x .sensor-1::after {
  79.     background: #222;
  80.     border-radius: 50%;
  81.     height: 11px;
  82.     width: 11px;
  83.     left: 1%;
  84.     margin-left: 10px;
  85.     top: 3px;
  86.   }
  87.   .iphone-x .sensor-1::before {
  88.     background: #222;
  89.     border-radius: 50%;
  90.     height: 11px;
  91.     width: 11px;
  92.     left: 10%;
  93.     margin-left: 20px;
  94.     top: 3px;
  95.   }
  96.   .iphone-x .sensor-2::after, .iphone-x .sensor-2::before {
  97.     content: "";
  98.     position: absolute;
  99.   }
  100.   .iphone-x .sensor-2::before {
  101.     background: #333;
  102.     border-radius: 2.5px;
  103.     height: 5px;
  104.     width: 40px;
  105.     left: 50%;
  106.     margin-left: -20px;
  107.     top: 7px;
  108.   }
  109.   .iphone-x .sensor-3::after, .iphone-x .sensor-3::before {
  110.     content: "";
  111.     position: absolute;
  112.   }
  113.   .iphone-x .sensor-3::before {
  114.     background: #444;
  115.     border-radius: 50%;
  116.     height: 11px;
  117.     width: 11px;
  118.     left: 50%;
  119.     margin-left: 35px;
  120.     top: 3px;
  121.     box-shadow:0px 0px 5px 2px navy inset
  122.   }
  123.   .iphone-x .sensor-3::after {
  124.     background: #222;
  125.     border-radius: 50%;
  126.     height: 15px;
  127.     width: 15px;
  128.     left: 65%;
  129.     margin-left: 33px;
  130.   }
  131.   .iphone-x .volume-button {
  132.     background: #c8cacb;
  133.     height: 26px;
  134.     left: -2px;
  135.     position: absolute;
  136.     top: 92px;
  137.     width: 3px;
  138.   }
  139.   .iphone-x .volume-button::after, .iphone-x .volume-button::before {
  140.     content: "";
  141.     position: absolute;
  142.     background: #c8cacb;
  143.     height: 50px;
  144.     left: 0;
  145.     width: 3px;
  146.   }
  147.   .iphone-x .volume-button::after {
  148.     top: 48px;
  149.   }
  150.   .iphone-x .volume-button::before {
  151.     top: 112px;
  152.   }
  153.   .iphone-x .power-button {
  154.     background: #c8cacb;
  155.     height: 80px;
  156.     right: -2px;
  157.     position: absolute;
  158.     top: 160px;
  159.     width: 3px;
  160.   }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement