Create website mockups with HTML, CSS & JS.
Learn how you can create website mockups in seconds with nothing but HTML, CSS, and Javascript
Abhiraj Bhowmick
2 years ago | 5 min read
Today we are going to make an app that can capture the screenshot of a website from an input field and display it in a mockup of a web browser.
The user could choose the backdrop colour. The screenshot also contains a shadow, which adds to its appeal. It will be simple to download by clicking the download button.
It will save a significant amount of time. In the absence of this, a user must take a screenshot, crop it, enlarge it, download a mockup, attach the screenshot to the mockup, apply shadows, and change the backdrop colour.
Isn't that a complete disaster?
It accomplishes all of the aforementioned tasks in a matter of seconds, saving you a significant amount of time.
We are only using a screenshot API developed by premieroctet. This is how the API call will look like 👇
https://2s9e3bif52.execute-api.eu-central-1.amazonaws.com/production/screenshot?url={website_url}&color={color}
So now let's get into the html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Mockup by Abhiraj</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="section1">
<h1>Take screenshots from website urls in seconds.</h1>
<div class="cont">
<input type="text" id="websiteAdress" value='google.com'>
<div class="color_cont">
<div id="color_demo"></div>
<input type="text" id="bgColor" value='7108B6'>
</div>
<button type="submit" id="submitBtn" onclick='generateMockup();changeView()'>Take Screenshot</button>
</div>
</section>
<div id="section2">
<div class="wrapper">
<div class="loadingio-spinner-ripple-4o61jz917vh">
<div class="ldio-tnoicgfz6f">
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div id="section3">
<div class="cont">
<h1>Here it is! Download your Mockup!</h1>
<img alt="" id='resultImg'>
<button id="Download">Download</button>
</a>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Mockup by Abhiraj</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="section1">
<h1>Take screenshots from website urls in seconds.</h1>
<div class="cont">
<input type="text" id="websiteAdress" value='google.com'>
<div class="color_cont">
<div id="color_demo"></div>
<input type="text" id="bgColor" value='7108B6'>
</div>
<button type="submit" id="submitBtn" onclick='generateMockup();changeView()'>Take Screenshot</button>
</div>
</section>
<div id="section2">
<div class="wrapper">
<div class="loadingio-spinner-ripple-4o61jz917vh">
<div class="ldio-tnoicgfz6f">
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div id="section3">
<div class="cont">
<h1>Here it is! Download your Mockup!</h1>
<img alt="" id='resultImg'>
<button id="Download">Download</button>
</a>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Now that we have the basic structure of our app, let's add some styles to it.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
* {
margin: 0;
font-family: "Poppins", sans-serif;
padding: 0;
}
body {
min-height: 100vh;
width: 100%;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2380F'/%3E%3Cstop offset='1' stop-color='%23f40'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23ffffff' cx='12' cy='12' r='12'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.1'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
input {
padding: 0 10px;
outline: none;
}
#section1 {
background: rgba(255, 255, 255, 0);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
backdrop-filter: blur(12.5px);
-webkit-backdrop-filter: blur(12.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
width: 60%;
height: 28em;
text-align: center;
/* display: none; */
align-items: center;
flex-direction: column;
justify-content: center;
}
#section1 h1 {
font-size: 2em;
padding: 30px;
}
#websiteAdress {
height: 40px;
width: 400px;
border-radius: 5px;
border: none;
margin: 0 0 15px 0;
}
.color_cont {
height: 40px;
width: 420px;
background: #fff;
border-radius: 5px;
border: none;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0 0 15px 0;
}
#color_demo {
width: 30px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
background: #7108b6;
height: 30px;
margin: 0 5px;
}
.color_cont input {
height: 30px;
width: 350px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
height: 40px;
width: 400px;
border-radius: 5px;
background: #8800ff;
color: #fff;
background-blend-mode: screen, color-dodge, overlay, difference, normal;
border: none;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
cursor: pointer;
}
/* Section 2 */
#section2 {
display: none;
}
.wrapper {
background: rgba(255, 255, 255, 0);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
backdrop-filter: blur(12.5px);
-webkit-backdrop-filter: blur(12.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
@keyframes ldio-tnoicgfz6f {
0% {
top: 96px;
left: 96px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 18px;
left: 18px;
width: 156px;
height: 156px;
opacity: 0;
}
}
.ldio-tnoicgfz6f div {
position: absolute;
border-width: 4px;
border-style: solid;
opacity: 1;
border-radius: 50%;
animation: ldio-tnoicgfz6f 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.ldio-tnoicgfz6f div:nth-child(1) {
border-color: #ffffff;
}
.ldio-tnoicgfz6f div:nth-child(2) {
border-color: #8800ff;
animation-delay: -0.5s;
}
.loadingio-spinner-ripple-4o61jz917vh {
width: 200px;
height: 200px;
display: inline-block;
overflow: hidden;
}
.ldio-tnoicgfz6f {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-tnoicgfz6f div {
box-sizing: content-box;
}
/* Section 3 */
#section3 {
display: none;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
#resultImg {
width: 50%;
margin: 10px;
}
.cont {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
* {
margin: 0;
font-family: "Poppins", sans-serif;
padding: 0;
}
body {
min-height: 100vh;
width: 100%;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2380F'/%3E%3Cstop offset='1' stop-color='%23f40'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23ffffff' cx='12' cy='12' r='12'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.1'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
input {
padding: 0 10px;
outline: none;
}
#section1 {
background: rgba(255, 255, 255, 0);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
backdrop-filter: blur(12.5px);
-webkit-backdrop-filter: blur(12.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
width: 60%;
height: 28em;
text-align: center;
/* display: none; */
align-items: center;
flex-direction: column;
justify-content: center;
}
#section1 h1 {
font-size: 2em;
padding: 30px;
}
#websiteAdress {
height: 40px;
width: 400px;
border-radius: 5px;
border: none;
margin: 0 0 15px 0;
}
.color_cont {
height: 40px;
width: 420px;
background: #fff;
border-radius: 5px;
border: none;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0 0 15px 0;
}
#color_demo {
width: 30px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
background: #7108b6;
height: 30px;
margin: 0 5px;
}
.color_cont input {
height: 30px;
width: 350px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
height: 40px;
width: 400px;
border-radius: 5px;
background: #8800ff;
color: #fff;
background-blend-mode: screen, color-dodge, overlay, difference, normal;
border: none;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
cursor: pointer;
}
/* Section 2 */
#section2 {
display: none;
}
.wrapper {
background: rgba(255, 255, 255, 0);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
backdrop-filter: blur(12.5px);
-webkit-backdrop-filter: blur(12.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
@keyframes ldio-tnoicgfz6f {
0% {
top: 96px;
left: 96px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 18px;
left: 18px;
width: 156px;
height: 156px;
opacity: 0;
}
}
.ldio-tnoicgfz6f div {
position: absolute;
border-width: 4px;
border-style: solid;
opacity: 1;
border-radius: 50%;
animation: ldio-tnoicgfz6f 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.ldio-tnoicgfz6f div:nth-child(1) {
border-color: #ffffff;
}
.ldio-tnoicgfz6f div:nth-child(2) {
border-color: #8800ff;
animation-delay: -0.5s;
}
.loadingio-spinner-ripple-4o61jz917vh {
width: 200px;
height: 200px;
display: inline-block;
overflow: hidden;
}
.ldio-tnoicgfz6f {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-tnoicgfz6f div {
box-sizing: content-box;
}
/* Section 3 */
#section3 {
display: none;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
#resultImg {
width: 50%;
margin: 10px;
}
.cont {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
Now that our app is almost complete, all we need now is Javascript to make the app functional.
First, we can go initialize some of our components. We could initialize others in the respective functions
const section1 = document.getElementById("section1");
const section2 = document.getElementById("section2");
const section3 = document.getElementById("section3");
const resultImg = document.getElementById("resultImg");
const Download = document.getElementById("Download");
const submitBtn = document.getElementById("submitBtn");
const section2 = document.getElementById("section2");
const section3 = document.getElementById("section3");
const resultImg = document.getElementById("resultImg");
const Download = document.getElementById("Download");
const submitBtn = document.getElementById("submitBtn");
Now lets get into it.
const changeColor = () => {
const bgColor = document.getElementById("bgColor").value;
const color_demo = document.getElementById("color_demo");
color_demo.style.background = "#" + bgColor;
};
bgColor.addEventListener("input", changeColor);
bgColor.addEventListener("propertychange", changeColor);
const generateMockup = () => {
const websiteAdress = document.getElementById("websiteAdress").value;
const bgColor = document.getElementById("bgColor").value;
const mockup =
"https://2s9e3bif52.execute-api.eu-central-1.amazonaws.com/production/screenshot?url=" +
websiteAdress +
"&color=" +
bgColor;
console.log(mockup);
resultImg.src = mockup;
section1.style.display = "none";
section2.style.display = "block";
Download.addEventListener("click", function () {
window.open(mockup);
});
};
const changeView = () => {
setTimeout(() => {
section2.style.display = "none";
section3.style.display = "block";
}, 6500);
};
const bgColor = document.getElementById("bgColor").value;
const color_demo = document.getElementById("color_demo");
color_demo.style.background = "#" + bgColor;
};
bgColor.addEventListener("input", changeColor);
bgColor.addEventListener("propertychange", changeColor);
const generateMockup = () => {
const websiteAdress = document.getElementById("websiteAdress").value;
const bgColor = document.getElementById("bgColor").value;
const mockup =
"https://2s9e3bif52.execute-api.eu-central-1.amazonaws.com/production/screenshot?url=" +
websiteAdress +
"&color=" +
bgColor;
console.log(mockup);
resultImg.src = mockup;
section1.style.display = "none";
section2.style.display = "block";
Download.addEventListener("click", function () {
window.open(mockup);
});
};
const changeView = () => {
setTimeout(() => {
section2.style.display = "none";
section3.style.display = "block";
}, 6500);
};
Oh yeah, that's it we have finished our project 📸
Check out the source code on Github
Thanks for reading.
Until next time.
Abhiraj
Upvote
Created by
Abhiraj Bhowmick
I make stuff on the web and write blogs about it.
Post
Related Articles