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.
Source Code on Github
Read detailed tutorial.
Like the video if you appreciate my work!
Subscribe so I can see you again in future comments!
check out more detailed tech posts on the new blog here!
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:
Read detailed tutorial.
Like the video if you appreciate my work!
Subscribe so I can see you again in future comments!
check out more detailed tech posts on the new blog here!
