Drawing a Terminal with CSS

Developer
Lachlan Campbell
Size
3,185 Kb
Views
16,192
  1. Drawing a Terminal with CSS Previews
  2. Drawing a Terminal with CSS HTML Codes
  3. Drawing a Terminal with CSS CSS Codes
  4. Drawing a Terminal with CSS JS Codes

How do I make an drawing a terminal with css?

On the Kloudless API page I saw an image (the second one in the Pen). I've recreated it with CSS for practice.. What is a drawing a terminal with css? How do you make a drawing a terminal with css? This script and codes were developed by Lachlan Campbell on 24 September 2022, Saturday.

Drawing a Terminal with CSS Previews
IQ Test

Drawing a Terminal with CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drawing a Terminal with CSS</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Code+Pro:600'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="description black top">Drawn with CSS:</h1>
<div class="spacer"></div>
<div class="window"> <div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="text_container"> <span class="blue">$ <span class="black"> curl<br />https://api.kloudless.com/v1/accounts/9001/fi<br />les/recent -H "Authorizantion: Token 1Ptdou8U<br />X082uuYTo0E4ioh3"</span><br /> <p class="muted">{</p> <p class="muted ione">"count": 100,</p> <p class="muted ione">"files": [</p> <p class="muted itwo">{</p> <span class="muted ithree"> "id": "riJy7tQBxA67",<br /> </span> <span class="muted code ithree"> "name": "ubuntu-desktop-amid64.iso", </span> </div>
</div>
<h1 class="description black">The original image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/static-assets.kloudless.com/static/api_codesnippet%402x.png"> <script src="js/index.js"></script>
</body>
</html>

Drawing a Terminal with CSS - Script Codes CSS Codes

.window { width: 496px; height: 337px; margin-left: auto; margin-right: auto; border-radius: 4px; background: #C3D0DE; box-shadow: 0px 2px 0px 0px #E5E5E5;
}
.flex { width: 50px; padding: 10px 8px 8px 8px; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between;
}
.item { background: #7D8CA8; width: 12px; height: 12px; border-radius: 8px; display: inline-block;
}
.text_container { margin: 6px; padding: 12px 18px 15px 18px; width: 446px; height: 260px; background: white; font: 600 1.02em "Source Code Pro", monospace; color: #222; padding-top: 19px; width: 450px; line-height: 1.7em; letter-spacing: -0.31px;
}
p { display: block; margin: 0;
}
.blue { color: #2261E8;
}
.black { color: #222;
}
.muted { color: #6C819A;
}
.ione { margin-left: 20px;
}
.itwo { margin-left: 40px;
}
.ithree { margin-left: 60px;
}
img { width: 496px; margin: auto; display: block;
}
.description { font-size: 1.2em; font-family: "Source Code Pro", monospace; font-weight: 600;
}

Drawing a Terminal with CSS - Script Codes JS Codes

// I was on the Kloudless API page (https://developers.kloudless.com/) when I saw the image (the second one in the Pen). I thought, "Hey! I bet I could draw that with CSS!"
// So here I am doing it. Enjoy.
Drawing a Terminal with CSS - Script Codes
Drawing a Terminal with CSS - Script Codes
Home Page Home
Developer Lachlan Campbell
Username lachlanjc
Uploaded September 24, 2022
Rating 3
Size 3,185 Kb
Views 16,192
Do you need developer help for Drawing a Terminal with CSS?

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!

Lachlan Campbell (lachlanjc) Script Codes
Name
Noodles Newsletter Template
Bananner
A Pen by Lachlan Campbell
Merriam-Webster Dictionary
Recipe - Banana Walnut Cake
Noodles Tags
Social Profiles
Pure CSS Accordion Menu
Action Menu
Alan Turing
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!