Pure CSS Terminal

Developer
Shak Daniel
Size
2,951 Kb
Views
32,384
  1. Pure CSS Terminal Previews
  2. Pure CSS Terminal HTML Codes
  3. Pure CSS Terminal CSS Codes

How do I make an pure css terminal?

Testing my self by creating stuff with the least amount of HTML elements.. What is a pure css terminal? How do you make a pure css terminal? This script and codes were developed by Shak Daniel on 24 September 2022, Saturday.

Pure CSS Terminal Previews
IQ Test

Pure CSS Terminal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Terminal</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="terminal"> <p>Hello World!</p>
</div>
</body>
</html>

Pure CSS Terminal - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Fira+Sans:300");
html,
body { width: 100%; height: 100%; overflow: hidden; background: #9664e1; font-family: 'Fira Sans', sans-serif; font-size: 12px;
}
*,
*:before,
*:after { box-sizing: border-box;
}
.terminal,
.terminal:before,
.terminal:after,
p:after { position: absolute;
}
.terminal { height: 80vh; width: 80vw; margin: 10vh 10vw; padding: 26px 4px 4px; border-radius: 5px; background: -webkit-linear-gradient(#f6f6f6, #d3d3d3 20px, #7e7e7e 20px, #7e7e7e 21px, #393456 21px); background: linear-gradient(#f6f6f6, #d3d3d3 20px, #7e7e7e 20px, #7e7e7e 21px, #393456 21px); box-shadow: 0 0 0 1px rgba(0,0,0,0.25); -webkit-transition: all 0.5s ease; transition: all 0.5s ease;
}
.terminal:before { content: " "; width: 10px; height: 10px; margin: -20px 0 0 5px; border-radius: 5px; background: #fc625d; box-shadow: 0 0 0 1px #de413e, 15px 0 #fec041, 15px 0 0 1px #dda035, 30px 0 #35cc4b, 30px 0 0 1px #28aa36;
}
.terminal:after { width: 100%; content: "Pure CSS Terminal"; top: 0; text-align: center; color: #4c4c4c; line-height: 20px;
}
p { color: #fff;
}
p:before { content: "$"; margin-right: 8px; opacity: 0.5; line-height: 18px;
}
p:after { -webkit-animation: blink 1s linear 1s infinite; animation: blink 1s linear 1s infinite; content: " "; width: 8px; height: 18px; margin-left: 1px; background: #fec041;
}
@-webkit-keyframes blink { 0% { background: rgba(254,192,65,0); } 50% { background: rgba(254,192,65,0); } 51% { background: #fec041; } 100% { background: #fec041; }
}
@keyframes blink { 0% { background: rgba(254,192,65,0); } 50% { background: rgba(254,192,65,0); } 51% { background: #fec041; } 100% { background: #fec041; }
}
Pure CSS Terminal - Script Codes
Pure CSS Terminal - Script Codes
Home Page Home
Developer Shak Daniel
Username shakdaniel
Uploaded September 24, 2022
Rating 4.5
Size 2,951 Kb
Views 32,384
Do you need developer help for Pure CSS Terminal?

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!

Shak Daniel (shakdaniel) Script Codes
Name
Ninja Zoom Nav
Fancy menu toggle
Animated Logo
Prescreen
Applying a CSS and SVG mask
Drag -n- Blur
A Pen by Shak Daniel
Parallax.Js Test
Use a finger
My CSS Logo
Create amazing sales emails 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!