iPhone 12 Box Mockup Using Html and CSS Only

By admin

October 17, 2020

0

100

iPhone 12 Box Mockup Using Html and CSS Only To create this program First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get a background image of this program

Video Tutorial of iPhone 12 Box Mockup Using Html and CSS Only.

HTML SOURCE:

<!DOCTYPE html> <!– Created By Theinfowave –> <head> <title>iPhone 12</title> <link rel=”stylesheet” href=”style.css”> </head> </p><br /><br /> <div> </div><br /><br /> <p>

You May Also Like:

Social Media Buttons with Tooltip on Hover using HTML & CSS

CSS SOURCE:

*{ margin:0; padding:0; box-sizing:border-box; } body{ display:flex; justify-content:center; align-items:center; min-height:100vh; background:#ADD8E6; } .iPhone{ position:relative; width:230px; height:410px; background: url(iPhone.png) #fff; background-size:80%; background-position:center; background-repeat:no-repeat; transform:rotate(-40deg) skew(20deg,10deg); box-shadow: -150px 140px 10px rgba(0,0,0,0.08); transition: 0.5s; } .iPhone:hover{ transform:rotate(-40deg) skew(20deg,10deg) translate(-30px,30px); } .iPhone:before{ content:”; position:absolute; top:0; left:-90px; width:90px; height:100%; background: url(text.png) #f2f2f2; background-size:30px; background-repeat:no-repeat; background-position:center; transform-origin: right; transform:skewY(-43deg); } .iPhone:after{ content:”; position:absolute; bottom:-82px; left:0px; width:100%; height:82px; background: url(logo.png) #e5e5e5; background-size:30px; background-repeat:no-repeat; background-position:center; transform-origin: top; transform:skewX(-47deg); }

I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated…

Previous articleHow To Create A Website Using HTML And CSS

Next articleHow to Make Search Box with Icon Using HTML & CSS Only

iPhone 12 Box Mockup Using Html and CSS Only

Video Tutorial of iPhone 12 Box Mockup Using Html and CSS Only.

I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated…

Related Articles

TOP 10 SITES FOR FREE ONLINE COURSES WITH CERTIFICATES

Google recognizes Gama Pehalwan in India as the most famous wrestler, with a birth anniversary Doodle

Prashanth Neel K.GF Chapter 1 : Four Year Old Prasant Neel Locked Up in Telgue: KGF Director

LEAVE A REPLY Cancel reply

Latest Articles

TOP 10 SITES FOR FREE ONLINE COURSES WITH CERTIFICATES

Google recognizes Gama Pehalwan in India as the most famous wrestler, with a birth anniversary Doodle

Prashanth Neel K.GF Chapter 1 : Four Year Old Prasant Neel Locked Up in Telgue: KGF Director

Navjot Singh Sidhu gets 1-year jail

Zara Phythian: ‘Dr Strange’ actress jailed for sexual abuse of teen girl

iPhone 12 Box Mockup Using Html and CSS Only

Video Tutorial of iPhone 12 Box Mockup Using Html and CSS Only.

I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated…

Related Articles

LEAVE A REPLY Cancel reply

Stay Connected

Latest Articles