├── .gitignore ├── README.md ├── bower.json ├── package.json ├── LICENSE ├── assets ├── scss │ ├── normalize.scss │ ├── style.scss │ └── devices.scss ├── main.min.js ├── style.css └── devices.min.css ├── Gruntfile.js └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | 3 | .idea/devices.css.iml 4 | 5 | .idea/encodings.xml 6 | 7 | .idea/misc.xml 8 | 9 | .idea/modules.xml 10 | 11 | .idea/scopes/scope_settings.xml 12 | 13 | .idea/vcs.xml 14 | 15 | .DS_Store 16 | 17 | assets/js/site.js 18 | 19 | node_modules/ 20 | .sass-cache/ 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | See the demo [here](http://marvelapp.github.io/devices.css/) 2 | 3 | # Usage 4 | In order to use a device, include devices.min.css at the top of your document and then go back to the [demo](http://marvelapp.github.io/devices.css/) and select the combination you want, and simply copy out the generated HTML. That's it! 5 | 6 | This will give you the device you selected, just like we use on Marvel. Use them, tweak them and improve however you want! Also sign up for [Marvel](http://marvelapp.com) if you haven't already because it's pretty good -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "devices.css", 3 | "homepage": "http://marvelapp.github.io/devices.css/", 4 | "authors": [ 5 | "Marvelapp Prototyping " 6 | ], 7 | "description": "Pure CSS implementation of various mobile devices", 8 | "main": "assets/devices.min.css", 9 | "keywords": [ 10 | "iphone", 11 | "nexus", 12 | "android", 13 | "htc", 14 | "ipad", 15 | "css" 16 | ], 17 | "license": "MIT", 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Devices.css", 3 | "version": "0.0.1", 4 | "description": "Marvel Devices", 5 | "main": "Gruntfile.js", 6 | "scripts": { 7 | "test": "/" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "/" 12 | }, 13 | "keywords": [ 14 | "/" 15 | ], 16 | "author": "@olegtsaplin", 17 | "license": "ISC", 18 | "devDependencies": { 19 | "autoprefixer": "^7.1.4", 20 | "grunt": "~0.4.5", 21 | "grunt-contrib-compass": "~0.8.0", 22 | "grunt-contrib-uglify": "~0.4.0", 23 | "grunt-contrib-watch": "~0.6.1", 24 | "grunt-postcss": "^0.9.0", 25 | "grunt-sass": "^2.0.0", 26 | "qs": "^6.5.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Marvelapp 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /assets/scss/normalize.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | grunt.initConfig({ 3 | pkg: grunt.file.readJSON('package.json'), 4 | watch: { 5 | sass: { 6 | files: 'assets/*/*.{scss,sass}', 7 | tasks: ['sass:dist', 'postcss:dist'], 8 | }, 9 | js: { 10 | files: ['assets/js/*.js'], 11 | tasks: ['uglify'] 12 | } 13 | }, 14 | sass: { 15 | dist: { 16 | options: { 17 | outputStyle: 'compressed', 18 | sourceMap: false, 19 | }, 20 | 21 | files: { 22 | 'assets/devices.min.css': 'assets/scss/devices.scss', 23 | 'assets/style.css': 'assets/scss/style.scss', 24 | } 25 | }, 26 | }, 27 | uglify: { 28 | all: { 29 | files: { 30 | 'assets/main.min.js': [ 31 | 'assets/js/*.js' 32 | ] 33 | } 34 | }, 35 | }, 36 | postcss: { 37 | options: { 38 | map: false, 39 | processors: [ 40 | require('autoprefixer') 41 | ] 42 | }, 43 | dist: { 44 | src: 'assets/*.css' 45 | } 46 | } 47 | }); 48 | 49 | grunt.loadNpmTasks('grunt-contrib-watch'); 50 | grunt.loadNpmTasks('grunt-contrib-compass'); 51 | grunt.loadNpmTasks('grunt-sass'); 52 | grunt.loadNpmTasks('grunt-contrib-uglify'); 53 | grunt.loadNpmTasks('grunt-postcss'); 54 | 55 | grunt.registerTask('default', ['sass:dist', 'postcss:dist', 'uglify' , 'watch']); 56 | }; -------------------------------------------------------------------------------- /assets/main.min.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){$(document).keyup(function(a){27==a.keyCode&&$(".overlay").removeClass("activated")}),$(".cell").click(function(a){console.log(a.target),a.target==this&&$(".overlay").removeClass("activated")}),$("#tweet .button").click(function(a){a.preventDefault();var b=encodeURIComponent($(this).attr("title")+" – ");window.open("http://twitter.com/share?url=&text="+b+"&related=@marvelapp&","twitterwindow","height=450, width=550, top="+($(window).height()/2-225)+", left="+$(window).width()/2+", toolbar=0, location=0, menubar=0, directories=0, scrollbars=0")}),$(".grab").click(function(){$(this).parent().parent().find(".overlay").addClass("activated"),$(this).parent().parent().find("code").each(function(a,b){hljs.highlightBlock(b)})}),$(".selector li").click(function(){var a=$(this).closest("section"),b=a.attr("id"),c=$("#"+b+" .marvel-device"),d=$("#"+b+" .orientation"),e=$("#"+b+" .colour"),f=$(this).attr("data");return"landscape"==f?void(c.hasClass("landscape")?($(this).removeClass("selected"),c.removeClass("landscape"),d.html("")):($(this).addClass("selected"),c.addClass("landscape"),d.html(" landscape"))):(a.removeClass().addClass(f),void(c.hasClass("landscape")?($("#"+b+" .selector li").removeClass("selected"),$("#"+b+" .select-landscape").addClass("selected"),$(this).addClass("selected"),c.removeClass().addClass("marvel-device "+b+" "+f+" landscape"),e.html(" "+f)):($("#"+b+" .selector li").removeClass("selected"),$(this).addClass("selected"),c.removeClass().addClass("marvel-device "+b+" "+f),e.html(" "+f))))})}); -------------------------------------------------------------------------------- /assets/style.css: -------------------------------------------------------------------------------- 1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;text-align:center;color:#868e96}html,body{height:100%}.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}.marvel-device,.marvel-device div,*:before,*:after{-webkit-transition:all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}a{cursor:pointer;color:#329af0;-webkit-transition:color 300ms ease-in-out;transition:color 300ms ease-in-out}header{padding:150px 0;line-height:24px;border-bottom:1px solid rgba(0,0,0,0.1)}header .button{margin-top:16px}h1{font-size:24px;font-weight:bold;color:#495057}header h1{margin-bottom:30px;font-size:34px;line-height:1.2}header span,header a{vertical-align:top}header .wrap{width:500px;margin:0 auto}section{background:#1e1e1e;border-bottom:1px solid rgba(255,255,255,0.1);width:100%;height:100%;display:table;position:relative}section h1{position:absolute;width:100%;top:60px;left:0}section h1.new:before{content:'NEW';background:#fcc419;padding:0 6px;line-height:24px;vertical-align:top;color:white;font-size:12px;border-radius:24px;margin-right:10px;display:inline-block}section.white,#s5.black,#lumia920.white,#lumia920.black{background:#1e1e1e}section.black h1,section.white{color:white}section.gold,section.silver,section.blue,section.red,section.yellow,section.green,#nexus5,#lumia920,#s5,#htc-one{background:white;border-bottom:1px solid #f1f3f5}section .wrap{display:table-cell;vertical-align:middle;text-align:center;padding:200px 0}p{margin-bottom:15px}p span{font-weight:bold}p:last-of-type{margin-bottom:0}.overlay{width:100%;height:100%;position:absolute;opacity:0;visibility:hidden;top:0;z-index:11111;-webkit-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out;left:0;background:rgba(255,255,255,0.9)}.overlay.activated{opacity:1;visibility:visible}.overlay.activated .modal{-webkit-transform:none;transform:none;-webkit-transition:all 300ms cubic-bezier(0.105, 0.795, 0.305, 1.335);transition:all 300ms cubic-bezier(0.105, 0.795, 0.305, 1.335)}.overlay .table{display:table;width:100%;height:100%;position:absolute;top:0;left:0}.overlay .table .cell{display:table-cell;vertical-align:middle}.overlay .modal{width:566px;text-align:left;margin:0 auto;-webkit-transform:scale(0.6) translateY(30px);transform:scale(0.6) translateY(30px);-webkit-transition:all 100ms cubic-bezier(0, 0, 0.58, 1);transition:all 100ms cubic-bezier(0, 0, 0.58, 1)}.overlay .modal p{line-height:1.8}.overlay .modal p:last-of-type{margin-bottom:30px}.buttons{margin:30px auto 0 auto}.twitter-share-button{display:inline-block;margin-right:6px}.github-button{display:inline-block}.button{line-height:36px;text-decoration:none;border-radius:4px;background:#343a40;color:white;padding:0 20px;font-weight:bold;letter-spacing:0px;margin:0 12px;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;display:inline-block}.button:hover{background:#212529}.button.download{background:#69db7c}.button.download:hover{color:white;background:#40d158}.selector{width:100%;text-align:center;display:block;position:absolute;top:120px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.grab{position:absolute;left:50%;margin-left:-70px;margin-right:0;width:100%;bottom:100px;width:100px;cursor:pointer}.selector li{width:30px;height:30px;margin:0 10px;display:inline-block;text-indent:-9999px;border-radius:30px;line-height:30px;cursor:pointer;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform:scale(0.6);transform:scale(0.6);opacity:0.6}.select-black{background:#2c2b2c}.select-silver{background:#f0f0f0}.select-gold{background:#f1e2d0}.select-white,#s5 .select-white,#s5 .select-white.selected{background:white;-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3)}.select-white.selected{-webkit-box-shadow:none;box-shadow:none}.select-red{background:#f96b6c}.select-yellow{background:#f2dc60}.select-green{background:#97e563}.select-blue{background:#33a2db}.select-landscape{text-indent:0px !important;width:100px !important;color:black;background:#e9ecef;font-size:12px;text-transform:uppercase;font-weight:600;-webkit-box-shadow:none !important;box-shadow:none !important;letter-spacing:2px;padding:0 10px}.selector li:hover{opacity:1}.selector li.selected{-webkit-transition:all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);transition:all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);-webkit-transform:scale(1);transform:scale(1);opacity:1}.marvel-device{vertical-align:top}.marvel-device .screen{text-align:left}.side{width:360px;display:inline-block;text-align:left;vertical-align:top;margin-left:30px}code{font-family:monospace;font-size:14px;padding:20px !important;font-weight:bold;border-radius:4px}.devices{font-family:monospace;display:inline-block;font-size:14px;font-weight:bold}.iphone5s .screen,.iphone8 .screen,.iphone8plus .screen{background:#e2e4e4;background:-webkit-gradient(linear, left top, left bottom, from(#e2e4e4), to(#7d8281));background:linear-gradient(to bottom, #e2e4e4 0%, #7d8281 100%)}.iphone5s.gold .screen,.iphone8.gold .screen,.iphone8plus.gold .screen{background:#f1e2d0;background:-webkit-gradient(linear, left top, left bottom, from(#f1e2d0), to(#ebdac7));background:linear-gradient(to bottom, #f1e2d0 0%, #ebdac7 100%)}.iphone5s.black .screen,.iphone8.black .screen,.iphone8plus.black .screen{background:#b3b3b7;background:-webkit-gradient(linear, left top, left bottom, from(#b3b3b7), to(#424044));background:linear-gradient(to bottom, #b3b3b7 0%, #424044 100%)}.iphone5c.white .screen{background:#d9d9d9;background:-webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#a1a1a1));background:linear-gradient(to bottom, #d9d9d9 0%, #a1a1a1 100%)}.iphone5c.red .screen{background:#ff7474;background:-webkit-gradient(linear, left top, left bottom, from(#ff7474), to(#dc94df));background:linear-gradient(to bottom, #ff7474 0%, #dc94df 100%)}.iphone5c.yellow .screen{background:#ffec6d;background:-webkit-gradient(linear, left top, left bottom, from(#ffec6d), to(#ffa546));background:linear-gradient(to bottom, #ffec6d 0%, #ffa546 100%)}.iphone5c.blue .screen{background:#9dcefd;background:-webkit-gradient(linear, left top, left bottom, from(#9dcefd), to(#66d3ad));background:linear-gradient(to bottom, #9dcefd 0%, #66d3ad 100%)}.iphone5c.green .screen{background:#97d555;background:-webkit-gradient(linear, left top, left bottom, from(#97d555), to(#d3ed20));background:linear-gradient(to bottom, #97d555 0%, #d3ed20 100%)}.nexus5 .screen{-webkit-box-shadow:none;box-shadow:none;background:#f3424b;background:-webkit-gradient(linear, left top, left bottom, from(#f3424b), to(#ffd51f));background:linear-gradient(to bottom, #f3424b 0%, #ffd51f 100%)}.ipad .screen{background:#0d3477;background:-webkit-gradient(linear, left top, left bottom, from(#0d3477), to(#adf3de));background:linear-gradient(to bottom, #0d3477 0%, #adf3de 100%)}.lumia920.black .screen{background:#fcfff4;background:-webkit-gradient(linear, left top, left bottom, from(#fcfff4), color-stop(40%, #dfe5d7), to(#b3bead));background:linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%)}.lumia920.white .screen{background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#e5e5e5));background:linear-gradient(to bottom, #fff 0%, #e5e5e5 100%)}.lumia920.blue .screen{background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#00acdd));background:linear-gradient(to bottom, #fff 0%, #00acdd 100%)}.lumia920.red .screen{background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#e62e1f));background:linear-gradient(to bottom, #fff 0%, #e62e1f 100%)}.lumia920 .screen{background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fd0));background:linear-gradient(to bottom, #fff 0%, #fd0 100%)}.iphone4s .screen{background:#efefbb;background:-webkit-gradient(linear, left top, left bottom, from(#efefbb), to(#d4d3dd));background:linear-gradient(to bottom, #efefbb 0%, #d4d3dd 100%)}.s5 .screen{-webkit-box-shadow:none;box-shadow:none;background:#1d976c;background:-webkit-gradient(linear, left top, left bottom, from(#1d976c), to(#93f9b9));background:linear-gradient(to bottom, #1d976c 0%, #93f9b9 100%)}.htc-one .screen{background:#283048;background:-webkit-gradient(linear, left top, left bottom, from(#283048), to(#859398));background:linear-gradient(to bottom, #283048 0%, #859398 100%)}.macbook .screen{background:#f16046;background:-webkit-gradient(linear, left top, left bottom, from(#f16046), to(#395f84));background:linear-gradient(to bottom, #f16046 0%, #395f84 100%)}.iphone-x .screen{background:#ff268e;background:-webkit-gradient(linear, left top, left bottom, from(#ff268e), to(#ff694f));background:linear-gradient(to bottom, #ff268e 0%, #ff694f 100%)}.iphone-x .screen:before{content:'';width:140%;height:100%;position:absolute;top:-30%;right:-70%;background:radial-gradient(ellipse at center, #3e4ff9 0%, rgba(62,79,249,0) 64%)}.iphone-x .screen:after{content:'';width:140%;height:140%;position:absolute;bottom:-50%;left:-30%;background:radial-gradient(ellipse at center, #f7ede1 0%, rgba(247,237,225,0) 70%);-webkit-transform:rotate(30deg);transform:rotate(30deg)}.note8 .screen{background:#2288fe;background:-webkit-gradient(linear, left top, left bottom, from(#2288fe), to(#fdeba9));background:linear-gradient(to bottom, #2288fe 0%, #fdeba9 100%)} 2 | -------------------------------------------------------------------------------- /assets/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import 'normalize'; 2 | 3 | body{ 4 | font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | font-size: 14px; 8 | text-align: center; 9 | color: #868e96; 10 | } 11 | 12 | html, body { 13 | height: 100%; 14 | } 15 | 16 | .cf:before, 17 | .cf:after { 18 | content: " "; 19 | display: table; 20 | } 21 | 22 | .cf:after { 23 | clear: both; 24 | } 25 | 26 | .cf { 27 | *zoom: 1; 28 | } 29 | 30 | .marvel-device, .marvel-device div, *:before, *:after { 31 | transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 32 | } 33 | 34 | a { 35 | cursor: pointer; 36 | color: #329af0; 37 | transition: color 300ms ease-in-out; 38 | } 39 | 40 | header { 41 | padding: 150px 0; 42 | line-height: 24px; 43 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 44 | 45 | .button { 46 | margin-top: 16px; 47 | } 48 | } 49 | 50 | h1{ 51 | font-size: 24px; 52 | font-weight: bold; 53 | color: #495057; 54 | } 55 | 56 | header h1 { 57 | margin-bottom: 30px; 58 | font-size: 34px; 59 | line-height: 1.2; 60 | } 61 | 62 | header span, header a { 63 | vertical-align: top; 64 | } 65 | 66 | header .wrap{ 67 | width: 500px; 68 | margin: 0 auto; 69 | } 70 | 71 | section { 72 | background: #1e1e1e; 73 | border-bottom: 1px solid rgba(255, 255, 255, 0.1); 74 | width: 100%; 75 | height: 100%; 76 | display: table; 77 | position: relative; 78 | } 79 | 80 | section h1 { 81 | position: absolute; 82 | width: 100%; 83 | top: 60px; 84 | left: 0; 85 | 86 | &.new{ 87 | &:before{ 88 | content: 'NEW'; 89 | background: #fcc419; 90 | padding: 0 6px; 91 | line-height: 24px; 92 | vertical-align: top; 93 | color: white; 94 | font-size: 12px; 95 | border-radius: 24px; 96 | margin-right: 10px; 97 | display: inline-block; 98 | } 99 | } 100 | } 101 | 102 | section.white, #s5.black, #lumia920.white, #lumia920.black { 103 | background: #1e1e1e; 104 | } 105 | 106 | section.black h1, section.white { 107 | color: white; 108 | } 109 | 110 | section.gold, section.silver, section.blue, section.red, section.yellow, section.green, #nexus5, #lumia920, #s5, #htc-one { 111 | background: white; 112 | border-bottom: 1px solid #f1f3f5; 113 | } 114 | 115 | section .wrap { 116 | display: table-cell; 117 | vertical-align: middle; 118 | text-align: center; 119 | padding: 200px 0; 120 | } 121 | 122 | p{ 123 | margin-bottom: 15px; 124 | 125 | span{ 126 | font-weight: bold; 127 | } 128 | 129 | &:last-of-type{ 130 | margin-bottom: 0; 131 | } 132 | } 133 | 134 | .overlay{ 135 | width: 100%; 136 | height: 100%; 137 | position: absolute; 138 | opacity: 0; 139 | visibility: hidden; 140 | top: 0; 141 | z-index: 11111; 142 | transition: all 200ms ease-in-out; 143 | left: 0; 144 | background: rgba(255, 255, 255, 0.9); 145 | 146 | &.activated{ 147 | opacity: 1; 148 | visibility: visible; 149 | 150 | .modal{ 151 | transform: none; 152 | transition: all 300ms cubic-bezier(0.105, 0.795, 0.305, 1.335); 153 | } 154 | } 155 | 156 | .table{ 157 | display: table; 158 | width: 100%; 159 | height: 100%; 160 | position: absolute; 161 | top: 0; 162 | left: 0; 163 | 164 | .cell{ 165 | display: table-cell; 166 | vertical-align: middle; 167 | } 168 | } 169 | 170 | .modal{ 171 | width: 566px; 172 | text-align: left; 173 | margin: 0 auto; 174 | transform: scale(0.6) translateY(30px); 175 | transition: all 100ms cubic-bezier(0.000, 0.000, 0.580, 1.000); 176 | 177 | p{ 178 | line-height: 1.8; 179 | 180 | &:last-of-type{ 181 | margin-bottom: 30px; 182 | } 183 | } 184 | } 185 | } 186 | 187 | .buttons { 188 | margin: 30px auto 0 auto; 189 | } 190 | 191 | .twitter-share-button{ 192 | display: inline-block; 193 | margin-right: 6px; 194 | } 195 | 196 | .github-button { 197 | display: inline-block; 198 | } 199 | 200 | .button{ 201 | line-height: 36px; 202 | text-decoration: none; 203 | border-radius: 4px; 204 | background: #343a40; 205 | color: white; 206 | padding: 0 20px; 207 | font-weight: bold; 208 | letter-spacing: 0px; 209 | margin: 0 12px; 210 | transition: all 300ms ease-in-out; 211 | display: inline-block; 212 | 213 | &:hover { 214 | background: #212529; 215 | } 216 | 217 | &.download{ 218 | background: #69db7c; 219 | 220 | &:hover{ 221 | color: white; 222 | background: darken(#69db7c, 10%); 223 | } 224 | } 225 | } 226 | 227 | .selector { 228 | width: 100%; 229 | text-align: center; 230 | display: block; 231 | position: absolute; 232 | top: 120px; 233 | user-select: none; 234 | } 235 | 236 | .grab{ 237 | position: absolute; 238 | left: 50%; 239 | margin-left: -70px; 240 | margin-right: 0; 241 | width: 100%; 242 | bottom: 100px; 243 | width: 100px; 244 | cursor: pointer; 245 | } 246 | 247 | .selector li { 248 | width: 30px; 249 | height: 30px; 250 | margin: 0 10px; 251 | display: inline-block; 252 | text-indent: -9999px; 253 | border-radius: 30px; 254 | line-height: 30px; 255 | cursor: pointer; 256 | transition: all 0.2s ease-in-out; 257 | transform: scale(0.6); 258 | opacity: 0.6; 259 | } 260 | 261 | .select-black { 262 | background: #2c2b2c; 263 | } 264 | 265 | .select-silver { 266 | background: #f0f0f0; 267 | } 268 | 269 | .select-gold { 270 | background: #f1e2d0; 271 | } 272 | 273 | .select-white, #s5 .select-white, #s5 .select-white.selected { 274 | background: white; 275 | box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); 276 | } 277 | 278 | .select-white.selected { 279 | box-shadow: none; 280 | } 281 | 282 | .select-red { 283 | background: #f96b6c; 284 | } 285 | 286 | .select-yellow { 287 | background: #f2dc60; 288 | } 289 | 290 | .select-green { 291 | background: #97e563; 292 | } 293 | 294 | .select-blue { 295 | background: #33a2db; 296 | } 297 | 298 | .select-landscape { 299 | text-indent: 0px !important; 300 | width: 100px !important; 301 | color: black; 302 | background: #e9ecef; 303 | font-size: 12px; 304 | text-transform: uppercase; 305 | font-weight: 600; 306 | box-shadow: none !important; 307 | letter-spacing: 2px; 308 | padding: 0 10px; 309 | } 310 | 311 | .selector li:hover { 312 | opacity: 1; 313 | } 314 | 315 | .selector li.selected { 316 | transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 317 | transform: scale(1); 318 | opacity: 1; 319 | } 320 | 321 | .marvel-device{ 322 | vertical-align: top; 323 | } 324 | 325 | .marvel-device .screen{ 326 | text-align: left; 327 | } 328 | 329 | .side{ 330 | width: 360px; 331 | display: inline-block; 332 | text-align: left; 333 | vertical-align: top; 334 | margin-left: 30px; 335 | } 336 | 337 | code{ 338 | font-family: monospace; 339 | font-size: 14px; 340 | padding: 20px !important; 341 | font-weight: bold; 342 | border-radius: 4px; 343 | } 344 | 345 | .devices{ 346 | font-family: monospace; 347 | display: inline-block; 348 | font-size: 14px; 349 | font-weight: bold; 350 | } 351 | 352 | .iphone5s .screen, .iphone8 .screen, .iphone8plus .screen { 353 | background: rgb(226,228,228); 354 | background: linear-gradient(to bottom, rgba(226,228,228,1) 0%,rgba(125,130,129,1) 100%); 355 | } 356 | 357 | .iphone5s.gold .screen, .iphone8.gold .screen, .iphone8plus.gold .screen{ 358 | background: rgb(241,226,208); 359 | background: linear-gradient(to bottom, rgba(241,226,208,1) 0%,rgba(235,218,199,1) 100%); 360 | } 361 | 362 | .iphone5s.black .screen, .iphone8.black .screen, .iphone8plus.black .screen{ 363 | background: rgb(179,179,183); 364 | background: linear-gradient(to bottom, rgba(179,179,183,1) 0%,rgba(66,64,68,1) 100%); 365 | } 366 | 367 | .iphone5c.white .screen { 368 | background: rgb(217,217,217); 369 | background: linear-gradient(to bottom, rgba(217,217,217,1) 0%,rgba(161,161,161,1) 100%); 370 | } 371 | 372 | .iphone5c.red .screen { 373 | background: rgb(255,116,116); 374 | background: linear-gradient(to bottom, rgba(255,116,116,1) 0%,rgba(220,148,223,1) 100%); 375 | } 376 | 377 | .iphone5c.yellow .screen { 378 | background: rgb(255,236,109); 379 | background: linear-gradient(to bottom, rgba(255,236,109,1) 0%,rgba(255,165,70,1) 100%); 380 | } 381 | 382 | .iphone5c.blue .screen { 383 | background: rgb(157,206,253); 384 | background: linear-gradient(to bottom, rgba(157,206,253,1) 0%,rgba(102,211,173,1) 100%); 385 | } 386 | 387 | .iphone5c.green .screen { 388 | background: rgb(151,213,85); 389 | background: linear-gradient(to bottom, rgba(151,213,85,1) 0%,rgba(211,237,32,1) 100%); 390 | } 391 | 392 | .nexus5 .screen { 393 | box-shadow: none; 394 | background: rgb(243,66,75); 395 | background: linear-gradient(to bottom, rgba(243,66,75,1) 0%,rgba(255,213,31,1) 100%); 396 | } 397 | 398 | .ipad .screen { 399 | background: rgb(13,52,119); 400 | background: linear-gradient(to bottom, rgba(13,52,119,1) 0%,rgba(173,243,222,1) 100%); 401 | } 402 | 403 | .lumia920.black .screen { 404 | background: rgb(252,255,244); 405 | background: linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); 406 | } 407 | 408 | .lumia920.white .screen { 409 | background: rgb(255,255,255); 410 | background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); 411 | } 412 | 413 | .lumia920.blue .screen { 414 | background: rgb(255,255,255); 415 | background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(0,172,221,1) 100%); 416 | } 417 | 418 | .lumia920.red .screen { 419 | background: rgb(255,255,255); 420 | background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(230,46,31,1) 100%); 421 | } 422 | 423 | .lumia920 .screen { 424 | background: rgb(255,255,255); 425 | background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,221,0,1) 100%); 426 | } 427 | 428 | .iphone4s .screen{ 429 | background: rgb(239,239,187); 430 | background: linear-gradient(to bottom, rgba(239,239,187,1) 0%,rgba(212,211,221,1) 100%); 431 | } 432 | 433 | .s5 .screen { 434 | box-shadow: none; 435 | background: rgb(29,151,108); 436 | background: linear-gradient(to bottom, rgba(29,151,108,1) 0%,rgba(147,249,185,1) 100%); 437 | } 438 | 439 | .htc-one .screen{ 440 | background: rgb(40,48,72); 441 | background: linear-gradient(to bottom, rgba(40,48,72,1) 0%,rgba(133,147,152,1) 100%); 442 | } 443 | 444 | .macbook .screen{ 445 | background: #f16046; 446 | background: linear-gradient(to bottom, #f16046 0%,#395f84 100%); 447 | } 448 | 449 | .iphone-x .screen{ 450 | background: rgb(255,38,142); 451 | background: linear-gradient(to bottom, rgba(255,38,142,1) 0%,rgba(255,105,79,1) 100%); 452 | 453 | &:before { 454 | content: ''; 455 | width: 140%; 456 | height: 100%; 457 | position: absolute; 458 | top: -30%; 459 | right: -70%; 460 | background: radial-gradient(ellipse at center, rgba(62,79,249,1) 0%,rgba(62,79,249,0) 64%); 461 | } 462 | 463 | &:after { 464 | content: ''; 465 | width: 140%; 466 | height: 140%; 467 | position: absolute; 468 | bottom: -50%; 469 | left: -30%; 470 | background: radial-gradient(ellipse at center, rgba(247,237,225,1) 0%,rgba(247,237,225,0) 70%); 471 | transform: rotate(30deg); 472 | } 473 | } 474 | 475 | .note8 .screen { 476 | background: rgb(34,136,254); 477 | background: linear-gradient(to bottom, rgba(34,136,254,1) 0%,rgba(253,235,169,1) 100%); 478 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 Pure CSS Mobile Devices from @marvelapp 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

13 Pure CSS Mobile Devices.css

16 |

We've created several minimal iPhone, Android, Lumia and iPad devices in pure CSS to showcase the prototypes our users make on Marvel. Made with love by Oleg.

17 |

Update: Brand new iPhone X and Samsung Galaxy Note 8. Just include devices.min.css and grab the code below!

18 |
19 | 20 | 21 | Star 22 |
23 | Download on Github 24 |
25 |
26 | 27 |
28 |
29 |

iPhone X

30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
    49 |
  • Landscape
    • 50 |
51 |
Grab the code
52 |
53 |
54 |
55 |
56 |
57 |

To use this pure CSS iPhone X, download & include devices.min.css from Github, and paste the code below into your page.

58 | 
 59 | 						
 60 | <link rel="stylesheet" href="devices.min.css" type="text/css">
 61 | 						
 62 |
63 | 
 64 | 					<div class="marvel-device iphone-x">
 65 |     <div class="notch">
 66 |         <div class="camera"></div>
 67 |         <div class="speaker"></div>
 68 |     </div>
 69 |     <div class="top-bar"></div>
 70 |     <div class="sleep"></div>
 71 |     <div class="bottom-bar"></div>
 72 |     <div class="volume"></div>
 73 |     <div class="overflow">
 74 |         <div class="shadow shadow--tr"></div>
 75 |         <div class="shadow shadow--tl"></div>
 76 |         <div class="shadow shadow--br"></div>
 77 |         <div class="shadow shadow--bl"></div>
 78 |     </div>
 79 |     <div class="inner-shadow"></div>
 80 |     <div class="screen">
 81 |         <!-- Content goes here -->
 82 |     </div>
 83 | </div>
 84 |
85 |
86 |
87 |
88 |
89 |
90 | 91 |
92 |
93 |

Galaxy Note 8

94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
    108 |
  • Landscape
    • 109 |
110 |
Grab the code
111 |
112 |
113 |
114 |
115 |
116 |

To use this pure CSS Galaxy Note 8, download & include devices.min.css from Github, and paste the code below into your page.

117 | 
118 | 						
119 | <link rel="stylesheet" href="devices.min.css" type="text/css">
120 | 						
121 |
122 | 
123 | 					<div class="marvel-device note8">
124 |     <div class="inner"></div>
125 |     <div class="overflow">
126 |         <div class="shadow"></div>
127 |     </div>
128 |     <div class="speaker"></div>
129 |     <div class="sensors"></div>
130 |     <div class="more-sensors"></div>
131 |     <div class="sleep"></div>
132 |     <div class="volume"></div>
133 |     <div class="camera"></div>
134 |     <div class="screen">
135 |         <!-- Content goes here -->
136 |     </div>
137 | </div>
138 |
139 |
140 |
141 |
142 |
143 |
144 | 145 |
146 |
147 |

iPhone 8

148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
    160 |
  • Black
    • 161 |
  • White
    • 162 |
  • Gold
    • 163 |
  • Landscape
    • 164 |
165 |
Grab the code
166 |
167 |
168 |
169 |
170 |
171 |

To use this pure CSS iPhone 8, download & include devices.min.css from Github, and paste the code below into your page.

172 | 
173 | 						
174 | <link rel="stylesheet" href="devices.min.css" type="text/css">
175 | 						
176 |
177 | 
178 | 					<div class="marvel-device iphone8 silver">
179 |     <div class="top-bar"></div>
180 |     <div class="sleep"></div>
181 |     <div class="volume"></div>
182 |     <div class="camera"></div>
183 |     <div class="sensor"></div>
184 |     <div class="speaker"></div>
185 |     <div class="screen">
186 |         <!-- Content goes here -->
187 |     </div>
188 |     <div class="home"></div>
189 |     <div class="bottom-bar"></div>
190 | </div>
191 |
192 |
193 |
194 |
195 |
196 |
197 | 198 | 199 |
200 |
201 |

iPhone 8 Plus

202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
    214 |
  • Black
    • 215 |
  • White
    • 216 |
  • Gold
    • 217 |
  • Landscape
    • 218 |
219 |
Grab the code
220 |
221 |
222 |
223 |
224 |
225 |

To use this pure CSS iPhone 8 Plus, download & include devices.min.css from Github, and paste the code below into your page.

226 | 
227 | 						
228 | <link rel="stylesheet" href="devices.min.css" type="text/css">
229 | 						
230 |
231 | 
232 | 					<div class="marvel-device iphone8plus black">
233 |     <div class="top-bar"></div>
234 |     <div class="sleep"></div>
235 |     <div class="volume"></div>
236 |     <div class="camera"></div>
237 |     <div class="sensor"></div>
238 |     <div class="speaker"></div>
239 |     <div class="screen">
240 |         <!-- Content goes here -->
241 |     </div>
242 |     <div class="home"></div>
243 |     <div class="bottom-bar"></div>
244 | </div>
245 |
246 |
247 |
248 |
249 |
250 |
251 | 252 |
253 |
254 |

iPhone 5S

255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
    267 |
  • Black
    • 268 |
  • White
    • 269 |
  • Gold
    • 270 |
  • Landscape
    • 271 |
272 |
Grab the code
273 |
274 |
275 |
276 |
277 |
278 |

To use this pure CSS iPhone 5S, download & include devices.min.css from Github, and paste the code below into your page.

279 | 
280 | 						
281 | <link rel="stylesheet" href="devices.min.css" type="text/css">
282 | 						
283 |
284 | 
285 | 					<div class="marvel-device iphone5s">
286 |     <div class="top-bar"></div>
287 |     <div class="sleep"></div>
288 |     <div class="volume"></div>
289 |     <div class="camera"></div>
290 |     <div class="sensor"></div>
291 |     <div class="speaker"></div>
292 |     <div class="screen">
293 |         <!-- Content goes here -->
294 |     </div>
295 |     <div class="home"></div>
296 |     <div class="bottom-bar"></div>
297 | </div>
298 |
299 |
300 |
301 |
302 |
303 |
304 | 305 |
306 |
307 |

iPhone 5C

308 |
309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
    320 |
  • White
    • 321 |
  • White
    • 322 |
  • Yellow
    • 323 |
  • Green
    • 324 |
  • Blue
    • 325 |
  • Landscape
    • 326 |
327 |
Grab the code
328 |
329 |
330 |
331 |
332 |
333 |

To use this Pure CSS iPhone 5C, download & include devices.min.css from Github, and paste the code below into your page.

334 | 
335 | 						
336 | <link rel="stylesheet" href="devices.min.css" type="text/css">
337 | 						
338 |
339 | 
340 | 					<div class="marvel-device iphone5c green">
341 |     <div class="top-bar"></div>
342 |     <div class="sleep"></div>
343 |     <div class="volume"></div>
344 |     <div class="camera"></div>
345 |     <div class="sensor"></div>
346 |     <div class="speaker"></div>
347 |     <div class="screen">
348 |         <!-- Content goes here -->
349 |     </div>
350 |     <div class="home"></div>
351 |     <div class="bottom-bar"></div>
352 | </div>
353 |
354 |
355 |
356 |
357 |
358 |
359 | 360 |
361 |
362 |

iPad Mini

363 |
364 |
365 |
366 |
367 |
368 |
    369 |
  • Black
    • 370 |
  • White
    • 371 |
  • Landscape
    • 372 |
373 |
Grab the code
374 |
375 |
376 |
377 |
378 |
379 |

To use this pure CSS iPad Mini, download & include devices.min.css from Github, and paste the code below into your page.

380 | 
381 | 						
382 | <link rel="stylesheet" href="devices.min.css" type="text/css">
383 | 						
384 |
385 | 
386 | 					<div class="marvel-device ipad silver">
387 |     <div class="camera"></div>
388 |     <div class="screen">
389 |         <!-- Content goes here -->
390 |     </div>
391 |     <div class="home"></div>
392 | </div>
393 |
394 |
395 |
396 |
397 |
398 |
399 | 400 | 401 |
402 |
403 |

iPhone 4S

404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
    416 |
  • Black
    • 417 |
  • White
    • 418 |
  • Landscape
    • 419 |
420 |
Grab the code
421 |
422 |
423 |
424 |
425 |
426 |

To use this pure CSS iPhone 4S, download & include devices.min.css from Github, and paste the code below into your page.

427 | 
428 | 						
429 | <link rel="stylesheet" href="devices.min.css" type="text/css">
430 | 						
431 |
432 | 
433 | 					<div class="marvel-device iphone4s silver">
434 |     <div class="top-bar"></div>
435 |     <div class="sleep"></div>
436 |     <div class="volume"></div>
437 |     <div class="camera"></div>
438 |     <div class="sensor"></div>
439 |     <div class="speaker"></div>
440 |     <div class="screen">
441 |         <!-- Content goes here -->
442 |     </div>
443 |     <div class="home"></div>
444 |     <div class="bottom-bar"></div>
445 | </div>
446 |
447 |
448 |
449 |
450 |
451 |
452 | 453 |
454 |
455 |

Nexus 5

456 |
457 |
458 |
459 |
460 |
461 |
462 |
463 |
    464 |
  • Landscape
    • 465 |
466 |
Grab the code
467 |
468 |
469 |
470 |
471 |
472 |

To use this pure CSS Nexus 5, download & include devices.min.css from Github, and paste the code below into your page.

473 | 
474 | 						
475 | <link rel="stylesheet" href="devices.min.css" type="text/css">
476 | 						
477 |
478 | 
479 | 					<div class="marvel-device nexus5">
480 |     <div class="top-bar"></div>
481 |     <div class="sleep"></div>
482 |     <div class="volume"></div>
483 |     <div class="camera"></div>
484 |     <div class="screen">
485 |         <!-- Content goes here -->
486 |     </div>
487 | </div>
488 |
489 |
490 |
491 |
492 |
493 |
494 | 495 |
496 |
497 |

Lumia 920

498 |
499 |
500 |
501 |
502 |
503 |
504 |
505 |
    506 |
  • Black
    • 507 |
  • White
    • 508 |
  • Yellow
    • 509 |
  • Red
    • 510 |
  • Blue
    • 511 |
  • Landscape
    • 512 |
513 |
Grab the code
514 |
515 |
516 |
517 |
518 |
519 |

To use this pure CSS Lumia 920, download & include devices.min.css from Github, and paste the code below into your page.

520 | 
521 | 						
522 | <link rel="stylesheet" href="devices.min.css" type="text/css">
523 | 						
524 |
525 | 
526 | 					<div class="marvel-device lumia920 yellow">
527 |     <div class="top-bar"></div>
528 |     <div class="volume"></div>
529 |     <div class="camera"></div>
530 |     <div class="speaker"></div>
531 |     <div class="screen">
532 |         <!-- Content goes here -->
533 |     </div>
534 | </div>
535 |
536 |
537 |
538 |
539 |
540 |
541 | 542 |
543 |
544 |

Samsung Galaxy S5

545 |
546 |
547 |
548 |
549 |
550 |
551 |
552 |
553 |
554 |
    555 |
  • White
    • 556 |
  • Black
    • 557 |
  • Landscape
    • 558 |
559 |
Grab the code
560 |
561 |
562 |
563 |
564 |
565 |

To use this pure CSS Galaxy S5, download & include devices.min.css from Github, and paste the code below into your page.

566 | 
567 | 						
568 | <link rel="stylesheet" href="devices.min.css" type="text/css">
569 | 						
570 |
571 | 
572 | 					<div class="marvel-device s5 white">
573 |     <div class="top-bar"></div>
574 |     <div class="sleep"></div>
575 |     <div class="camera"></div>
576 |     <div class="sensor"></div>
577 |     <div class="speaker"></div>
578 |     <div class="screen">
579 |         <!-- Content goes here -->
580 |     </div>
581 |     <div class="home"></div>
582 | </div>
583 |
584 |
585 |
586 |
587 |
588 |
589 | 590 |
591 |
592 |

HTC One

593 |
594 |
595 |
596 |
597 |
598 |
599 |
600 |
    601 |
  • Landscape
    • 602 |
603 |
Grab the code
604 |
605 |
606 |
607 |
608 |
609 |

To use this pure CSS HTC One, download & include devices.min.css from Github, and paste the code below into your page.

610 | 
611 | 						
612 | <link rel="stylesheet" href="devices.min.css" type="text/css">
613 | 						
614 |
615 | 
616 | 					<div class="marvel-device htc-one">
617 |     <div class="top-bar"></div>
618 |     <div class="camera"></div>
619 |     <div class="sensor"></div>
620 |     <div class="speaker"></div>
621 |     <div class="screen">
622 |         <!-- Content goes here -->
623 |     </div>
624 | </div>
625 |
626 |
627 |
628 |
629 |
630 |
631 | 632 |
633 |
634 |

MacBook Pro

635 |
636 |
637 |
638 |
639 |
640 |
641 |
Grab the code
642 |
643 |
644 |
645 |
646 |
647 |

To use this pure CSS Macbook Pro, download & include devices.min.css from Github, and paste the code below into your page.

648 | 
649 | 						
650 | <link rel="stylesheet" href="devices.min.css" type="text/css">
651 | 						
652 |
653 | 
654 | 					<div class="marvel-device macbook">
655 |     <div class="top-bar"></div>
656 |     <div class="camera"></div>
657 |     <div class="screen">
658 |         <!-- Content goes here -->
659 |     </div>
660 |     <div class="bottom-bar"></div>
661 | </div>
662 |
663 |
664 |
665 |
666 |
667 |
668 | 669 | 670 | 671 | 672 | 673 | 684 | -------------------------------------------------------------------------------- /assets/devices.min.css: -------------------------------------------------------------------------------- 1 | .marvel-device{display:inline-block;position:relative;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.marvel-device .screen{width:100%;position:relative;height:100%;z-index:3;background:white;overflow:hidden;display:block;border-radius:1px;-webkit-box-shadow:0 0 0 3px #111;box-shadow:0 0 0 3px #111}.marvel-device .top-bar,.marvel-device .bottom-bar{height:3px;background:black;width:100%;display:block}.marvel-device .middle-bar{width:3px;height:4px;top:0px;left:90px;background:black;position:absolute}.marvel-device.iphone8{width:375px;height:667px;padding:105px 24px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8 .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:22px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8 .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8 .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8 .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8 .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8 .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8 .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:24px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8 .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:49px;left:134px;z-index:3;border-radius:100%}.marvel-device.iphone8 .speaker{background:#292728;width:70px;height:6px;position:absolute;top:54px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8.gold{background:#f9e7d3}.marvel-device.iphone8.gold .top-bar,.marvel-device.iphone8.gold .bottom-bar{background:white}.marvel-device.iphone8.gold .sleep,.marvel-device.iphone8.gold .volume{background:#f9e7d3}.marvel-device.iphone8.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8.black:before{background:#080808}.marvel-device.iphone8.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8.black .top-bar,.marvel-device.iphone8.black .bottom-bar{background:#212121}.marvel-device.iphone8.black .volume,.marvel-device.iphone8.black .sleep{background:#464646}.marvel-device.iphone8.black .camera{background:#080808}.marvel-device.iphone8.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8.black .home:before{background:#080808}.marvel-device.iphone8.landscape{padding:24px 105px;height:375px;width:667px}.marvel-device.iphone8.landscape .sleep{top:100%;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone8.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px - 14px);top:0}.marvel-device.iphone8.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone8.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:22px}.marvel-device.iphone8.landscape .sensor{top:134px;left:calc(100% - 49px - 16px)}.marvel-device.iphone8.landscape .speaker{height:70px;width:6px;left:calc(100% - 54px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone8.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone8plus{width:414px;height:736px;padding:112px 26px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8plus:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8plus:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8plus .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:24px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8plus .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8plus .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8plus .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8plus .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8plus .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8plus .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8plus .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8plus .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:29px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8plus .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:54px;left:154px;z-index:3;border-radius:100%}.marvel-device.iphone8plus .speaker{background:#292728;width:70px;height:6px;position:absolute;top:59px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8plus.gold{background:#f9e7d3}.marvel-device.iphone8plus.gold .top-bar,.marvel-device.iphone8plus.gold .bottom-bar{background:white}.marvel-device.iphone8plus.gold .sleep,.marvel-device.iphone8plus.gold .volume{background:#f9e7d3}.marvel-device.iphone8plus.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8plus.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8plus.black:before{background:#080808}.marvel-device.iphone8plus.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8plus.black .top-bar,.marvel-device.iphone8plus.black .bottom-bar{background:#212121}.marvel-device.iphone8plus.black .volume,.marvel-device.iphone8plus.black .sleep{background:#464646}.marvel-device.iphone8plus.black .camera{background:#080808}.marvel-device.iphone8plus.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8plus.black .home:before{background:#080808}.marvel-device.iphone8plus.landscape{padding:26px 112px;height:414px;width:736px}.marvel-device.iphone8plus.landscape .sleep{top:100%;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone8plus.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px - 14px);top:0}.marvel-device.iphone8plus.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone8plus.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:24px}.marvel-device.iphone8plus.landscape .sensor{top:154px;left:calc(100% - 54px - 16px)}.marvel-device.iphone8plus.landscape .speaker{height:70px;width:6px;left:calc(100% - 59px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone8plus.landscape .camera{left:calc(100% - 29px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s,.marvel-device.iphone5c{padding:105px 22px;background:#2c2b2c;width:320px;height:568px;border-radius:50px}.marvel-device.iphone5s:before,.marvel-device.iphone5c:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;content:'';left:4px;border-radius:46px;background:#1e1e1e;z-index:1}.marvel-device.iphone5s .sleep,.marvel-device.iphone5c .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0px 0px;background:#282727}.marvel-device.iphone5s .volume,.marvel-device.iphone5c .volume{position:absolute;left:-4px;top:180px;z-index:0;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:#282727}.marvel-device.iphone5s .volume:before,.marvel-device.iphone5c .volume:before{position:absolute;left:0px;top:-75px;height:35px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .volume:after,.marvel-device.iphone5c .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .camera,.marvel-device.iphone5c .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:32px;left:50%;margin-left:-5px;border-radius:5px;z-index:3}.marvel-device.iphone5s .sensor,.marvel-device.iphone5c .sensor{background:#3c3d3d;width:10px;height:10px;position:absolute;top:60px;left:160px;z-index:3;margin-left:-32px;border-radius:5px}.marvel-device.iphone5s .speaker,.marvel-device.iphone5c .speaker{background:#292728;width:64px;height:10px;position:absolute;top:60px;left:50%;margin-left:-32px;border-radius:5px;z-index:3}.marvel-device.iphone5s.landscape,.marvel-device.iphone5c.landscape{padding:22px 105px;height:320px;width:568px}.marvel-device.iphone5s.landscape .sleep,.marvel-device.iphone5c.landscape .sleep{right:-4px;top:calc(100% - 120px);height:60px;width:4px;border-radius:0px 2px 2px 0px}.marvel-device.iphone5s.landscape .volume,.marvel-device.iphone5c.landscape .volume{width:27px;height:4px;top:-4px;left:calc(100% - 180px);border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:before,.marvel-device.iphone5c.landscape .volume:before{width:35px;height:4px;top:0px;right:-75px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:after,.marvel-device.iphone5c.landscape .volume:after{bottom:0px;left:-64px;z-index:999;height:4px;width:27px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .sensor,.marvel-device.iphone5c.landscape .sensor{top:160px;left:calc(100% - 60px);margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .speaker,.marvel-device.iphone5c.landscape .speaker{height:64px;width:10px;left:calc(100% - 60px);top:50%;margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .camera,.marvel-device.iphone5c.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s .home{border-radius:36px;width:68px;-webkit-box-shadow:inset 0 0 0 4px #2c2b2c;box-shadow:inset 0 0 0 4px #2c2b2c;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:19px;z-index:3}.marvel-device.iphone5s .top-bar{top:70px;position:absolute;left:0}.marvel-device.iphone5s .bottom-bar{bottom:70px;position:absolute;left:0}.marvel-device.iphone5s.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5s.landscape .top-bar{left:70px;top:0px;width:3px;height:100%}.marvel-device.iphone5s.landscape .bottom-bar{right:70px;left:auto;bottom:0px;width:3px;height:100%}.marvel-device.iphone5s.silver{background:#bcbcbc}.marvel-device.iphone5s.silver:before{background:#fcfcfc}.marvel-device.iphone5s.silver .volume,.marvel-device.iphone5s.silver .sleep{background:#d6d6d6}.marvel-device.iphone5s.silver .top-bar,.marvel-device.iphone5s.silver .bottom-bar{background:#eaebec}.marvel-device.iphone5s.silver .home{-webkit-box-shadow:inset 0 0 0 4px #bcbcbc;box-shadow:inset 0 0 0 4px #bcbcbc}.marvel-device.iphone5s.gold{background:#f9e7d3}.marvel-device.iphone5s.gold:before{background:#fcfcfc}.marvel-device.iphone5s.gold .volume,.marvel-device.iphone5s.gold .sleep{background:#f9e7d3}.marvel-device.iphone5s.gold .top-bar,.marvel-device.iphone5s.gold .bottom-bar{background:white}.marvel-device.iphone5s.gold .home{-webkit-box-shadow:inset 0 0 0 4px #f9e7d3;box-shadow:inset 0 0 0 4px #f9e7d3}.marvel-device.iphone5c{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.iphone5c .top-bar,.marvel-device.iphone5c .bottom-bar{display:none}.marvel-device.iphone5c .home{background:#242324;border-radius:36px;width:68px;height:68px;z-index:3;position:absolute;left:50%;margin-left:-34px;bottom:19px}.marvel-device.iphone5c .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone5c.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5c .volume,.marvel-device.iphone5c .sleep{background:#dddddd}.marvel-device.iphone5c.red{background:#f96b6c}.marvel-device.iphone5c.red .volume,.marvel-device.iphone5c.red .sleep{background:#ed5758}.marvel-device.iphone5c.yellow{background:#f2dc60}.marvel-device.iphone5c.yellow .volume,.marvel-device.iphone5c.yellow .sleep{background:#e5ce4c}.marvel-device.iphone5c.green{background:#97e563}.marvel-device.iphone5c.green .volume,.marvel-device.iphone5c.green .sleep{background:#85d94d}.marvel-device.iphone5c.blue{background:#33a2db}.marvel-device.iphone5c.blue .volume,.marvel-device.iphone5c.blue .sleep{background:#2694cd}.marvel-device.iphone4s{padding:129px 27px;width:320px;height:480px;background:#686868;border-radius:54px}.marvel-device.iphone4s:before{content:'';width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;z-index:1;border-radius:50px;background:#1e1e1e}.marvel-device.iphone4s .top-bar{top:60px;position:absolute;left:0}.marvel-device.iphone4s .bottom-bar{bottom:90px;position:absolute;left:0}.marvel-device.iphone4s .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:72px;left:134px;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.iphone4s .speaker{background:#292728;width:64px;height:10px;position:absolute;top:72px;left:50%;z-index:3;margin-left:-32px;border-radius:5px}.marvel-device.iphone4s .sensor{background:#292728;width:40px;height:10px;position:absolute;top:36px;left:50%;z-index:3;margin-left:-20px;border-radius:5px}.marvel-device.iphone4s .home{background:#242324;border-radius:100%;width:72px;height:72px;z-index:3;position:absolute;left:50%;margin-left:-36px;bottom:30px}.marvel-device.iphone4s .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone4s .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0px 0px;background:#4D4D4D}.marvel-device.iphone4s .volume{position:absolute;left:-4px;top:160px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:#4D4D4D}.marvel-device.iphone4s .volume:before{position:absolute;left:0px;top:-70px;height:35px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s.landscape{padding:27px 129px;height:320px;width:480px}.marvel-device.iphone4s.landscape .bottom-bar{left:90px;bottom:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .top-bar{left:calc(100% - 60px);top:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .camera{top:134px;left:calc(100% - 72px);margin-left:0}.marvel-device.iphone4s.landscape .speaker{top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 72px);width:10px;height:64px}.marvel-device.iphone4s.landscape .sensor{height:40px;width:10px;left:calc(100% - 36px);top:50%;margin-left:0;margin-top:-20px}.marvel-device.iphone4s.landscape .home{left:30px;bottom:50%;margin-left:0;margin-bottom:-36px}.marvel-device.iphone4s.landscape .sleep{height:60px;width:4px;right:-4px;top:calc(100% - 120px);border-radius:0px 2px 2px 0px}.marvel-device.iphone4s.landscape .volume{top:-4px;left:calc(100% - 187px);height:4px;width:27px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:before{right:-70px;left:auto;top:0px;width:35px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:after{width:27px;height:4px;bottom:0px;left:-64px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.silver{background:#bcbcbc}.marvel-device.iphone4s.silver:before{background:#fcfcfc}.marvel-device.iphone4s.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.iphone4s.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.iphone4s.silver .volume,.marvel-device.iphone4s.silver .sleep{background:#d6d6d6}.marvel-device.nexus5{padding:50px 15px 50px 15px;width:320px;height:568px;background:#1e1e1e;border-radius:20px}.marvel-device.nexus5:before{border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.1%;width:calc(100% - 26px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .top-bar{width:calc(100% - 8px);height:calc(100% - 6px);position:absolute;top:3px;left:4px;border-radius:20px;background:#181818}.marvel-device.nexus5 .top-bar:before{border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.0%;width:calc(100% - 26px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .bottom-bar{display:none}.marvel-device.nexus5 .sleep{width:3px;position:absolute;left:-3px;top:110px;height:100px;background:inherit;border-radius:2px 0px 0px 2px}.marvel-device.nexus5 .volume{width:3px;position:absolute;right:-3px;top:70px;height:45px;background:inherit;border-radius:0px 2px 2px 0px}.marvel-device.nexus5 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:18px;left:50%;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.nexus5 .camera:before{background:#3c3d3d;width:6px;height:6px;content:'';display:block;position:absolute;top:2px;left:-100px;z-index:3;border-radius:100%}.marvel-device.nexus5.landscape{padding:15px 50px 15px 50px;height:320px;width:568px}.marvel-device.nexus5.landscape:before{width:103.1%;height:calc(100% - 26px);border-radius:50px / 600px}.marvel-device.nexus5.landscape .top-bar{left:3px;top:4px;height:calc(100% - 8px);width:calc(100% - 6px)}.marvel-device.nexus5.landscape .top-bar:before{width:103%;height:calc(100% - 26px);border-radius:50px / 600px}.marvel-device.nexus5.landscape .sleep{height:3px;width:100px;left:calc(100% - 210px);top:-3px;border-radius:2px 2px 0px 0px}.marvel-device.nexus5.landscape .volume{height:3px;width:45px;right:70px;top:100%;border-radius:0px 0px 2px 2px}.marvel-device.nexus5.landscape .camera{top:50%;left:calc(100% - 18px);margin-left:0;margin-top:-5px}.marvel-device.nexus5.landscape .camera:before{top:-100px;left:2px}.marvel-device.s5{padding:60px 18px;border-radius:42px;width:320px;height:568px;background:#bcbcbc}.marvel-device.s5:before,.marvel-device.s5:after{width:calc(100% - 52px);content:'';display:block;height:26px;background:inherit;position:absolute;border-radius:500px / 40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5:before{top:-7px}.marvel-device.s5:after{bottom:-7px}.marvel-device.s5 .bottom-bar{display:none}.marvel-device.s5 .top-bar{border-radius:37px;width:calc(100% - 10px);height:calc(100% - 10px);top:5px;left:5px;background:radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 3px 3px;background-color:white;background-size:4px 4px;background-position:center;z-index:2;position:absolute}.marvel-device.s5 .top-bar:before,.marvel-device.s5 .top-bar:after{width:calc(100% - 48px);content:'';display:block;height:26px;background:inherit;position:absolute;border-radius:500px / 40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5 .top-bar:before{top:-7px}.marvel-device.s5 .top-bar:after{bottom:-7px}.marvel-device.s5 .sleep{width:3px;position:absolute;left:-3px;top:100px;height:100px;background:#cecece;border-radius:2px 0px 0px 2px}.marvel-device.s5 .speaker{width:68px;height:8px;position:absolute;top:20px;display:block;z-index:3;left:50%;margin-left:-34px;background-color:#bcbcbc;background-position:top left;border-radius:4px}.marvel-device.s5 .sensor{display:block;position:absolute;top:20px;right:110px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .camera{display:block;position:absolute;top:24px;right:42px;background:black;border-radius:100%;width:10px;height:10px;z-index:3}.marvel-device.s5 .camera:before{width:4px;height:4px;background:#3c3d3d;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-2px;margin-left:-2px}.marvel-device.s5 .home{position:absolute;z-index:3;bottom:17px;left:50%;width:70px;height:20px;background:white;border-radius:18px;display:block;margin-left:-35px;border:2px solid black}.marvel-device.s5.landscape{padding:18px 60px;height:320px;width:568px}.marvel-device.s5.landscape:before,.marvel-device.s5.landscape:after{height:calc(100% - 52px);width:26px;border-radius:40px / 500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape:before{top:50%;left:-7px}.marvel-device.s5.landscape:after{top:50%;left:auto;right:-7px}.marvel-device.s5.landscape .top-bar:before,.marvel-device.s5.landscape .top-bar:after{width:26px;height:calc(100% - 48px);border-radius:40px / 500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape .top-bar:before{right:-7px;top:50%;left:auto}.marvel-device.s5.landscape .top-bar:after{left:-7px;top:50%;right:auto}.marvel-device.s5.landscape .sleep{height:3px;width:100px;left:calc(100% - 200px);top:-3px;border-radius:2px 2px 0px 0px}.marvel-device.s5.landscape .speaker{height:68px;width:8px;left:calc(100% - 20px);top:50%;margin-left:0;margin-top:-34px}.marvel-device.s5.landscape .sensor{right:20px;top:calc(100% - 110px)}.marvel-device.s5.landscape .sensor:after{left:-12px;right:0px}.marvel-device.s5.landscape .camera{top:calc(100% - 42px);right:24px}.marvel-device.s5.landscape .home{width:20px;height:70px;bottom:50%;margin-bottom:-35px;margin-left:0;left:17px}.marvel-device.s5.black{background:#1e1e1e}.marvel-device.s5.black .speaker{background:black}.marvel-device.s5.black .sleep{background:#1e1e1e}.marvel-device.s5.black .top-bar{background:radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 3px 3px;background-color:#2c2b2c;background-size:4px 4px}.marvel-device.s5.black .home{background:#2c2b2c}.marvel-device.lumia920{padding:80px 35px 125px 35px;background:#ffdd00;width:320px;height:533px;border-radius:40px / 3px}.marvel-device.lumia920 .bottom-bar{display:none}.marvel-device.lumia920 .top-bar{width:calc(100% - 24px);height:calc(100% - 32px);position:absolute;top:16px;left:12px;border-radius:24px;background:black;z-index:1}.marvel-device.lumia920 .top-bar:before{background:#1e1e1e;display:block;content:'';width:calc(100% - 4px);height:calc(100% - 4px);top:2px;left:2px;position:absolute;border-radius:22px}.marvel-device.lumia920 .volume{width:3px;position:absolute;top:130px;height:100px;background:#1e1e1e;right:-3px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:before{width:3px;position:absolute;top:190px;content:'';display:block;height:50px;background:inherit;right:0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:after{width:3px;position:absolute;top:460px;content:'';display:block;height:50px;background:inherit;right:0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:34px;right:130px;z-index:5;border-radius:5px}.marvel-device.lumia920 .speaker{background:#292728;width:64px;height:10px;position:absolute;top:38px;left:50%;margin-left:-32px;border-radius:5px;z-index:3}.marvel-device.lumia920.landscape{padding:35px 80px 35px 125px;height:320px;width:568px;border-radius:2px / 100px}.marvel-device.lumia920.landscape .top-bar{height:calc(100% - 24px);width:calc(100% - 32px);left:16px;top:12px}.marvel-device.lumia920.landscape .volume{height:3px;right:130px;width:100px;top:100%;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:before{height:3px;right:190px;top:0px;width:50px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:after{height:3px;right:430px;top:0px;width:50px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .camera{right:30px;top:calc(100% - 140px)}.marvel-device.lumia920.landscape .speaker{width:10px;height:64px;top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 48px)}.marvel-device.lumia920.black{background:black}.marvel-device.lumia920.white{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.lumia920.blue{background:#00acdd}.marvel-device.lumia920.red{background:#CC3E32}.marvel-device.htc-one{padding:72px 25px 100px 25px;width:320px;height:568px;background:#bebebe;border-radius:34px}.marvel-device.htc-one:before{content:'';display:block;width:calc(100% - 4px);height:calc(100% - 4px);position:absolute;top:2px;left:2px;background:#adadad;border-radius:32px}.marvel-device.htc-one:after{content:'';display:block;width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;background:#eeeeee;border-radius:30px}.marvel-device.htc-one .top-bar{width:calc(100% - 4px);height:635px;position:absolute;background:#424242;top:50px;z-index:1;left:2px}.marvel-device.htc-one .top-bar:before{content:'';position:absolute;width:calc(100% - 4px);height:100%;position:absolute;background:black;top:0px;z-index:1;left:2px}.marvel-device.htc-one .bottom-bar{display:none}.marvel-device.htc-one .speaker{height:16px;width:216px;display:block;position:absolute;top:22px;z-index:2;left:50%;margin-left:-108px;background:radial-gradient(#343434 25%, transparent 50%) 0 0,radial-gradient(#343434 25%, transparent 50%) 4px 4px;background-size:4px 4px;background-position:top left}.marvel-device.htc-one .speaker:after{content:'';height:16px;width:216px;display:block;position:absolute;top:676px;z-index:2;left:50%;margin-left:-108px;background:inherit}.marvel-device.htc-one .camera{display:block;position:absolute;top:18px;right:38px;background:#3c3d3d;border-radius:100%;width:24px;height:24px;z-index:3}.marvel-device.htc-one .camera:before{width:8px;height:8px;background:black;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-4px;margin-left:-4px}.marvel-device.htc-one .sensor{display:block;position:absolute;top:29px;left:60px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one.landscape{padding:25px 72px 25px 100px;height:320px;width:568px}.marvel-device.htc-one.landscape .top-bar{height:calc(100% - 4px);width:635px;left:calc(100% - 685px);top:2px}.marvel-device.htc-one.landscape .speaker{width:16px;height:216px;left:calc(100% - 38px);top:50%;margin-left:0px;margin-top:-108px}.marvel-device.htc-one.landscape .speaker:after{width:16px;height:216px;left:calc(100% - 692px);top:50%;margin-left:0;margin-top:-108px}.marvel-device.htc-one.landscape .camera{right:18px;top:calc(100% - 38px)}.marvel-device.htc-one.landscape .sensor{left:calc(100% - 29px);top:60px}.marvel-device.htc-one.landscape .sensor :after{right:0;top:-12px}.marvel-device.ipad{width:576px;height:768px;padding:90px 25px;background:#242324;border-radius:44px}.marvel-device.ipad:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;border-radius:40px;background:#1e1e1e}.marvel-device.ipad .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:44px;left:50%;margin-left:-5px;border-radius:100%}.marvel-device.ipad .top-bar,.marvel-device.ipad .bottom-bar{display:none}.marvel-device.ipad .home{background:#242324;border-radius:36px;width:50px;height:50px;position:absolute;left:50%;margin-left:-25px;bottom:22px}.marvel-device.ipad .home:after{width:15px;height:15px;margin-top:-8px;margin-left:-8px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%}.marvel-device.ipad.landscape{height:576px;width:768px;padding:25px 90px}.marvel-device.ipad.landscape .camera{left:calc(100% - 44px);top:50%;margin-left:0;margin-top:-5px}.marvel-device.ipad.landscape .home{top:50%;left:22px;margin-left:0;margin-top:-25px}.marvel-device.ipad.silver{background:#bcbcbc}.marvel-device.ipad.silver:before{background:#fcfcfc}.marvel-device.ipad.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.ipad.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.macbook{width:960px;height:600px;padding:44px 44px 76px;margin:0 auto;background:#bebebe;border-radius:34px}.marvel-device.macbook:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;border-radius:30px;background:#1e1e1e}.marvel-device.macbook .top-bar{width:calc(100% + 2 * 70px);height:40px;position:absolute;content:'';display:block;top:680px;left:-70px;border-bottom-left-radius:90px 18px;border-bottom-right-radius:90px 18px;background:#bebebe;-webkit-box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6);box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6)}.marvel-device.macbook .top-bar:before{width:100%;height:24px;content:'';display:block;top:0;left:0;background:#f0f0f0;border-bottom:2px solid #aaa;border-radius:5px;position:relative}.marvel-device.macbook .top-bar:after{width:16%;height:14px;content:'';display:block;top:0;background:#ddd;position:absolute;margin-left:auto;margin-right:auto;left:0;right:0;border-radius:0 0 20px 20px;-webkit-box-shadow:inset 0px -3px 10px #999;box-shadow:inset 0px -3px 10px #999}.marvel-device.macbook .bottom-bar{background:transparent;width:calc(100% + 2 * 70px);height:26px;position:absolute;content:'';display:block;top:680px;left:-70px}.marvel-device.macbook .bottom-bar:before,.marvel-device.macbook .bottom-bar:after{height:calc(100% - 2px);width:80px;content:'';display:block;top:0;position:absolute}.marvel-device.macbook .bottom-bar:before{left:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#747474), color-stop(5%, #c3c3c3), color-stop(14%, #ebebeb), color-stop(41%, #979797), color-stop(80%, #f0f0f0), color-stop(100%, #f0f0f0), to(#f0f0f0));background:linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%)}.marvel-device.macbook .bottom-bar:after{right:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#f0f0f0), color-stop(0%, #f0f0f0), color-stop(20%, #f0f0f0), color-stop(59%, #979797), color-stop(86%, #ebebeb), color-stop(95%, #c3c3c3), to(#747474));background:linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%)}.marvel-device.macbook .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:20px;left:50%;margin-left:-5px;border-radius:100%}.marvel-device.macbook .home{display:none}.marvel-device.iphone-x{width:375px;height:812px;padding:26px;background:#fdfdfd;-webkit-box-shadow:inset 0 0 11px 0 black;box-shadow:inset 0 0 11px 0 black;border-radius:66px}.marvel-device.iphone-x .overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:66px;overflow:hidden}.marvel-device.iphone-x .shadow{border-radius:100%;width:90px;height:90px;position:absolute;background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 60%)}.marvel-device.iphone-x .shadow--tl{top:-20px;left:-20px}.marvel-device.iphone-x .shadow--tr{top:-20px;right:-20px}.marvel-device.iphone-x .shadow--bl{bottom:-20px;left:-20px}.marvel-device.iphone-x .shadow--br{bottom:-20px;right:-20px}.marvel-device.iphone-x:before{width:calc(100% - 10px);height:calc(100% - 10px);position:absolute;top:5px;content:'';left:5px;border-radius:61px;background:black;z-index:1}.marvel-device.iphone-x .inner-shadow{width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;top:10px;overflow:hidden;left:10px;border-radius:56px;-webkit-box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);z-index:1}.marvel-device.iphone-x .inner-shadow:before{-webkit-box-shadow:inset 0 0 20px 0 #FFFFFF;box-shadow:inset 0 0 20px 0 #FFFFFF;width:100%;height:116%;position:absolute;top:-8%;content:'';left:0;border-radius:200px / 112px;z-index:2}.marvel-device.iphone-x .screen{border-radius:40px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.iphone-x .top-bar,.marvel-device.iphone-x .bottom-bar{width:100%;position:absolute;height:8px;background:rgba(0,0,0,0.1);left:0}.marvel-device.iphone-x .top-bar{top:80px}.marvel-device.iphone-x .bottom-bar{bottom:80px}.marvel-device.iphone-x .volume,.marvel-device.iphone-x .volume:before,.marvel-device.iphone-x .volume:after,.marvel-device.iphone-x .sleep{width:3px;background:#b5b5b5;position:absolute}.marvel-device.iphone-x .volume{left:-3px;top:116px;height:32px}.marvel-device.iphone-x .volume:before{height:62px;top:62px;content:'';left:0}.marvel-device.iphone-x .volume:after{height:62px;top:140px;content:'';left:0}.marvel-device.iphone-x .sleep{height:96px;top:200px;right:-3px}.marvel-device.iphone-x .camera{width:6px;height:6px;top:9px;border-radius:100%;position:absolute;left:154px;background:#0d4d71}.marvel-device.iphone-x .speaker{height:6px;width:60px;left:50%;position:absolute;top:9px;margin-left:-30px;background:#171818;border-radius:6px}.marvel-device.iphone-x .notch{position:absolute;width:210px;height:30px;top:26px;left:108px;z-index:4;background:black;border-bottom-left-radius:24px;border-bottom-right-radius:24px}.marvel-device.iphone-x .notch:before,.marvel-device.iphone-x .notch:after{content:'';height:8px;position:absolute;top:0;width:8px}.marvel-device.iphone-x .notch:after{background:radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);left:-8px}.marvel-device.iphone-x .notch:before{background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);right:-8px}.marvel-device.iphone-x.landscape{height:375px;width:812px}.marvel-device.iphone-x.landscape .top-bar,.marvel-device.iphone-x.landscape .bottom-bar{width:8px;height:100%;top:0}.marvel-device.iphone-x.landscape .top-bar{left:80px}.marvel-device.iphone-x.landscape .bottom-bar{right:80px;bottom:auto;left:auto}.marvel-device.iphone-x.landscape .volume,.marvel-device.iphone-x.landscape .volume:before,.marvel-device.iphone-x.landscape .volume:after,.marvel-device.iphone-x.landscape .sleep{height:3px}.marvel-device.iphone-x.landscape .inner-shadow:before{height:100%;width:116%;left:-8%;top:0;border-radius:112px / 200px}.marvel-device.iphone-x.landscape .volume{bottom:-3px;top:auto;left:116px;width:32px}.marvel-device.iphone-x.landscape .volume:before{width:62px;left:62px;top:0}.marvel-device.iphone-x.landscape .volume:after{width:62px;left:140px;top:0}.marvel-device.iphone-x.landscape .sleep{width:96px;left:200px;top:-3px;right:auto}.marvel-device.iphone-x.landscape .camera{left:9px;bottom:154px;top:auto}.marvel-device.iphone-x.landscape .speaker{width:6px;height:60px;left:9px;top:50%;margin-top:-30px;margin-left:0}.marvel-device.iphone-x.landscape .notch{height:210px;width:30px;left:26px;bottom:108px;top:auto;border-top-right-radius:24px;border-bottom-right-radius:24px;border-bottom-left-radius:0}.marvel-device.iphone-x.landscape .notch:before,.marvel-device.iphone-x.landscape .notch:after{left:0}.marvel-device.iphone-x.landscape .notch:after{background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);bottom:-8px;top:auto}.marvel-device.iphone-x.landscape .notch:before{background:radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%);top:-8px}.marvel-device.note8{width:400px;height:822px;background:black;border-radius:34px;padding:45px 10px}.marvel-device.note8 .overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:34px;overflow:hidden}.marvel-device.note8 .speaker{height:8px;width:56px;left:50%;position:absolute;top:25px;margin-left:-28px;background:#171818;z-index:1;border-radius:8px}.marvel-device.note8 .camera{height:18px;width:18px;left:86px;position:absolute;top:18px;background:#212b36;z-index:1;border-radius:100%}.marvel-device.note8 .camera:before{content:'';height:8px;width:8px;left:-22px;position:absolute;top:5px;background:#212b36;z-index:1;border-radius:100%}.marvel-device.note8 .sensors{height:10px;width:10px;left:120px;position:absolute;top:22px;background:#1d233b;z-index:1;border-radius:100%}.marvel-device.note8 .sensors:before{content:'';height:10px;width:10px;left:18px;position:absolute;top:0;background:#1d233b;z-index:1;border-radius:100%}.marvel-device.note8 .more-sensors{height:16px;width:16px;left:285px;position:absolute;top:18px;background:#33244a;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,0.1);box-shadow:0 0 0 2px rgba(255,255,255,0.1);z-index:1;border-radius:100%}.marvel-device.note8 .more-sensors:before{content:'';height:11px;width:11px;left:40px;position:absolute;top:4px;background:#214a61;z-index:1;border-radius:100%}.marvel-device.note8 .sleep{width:2px;height:56px;background:black;position:absolute;top:288px;right:-2px}.marvel-device.note8 .volume{width:2px;height:120px;background:black;position:absolute;top:168px;left:-2px}.marvel-device.note8 .volume:before{content:'';top:168px;width:2px;position:absolute;left:0;background:black;height:56px}.marvel-device.note8 .inner{width:100%;height:calc(100% - 8px);position:absolute;top:2px;content:'';left:0px;border-radius:34px;border-top:2px solid #9fa0a2;border-bottom:2px solid #9fa0a2;background:black;z-index:1;-webkit-box-shadow:inset 0 0 6px 0 rgba(255,255,255,0.5);box-shadow:inset 0 0 6px 0 rgba(255,255,255,0.5)}.marvel-device.note8 .shadow{-webkit-box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(255,255,255,0.5),0 0 20px 0 white,0 0 20px 0 rgba(255,255,255,0.5);box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(255,255,255,0.5),0 0 20px 0 white,0 0 20px 0 rgba(255,255,255,0.5);height:101%;position:absolute;top:-0.5%;content:'';width:calc(100% - 20px);left:10px;border-radius:38px;z-index:5;pointer-events:none}.marvel-device.note8 .screen{border-radius:14px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.note8.landscape{height:400px;width:822px;padding:10px 45px}.marvel-device.note8.landscape .speaker{height:56px;width:8px;top:50%;margin-top:-28px;margin-left:0;right:25px;left:auto}.marvel-device.note8.landscape .camera{top:86px;right:18px;left:auto}.marvel-device.note8.landscape .camera:before{top:-22px;left:5px}.marvel-device.note8.landscape .sensors{top:120px;right:22px;left:auto}.marvel-device.note8.landscape .sensors:before{top:18px;left:0}.marvel-device.note8.landscape .more-sensors{top:285px;right:18px;left:auto}.marvel-device.note8.landscape .more-sensors:before{top:40px;left:4px}.marvel-device.note8.landscape .sleep{bottom:-2px;top:auto;right:288px;width:56px;height:2px}.marvel-device.note8.landscape .volume{width:120px;height:2px;top:-2px;right:168px;left:auto}.marvel-device.note8.landscape .volume:before{right:168px;left:auto;top:0;width:56px;height:2px}.marvel-device.note8.landscape .inner{height:100%;width:calc(100% - 8px);left:2px;top:0;border-top:0;border-bottom:0;border-left:2px solid #9fa0a2;border-right:2px solid #9fa0a2}.marvel-device.note8.landscape .shadow{width:101%;height:calc(100% - 20px);left:-0.5%;top:10px} 2 | -------------------------------------------------------------------------------- /assets/scss/devices.scss: -------------------------------------------------------------------------------- 1 | .marvel-device{ 2 | display: inline-block; 3 | position: relative; 4 | box-sizing: content-box !important; 5 | 6 | .screen { 7 | width: 100%; 8 | position: relative; 9 | height: 100%; 10 | z-index: 3; 11 | background: white; 12 | overflow: hidden; 13 | display: block; 14 | border-radius: 1px; 15 | box-shadow: 0 0 0 3px #111; 16 | } 17 | 18 | .top-bar, .bottom-bar { 19 | height: 3px; 20 | background: black; 21 | width: 100%; 22 | display: block; 23 | } 24 | 25 | .middle-bar { 26 | width: 3px; 27 | height: 4px; 28 | top: 0px; 29 | left: 90px; 30 | background: black; 31 | position: absolute; 32 | } 33 | 34 | &.iphone8{ 35 | width: 375px; 36 | height: 667px; 37 | padding: 105px 24px; 38 | background: #d9dbdc; 39 | border-radius: 56px; 40 | box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2); 41 | 42 | &:before{ 43 | width: calc(100% - 12px); 44 | height: calc(100% - 12px); 45 | position: absolute; 46 | top: 6px; 47 | content: ''; 48 | left: 6px; 49 | border-radius: 50px; 50 | background: #f8f8f8; 51 | z-index: 1; 52 | } 53 | 54 | &:after{ 55 | width: calc(100% - 16px); 56 | height: calc(100% - 16px); 57 | position: absolute; 58 | top: 8px; 59 | content: ''; 60 | left: 8px; 61 | border-radius: 48px; 62 | box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), 63 | inset 0 0 6px 3px #FFFFFF; 64 | z-index: 2; 65 | } 66 | 67 | .home { 68 | border-radius: 100%; 69 | width: 68px; 70 | height: 68px; 71 | position: absolute; 72 | left: 50%; 73 | margin-left: -34px; 74 | bottom: 22px; 75 | z-index: 3; 76 | background: rgb(48,50,51); 77 | background: linear-gradient(135deg, rgba(48,50,51,1) 0%,rgba(181,183,185,1) 50%,rgba(240,242,242,1) 69%,rgba(48,50,51,1) 100%); 78 | 79 | &:before{ 80 | background: #f8f8f8; 81 | position: absolute; 82 | content: ''; 83 | border-radius: 100%; 84 | width: calc(100% - 8px); 85 | height: calc(100% - 8px); 86 | top: 4px; 87 | left: 4px; 88 | } 89 | } 90 | 91 | .top-bar{ 92 | height: 14px; 93 | background: #bfbfc0; 94 | position: absolute; 95 | top: 68px; 96 | left: 0; 97 | } 98 | 99 | .bottom-bar{ 100 | height: 14px; 101 | background: #bfbfc0; 102 | position: absolute; 103 | bottom: 68px; 104 | left: 0; 105 | } 106 | 107 | .sleep{ 108 | position: absolute; 109 | top: 190px; 110 | right: -4px; 111 | width: 4px; 112 | height: 66px; 113 | border-radius: 0px 2px 2px 0px; 114 | background: #d9dbdc; 115 | } 116 | 117 | .volume{ 118 | position: absolute; 119 | left: -4px; 120 | top: 188px; 121 | z-index: 0; 122 | height: 66px; 123 | width: 4px; 124 | border-radius: 2px 0px 0px 2px; 125 | background: #d9dbdc; 126 | 127 | &:before { 128 | position: absolute; 129 | left: 2px; 130 | top: -78px; 131 | height: 40px; 132 | width: 2px; 133 | border-radius: 2px 0px 0px 2px; 134 | background: inherit; 135 | content: ''; 136 | display: block; 137 | } 138 | 139 | &:after { 140 | position: absolute; 141 | left: 0px; 142 | top: 82px; 143 | height: 66px; 144 | width: 4px; 145 | border-radius: 2px 0px 0px 2px; 146 | background: inherit; 147 | content: ''; 148 | display: block; 149 | } 150 | } 151 | 152 | .camera { 153 | background: #3c3d3d; 154 | width: 12px; 155 | height: 12px; 156 | position: absolute; 157 | top: 24px; 158 | left: 50%; 159 | margin-left: -6px; 160 | border-radius: 100%; 161 | z-index: 3; 162 | } 163 | 164 | .sensor { 165 | background: #3c3d3d; 166 | width: 16px; 167 | height: 16px; 168 | position: absolute; 169 | top: 49px; 170 | left: 134px; 171 | z-index: 3; 172 | border-radius: 100%; 173 | } 174 | 175 | .speaker { 176 | background: #292728; 177 | width: 70px; 178 | height: 6px; 179 | position: absolute; 180 | top: 54px; 181 | left: 50%; 182 | margin-left: -35px; 183 | border-radius: 6px; 184 | z-index: 3; 185 | } 186 | 187 | &.gold{ 188 | background: #f9e7d3; 189 | 190 | .top-bar, .bottom-bar{ 191 | background: white; 192 | } 193 | 194 | .sleep, .volume{ 195 | background: #f9e7d3; 196 | } 197 | 198 | .home{ 199 | background: rgb(206,187,169); 200 | background: linear-gradient(135deg, rgba(206,187,169,1) 0%,rgba(249,231,211,1) 50%,rgba(206,187,169,1) 100%); 201 | } 202 | } 203 | 204 | &.black{ 205 | background: #464646; 206 | box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7); 207 | 208 | &:before{ 209 | background: #080808; 210 | } 211 | 212 | &:after{ 213 | box-shadow: 214 | inset 0 0 3px 0 rgba(0, 0, 0, 0.1), 215 | inset 0 0 6px 3px #212121; 216 | } 217 | 218 | .top-bar, .bottom-bar{ 219 | background: #212121; 220 | } 221 | 222 | .volume, .sleep{ 223 | background: #464646; 224 | } 225 | 226 | .camera{ 227 | background: #080808; 228 | } 229 | 230 | .home{ 231 | background: rgb(8,8,8); 232 | background: linear-gradient(135deg, rgba(8,8,8,1) 0%,rgba(70,70,70,1) 50%,rgba(8,8,8,1) 100%); 233 | 234 | &:before{ 235 | background: #080808; 236 | } 237 | } 238 | 239 | } 240 | 241 | &.landscape{ 242 | padding: 24px 105px; 243 | height: 375px; 244 | width: 667px; 245 | 246 | .sleep{ 247 | top: 100%; 248 | border-radius: 0px 0px 2px 2px; 249 | right: 190px; 250 | height: 4px; 251 | width: 66px; 252 | } 253 | 254 | .volume { 255 | width: 66px; 256 | height: 4px; 257 | top: -4px; 258 | left: calc(100% - 188px - 66px); 259 | border-radius: 2px 2px 0px 0px; 260 | 261 | &:before { 262 | width: 40px; 263 | height: 2px; 264 | top: 2px; 265 | right: -78px; 266 | left: auto; 267 | border-radius: 2px 2px 0px 0px; 268 | } 269 | 270 | &:after{ 271 | left: -82px; 272 | width: 66px; 273 | height: 4px; 274 | top: 0; 275 | border-radius: 2px 2px 0px 0px; 276 | } 277 | } 278 | 279 | .top-bar{ 280 | width: 14px; 281 | height: 100%; 282 | left: calc(100% - 68px - 14px); 283 | top: 0; 284 | } 285 | 286 | .bottom-bar{ 287 | width: 14px; 288 | height: 100%; 289 | left: 68px; 290 | top: 0; 291 | } 292 | 293 | .home{ 294 | top: 50%; 295 | margin-top: -34px; 296 | margin-left: 0; 297 | left: 22px; 298 | } 299 | 300 | .sensor { 301 | top: 134px; 302 | left: calc(100% - 49px - 16px); 303 | } 304 | 305 | .speaker { 306 | height: 70px; 307 | width: 6px; 308 | left: calc(100% - 54px - 6px); 309 | top: 50%; 310 | margin-left: 0px; 311 | margin-top: -35px; 312 | } 313 | 314 | .camera { 315 | left: calc(100% - 32px); 316 | top: 50%; 317 | margin-left: 0px; 318 | margin-top: -5px; 319 | } 320 | } 321 | } 322 | 323 | &.iphone8plus{ 324 | width: 414px; 325 | height: 736px; 326 | padding: 112px 26px; 327 | background: #d9dbdc; 328 | border-radius: 56px; 329 | box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2); 330 | 331 | &:before{ 332 | width: calc(100% - 12px); 333 | height: calc(100% - 12px); 334 | position: absolute; 335 | top: 6px; 336 | content: ''; 337 | left: 6px; 338 | border-radius: 50px; 339 | background: #f8f8f8; 340 | z-index: 1; 341 | } 342 | 343 | &:after{ 344 | width: calc(100% - 16px); 345 | height: calc(100% - 16px); 346 | position: absolute; 347 | top: 8px; 348 | content: ''; 349 | left: 8px; 350 | border-radius: 48px; 351 | box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), 352 | inset 0 0 6px 3px #FFFFFF; 353 | z-index: 2; 354 | } 355 | 356 | .home { 357 | border-radius: 100%; 358 | width: 68px; 359 | height: 68px; 360 | position: absolute; 361 | left: 50%; 362 | margin-left: -34px; 363 | bottom: 24px; 364 | z-index: 3; 365 | background: rgb(48,50,51); 366 | background: linear-gradient(135deg, rgba(48,50,51,1) 0%,rgba(181,183,185,1) 50%,rgba(240,242,242,1) 69%,rgba(48,50,51,1) 100%); 367 | 368 | &:before{ 369 | background: #f8f8f8; 370 | position: absolute; 371 | content: ''; 372 | border-radius: 100%; 373 | width: calc(100% - 8px); 374 | height: calc(100% - 8px); 375 | top: 4px; 376 | left: 4px; 377 | } 378 | } 379 | 380 | .top-bar{ 381 | height: 14px; 382 | background: #bfbfc0; 383 | position: absolute; 384 | top: 68px; 385 | left: 0; 386 | } 387 | 388 | .bottom-bar{ 389 | height: 14px; 390 | background: #bfbfc0; 391 | position: absolute; 392 | bottom: 68px; 393 | left: 0; 394 | } 395 | 396 | .sleep{ 397 | position: absolute; 398 | top: 190px; 399 | right: -4px; 400 | width: 4px; 401 | height: 66px; 402 | border-radius: 0px 2px 2px 0px; 403 | background: #d9dbdc; 404 | } 405 | 406 | .volume{ 407 | position: absolute; 408 | left: -4px; 409 | top: 188px; 410 | z-index: 0; 411 | height: 66px; 412 | width: 4px; 413 | border-radius: 2px 0px 0px 2px; 414 | background: #d9dbdc; 415 | 416 | &:before { 417 | position: absolute; 418 | left: 2px; 419 | top: -78px; 420 | height: 40px; 421 | width: 2px; 422 | border-radius: 2px 0px 0px 2px; 423 | background: inherit; 424 | content: ''; 425 | display: block; 426 | } 427 | 428 | &:after { 429 | position: absolute; 430 | left: 0px; 431 | top: 82px; 432 | height: 66px; 433 | width: 4px; 434 | border-radius: 2px 0px 0px 2px; 435 | background: inherit; 436 | content: ''; 437 | display: block; 438 | } 439 | } 440 | 441 | .camera { 442 | background: #3c3d3d; 443 | width: 12px; 444 | height: 12px; 445 | position: absolute; 446 | top: 29px; 447 | left: 50%; 448 | margin-left: -6px; 449 | border-radius: 100%; 450 | z-index: 3; 451 | } 452 | 453 | .sensor { 454 | background: #3c3d3d; 455 | width: 16px; 456 | height: 16px; 457 | position: absolute; 458 | top: 54px; 459 | left: 154px; 460 | z-index: 3; 461 | border-radius: 100%; 462 | } 463 | 464 | .speaker { 465 | background: #292728; 466 | width: 70px; 467 | height: 6px; 468 | position: absolute; 469 | top: 59px; 470 | left: 50%; 471 | margin-left: -35px; 472 | border-radius: 6px; 473 | z-index: 3; 474 | } 475 | 476 | &.gold{ 477 | background: #f9e7d3; 478 | 479 | .top-bar, .bottom-bar{ 480 | background: white; 481 | } 482 | 483 | .sleep, .volume{ 484 | background: #f9e7d3; 485 | } 486 | 487 | .home{ 488 | background: rgb(206,187,169); 489 | background: linear-gradient(135deg, rgba(206,187,169,1) 0%,rgba(249,231,211,1) 50%,rgba(206,187,169,1) 100%); 490 | } 491 | } 492 | 493 | &.black{ 494 | background: #464646; 495 | box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.7); 496 | 497 | &:before{ 498 | background: #080808; 499 | } 500 | 501 | &:after{ 502 | box-shadow: 503 | inset 0 0 3px 0 rgba(0, 0, 0, 0.1), 504 | inset 0 0 6px 3px #212121; 505 | } 506 | 507 | .top-bar, .bottom-bar{ 508 | background: #212121; 509 | } 510 | 511 | .volume, .sleep{ 512 | background: #464646; 513 | } 514 | 515 | .camera{ 516 | background: #080808; 517 | } 518 | 519 | .home{ 520 | background: rgb(8,8,8); 521 | background: linear-gradient(135deg, rgba(8,8,8,1) 0%,rgba(70,70,70,1) 50%,rgba(8,8,8,1) 100%); 522 | 523 | &:before{ 524 | background: #080808; 525 | } 526 | } 527 | 528 | } 529 | 530 | &.landscape{ 531 | padding: 26px 112px; 532 | height: 414px; 533 | width: 736px; 534 | 535 | .sleep{ 536 | top: 100%; 537 | border-radius: 0px 0px 2px 2px; 538 | right: 190px; 539 | height: 4px; 540 | width: 66px; 541 | } 542 | 543 | .volume { 544 | width: 66px; 545 | height: 4px; 546 | top: -4px; 547 | left: calc(100% - 188px - 66px); 548 | border-radius: 2px 2px 0px 0px; 549 | 550 | &:before { 551 | width: 40px; 552 | height: 2px; 553 | top: 2px; 554 | right: -78px; 555 | left: auto; 556 | border-radius: 2px 2px 0px 0px; 557 | } 558 | 559 | &:after{ 560 | left: -82px; 561 | width: 66px; 562 | height: 4px; 563 | top: 0; 564 | border-radius: 2px 2px 0px 0px; 565 | } 566 | } 567 | 568 | .top-bar{ 569 | width: 14px; 570 | height: 100%; 571 | left: calc(100% - 68px - 14px); 572 | top: 0; 573 | } 574 | 575 | .bottom-bar{ 576 | width: 14px; 577 | height: 100%; 578 | left: 68px; 579 | top: 0; 580 | } 581 | 582 | .home{ 583 | top: 50%; 584 | margin-top: -34px; 585 | margin-left: 0; 586 | left: 24px; 587 | } 588 | 589 | .sensor { 590 | top: 154px; 591 | left: calc(100% - 54px - 16px); 592 | } 593 | 594 | .speaker { 595 | height: 70px; 596 | width: 6px; 597 | left: calc(100% - 59px - 6px); 598 | top: 50%; 599 | margin-left: 0px; 600 | margin-top: -35px; 601 | } 602 | 603 | .camera { 604 | left: calc(100% - 29px); 605 | top: 50%; 606 | margin-left: 0px; 607 | margin-top: -5px; 608 | } 609 | } 610 | } 611 | 612 | &.iphone5s, &.iphone5c{ 613 | padding: 105px 22px; 614 | background: #2c2b2c; 615 | width: 320px; 616 | height: 568px; 617 | border-radius: 50px; 618 | 619 | &:before{ 620 | width: calc(100% - 8px); 621 | height: calc(100% - 8px); 622 | position: absolute; 623 | top: 4px; 624 | content: ''; 625 | left: 4px; 626 | border-radius: 46px; 627 | background: #1e1e1e; 628 | z-index: 1; 629 | } 630 | 631 | .sleep{ 632 | position: absolute; 633 | top: -4px; 634 | right: 60px; 635 | width: 60px; 636 | height: 4px; 637 | border-radius: 2px 2px 0px 0px; 638 | background: #282727; 639 | } 640 | 641 | .volume{ 642 | position: absolute; 643 | left: -4px; 644 | top: 180px; 645 | z-index: 0; 646 | height: 27px; 647 | width: 4px; 648 | border-radius: 2px 0px 0px 2px; 649 | background: #282727; 650 | 651 | &:before { 652 | position: absolute; 653 | left: 0px; 654 | top: -75px; 655 | height: 35px; 656 | width: 4px; 657 | border-radius: 2px 0px 0px 2px; 658 | background: inherit; 659 | content: ''; 660 | display: block; 661 | } 662 | 663 | &:after { 664 | position: absolute; 665 | left: 0px; 666 | bottom: -64px; 667 | height: 27px; 668 | width: 4px; 669 | border-radius: 2px 0px 0px 2px; 670 | background: inherit; 671 | content: ''; 672 | display: block; 673 | } 674 | } 675 | 676 | .camera { 677 | background: #3c3d3d; 678 | width: 10px; 679 | height: 10px; 680 | position: absolute; 681 | top: 32px; 682 | left: 50%; 683 | margin-left: -5px; 684 | border-radius: 5px; 685 | z-index: 3; 686 | } 687 | 688 | .sensor { 689 | background: #3c3d3d; 690 | width: 10px; 691 | height: 10px; 692 | position: absolute; 693 | top: 60px; 694 | left: 160px; 695 | z-index: 3; 696 | margin-left: -32px; 697 | border-radius: 5px; 698 | } 699 | 700 | .speaker { 701 | background: #292728; 702 | width: 64px; 703 | height: 10px; 704 | position: absolute; 705 | top: 60px; 706 | left: 50%; 707 | margin-left: -32px; 708 | border-radius: 5px; 709 | z-index: 3; 710 | } 711 | 712 | &.landscape{ 713 | padding: 22px 105px; 714 | height: 320px; 715 | width: 568px; 716 | 717 | .sleep{ 718 | right: -4px; 719 | top: calc(100% - 120px); 720 | height: 60px; 721 | width: 4px; 722 | border-radius: 0px 2px 2px 0px; 723 | } 724 | 725 | .volume { 726 | width: 27px; 727 | height: 4px; 728 | top: -4px; 729 | left: calc(100% - 180px); 730 | border-radius: 2px 2px 0px 0px; 731 | 732 | &:before { 733 | width: 35px; 734 | height: 4px; 735 | top: 0px; 736 | right: -75px; 737 | left: auto; 738 | border-radius: 2px 2px 0px 0px; 739 | } 740 | 741 | &:after{ 742 | bottom: 0px; 743 | left: -64px; 744 | z-index: 999; 745 | height: 4px; 746 | width: 27px; 747 | border-radius: 2px 2px 0px 0px; 748 | } 749 | } 750 | 751 | .sensor { 752 | top: 160px; 753 | left: calc(100% - 60px); 754 | margin-left: 0px; 755 | margin-top: -32px; 756 | } 757 | 758 | .speaker { 759 | height: 64px; 760 | width: 10px; 761 | left: calc(100% - 60px); 762 | top: 50%; 763 | margin-left: 0px; 764 | margin-top: -32px; 765 | } 766 | 767 | .camera { 768 | left: calc(100% - 32px); 769 | top: 50%; 770 | margin-left: 0px; 771 | margin-top: -5px; 772 | } 773 | } 774 | } 775 | 776 | &.iphone5s{ 777 | .home { 778 | border-radius: 36px; 779 | width: 68px; 780 | box-shadow: inset 0 0 0 4px #2c2b2c; 781 | height: 68px; 782 | position: absolute; 783 | left: 50%; 784 | margin-left: -34px; 785 | bottom: 19px; 786 | z-index: 3; 787 | } 788 | 789 | .top-bar{ 790 | top: 70px; 791 | position: absolute; 792 | left: 0; 793 | } 794 | 795 | .bottom-bar { 796 | bottom: 70px; 797 | position: absolute; 798 | left: 0; 799 | } 800 | 801 | &.landscape{ 802 | .home { 803 | left: 19px; 804 | bottom: 50%; 805 | margin-bottom: -34px; 806 | margin-left: 0px; 807 | } 808 | 809 | .top-bar { 810 | left: 70px; 811 | top: 0px; 812 | width: 3px; 813 | height: 100%; 814 | } 815 | 816 | .bottom-bar { 817 | right: 70px; 818 | left: auto; 819 | bottom: 0px; 820 | width: 3px; 821 | height: 100%; 822 | } 823 | } 824 | 825 | &.silver{ 826 | background: #bcbcbc; 827 | 828 | &:before{ 829 | background: #fcfcfc; 830 | } 831 | 832 | .volume, .sleep{ 833 | background: #d6d6d6; 834 | } 835 | 836 | .top-bar, .bottom-bar{ 837 | background: #eaebec; 838 | } 839 | 840 | .home{ 841 | box-shadow: inset 0 0 0 4px #bcbcbc; 842 | } 843 | } 844 | 845 | &.gold{ 846 | background: #f9e7d3; 847 | 848 | &:before{ 849 | background: #fcfcfc; 850 | } 851 | 852 | .volume, .sleep{ 853 | background: #f9e7d3; 854 | } 855 | 856 | .top-bar, .bottom-bar{ 857 | background: white; 858 | } 859 | 860 | .home{ 861 | box-shadow: inset 0 0 0 4px #f9e7d3; 862 | } 863 | } 864 | } 865 | 866 | &.iphone5c{ 867 | background: white; 868 | box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); 869 | 870 | .top-bar, .bottom-bar{ 871 | display: none; 872 | } 873 | 874 | .home{ 875 | background: #242324; 876 | border-radius: 36px; 877 | width: 68px; 878 | height: 68px; 879 | z-index: 3; 880 | position: absolute; 881 | left: 50%; 882 | margin-left: -34px; 883 | bottom: 19px; 884 | 885 | &:after{ 886 | width: 20px; 887 | height: 20px; 888 | border: 1px solid rgba(255, 255, 255, 0.1); 889 | border-radius: 4px; 890 | position: absolute; 891 | display: block; 892 | content: ''; 893 | top: 50%; 894 | left: 50%; 895 | margin-top: -11px; 896 | margin-left: -11px; 897 | } 898 | } 899 | 900 | &.landscape{ 901 | .home { 902 | left: 19px; 903 | bottom: 50%; 904 | margin-bottom: -34px; 905 | margin-left: 0px; 906 | } 907 | } 908 | 909 | .volume, .sleep{ 910 | background: #dddddd; 911 | } 912 | 913 | &.red{ 914 | background: #f96b6c; 915 | 916 | .volume, .sleep{ 917 | background: #ed5758; 918 | } 919 | } 920 | 921 | &.yellow{ 922 | background: #f2dc60; 923 | 924 | .volume, .sleep{ 925 | background: #e5ce4c; 926 | } 927 | } 928 | 929 | &.green{ 930 | background: #97e563; 931 | 932 | .volume, .sleep{ 933 | background: #85d94d; 934 | } 935 | } 936 | 937 | &.blue{ 938 | background: #33a2db; 939 | 940 | .volume, .sleep{ 941 | background: #2694cd; 942 | } 943 | } 944 | } 945 | 946 | &.iphone4s{ 947 | padding: 129px 27px; 948 | width: 320px; 949 | height: 480px; 950 | background: #686868; 951 | border-radius: 54px; 952 | 953 | &:before{ 954 | content: ''; 955 | width: calc(100% - 8px); 956 | height: calc(100% - 8px); 957 | position: absolute; 958 | top: 4px; 959 | left: 4px; 960 | z-index: 1; 961 | border-radius: 50px; 962 | background: #1e1e1e; 963 | } 964 | 965 | .top-bar { 966 | top: 60px; 967 | position: absolute; 968 | left: 0; 969 | } 970 | 971 | .bottom-bar { 972 | bottom: 90px; 973 | position: absolute; 974 | left: 0; 975 | } 976 | 977 | .camera { 978 | background: #3c3d3d; 979 | width: 10px; 980 | height: 10px; 981 | position: absolute; 982 | top: 72px; 983 | left: 134px; 984 | z-index: 3; 985 | margin-left: -5px; 986 | border-radius: 100%; 987 | } 988 | 989 | .speaker { 990 | background: #292728; 991 | width: 64px; 992 | height: 10px; 993 | position: absolute; 994 | top: 72px; 995 | left: 50%; 996 | z-index: 3; 997 | margin-left: -32px; 998 | border-radius: 5px; 999 | } 1000 | 1001 | .sensor { 1002 | background: #292728; 1003 | width: 40px; 1004 | height: 10px; 1005 | position: absolute; 1006 | top: 36px; 1007 | left: 50%; 1008 | z-index: 3; 1009 | margin-left: -20px; 1010 | border-radius: 5px; 1011 | } 1012 | 1013 | .home { 1014 | background: #242324; 1015 | border-radius: 100%; 1016 | width: 72px; 1017 | height: 72px; 1018 | z-index: 3; 1019 | position: absolute; 1020 | left: 50%; 1021 | margin-left: -36px; 1022 | bottom: 30px; 1023 | 1024 | &:after { 1025 | width: 20px; 1026 | height: 20px; 1027 | border: 1px solid rgba(255, 255, 255, 0.1); 1028 | border-radius: 4px; 1029 | position: absolute; 1030 | display: block; 1031 | content: ''; 1032 | top: 50%; 1033 | left: 50%; 1034 | margin-top: -11px; 1035 | margin-left: -11px; 1036 | } 1037 | } 1038 | 1039 | .sleep { 1040 | position: absolute; 1041 | top: -4px; 1042 | right: 60px; 1043 | width: 60px; 1044 | height: 4px; 1045 | border-radius: 2px 2px 0px 0px; 1046 | background: #4D4D4D; 1047 | } 1048 | 1049 | .volume { 1050 | position: absolute; 1051 | left: -4px; 1052 | top: 160px; 1053 | height: 27px; 1054 | width: 4px; 1055 | border-radius: 2px 0px 0px 2px; 1056 | background: #4D4D4D; 1057 | 1058 | &:before { 1059 | position: absolute; 1060 | left: 0px; 1061 | top: -70px; 1062 | height: 35px; 1063 | width: 4px; 1064 | border-radius: 2px 0px 0px 2px; 1065 | background: inherit; 1066 | content: ''; 1067 | display: block; 1068 | } 1069 | 1070 | &:after { 1071 | position: absolute; 1072 | left: 0px; 1073 | bottom: -64px; 1074 | height: 27px; 1075 | width: 4px; 1076 | border-radius: 2px 0px 0px 2px; 1077 | background: inherit; 1078 | content: ''; 1079 | display: block; 1080 | } 1081 | } 1082 | 1083 | &.landscape{ 1084 | padding: 27px 129px; 1085 | height: 320px; 1086 | width: 480px; 1087 | 1088 | .bottom-bar { 1089 | left: 90px; 1090 | bottom: 0px; 1091 | height: 100%; 1092 | width: 3px; 1093 | } 1094 | 1095 | .top-bar { 1096 | left: calc(100% - 60px); 1097 | top: 0px; 1098 | height: 100%; 1099 | width: 3px; 1100 | } 1101 | 1102 | .camera { 1103 | top: 134px; 1104 | left: calc(100% - 72px); 1105 | margin-left: 0; 1106 | } 1107 | 1108 | .speaker{ 1109 | top: 50%; 1110 | margin-left: 0; 1111 | margin-top: -32px; 1112 | left: calc(100% - 72px); 1113 | width: 10px; 1114 | height: 64px; 1115 | } 1116 | 1117 | .sensor { 1118 | height: 40px; 1119 | width: 10px; 1120 | left: calc(100% - 36px); 1121 | top: 50%; 1122 | margin-left: 0; 1123 | margin-top: -20px; 1124 | } 1125 | 1126 | .home { 1127 | left: 30px; 1128 | bottom: 50%; 1129 | margin-left: 0; 1130 | margin-bottom: -36px; 1131 | } 1132 | 1133 | .sleep { 1134 | height: 60px; 1135 | width: 4px; 1136 | right: -4px; 1137 | top: calc(100% - 120px); 1138 | border-radius: 0px 2px 2px 0px; 1139 | } 1140 | 1141 | .volume { 1142 | top: -4px; 1143 | left: calc(100% - 187px); 1144 | height: 4px; 1145 | width: 27px; 1146 | border-radius: 2px 2px 0px 0px; 1147 | 1148 | &:before { 1149 | right: -70px; 1150 | left: auto; 1151 | top: 0px; 1152 | width: 35px; 1153 | height: 4px; 1154 | border-radius: 2px 2px 0px 0px; 1155 | } 1156 | 1157 | &:after{ 1158 | width: 27px; 1159 | height: 4px; 1160 | bottom: 0px; 1161 | left: -64px; 1162 | border-radius: 2px 2px 0px 0px; 1163 | } 1164 | } 1165 | } 1166 | 1167 | &.silver{ 1168 | background: #bcbcbc; 1169 | 1170 | &:before{ 1171 | background: #fcfcfc; 1172 | } 1173 | 1174 | .home{ 1175 | background: #fcfcfc; 1176 | box-shadow: inset 0 0 0 1px #bcbcbc; 1177 | 1178 | &:after{ 1179 | border: 1px solid rgba(0, 0, 0, 0.2); 1180 | } 1181 | } 1182 | 1183 | .volume, .sleep{ 1184 | background: #d6d6d6; 1185 | } 1186 | } 1187 | } 1188 | 1189 | &.nexus5{ 1190 | padding: 50px 15px 50px 15px; 1191 | width: 320px; 1192 | height: 568px; 1193 | background: #1e1e1e; 1194 | border-radius: 20px; 1195 | 1196 | &:before{ 1197 | border-radius: 600px / 50px; 1198 | background: inherit; 1199 | content: ''; 1200 | top: 0; 1201 | position: absolute; 1202 | height: 103.1%; 1203 | width: calc(100% - 26px); 1204 | top: 50%; 1205 | left: 50%; 1206 | transform: translateX(-50%) translateY(-50%); 1207 | } 1208 | 1209 | .top-bar{ 1210 | width: calc(100% - 8px); 1211 | height: calc(100% - 6px); 1212 | position: absolute; 1213 | top: 3px; 1214 | left: 4px; 1215 | border-radius: 20px; 1216 | background: #181818; 1217 | 1218 | &:before { 1219 | border-radius: 600px / 50px; 1220 | background: inherit; 1221 | content: ''; 1222 | top: 0; 1223 | position: absolute; 1224 | height: 103.0%; 1225 | width: calc(100% - 26px); 1226 | top: 50%; 1227 | left: 50%; 1228 | transform: translateX(-50%) translateY(-50%); 1229 | } 1230 | } 1231 | 1232 | .bottom-bar{ 1233 | display: none; 1234 | } 1235 | 1236 | .sleep{ 1237 | width: 3px; 1238 | position: absolute; 1239 | left: -3px; 1240 | top: 110px; 1241 | height: 100px; 1242 | background: inherit; 1243 | border-radius: 2px 0px 0px 2px; 1244 | } 1245 | 1246 | .volume{ 1247 | width: 3px; 1248 | position: absolute; 1249 | right: -3px; 1250 | top: 70px; 1251 | height: 45px; 1252 | background: inherit; 1253 | border-radius: 0px 2px 2px 0px; 1254 | } 1255 | 1256 | .camera { 1257 | background: #3c3d3d; 1258 | width: 10px; 1259 | height: 10px; 1260 | position: absolute; 1261 | top: 18px; 1262 | left: 50%; 1263 | z-index: 3; 1264 | margin-left: -5px; 1265 | border-radius: 100%; 1266 | 1267 | &:before { 1268 | background: #3c3d3d; 1269 | width: 6px; 1270 | height: 6px; 1271 | content: ''; 1272 | display: block; 1273 | position: absolute; 1274 | top: 2px; 1275 | left: -100px; 1276 | z-index: 3; 1277 | border-radius: 100%; 1278 | } 1279 | } 1280 | 1281 | &.landscape{ 1282 | padding: 15px 50px 15px 50px; 1283 | height: 320px; 1284 | width: 568px; 1285 | 1286 | &:before { 1287 | width: 103.1%; 1288 | height: calc(100% - 26px); 1289 | border-radius: 50px / 600px; 1290 | } 1291 | 1292 | .top-bar { 1293 | left: 3px; 1294 | top: 4px; 1295 | height: calc(100% - 8px); 1296 | width: calc(100% - 6px); 1297 | 1298 | &:before { 1299 | width: 103%; 1300 | height: calc(100% - 26px); 1301 | border-radius: 50px / 600px; 1302 | } 1303 | } 1304 | 1305 | .sleep{ 1306 | height: 3px; 1307 | width: 100px; 1308 | left: calc(100% - 210px); 1309 | top: -3px; 1310 | border-radius: 2px 2px 0px 0px; 1311 | } 1312 | 1313 | .volume{ 1314 | height: 3px; 1315 | width: 45px; 1316 | right: 70px; 1317 | top: 100%; 1318 | border-radius: 0px 0px 2px 2px; 1319 | } 1320 | 1321 | .camera { 1322 | top: 50%; 1323 | left: calc(100% - 18px); 1324 | margin-left: 0; 1325 | margin-top: -5px; 1326 | 1327 | &:before { 1328 | top: -100px; 1329 | left: 2px; 1330 | } 1331 | } 1332 | } 1333 | } 1334 | 1335 | &.s5{ 1336 | padding: 60px 18px; 1337 | border-radius: 42px; 1338 | width: 320px; 1339 | height: 568px; 1340 | background: #bcbcbc; 1341 | 1342 | &:before, &:after{ 1343 | width: calc(100% - 52px); 1344 | content: ''; 1345 | display: block; 1346 | height: 26px; 1347 | background: inherit; 1348 | position: absolute; 1349 | border-radius: 500px / 40px; 1350 | left: 50%; 1351 | transform: translateX(-50%); 1352 | } 1353 | 1354 | &:before{ 1355 | top: -7px; 1356 | } 1357 | 1358 | &:after{ 1359 | bottom: -7px; 1360 | } 1361 | 1362 | .bottom-bar{ 1363 | display: none; 1364 | } 1365 | 1366 | .top-bar{ 1367 | border-radius: 37px; 1368 | width: calc(100% - 10px); 1369 | height: calc(100% - 10px); 1370 | top: 5px; 1371 | left: 5px; 1372 | background: 1373 | radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 0 0, 1374 | radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 3px 3px; 1375 | background-color: white; 1376 | background-size: 4px 4px; 1377 | background-position: center; 1378 | z-index: 2; 1379 | position: absolute; 1380 | 1381 | &:before, &:after{ 1382 | width: calc(100% - 48px); 1383 | content: ''; 1384 | display: block; 1385 | height: 26px; 1386 | background: inherit; 1387 | position: absolute; 1388 | border-radius: 500px / 40px; 1389 | left: 50%; 1390 | transform: translateX(-50%); 1391 | } 1392 | 1393 | &:before{ 1394 | top: -7px; 1395 | } 1396 | 1397 | &:after{ 1398 | bottom: -7px; 1399 | } 1400 | } 1401 | 1402 | .sleep{ 1403 | width: 3px; 1404 | position: absolute; 1405 | left: -3px; 1406 | top: 100px; 1407 | height: 100px; 1408 | background: #cecece; 1409 | border-radius: 2px 0px 0px 2px; 1410 | } 1411 | 1412 | .speaker { 1413 | width: 68px; 1414 | height: 8px; 1415 | position: absolute; 1416 | top: 20px; 1417 | display: block; 1418 | z-index: 3; 1419 | left: 50%; 1420 | margin-left: -34px; 1421 | background-color: #bcbcbc; 1422 | background-position: top left; 1423 | border-radius: 4px; 1424 | } 1425 | 1426 | .sensor { 1427 | display: block; 1428 | position: absolute; 1429 | top: 20px; 1430 | right: 110px; 1431 | background: #3c3d3d; 1432 | border-radius: 100%; 1433 | width: 8px; 1434 | height: 8px; 1435 | z-index: 3; 1436 | 1437 | &:after { 1438 | display: block; 1439 | content: ''; 1440 | position: absolute; 1441 | top: 0px; 1442 | right: 12px; 1443 | background: #3c3d3d; 1444 | border-radius: 100%; 1445 | width: 8px; 1446 | height: 8px; 1447 | z-index: 3; 1448 | } 1449 | } 1450 | 1451 | .camera { 1452 | display: block; 1453 | position: absolute; 1454 | top: 24px; 1455 | right: 42px; 1456 | background: black; 1457 | border-radius: 100%; 1458 | width: 10px; 1459 | height: 10px; 1460 | z-index: 3; 1461 | 1462 | &:before{ 1463 | width: 4px; 1464 | height: 4px; 1465 | background: #3c3d3d; 1466 | border-radius: 100%; 1467 | position: absolute; 1468 | content: ''; 1469 | top: 50%; 1470 | left: 50%; 1471 | margin-top: -2px; 1472 | margin-left: -2px; 1473 | } 1474 | } 1475 | 1476 | .home { 1477 | position: absolute; 1478 | z-index: 3; 1479 | bottom: 17px; 1480 | left: 50%; 1481 | width: 70px; 1482 | height: 20px; 1483 | background: white; 1484 | border-radius: 18px; 1485 | display: block; 1486 | margin-left: -35px; 1487 | border: 2px solid black; 1488 | } 1489 | 1490 | &.landscape{ 1491 | padding: 18px 60px; 1492 | height: 320px; 1493 | width: 568px; 1494 | 1495 | &:before, &:after{ 1496 | height: calc(100% - 52px); 1497 | width: 26px; 1498 | border-radius: 40px / 500px; 1499 | transform: translateY(-50%); 1500 | } 1501 | 1502 | &:before { 1503 | top: 50%; 1504 | left: -7px; 1505 | } 1506 | 1507 | &:after { 1508 | top: 50%; 1509 | left: auto; 1510 | right: -7px; 1511 | } 1512 | 1513 | .top-bar{ 1514 | &:before, &:after{ 1515 | width: 26px; 1516 | height: calc(100% - 48px); 1517 | border-radius: 40px / 500px; 1518 | transform: translateY(-50%); 1519 | } 1520 | 1521 | &:before{ 1522 | right: -7px; 1523 | top: 50%; 1524 | left: auto; 1525 | } 1526 | 1527 | &:after{ 1528 | left: -7px; 1529 | top: 50%; 1530 | right: auto; 1531 | } 1532 | } 1533 | 1534 | .sleep{ 1535 | height: 3px; 1536 | width: 100px; 1537 | left: calc(100% - 200px); 1538 | top: -3px; 1539 | border-radius: 2px 2px 0px 0px; 1540 | } 1541 | 1542 | .speaker { 1543 | height: 68px; 1544 | width: 8px; 1545 | left: calc(100% - 20px); 1546 | top: 50%; 1547 | margin-left: 0; 1548 | margin-top: -34px; 1549 | } 1550 | 1551 | .sensor { 1552 | right: 20px; 1553 | top: calc(100% - 110px); 1554 | 1555 | &:after{ 1556 | left: -12px; 1557 | right: 0px; 1558 | } 1559 | } 1560 | 1561 | .camera { 1562 | top: calc(100% - 42px); 1563 | right: 24px; 1564 | } 1565 | 1566 | .home { 1567 | width: 20px; 1568 | height: 70px; 1569 | bottom: 50%; 1570 | margin-bottom: -35px; 1571 | margin-left: 0; 1572 | left: 17px; 1573 | } 1574 | } 1575 | 1576 | &.black{ 1577 | background: #1e1e1e; 1578 | 1579 | .speaker{ 1580 | background: black; 1581 | } 1582 | 1583 | .sleep{ 1584 | background: #1e1e1e; 1585 | } 1586 | 1587 | .top-bar{ 1588 | background: radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 0 0, 1589 | radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 3px 3px; 1590 | background-color: #2c2b2c; 1591 | background-size: 4px 4px; 1592 | } 1593 | 1594 | .home{ 1595 | background: #2c2b2c; 1596 | } 1597 | } 1598 | } 1599 | 1600 | &.lumia920{ 1601 | padding: 80px 35px 125px 35px; 1602 | background: #ffdd00; 1603 | width: 320px; 1604 | height: 533px; 1605 | border-radius: 40px / 3px; 1606 | 1607 | .bottom-bar{ 1608 | display: none; 1609 | } 1610 | 1611 | .top-bar{ 1612 | width: calc(100% - 24px); 1613 | height: calc(100% - 32px); 1614 | position: absolute; 1615 | top: 16px; 1616 | left: 12px; 1617 | border-radius: 24px; 1618 | background: black; 1619 | z-index: 1; 1620 | 1621 | &:before{ 1622 | background: #1e1e1e; 1623 | display: block; 1624 | content: ''; 1625 | width: calc(100% - 4px); 1626 | height: calc(100% - 4px); 1627 | top: 2px; 1628 | left: 2px; 1629 | position: absolute; 1630 | border-radius: 22px; 1631 | } 1632 | } 1633 | 1634 | .volume{ 1635 | width: 3px; 1636 | position: absolute; 1637 | top: 130px; 1638 | height: 100px; 1639 | background: #1e1e1e; 1640 | right: -3px; 1641 | border-radius: 0px 2px 2px 0px; 1642 | 1643 | &:before { 1644 | width: 3px; 1645 | position: absolute; 1646 | top: 190px; 1647 | content: ''; 1648 | display: block; 1649 | height: 50px; 1650 | background: inherit; 1651 | right: 0px; 1652 | border-radius: 0px 2px 2px 0px; 1653 | } 1654 | 1655 | &:after { 1656 | width: 3px; 1657 | position: absolute; 1658 | top: 460px; 1659 | content: ''; 1660 | display: block; 1661 | height: 50px; 1662 | background: inherit; 1663 | right: 0px; 1664 | border-radius: 0px 2px 2px 0px; 1665 | } 1666 | } 1667 | 1668 | .camera { 1669 | background: #3c3d3d; 1670 | width: 10px; 1671 | height: 10px; 1672 | position: absolute; 1673 | top: 34px; 1674 | right: 130px; 1675 | z-index: 5; 1676 | border-radius: 5px; 1677 | } 1678 | 1679 | .speaker { 1680 | background: #292728; 1681 | width: 64px; 1682 | height: 10px; 1683 | position: absolute; 1684 | top: 38px; 1685 | left: 50%; 1686 | margin-left: -32px; 1687 | border-radius: 5px; 1688 | z-index: 3; 1689 | } 1690 | 1691 | &.landscape{ 1692 | padding: 35px 80px 35px 125px; 1693 | height: 320px; 1694 | width: 568px; 1695 | border-radius: 2px / 100px; 1696 | 1697 | .top-bar{ 1698 | height: calc(100% - 24px); 1699 | width: calc(100% - 32px); 1700 | left: 16px; 1701 | top: 12px; 1702 | } 1703 | 1704 | .volume { 1705 | height: 3px; 1706 | right: 130px; 1707 | width: 100px; 1708 | top: 100%; 1709 | border-radius: 0px 0px 2px 2px; 1710 | 1711 | &:before{ 1712 | height: 3px; 1713 | right: 190px; 1714 | top: 0px; 1715 | width: 50px; 1716 | border-radius: 0px 0px 2px 2px; 1717 | } 1718 | 1719 | &:after{ 1720 | height: 3px; 1721 | right: 430px; 1722 | top: 0px; 1723 | width: 50px; 1724 | border-radius: 0px 0px 2px 2px; 1725 | } 1726 | } 1727 | 1728 | .camera { 1729 | right: 30px; 1730 | top: calc(100% - 140px); 1731 | } 1732 | 1733 | .speaker { 1734 | width: 10px; 1735 | height: 64px; 1736 | top: 50%; 1737 | margin-left: 0; 1738 | margin-top: -32px; 1739 | left: calc(100% - 48px); 1740 | } 1741 | } 1742 | 1743 | &.black{ 1744 | background: black; 1745 | } 1746 | 1747 | &.white{ 1748 | background: white; 1749 | box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); 1750 | } 1751 | 1752 | &.blue{ 1753 | background: #00acdd; 1754 | } 1755 | 1756 | &.red{ 1757 | background: #CC3E32; 1758 | } 1759 | } 1760 | 1761 | &.htc-one { 1762 | padding: 72px 25px 100px 25px; 1763 | width: 320px; 1764 | height: 568px; 1765 | background: #bebebe; 1766 | border-radius: 34px; 1767 | 1768 | &:before{ 1769 | content: ''; 1770 | display: block; 1771 | width: calc(100% - 4px); 1772 | height: calc(100% - 4px); 1773 | position: absolute; 1774 | top: 2px; 1775 | left: 2px; 1776 | background: #adadad; 1777 | border-radius: 32px; 1778 | } 1779 | 1780 | &:after{ 1781 | content: ''; 1782 | display: block; 1783 | width: calc(100% - 8px); 1784 | height: calc(100% - 8px); 1785 | position: absolute; 1786 | top: 4px; 1787 | left: 4px; 1788 | background: #eeeeee; 1789 | border-radius: 30px; 1790 | } 1791 | 1792 | .top-bar{ 1793 | width: calc(100% - 4px); 1794 | height: 635px; 1795 | position: absolute; 1796 | background: #424242; 1797 | top: 50px; 1798 | z-index: 1; 1799 | left: 2px; 1800 | 1801 | &:before{ 1802 | content: ''; 1803 | position: absolute; 1804 | width: calc(100% - 4px); 1805 | height: 100%; 1806 | position: absolute; 1807 | background: black; 1808 | top: 0px; 1809 | z-index: 1; 1810 | left: 2px; 1811 | } 1812 | } 1813 | 1814 | .bottom-bar{ 1815 | display: none; 1816 | } 1817 | 1818 | .speaker { 1819 | height: 16px; 1820 | width: 216px; 1821 | display: block; 1822 | position: absolute; 1823 | top: 22px; 1824 | z-index: 2; 1825 | left: 50%; 1826 | margin-left: -108px; 1827 | background: radial-gradient(#343434 25%, transparent 50%) 0 0, 1828 | radial-gradient(#343434 25%, transparent 50%) 4px 4px; 1829 | background-size: 4px 4px; 1830 | background-position: top left; 1831 | 1832 | &:after { 1833 | content: ''; 1834 | height: 16px; 1835 | width: 216px; 1836 | display: block; 1837 | position: absolute; 1838 | top: 676px; 1839 | z-index: 2; 1840 | left: 50%; 1841 | margin-left: -108px; 1842 | background: inherit; 1843 | } 1844 | } 1845 | 1846 | .camera { 1847 | display: block; 1848 | position: absolute; 1849 | top: 18px; 1850 | right: 38px; 1851 | background: #3c3d3d; 1852 | border-radius: 100%; 1853 | width: 24px; 1854 | height: 24px; 1855 | z-index: 3; 1856 | 1857 | &:before { 1858 | width: 8px; 1859 | height: 8px; 1860 | background: black; 1861 | border-radius: 100%; 1862 | position: absolute; 1863 | content: ''; 1864 | top: 50%; 1865 | left: 50%; 1866 | margin-top: -4px; 1867 | margin-left: -4px; 1868 | } 1869 | } 1870 | 1871 | .sensor { 1872 | display: block; 1873 | position: absolute; 1874 | top: 29px; 1875 | left: 60px; 1876 | background: #3c3d3d; 1877 | border-radius: 100%; 1878 | width: 8px; 1879 | height: 8px; 1880 | z-index: 3; 1881 | 1882 | &:after { 1883 | display: block; 1884 | content: ''; 1885 | position: absolute; 1886 | top: 0px; 1887 | right: 12px; 1888 | background: #3c3d3d; 1889 | border-radius: 100%; 1890 | width: 8px; 1891 | height: 8px; 1892 | z-index: 3; 1893 | } 1894 | } 1895 | 1896 | &.landscape{ 1897 | padding: 25px 72px 25px 100px; 1898 | height: 320px; 1899 | width: 568px; 1900 | 1901 | .top-bar{ 1902 | height: calc(100% - 4px); 1903 | width: 635px; 1904 | left: calc(100% - 685px); 1905 | top: 2px; 1906 | } 1907 | 1908 | .speaker { 1909 | width: 16px; 1910 | height: 216px; 1911 | left: calc(100% - 38px); 1912 | top: 50%; 1913 | margin-left: 0px; 1914 | margin-top: -108px; 1915 | 1916 | &:after { 1917 | width: 16px; 1918 | height: 216px; 1919 | left: calc(100% - 692px); 1920 | top: 50%; 1921 | margin-left: 0; 1922 | margin-top: -108px; 1923 | } 1924 | } 1925 | 1926 | .camera { 1927 | right: 18px; 1928 | top: calc(100% - 38px); 1929 | } 1930 | 1931 | .sensor { 1932 | left: calc(100% - 29px); 1933 | top: 60px; 1934 | 1935 | :after { 1936 | right: 0; 1937 | top: -12px; 1938 | } 1939 | } 1940 | } 1941 | } 1942 | 1943 | &.ipad{ 1944 | width: 576px; 1945 | height: 768px; 1946 | padding: 90px 25px; 1947 | background: #242324; 1948 | border-radius: 44px; 1949 | 1950 | &:before{ 1951 | width: calc(100% - 8px); 1952 | height: calc(100% - 8px); 1953 | position: absolute; 1954 | content: ''; 1955 | display: block; 1956 | top: 4px; 1957 | left: 4px; 1958 | border-radius: 40px; 1959 | background: #1e1e1e; 1960 | } 1961 | 1962 | .camera { 1963 | background: #3c3d3d; 1964 | width: 10px; 1965 | height: 10px; 1966 | position: absolute; 1967 | top: 44px; 1968 | left: 50%; 1969 | margin-left: -5px; 1970 | border-radius: 100%; 1971 | } 1972 | 1973 | .top-bar, .bottom-bar{ 1974 | display: none; 1975 | } 1976 | 1977 | .home { 1978 | background: #242324; 1979 | border-radius: 36px; 1980 | width: 50px; 1981 | height: 50px; 1982 | position: absolute; 1983 | left: 50%; 1984 | margin-left: -25px; 1985 | bottom: 22px; 1986 | 1987 | &:after { 1988 | width: 15px; 1989 | height: 15px; 1990 | margin-top: -8px; 1991 | margin-left: -8px; 1992 | border: 1px solid rgba(255, 255, 255, 0.1); 1993 | border-radius: 4px; 1994 | position: absolute; 1995 | display: block; 1996 | content: ''; 1997 | top: 50%; 1998 | left: 50%; 1999 | } 2000 | } 2001 | 2002 | &.landscape{ 2003 | height: 576px; 2004 | width: 768px; 2005 | padding: 25px 90px; 2006 | 2007 | .camera { 2008 | left: calc(100% - 44px); 2009 | top: 50%; 2010 | margin-left: 0; 2011 | margin-top: -5px; 2012 | } 2013 | 2014 | .home { 2015 | top: 50%; 2016 | left: 22px; 2017 | margin-left: 0; 2018 | margin-top: -25px; 2019 | } 2020 | } 2021 | 2022 | &.silver{ 2023 | background: #bcbcbc; 2024 | 2025 | &:before{ 2026 | background: #fcfcfc; 2027 | } 2028 | 2029 | .home{ 2030 | background: #fcfcfc; 2031 | box-shadow: inset 0 0 0 1px #bcbcbc; 2032 | 2033 | &:after{ 2034 | border: 1px solid rgba(0, 0, 0, 0.2); 2035 | } 2036 | } 2037 | } 2038 | } 2039 | 2040 | &.macbook { 2041 | width: 960px; 2042 | height: 600px; 2043 | padding: 44px 44px 76px; 2044 | margin: 0 auto; 2045 | background: #bebebe; 2046 | border-radius: 34px; 2047 | 2048 | &:before { 2049 | width: calc(100% - 8px); 2050 | height: calc(100% - 8px); 2051 | position: absolute; 2052 | content: ''; 2053 | display: block; 2054 | top: 4px; 2055 | left: 4px; 2056 | border-radius: 30px; 2057 | background: #1e1e1e; 2058 | } 2059 | 2060 | .top-bar { 2061 | width: calc(100% + 2 * 70px); 2062 | height: 40px; 2063 | position: absolute; 2064 | content: ''; 2065 | display: block; 2066 | top: 680px; 2067 | left: -70px; 2068 | border-bottom-left-radius: 90px 18px; 2069 | border-bottom-right-radius: 90px 18px; 2070 | background: #bebebe; 2071 | box-shadow: inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6); 2072 | 2073 | &:before { 2074 | width: 100%; 2075 | height: 24px; 2076 | content: ''; 2077 | display: block; 2078 | top: 0; 2079 | left: 0; 2080 | background: #f0f0f0; 2081 | border-bottom: 2px solid #aaa; 2082 | border-radius: 5px; 2083 | position: relative; 2084 | } 2085 | 2086 | &:after { 2087 | width: 16%; 2088 | height: 14px; 2089 | content: ''; 2090 | display: block; 2091 | top: 0; 2092 | background: #ddd; 2093 | position: absolute; 2094 | margin-left: auto; 2095 | margin-right: auto; 2096 | left: 0; 2097 | right: 0; 2098 | border-radius: 0 0 20px 20px; 2099 | box-shadow: inset 0px -3px 10px #999; 2100 | } 2101 | } 2102 | 2103 | .bottom-bar { 2104 | background: transparent; 2105 | width: calc(100% + 2 * 70px); 2106 | height: 26px; 2107 | position: absolute; 2108 | content: ''; 2109 | display: block; 2110 | top: 680px; 2111 | left: -70px; 2112 | 2113 | &:before, 2114 | &:after { 2115 | height: calc(100% - 2px); 2116 | width: 80px; 2117 | content: ''; 2118 | display: block; 2119 | top: 0; 2120 | 2121 | position: absolute; 2122 | } 2123 | 2124 | &:before { 2125 | left: 0; 2126 | background: #f0f0f0; 2127 | background: linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%); 2128 | } 2129 | 2130 | &:after { 2131 | right: 0; 2132 | background: #f0f0f0; 2133 | background: linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%); 2134 | } 2135 | } 2136 | 2137 | .camera { 2138 | background: #3c3d3d; 2139 | width: 10px; 2140 | height: 10px; 2141 | position: absolute; 2142 | top: 20px; 2143 | left: 50%; 2144 | margin-left: -5px; 2145 | border-radius: 100%; 2146 | } 2147 | 2148 | .home { 2149 | display: none; 2150 | } 2151 | } 2152 | 2153 | &.iphone-x { 2154 | width: 375px; 2155 | height: 812px; 2156 | padding: 26px; 2157 | background: #fdfdfd; 2158 | box-shadow:inset 0 0 11px 0 black; 2159 | border-radius: 66px; 2160 | 2161 | .overflow { 2162 | width: 100%; 2163 | height: 100%; 2164 | position: absolute; 2165 | top: 0; 2166 | left: 0; 2167 | border-radius: 66px; 2168 | overflow: hidden; 2169 | } 2170 | 2171 | .shadow { 2172 | border-radius: 100%; 2173 | width: 90px; 2174 | height: 90px; 2175 | position: absolute; 2176 | background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%,rgba(255,255,255,0) 60%); 2177 | } 2178 | 2179 | .shadow--tl { 2180 | top: -20px; 2181 | left: -20px; 2182 | } 2183 | 2184 | .shadow--tr { 2185 | top: -20px; 2186 | right: -20px; 2187 | } 2188 | 2189 | .shadow--bl { 2190 | bottom: -20px; 2191 | left: -20px; 2192 | } 2193 | 2194 | .shadow--br { 2195 | bottom: -20px; 2196 | right: -20px; 2197 | } 2198 | 2199 | &:before{ 2200 | width: calc(100% - 10px); 2201 | height: calc(100% - 10px); 2202 | position: absolute; 2203 | top: 5px; 2204 | content: ''; 2205 | left: 5px; 2206 | border-radius: 61px; 2207 | background: black; 2208 | z-index: 1; 2209 | } 2210 | 2211 | .inner-shadow{ 2212 | width: calc(100% - 20px); 2213 | height: calc(100% - 20px); 2214 | position: absolute; 2215 | top: 10px; 2216 | overflow: hidden; 2217 | left: 10px; 2218 | border-radius: 56px; 2219 | box-shadow: inset 0 0 15px 0 rgba(white, 0.66); 2220 | z-index: 1; 2221 | 2222 | &:before{ 2223 | box-shadow:inset 0 0 20px 0 #FFFFFF; 2224 | width: 100%; 2225 | height: 116%; 2226 | position: absolute; 2227 | top: -8%; 2228 | content: ''; 2229 | left: 0; 2230 | border-radius: 200px / 112px; 2231 | z-index: 2; 2232 | } 2233 | } 2234 | 2235 | .screen { 2236 | border-radius: 40px; 2237 | box-shadow: none; 2238 | } 2239 | 2240 | .top-bar, .bottom-bar { 2241 | width: 100%; 2242 | position: absolute; 2243 | height: 8px; 2244 | background: rgba(black, 0.1); 2245 | left: 0; 2246 | } 2247 | 2248 | .top-bar { 2249 | top: 80px; 2250 | } 2251 | 2252 | .bottom-bar { 2253 | bottom: 80px; 2254 | } 2255 | 2256 | .volume, .volume:before, .volume:after, .sleep { 2257 | width: 3px; 2258 | background: #b5b5b5; 2259 | position: absolute; 2260 | } 2261 | 2262 | .volume { 2263 | left: -3px; 2264 | top: 116px; 2265 | height: 32px; 2266 | 2267 | &:before { 2268 | height: 62px; 2269 | top: 62px; 2270 | content: ''; 2271 | left: 0; 2272 | } 2273 | 2274 | &:after { 2275 | height: 62px; 2276 | top: 140px; 2277 | content: ''; 2278 | left: 0; 2279 | } 2280 | } 2281 | 2282 | .sleep { 2283 | height: 96px; 2284 | top: 200px; 2285 | right: -3px; 2286 | } 2287 | 2288 | .camera { 2289 | width: 6px; 2290 | height: 6px; 2291 | top: 9px; 2292 | border-radius: 100%; 2293 | position: absolute; 2294 | left: 154px; 2295 | background: #0d4d71; 2296 | } 2297 | 2298 | .speaker { 2299 | height: 6px; 2300 | width: 60px; 2301 | left: 50%; 2302 | position: absolute; 2303 | top: 9px; 2304 | margin-left: -30px; 2305 | background: #171818; 2306 | border-radius: 6px; 2307 | } 2308 | 2309 | .notch { 2310 | position: absolute; 2311 | width: 210px; 2312 | height: 30px; 2313 | top: 26px; 2314 | left: 108px; 2315 | z-index: 4; 2316 | background: black; 2317 | border-bottom-left-radius: 24px; 2318 | border-bottom-right-radius: 24px; 2319 | 2320 | &:before, &:after { 2321 | content: ''; 2322 | height: 8px; 2323 | position: absolute; 2324 | top: 0; 2325 | width: 8px; 2326 | } 2327 | 2328 | &:after { 2329 | background: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%); 2330 | left: -8px; 2331 | } 2332 | 2333 | &:before { 2334 | background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%); 2335 | right: -8px; 2336 | } 2337 | } 2338 | 2339 | &.landscape { 2340 | height: 375px; 2341 | width: 812px; 2342 | 2343 | .top-bar, .bottom-bar { 2344 | width: 8px; 2345 | height: 100%; 2346 | top: 0; 2347 | } 2348 | 2349 | .top-bar { 2350 | left: 80px; 2351 | } 2352 | 2353 | .bottom-bar { 2354 | right: 80px; 2355 | bottom: auto; 2356 | left: auto; 2357 | } 2358 | 2359 | .volume, .volume:before, .volume:after, .sleep { 2360 | height: 3px; 2361 | } 2362 | 2363 | .inner-shadow:before { 2364 | height: 100%; 2365 | width: 116%; 2366 | left: -8%; 2367 | top: 0; 2368 | border-radius: 112px / 200px; 2369 | } 2370 | 2371 | .volume { 2372 | bottom: -3px; 2373 | top: auto; 2374 | left: 116px; 2375 | width: 32px; 2376 | 2377 | &:before { 2378 | width: 62px; 2379 | left: 62px; 2380 | top: 0; 2381 | } 2382 | 2383 | &:after { 2384 | width: 62px; 2385 | left: 140px; 2386 | top: 0; 2387 | } 2388 | } 2389 | 2390 | .sleep { 2391 | width: 96px; 2392 | left: 200px; 2393 | top: -3px; 2394 | right: auto; 2395 | } 2396 | 2397 | .camera { 2398 | left: 9px; 2399 | bottom: 154px; 2400 | top: auto; 2401 | } 2402 | 2403 | .speaker { 2404 | width: 6px; 2405 | height: 60px; 2406 | left: 9px; 2407 | top: 50%; 2408 | margin-top: -30px; 2409 | margin-left: 0; 2410 | } 2411 | 2412 | .notch { 2413 | height: 210px; 2414 | width: 30px; 2415 | left: 26px; 2416 | bottom: 108px; 2417 | top: auto; 2418 | border-top-right-radius: 24px; 2419 | border-bottom-right-radius: 24px; 2420 | border-bottom-left-radius: 0; 2421 | 2422 | &:before, &:after { 2423 | left: 0; 2424 | } 2425 | 2426 | &:after { 2427 | background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%); 2428 | bottom: -8px; 2429 | top: auto; 2430 | } 2431 | 2432 | &:before { 2433 | background: radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%); 2434 | top: -8px; 2435 | } 2436 | } 2437 | } 2438 | } 2439 | 2440 | &.note8 { 2441 | width: 400px; 2442 | height: 822px; 2443 | background: black; 2444 | border-radius: 34px; 2445 | padding: 45px 10px; 2446 | 2447 | .overflow { 2448 | width: 100%; 2449 | height: 100%; 2450 | position: absolute; 2451 | top: 0; 2452 | left: 0; 2453 | border-radius: 34px; 2454 | overflow: hidden; 2455 | } 2456 | 2457 | .speaker { 2458 | height: 8px; 2459 | width: 56px; 2460 | left: 50%; 2461 | position: absolute; 2462 | top: 25px; 2463 | margin-left: -28px; 2464 | background: #171818; 2465 | z-index: 1; 2466 | border-radius: 8px; 2467 | } 2468 | 2469 | .camera { 2470 | height: 18px; 2471 | width: 18px; 2472 | left: 86px; 2473 | position: absolute; 2474 | top: 18px; 2475 | background: #212b36; 2476 | z-index: 1; 2477 | border-radius: 100%; 2478 | 2479 | &:before{ 2480 | content: ''; 2481 | height: 8px; 2482 | width: 8px; 2483 | left: -22px; 2484 | position: absolute; 2485 | top: 5px; 2486 | background: #212b36; 2487 | z-index: 1; 2488 | border-radius: 100%; 2489 | } 2490 | } 2491 | 2492 | .sensors { 2493 | height: 10px; 2494 | width: 10px; 2495 | left: 120px; 2496 | position: absolute; 2497 | top: 22px; 2498 | background: #1d233b; 2499 | z-index: 1; 2500 | border-radius: 100%; 2501 | 2502 | &:before{ 2503 | content: ''; 2504 | height: 10px; 2505 | width: 10px; 2506 | left: 18px; 2507 | position: absolute; 2508 | top: 0; 2509 | background: #1d233b; 2510 | z-index: 1; 2511 | border-radius: 100%; 2512 | } 2513 | } 2514 | 2515 | .more-sensors { 2516 | height: 16px; 2517 | width: 16px; 2518 | left: 285px; 2519 | position: absolute; 2520 | top: 18px; 2521 | background: #33244a; 2522 | box-shadow: 0 0 0 2px rgba(white, 0.1); 2523 | z-index: 1; 2524 | border-radius: 100%; 2525 | 2526 | &:before{ 2527 | content: ''; 2528 | height: 11px; 2529 | width: 11px; 2530 | left: 40px; 2531 | position: absolute; 2532 | top: 4px; 2533 | background: #214a61; 2534 | z-index: 1; 2535 | border-radius: 100%; 2536 | } 2537 | } 2538 | 2539 | .sleep { 2540 | width: 2px; 2541 | height: 56px; 2542 | background: black; 2543 | position: absolute; 2544 | top: 288px; 2545 | right: -2px; 2546 | } 2547 | 2548 | .volume { 2549 | width: 2px; 2550 | height: 120px; 2551 | background: black; 2552 | position: absolute; 2553 | top: 168px; 2554 | left: -2px; 2555 | 2556 | &:before { 2557 | content: ''; 2558 | top: 168px; 2559 | width: 2px; 2560 | position: absolute; 2561 | left: 0; 2562 | background: black; 2563 | height: 56px; 2564 | } 2565 | } 2566 | 2567 | .inner { 2568 | width: 100%; 2569 | height: calc(100% - 8px); 2570 | position: absolute; 2571 | top: 2px; 2572 | content: ''; 2573 | left: 0px; 2574 | border-radius: 34px; 2575 | border-top: 2px solid #9fa0a2; 2576 | border-bottom: 2px solid #9fa0a2; 2577 | background: black; 2578 | z-index: 1; 2579 | box-shadow: inset 0 0 6px 0 rgba(white, 0.5); 2580 | } 2581 | 2582 | .shadow{ 2583 | box-shadow: 2584 | inset 0 0 60px 0 white, 2585 | inset 0 0 30px 0 rgba(white, 0.5), 2586 | 0 0 20px 0 white, 2587 | 0 0 20px 0 rgba(white, 0.5); 2588 | height: 101%; 2589 | position: absolute; 2590 | top: -0.5%; 2591 | content: ''; 2592 | width: calc(100% - 20px); 2593 | left: 10px; 2594 | border-radius: 38px; 2595 | z-index: 5; 2596 | pointer-events: none; 2597 | } 2598 | 2599 | .screen { 2600 | border-radius: 14px; 2601 | box-shadow: none; 2602 | } 2603 | 2604 | &.landscape { 2605 | height: 400px; 2606 | width: 822px; 2607 | padding: 10px 45px; 2608 | 2609 | .speaker { 2610 | height: 56px; 2611 | width: 8px; 2612 | top: 50%; 2613 | margin-top: -28px; 2614 | margin-left: 0; 2615 | right: 25px; 2616 | left: auto; 2617 | } 2618 | 2619 | .camera { 2620 | top: 86px; 2621 | right: 18px; 2622 | left: auto; 2623 | 2624 | &:before { 2625 | top: -22px; 2626 | left: 5px; 2627 | } 2628 | } 2629 | 2630 | .sensors { 2631 | top: 120px; 2632 | right: 22px; 2633 | left: auto; 2634 | 2635 | &:before { 2636 | top: 18px; 2637 | left: 0; 2638 | } 2639 | } 2640 | 2641 | .more-sensors { 2642 | top: 285px; 2643 | right: 18px; 2644 | left: auto; 2645 | 2646 | &:before { 2647 | top: 40px; 2648 | left: 4px; 2649 | } 2650 | } 2651 | 2652 | .sleep { 2653 | bottom: -2px; 2654 | top: auto; 2655 | right: 288px; 2656 | width: 56px; 2657 | height: 2px; 2658 | } 2659 | 2660 | .volume { 2661 | width: 120px; 2662 | height: 2px; 2663 | top: -2px; 2664 | right: 168px; 2665 | left: auto; 2666 | 2667 | &:before { 2668 | right: 168px; 2669 | left: auto; 2670 | top: 0; 2671 | width: 56px; 2672 | height: 2px; 2673 | } 2674 | } 2675 | 2676 | .inner { 2677 | height: 100%; 2678 | width: calc(100% - 8px); 2679 | left: 2px; 2680 | top: 0; 2681 | border-top: 0; 2682 | border-bottom: 0; 2683 | border-left: 2px solid #9fa0a2; 2684 | border-right: 2px solid #9fa0a2; 2685 | } 2686 | 2687 | .shadow { 2688 | width: 101%; 2689 | height: calc(100% - 20px); 2690 | left: -0.5%; 2691 | top: 10px; 2692 | } 2693 | } 2694 | } 2695 | } 2696 | --------------------------------------------------------------------------------