Flat, Scaleable CSS iPhone Illustration

Developer
Tom Hergenreter
Size
2,729 Kb
Views
18,216
  1. Flat, Scaleable CSS iPhone Illustration Previews
  2. Flat, Scaleable CSS iPhone Illustration HTML Codes
  3. Flat, Scaleable CSS iPhone Illustration CSS Codes
  4. Flat, Scaleable CSS iPhone Illustration JS Codes

How do I make an flat, scaleable css iphone illustration?

Recreating an iPhone mockup with CSS. Resizable, based on font size.. What is a flat, scaleable css iphone illustration? How do you make a flat, scaleable css iphone illustration? This script and codes were developed by Tom Hergenreter on 17 October 2022, Monday.

Flat, Scaleable CSS iPhone Illustration Previews
IQ Test

Flat, Scaleable CSS iPhone Illustration - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat, Scaleable CSS iPhone Illustration</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="iphone"> <div class="powerButton"></div> <div class="leftButtons"></div> <div class="details"></div> <div class="homeButton"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Flat, Scaleable CSS iPhone Illustration - Script Codes CSS Codes

body { background: #2e9ec6; font-size: 12px;
}
.iphone { width: 16.06em; height: 30.6em; border-radius: 1.875em; margin: 2em auto; position: relative; background: #fff;
}
.iphone:before { content: ""; width: 14.5em; height: 20.938em; position: absolute; top: 4.75em; left: .750em; background: #4f4f4f;
}
.iphone:after { content: ""; position: absolute; top: 4.75em; left: .750em; border-top: 20.938em solid #595959; border-left: 14.5em solid transparent;
}
.powerButton { width: 2.188em; height: .188em; background: #e0e0e0; position: absolute; right: 2.5em; top: -.188em;
}
.leftButtons { width: .188em; height: 1.250em; top: 3.250em; left: -.188em; position: absolute; background: #e0e0e0;
}
.leftButtons:before { content: ""; width: .188em; height: .875em; position: absolute; top: 3em; background: #e0e0e0;
}
.leftButtons:after { content: ""; width: .188em; height: .875em; position: absolute; top: 5.5em; background: #e0e0e0;
}
.details { width: 2em; height: .25em; border-radius: .25em; position: absolute; top: 1.313em; left: 7em; background: #7c7c7c;
}
.details:before { content: ""; width: 2.5em; height: .25em; border-radius: .25em; position: absolute; top: 1em; left: -.25em; background: #7c7c7c;
}
.details:after { content: ""; width: .438em; height: .438em; border-radius: 100%; position: absolute; top: .9em; left: -1.25em; background: #4f4f4f;
}
.homeButton { width: 2.25em; height: 2.25em; border-radius: 100%; position: absolute; bottom: 1em; right: 6.75em; background: #f7f7f7;
}
.homeButton:before { content: ""; width: .813em; height: .813em; border: .15em solid #a8a8a8; border-radius: .2em; position: absolute; top: .6em; left: .57em;
}

Flat, Scaleable CSS iPhone Illustration - Script Codes JS Codes

/* Change Font Size to Resize Image*/
Flat, Scaleable CSS iPhone Illustration - Script Codes
Flat, Scaleable CSS iPhone Illustration - Script Codes
Home Page Home
Developer Tom Hergenreter
Username TomHergenreter
Uploaded October 17, 2022
Rating 3.5
Size 2,729 Kb
Views 18,216
Do you need developer help for Flat, Scaleable CSS iPhone Illustration?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Hergenreter (TomHergenreter) Script Codes
Name
Responsive Gallery
Colorado Badge
Image Caption Reveal
CSS Paper Navigation Menu
Toronto 3D
Pure CSS Responsive iCons
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!