A Pen by Stove

Developer
Stove
Size
2,460 Kb
Views
58,696
  1. A Pen by Stove Previews
  2. A Pen by Stove HTML Codes
  3. A Pen by Stove CSS Codes
  4. A Pen by Stove JS Codes

How do I make an a pen by stove?

What is a a pen by stove? How do you make a a pen by stove? This script and codes were developed by Stove on 07 July 2022, Thursday.

A Pen by Stove Previews
IQ Test

A Pen by Stove - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Stove</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="puzzle"> <div class="squares" id="level-1"> <div class="square"> <input type="text" /> </div> <div class="square"> <input type="text" /> </div> <div class="square"> <input type="text" /> </div> <div class="square"> <input type="text" /> </div> </div> <div class="squares" id="level-2"> </div> <div class="squares" id="level-3"> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> </div> <div class="squares" id="level-4"> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> <div class="square"> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

A Pen by Stove - Script Codes CSS Codes

body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #222;
}
.puzzle { width: 600px;
}
.squares { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.squares .square { padding: 8px; height: 150px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.squares:nth-child(1) input { width: 100%; height: 134px; background-color: #ccc; border: 0; font-size: 100px; text-align: center; color: #222;
}
.squares:nth-child(2) .square { background-color: red; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2;
}
.squares:nth-child(2) .subsquare { height: 75px; -webkit-box-flex: 2; -ms-flex: 2; flex: 2; padding: 4px;
}
.squares:nth-child(2) .subsquaresquare { background-color: blue; width: 100%; height: 100%;
}

A Pen by Stove - Script Codes JS Codes

let level2 = document.getElementById('level-2');
let level2Markup = '';
for(let i = 0; i < 4; i+=1){ let square = document.createElement('div'); square.className='square'; for(let j = 0; j < 4; j+=1){ let subsquare = document.createElement('div'); subsquare.className = 'subsquare' let subsquaresquare = document.createElement('div'); subsquaresquare.className = 'subsquaresquare'; subsquare.appendChild(subsquaresquare); square.appendChild(subsquare); } level2.appendChild(square);
}
A Pen by Stove - Script Codes
A Pen by Stove - Script Codes
Home Page Home
Developer Stove
Username stevn
Uploaded July 07, 2022
Rating 3
Size 2,460 Kb
Views 58,696
Do you need developer help for A Pen by Stove?

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!

Stove (stevn) Script Codes
Name
Colour interpolation
Letter drawing in SCSS for pixel logos
Google burger arrow
Pure CSS Responsive tables
Sinusoidal goodness
A better loading spinner
Tippy-tappy-typer
CSS3D cube demo
FRAPS counter
Pure JS word cloud.
Create amazing love letters 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!