Iphone

 avatar
unknown
css
4 years ago
4.4 kB
5
Indexable
body{
        background: linear-gradient(90deg, rgba(78,78,78,1) 0%, rgba(38,81,112,1) 100%);
}
.iphone-frame{
        position: absolute;
        width: 15.9%;
        height: 60.85%;
        left: 9.55%;
        top: 29.4%;
        background-color: rgb(105, 105, 105);
        border-radius: 60px;
        z-index: 0;
        box-shadow: 0px 0px 4px black;
}
.iphone{
        position: absolute;
        width: 15.6%;
        height: 60%;
        left: 9.7%;
        top: 29.7%;
        background-color: black;
        border-radius: 55px;
        z-index: 0;
}
.iphone-display{
        position: absolute;
        width: 15%;
        height: 60%;
        left: 10%;
        top: 30%;
        background-color: black;
        border-radius: 55px;
        z-index: 2;
}
.iphone-shadow-left{
        position: absolute;
        width: 15%;
        height: 60%;
        left: 9.85%;
        top: 30%;
        background-color: rgba(59, 59, 59, 0.658);
        border-radius: 50px;
        z-index: 1;
}
.iphone-shadow-right{
        position: absolute;
        width: 15%;
        height: 60%;
        left: 10.15%;
        top: 30%;
        background-color: rgba(59, 59, 59, 0.658);
        border-radius: 60px;
        z-index: 1;
}
.iphone-background{
        position: absolute;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(images/background.png);
        width: 98%;
        height: 74%;
        left: 1%;
        top: 13%;
        
}
.microphone{
        position: absolute;
        height: 1%;
        width: 18%;
        top: 7%;
        left: 41%;
        background-color: black;
        box-shadow: -2px 2px 1px rgb(68, 68, 68);
        border-radius: 50px;
}
.camera{
        position: absolute;
        height: 2%;
        width: 4%;
        left: 31%;
        top: 6.3%;
        background-color: black;
        box-shadow: 2px 2px 1px rgb(68, 68, 68);
        border-radius: 50px;
}
.camera-inside{
        position: absolute;
        height: 0.7%;
        width: 1.4%;
        background-color: rgb(32, 32, 32);
        left: 33%;
        top: 7.2%;
        border-radius: 50px;
        z-index: 1;
}
.camera-inside2{
        position: absolute;
        height: 1%;
        width: 2%;
        background-color: blue;
        left: 32.5%;
        top: 6.97%;
        border-radius: 50px;
        z-index: 0;
}
.iphone-button{
        position: absolute;
        width: 16%;
        height: 8%;
        bottom: 2%;
        left: 43%;
        background-color: black;
        box-shadow: 2px 0px 1px rgb(68, 68, 68);
        border-radius: 50%;
        z-index: 3;
}
.iphone-button-shadow{
        position: absolute;
        width: 16%;
        height: 8%;
        bottom: 2.2%;
        left: 43%;
        background-color: black;
        box-shadow: -1px 1px 1px rgb(68, 68, 68);
        border-radius: 50%;
        z-index: 2;
}
.iphone-silent-mode{
        position: absolute;
        height: 3%;
        width: 1%;
        left: 9.34%;
        top: 38.2%;
        border-radius: 5px;
        background-color: rgb(54, 54, 54);
        z-index: -1;
}
.iphone-volume-up{
        position: absolute;
        height: 5%;
        width: 1%;
        left: 9.34%;
        top: 43.2%;
        border-radius: 5px;
        background-color: rgb(54, 54, 54);
        z-index: -1;
}
.iphone-volume-down{
        position: absolute;
        height: 5%;
        width: 1%;
        left: 9.34%;
        top: 49.2%;
        border-radius: 5px;
        background-color: rgb(54, 54, 54);
        z-index: -1;
}
.iphone-power-button{
        position: absolute;
        height: 5%;
        width: 1%;
        left: 24.75%;
        top: 43.2%;
        border-radius: 5px;
        background-color: rgb(54, 54, 54);
        z-index: -1;
}
.iphone-line-left{
        position: absolute;
        height: 1%;
        width: 0.2%;
        left: 9.55%;
        top: 36.2%;
        border-radius: 5px;
        background-color: rgba(61, 61, 61, 0.616);
        z-index: 2;
}
.iphone-line-right{
        position: absolute;
        height: 1%;
        width: 0.2%;
        left: 25.25%;
        top: 36.2%;
        border-radius: 5px;
        background-color: rgba(61, 61, 61, 0.616);
        z-index: 2;
}
Editor is loading...