Maze Magnify Playful Project with Code: LAMP Stack Project - Upsoft Select
Hello peeps, Upsoft Select is back with a new Javascript Oriented Project built on a LAMP Stack Environment, deployed onto firebase.
The preview for this Project is live at: https://upsofttechnologies.com/MazeMagnifier.html
Video Preview:
Now in order to create this project, we have used HTML, CSS, JavaScript with absolutely no Pre Processors.
The Below Code is to be added onto the index.html file:
<html
<head>
<title>Upsoft Maze Magnifying Project</title>
<!-- Favicons -->
? <link href="favicon.png" rel="icon">
? <link href="apple-touch-icon.png" rel="apple-touch-icon">
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1">
?<link href="style.css" rel="stylesheet">
<link rel="preconnect" >
<link rel="preconnect" crossorigin>
<link rel="stylesheet">
<body>
<span class="fill">UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. </span>
<span class="outline" aria-hidden="true">UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. UPSOFT MOVE THE CIRCLE OVER THIS TEXT. </span>
<div id="circle"></div>
</head>
<script src="style.js"></script>
</body>
</html>>
The Below Code is to be added to the style.css file:
*
font-family: sans-serif;
letter-spacing: -5px;
cursor: grabbing;
margin: 0;
box-sizing: border-box;
position: absolute;
}
?* ::selection {
background: none;
}
?body {
background: #3590f3;
overflow: hidden;
}
?span {
width: 100vw;
font-size: 5rem;
font-weight: bold;
line-height: 4rem;
word-break: break-all;
text-align: center;
}
?span.fill {
color: #fff;
z-index: 0;
}
?span.outline {
color: transparent;
-webkit-text-stroke: 0.5px #fff;
z-index: 2;
}
?#circle {
height: 200px;
width: 200px;
border-radius: 50%;
background: #3590f3;
border: 15px solid #fff;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
top: calc(50vh - 100px);
left: calc(50vw - 100px);
}
?{
The below code is to be added to the style.js file:
领英推荐
const circle = document.getElementById("circle")
document.addEventListener("mousemove", (e) => {
? let mouse_x = e.clientX;
? let mouse_y = e.clientY;
? circle.style.left = `${mouse_x - 100}px`;
? circle.style.top = `${mouse_y - 100}px`;
});
;
And once you link all the three files, your project is ready to be deployed onto any server.
We have used Firebase to deploy this project as firebase allows quick caching of emojis.
For more amazing projects and tech based brainstorming articles follow Upsoft.
We at Upsoft Believe in the perpetual growth of both our clients and our Developers. We at?Upsoft?bring forward a platform where?Freelancers?from different technological experiences, dedicated respective skills sets, freelance or professional experience etc. can come forward and collaborate to work in Best in Class Industrial Projects.
We have clients who are willing to pay for quality jobs and we, along with our team come forward to offer Projects to Freelancers who fulfill our Prerequisite Criterion.
If you're any one of the above, send us your resume at [email protected] or visit our website at www.UpsoftTechnologies.com for more details.
Upsoft?is a cornerstone market place for various?Developers?and?Businesses?to collaborate and grow together. We leverage the highest?Industry Standards?in our?Projects?and we often Outsource our Projects to Freelancers. We have a dedicated team of?Web Developers,?Microsoft Dot Net Developers,?IoT Developers,?Mobile Application Developers?that work in a clockwork manner to deliver and deploy every Project on time with utmost Efficacy. Visit us at?UpsoftTechnologies.com?and follow us on LinkedIn to know more about us and our Projects.
Also for Project Enquiries email us [email protected]?and get yourself in touch with us. We'll be very happy to talk to you and hear about your Dream Project.?Your Satisfaction is our Priority.