SAMSUNG PHONE MOCKUP

Developer
Mayur Elbhar
Size
2,666 Kb
Views
16,192
  1. SAMSUNG PHONE MOCKUP Previews
  2. SAMSUNG PHONE MOCKUP HTML Codes
  3. SAMSUNG PHONE MOCKUP CSS Codes

How do I make an samsung phone mockup?

Samsung device mockup with minimum HTML and pure CSS3. . What is a samsung phone mockup? How do you make a samsung phone mockup? This script and codes were developed by Mayur Elbhar on 31 October 2022, Monday.

SAMSUNG PHONE MOCKUP Previews
IQ Test

SAMSUNG PHONE MOCKUP - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SAMSUNG PHONE MOCKUP</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"><p id="heading">SAMSUNG PHONE MOCKUP</p>
<p id="info">Samsung device mockup with minimum HTML and pure CSS3.</p> <p id="ver">Version 1.0</p>
</div>
<div class="frame"> <div class="speaker"> <div class="notification_lights"></div> <div class="notification_lights2"></div></div> <div class="logo"><p>SAMSUNG</p></div> <div class="front_cam"></div> <div class="screen"></div> <div class="but"></div> </div>
<div class="footer"><p id="credit">Designed By <span> <a href="https://www.twitter.com/mayurelbhar">Mayur Elbhar (ME)</a></p></div>
</body>
</html>

SAMSUNG PHONE MOCKUP - Script Codes CSS Codes

body { background: #00897b; }
.header #heading { text-align: center; font: 40px impact; color: #e3e5e7; text-shadow: 5px 5px 10px #535353;
}
.header #info { text-align: center; font: 15px cursive; color: #e3e5e7; text-shadow: 5px 5px 10px #535353; margin-top: -30px;
}
.header #ver { text-align: center; font: 15px cursive; color: #e3e5e7; text-shadow: 5px 5px 10px #535353; margin-top: -15px;
}
.header { border-bottom: 1px dashed #e3e5e7; margin-top: -20px;
}
.frame { height: 450px; width: 250px; border: 5px solid #aaa6a6; border-radius: 20px; margin: auto; background: #d2e1e6; margin-top: 25px; box-shadow: 5px 5px 10px #393939; cursor: move;
}
.speaker { height: 3px; width: 50px; display: block; margin: auto; margin-top: 10px; position: relative; border-radius: 10px; background: rgb(69,72,77);
background: -webkit-linear-gradient(bottom left, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
background: -moz-linear-gradient(bottom left, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(bottom left, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(to top right, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 );
border: 2px inset #484d4e;
}
.logo p { font-family: Impact; color: #54637a; margin-bottom: -20px; text-align: center; margin-top: 4px;
}
.screen { height: 360px; width: 290x; border: 0px solid #ccd9de; border-radius: 3px; margin: auto; margin-top: 25px; margin-right: 6px; margin-bottom: 40px; margin-left: 6px; display: block; background: rgb(69,72,77);
background: -webkit-linear-gradient(bottom left, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
background: -moz-linear-gradient(bottom left, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(bottom left, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(to top right, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 );
}
.front_cam { width: 10px; height: 10px; background: #171e24; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin: auto; margin-bottom: 5px; margin-left: 210px; box-shadow: inset -2px -2px 2px 1px #7f8184;
}
.notification_lights { width: 6px; height: 6px; background: #171e24; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; position: relative; margin: auto; margin-left: 60px;
}
.notification_lights2 { width: 6px; height: 6px; background: #171e24; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; position: relative; margin: auto; margin-left: 67px; margin-top: -6px;
}
.but { cursor: pointer; height: 15px; width: 60px; border: 0.06cm solid #6d747b; border-radius: 30px; margin: auto; margin-bottom: 4px; margin-top: -30px; background: rgb(210,223,237); background: -webkit-linear-gradient(bottom left, rgba(210,223,237,1) 0%, rgba(200,215,235,1) 26%, rgba(190,208,234,1) 51%, rgba(166,192,227,1) 51%, rgba(175,199,232,1) 62%, rgba(186,208,239,1) 75%, rgba(153,181,219,1) 88%, rgba(121,155,200,1) 100%);
background: -moz-linear-gradient(bottom left, rgba(210,223,237,1) 0%, rgba(200,215,235,1) 26%, rgba(190,208,234,1) 51%, rgba(166,192,227,1) 51%, rgba(175,199,232,1) 62%, rgba(186,208,239,1) 75%, rgba(153,181,219,1) 88%, rgba(121,155,200,1) 100%);
background: -o-linear-gradient(bottom left, rgba(210,223,237,1) 0%, rgba(200,215,235,1) 26%, rgba(190,208,234,1) 51%, rgba(166,192,227,1) 51%, rgba(175,199,232,1) 62%, rgba(186,208,239,1) 75%, rgba(153,181,219,1) 88%, rgba(121,155,200,1) 100%);
background: linear-gradient(to top right, rgba(210,223,237,1) 0%, rgba(200,215,235,1) 26%, rgba(190,208,234,1) 51%, rgba(166,192,227,1) 51%, rgba(175,199,232,1) 62%, rgba(186,208,239,1) 75%, rgba(153,181,219,1) 88%, rgba(121,155,200,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 );
}
.but:active { border-color: #aaa6a6; box-shadow: inset 1px 1px 0px #000;
}
.footer { margin-top: 30px
}
.footer #credit { text-align: center; font: 16px Segoe UI; color: #e6ecf2; padding: 1px; margin: 18px 500px; display: inline - block;
}
.footer #credit a { text-decoration: none; color: #e6ecf2;
}
.footer #credit span { font: 20px mistral; color: #e6ecf2;
}
SAMSUNG PHONE MOCKUP - Script Codes
SAMSUNG PHONE MOCKUP - Script Codes
Home Page Home
Developer Mayur Elbhar
Username mayurelbhar
Uploaded October 31, 2022
Rating 3
Size 2,666 Kb
Views 16,192
Do you need developer help for SAMSUNG PHONE MOCKUP?

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

Mayur Elbhar (mayurelbhar) Script Codes
Name
Typography Experiment 2 - Blurry Text
Buttons with Google material design icons.
A simple log in form made with css
Social Media Icons
Simple Text Shadow with CSS
Text-Shadow
FLAT UI ELEMENTS
A Pen by Mayur Elbhar
FLAT UI BUTTONS
Contact Us Form
Create amazing blog posts with AI!

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