Linux terminal UI design using HTML, CSS and SVG

How to create a fancy linux terminal UI design using html, css and svg.

HTML is hypertext markup language. CSS is cascading style sheet. SVG is scalable vector graphics.

The code of linux terminal UI design :



<!Doctype html>
<html>
<head>
<title>Linux Terminal UI Design - SRCtube</title>
<style>
.terminal {width:700px;height:500px;border: 2px solid grey;border-radius:5px;background-color:black;}
.ribbon {width:700px;height:30px;border: 1px solid grey;border-radius:3px;background-color:grey;
padding-top:5px;padding-bottom:5px;}
.circle {float:left;width:20px;}
.terminal-title {color:white;padding-left:65px;}
.terminal-content { width:700px;color:white;padding-left:3px;padding-top:0px;float:left;margin-top:-110px;}
</style>
</head>
<body>
<div class='terminal'>
<div class='ribbon'>
<div class='circle' ><svg><circle cx="10" cy="10" r="5" fill="red" /></svg></div>
<div class='circle' ><svg><circle cx="10" cy="10" r="5" fill="yellow" /></svg></div>
<div class='circle' ><svg><circle cx="10" cy="10" r="5" fill="black" /></svg></div>
<div class='terminal-title' >SRCtube@Linux:~</div>
</div>
<div class='terminal-content'>SRCtube@Linux:~$ |</div>
</div>
</body>
</html>

Source Code on Github

Final Result of Linux terminal UI designed in HTML, CSS and SVG:


Final Result of Linux terminal UI designed in HTML, CSS and SVG

Read detailed tutorial in Arabic (Linux terminal UI design )


Like the video if you appreciate my work!
Subscribe so I can see you again in future comments!

Follow me to read our future blog posts by Click on Subscribe Above, or by follow ValueInBrief page on Facebook.
Comment via Facebook
0 Comment via Google

0 تعليقات:

Post a Comment