Build a plan in css

Size
2,348 Kb
Views
30,360

How do I make an build a plan in css?

Build a plan in css.. What is a build a plan in css? How do you make a build a plan in css? This script and codes were developed by François Lesenne on 12 August 2022, Friday.

Build a plan in css Previews

Build a plan in css - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Build a plan in css</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="building">	<h1>Build a plan in css</h1>	<pre class="line"> ┌──── ───┬──── ───┬──── ───┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├──── ───┤ │ │ ┌───┤ ├──────┬─┘ └────┴ ──┤ │ │ │ │ │ │ ├──────┴───── ────┬── ───┤ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──── ────── ────┴─── ───┘	</pre>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Build a plan in css - Script Codes CSS Codes

*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
* { position: relative; margin: 0; padding: 0; border: 0 none; -webkit-transition: all .8s; -moz-transition: all .8s; transition: all .8s;
}
html,
body { width: 100%; height: 100%; background: #333; font-size: 18px;
}
.building { margin: 30px auto; padding-top: 5px; width: 760px; height: auto; background: #f2f2f2; font-family: monospace; color: #333; -webkit-box-shadow: 0px 0px 0 #bbb,1px 1px 0 #bbb,2px 2px 0 #bbb,3px 3px 0 #bbb,4px 4px 0 #bbb,5px 5px 0 #bbb,6px 6px 0 #bbb,7px 7px 0 #bbb,8px 8px 0 #bbb,9px 9px 0 #bbb,10px 10px 0 #bbb,11px 11px 0 #bbb,12px 12px 0 #bbb,13px 13px 0 #bbb,14px 14px 0 #bbb,15px 15px 0 #bbb,16px 16px 0 #bbb;; -moz-box-shadow: 0px 0px 0 #bbb,1px 1px 0 #bbb,2px 2px 0 #bbb,3px 3px 0 #bbb,4px 4px 0 #bbb,5px 5px 0 #bbb,6px 6px 0 #bbb,7px 7px 0 #bbb,8px 8px 0 #bbb,9px 9px 0 #bbb,10px 10px 0 #bbb,11px 11px 0 #bbb,12px 12px 0 #bbb,13px 13px 0 #bbb,14px 14px 0 #bbb,15px 15px 0 #bbb,16px 16px 0 #bbb;; box-shadow: 0px 0px 0 #bbb,1px 1px 0 #bbb,2px 2px 0 #bbb,3px 3px 0 #bbb,4px 4px 0 #bbb,5px 5px 0 #bbb,6px 6px 0 #bbb,7px 7px 0 #bbb,8px 8px 0 #bbb,9px 9px 0 #bbb,10px 10px 0 #bbb,11px 11px 0 #bbb,12px 12px 0 #bbb,13px 13px 0 #bbb,14px 14px 0 #bbb,15px 15px 0 #bbb,16px 16px 0 #bbb;
}
h1 { text-align: center; font-size: 1.8em; font-weight: bold; text-shadow: 0px 0px 0 #bbb,1px 1px 0 #bbb,2px 2px 0 #bbb,3px 3px 0 #bbb,4px 4px 0 #bbb,5px 5px 0 #bbb,6px 6px 0 #bbb,7px 7px 0 #bbb,8px 8px 0 #bbb,9px 9px 0 #bbb,10px 10px 0 #bbb,11px 11px 0 #bbb,12px 12px 0 #bbb,13px 13px 0 #bbb,14px 14px 0 #bbb,15px 15px 0 #bbb,16px 16px 0 #bbb;
}
.line { padding: 5px; font-size: 38px; font-weight: normal; line-height: .8em; text-shadow: 5px 5px 1px #aaa; text-shadow: 0px 0px 0 #ccc,1px 1px 0 #ccc,2px 2px 0 #ccc,3px 3px 0 #ccc,4px 4px 0 #ccc,5px 5px 0 #ccc,6px 6px 0 #ccc,7px 7px 0 #ccc,8px 8px 0 #ccc,9px 9px 0 #ccc,10px 10px 0 #ccc,11px 11px 0 #ccc,12px 12px 0 #ccc,13px 13px 0 #ccc,14px 14px 0 #ccc,15px 15px 0 #ccc,16px 16px 0 #ccc; cursor: crosshair;
}
.line:hover { text-shadow: 0px 0px 0 #bbb,1px 1px 0 #bbb,2px 2px 0 #bbb,3px 3px 0 #bbb,4px 4px 0 #bbb,5px 5px 0 #bbb,6px 6px 0 #bbb,7px 7px 0 #bbb,8px 8px 0 #bbb,9px 9px 0 #bbb,10px 10px 0 #bbb,11px 11px 0 #bbb,12px 12px 0 #bbb,13px 13px 0 #bbb,14px 14px 0 #bbb,15px 15px 0 #bbb,16px 16px 0 #bbb;
}

Build a plan in css - Script Codes JS Codes

// Build a plan in css
// Inspired: http://codepen.io/rafaelcastrocouto/pen/CexHJ
// Coding by François Lesenne http://francoislesenne.xyz
Build a plan in css - Script Codes
Build a plan in css - Script Codes
Home Page Home
Developer François Lesenne
Username francoislesenne
Uploaded August 12, 2022
Rating 4.5
Size 2,348 Kb
Views 30,360
Do you need developer help for Build a plan in 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!

François Lesenne (francoislesenne) Script Codes
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!