Minimalist Mobile Mockup

Developer
Mario Duarte
Size
2,748 Kb
Views
42,504
  1. Minimalist Mobile Mockup Previews
  2. Minimalist Mobile Mockup HTML Codes
  3. Minimalist Mobile Mockup CSS Codes

How do I make an minimalist mobile mockup?

Very simple and minimalist mobile phone design in CSS to allow the showcase of mobile design. Feel free to fork this and use it on your mobile codepen projects.. What is a minimalist mobile mockup? How do you make a minimalist mobile mockup? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

Minimalist Mobile Mockup Previews
IQ Test

Minimalist Mobile Mockup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Minimalist Mobile Mockup </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div class="phone">	<div class="camera"></div>	<div class="speaker"></div>	<div class="screen">	<div class="inner">	<!-- your mobile layout here -->	</div>	</div>	<div class="home-btn"></div>	</div>
</div>
</body>
</html>

Minimalist Mobile Mockup - Script Codes CSS Codes

html,
body { margin: 0; padding: 0; background: #bdc3c7; background: -webkit-linear-gradient(-45deg, #bdc3c7 0%, white 50%, #eeeeee 100%); background: -webkit-linear-gradient(315deg, #bdc3c7 0%, white 50%, #eeeeee 100%); background: linear-gradient(135deg, #bdc3c7 0%, white 50%, #eeeeee 100%);
}
.wrapper { width: 100%; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.wrapper .phone { width: 360px; height: 708px; border: 3px solid #bdc3c7; border-radius: 15px; box-sizing: border-box; position: relative; background-color: #EEEEEE;
}
.wrapper .phone .home-btn { width: 40px; height: 40px; border: 2px solid #bdc3c7; position: absolute; bottom: 15px; left: 160px; border-radius: 50%;
}
.wrapper .phone .camera { width: 10px; height: 10px; position: absolute; top: 25px; left: 150px; background-color: #555555; border-radius: 50%;
}
.wrapper .phone .speaker { width: 50px; height: 10px; position: absolute; top: 25px; left: 165px; background-color: #555555; border-radius: 10px;
}
.wrapper .phone .screen { width: 320px; height: 568px; background-color: #999999; position: absolute; top: 60px; left: 20px; border-radius: 3px; border: 2px solid #555555; box-sizing: border-box; cursor: pointer; overflow: hidden;
}
.wrapper .phone .screen .inner { width: 335px; height: 100%; position: absolute; top: 0; right: -15px; overflow-y: scroll; overflow-x: hidden;
}
Minimalist Mobile Mockup - Script Codes
Minimalist Mobile Mockup - Script Codes
Home Page Home
Developer Mario Duarte
Username MarioDesigns
Uploaded August 04, 2022
Rating 3
Size 2,748 Kb
Views 42,504
Do you need developer help for Minimalist Mobile Mockup?

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!

Mario Duarte (MarioDesigns) Script Codes
Name
Popular Pens with ReactJS
JavaScript Lesson - Todo list
Carbon Atom Animation
3D Cube - Pure CSS
Hamburger Menu Animation
Image Comparison Slider
Floating Animation - CSS
3D Loading Animation
Pure CSS circonferences
Floating Particles
Create amazing SEO content 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!