MacBook Pro
How do I make an macbook pro?
MacBook Pro made from CSS. What is a macbook pro? How do you make a macbook pro? This script and codes were developed by Cory Schadt on 16 October 2022, Sunday.
MacBook Pro - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MacBook Pro</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="macbook"> <div class="display"> <div class="screen"></div> <h1>MacBook Pro</h1> </div> <div class="base"> <div class="indent"></div> </div> <div class="bottom"></div>
</div>
</body>
</html>
MacBook Pro - Script Codes CSS Codes
html { font-size: 1vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%;
}
.macbook { width: 68.125em;
}
.display { background-color: #000; overflow: hidden; width: 55.375em; height: 36em; margin: auto; border-top-right-radius: 1.70em; border-top-left-radius: 1.70em; position: relative;
}
.display:before { content: ""; width: .70em; height: .70em; background: #222; position: absolute; top: .40em; left: 0; right: 0; margin: auto; border-radius: 50%;
}
.display:after { content: ""; width: 0; height: 0; border-top: 28.125em solid rgba(255, 255, 255, 0.18); border-left: 18.750em solid transparent; position: absolute; top: 0; right: 0; z-index: 150;
}
.display h1 { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 300; position: absolute; bottom: .5em; left: 0; right: 0; line-height: 0; color: #666; font-size: .65em; text-align: center;
}
.screen { width: 94%; height: 92%; margin: auto; position: absolute; background: url(https://s29.postimg.org/oirhgn9qf/mac_OS-_High-_Sierra-_Wallpaper.jpg) no-repeat; background-size: cover; z-index: 100; top: 4%; left: 3%; border-radius: .20em;
}
.base { height: 1.250em; width: 68.125em; background-color: #EFF0F4; position: relative;
}
.base:after, .base:before { width: 4em; height: 100%; content: ""; top: 0; right: 0; position: absolute; background: -webkit-linear-gradient(left, rgba(226, 228, 227, 0.35) 0%, rgba(140, 141, 145, 0.35) 51%, rgba(226, 228, 227, 0.35) 99%, rgba(226, 228, 227, 0.35) 100%); background: linear-gradient(to right, rgba(226, 228, 227, 0.35) 0%, rgba(140, 141, 145, 0.35) 51%, rgba(226, 228, 227, 0.35) 99%, rgba(226, 228, 227, 0.35) 100%);
}
.base:before { left: 0;
}
.bottom { height: 0.55em; width: 68m; margin: auto; background: -webkit-linear-gradient(top, rgba(153, 154, 158, 0.75) 30%, rgba(44, 45, 47, 0.6) 90%); background: linear-gradient(to bottom, rgba(153, 154, 158, 0.75) 30%, rgba(44, 45, 47, 0.6) 90%); border-bottom-right-radius: 8em; border-bottom-left-radius: 8em; box-shadow: 0 19px 38px rgba(0, 0, 0, 0.05), 0 15px 12px rgba(0, 0, 0, 0.05);
}
.indent { height: 0.75em; width: 10em; margin: auto; background: -webkit-linear-gradient(top, rgba(153, 154, 158, 0.75) 30%, rgba(44, 45, 47, 0.6) 90%); background: linear-gradient(to bottom, rgba(153, 154, 158, 0.75) 30%, rgba(44, 45, 47, 0.6) 90%); border-bottom-right-radius: 8em; border-bottom-left-radius: 8em;
}
Developer | Cory Schadt |
Username | coryschadt |
Uploaded | October 16, 2022 |
Rating | 4.5 |
Size | 3,136 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Keyframe Testing | 2,957 Kb |
Vertical Slick Slider | 3,545 Kb |
Wordpress - archives for CPT | 1,613 Kb |
Diamond | 3,881 Kb |
Chair Animation | 229,479 Kb |
Notifications | 5,304 Kb |
Menu | 2,080 Kb |
A Pen by Cory Schadt | 1,574 Kb |
Pull TSX quote - jquery | 2,044 Kb |
Checkbox | 2,407 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Popover | Teles | 2,248 Kb |
Automatic scroll | Skeurentjes | 4,042 Kb |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
RSW | JordanC | 3,726 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Hello People | Danburrows | 2,365 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!