Hallo sobat coder disini kita akan coba membuat mockup menggunakan HTML dan CSS, Ok langsung saja kita buat file HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>Document</title>
</head>
<body>
<div class="iphone-x">
<div class="side">
<div class="screen">
<video src="https://images.apple.com></video>
</div>
</div>
<div class=" line "></div>
<div class=" header ">
<div class=" sensor-1 "></div>
<div class=" sensor-2 "></div>
<div class=" sensor-3 "></div>
</div>
<div class=" volume-button "></div>
<div class=" power-button "></div>
</div>
</body>
</html>
Setelah selesai membuat code HTML kemudian buat code CSS untuk tampilan Mockup
body {
display: flex;
justify-content: center;
padding: 5%;
}
.iphone-x {
position: relative;
z-index: 1;
height: 694px;
width: 342px;
}
.iphone-x *, .iphone-x *::before, .iphone-x *::after {
box-sizing: border-box;
display: block;
}
.iphone-x .side {
background: #1c1c1c;
border-radius: 54px;
box-shadow: inset 0 0 2px 2px dimgrey, inset 0 0 0 6px #e2e3e9, 0px -1px 13px 9px
rgba(255,255,255,0.8) inset;
height: 694px;
padding: 15px 22px;
width: 342px;
z-index: 1;
}
.iphone-x .screen {
background:#000;
background-position: center center;
background-size: cover;
border-radius: 33px;
position: relative;
height: 652px;
width: 300px;
margin-left: -1px;
margin-top: 6px;
z-index:198;
overflow:hidden;
}
video {
height: 700px;
width: 350px;
margin-top: -30px;
margin-left:-10px;
}
.iphone-x .line::after, .iphone-x .line::before {
content: "";
position: absolute;
border: solid rgba(68, 68, 68, 0.25);
border-width: 0 6px;
height: 5px;
left: 0;
width: 100%;
z-index: 9;
}
.iphone-x .line::after {
top: 68px;
}
.iphone-x .line::before {
bottom: 68px;
}
.iphone-x .header {
background: #1c1c1c;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
height: 24px;
left: 50%;
margin-left: -82px;
position: absolute;
top: 15px;
width: 164px;
z-index: 199;
}
.iphone-x .sensor-1::after, .iphone-x .sensor-1::before {
content: "";
position: absolute;
}
.iphone-x .sensor-1::after {
background: #222;
border-radius: 50%;
height: 11px;
width: 11px;
left: 1%;
margin-left: 10px;
top: 3px;
}
.iphone-x .sensor-1::before {
background: #222;
border-radius: 50%;
height: 11px;
width: 11px;
left: 10%;
margin-left: 20px;
top: 3px;
}
.iphone-x .sensor-2::after, .iphone-x .sensor-2::before {
content: "";
position: absolute;
}
.iphone-x .sensor-2::before {
background: #333;
border-radius: 2.5px;
height: 5px;
width: 40px;
left: 50%;
margin-left: -20px;
top: 7px;
}
.iphone-x .sensor-3::after, .iphone-x .sensor-3::before {
content: "";
position: absolute;
}
.iphone-x .sensor-3::before {
background: #444;
border-radius: 50%;
height: 11px;
width: 11px;
left: 50%;
margin-left: 35px;
top: 3px;
box-shadow:0px 0px 5px 2px navy inset
}
.iphone-x .sensor-3::after {
background: #222;
border-radius: 50%;
height: 15px;
width: 15px;
left: 65%;
margin-left: 33px;
}
.iphone-x .volume-button {
background: #c8cacb;
height: 26px;
left: -2px;
position: absolute;
top: 92px;
width: 3px;
}
.iphone-x .volume-button::after, .iphone-x .volume-button::before {
content: "";
position: absolute;
background: #c8cacb;
height: 50px;
left: 0;
width: 3px;
}
.iphone-x .volume-button::after {
top: 48px;
}
.iphone-x .volume-button::before {
top: 112px;
}
.iphone-x .power-button {
background: #c8cacb;
height: 80px;
right: -2px;
position: absolute;
top: 160px;
width: 3px;
}
Note: Tambahkan gambar agar tampilan mockup terlihat lebih profesional
0 Komentar