Skip to content

Instantly share code, notes, and snippets.

@Sh00k-ThaD3v

Sh00k-ThaD3v/css-generator-tool.markdown

Created February 2, 2023 07:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Sh00k-ThaD3v/abf534e0f63d2bc43a66056dc81987d2 to your computer and use it in GitHub Desktop.
Save Sh00k-ThaD3v/abf534e0f63d2bc43a66056dc81987d2 to your computer and use it in GitHub Desktop.
Download ZIP
CSS GENERATOR TOOL
Raw
index.html
<body>
<div class="contatiner">
<header>
<div class="section">
<div class="box">
<h1>The Best <span class="borderline">CSS GENERATOR</span> Tools</h1>
<p><span class="spann">CSS to Get Your Creativity Flowing</span> <span style="border-right:none;" class="spann">By Jaimin patel</span> </p>
</div>
</div>
</header>
<!-- ---- header part over here ------ -->
<main>
<div class="section" id="section-id">
<div class="row">
<div class="whiteboard" id="background-change">
<div class="input-aliment" id="box_border">
<input class="input-type" type="text" name="input" placeholder="Text Over Here" id="text-color-change">
</div>
</div>
<!-- --- White bord over here --- -->
<div class="navmenu">
<div class="menu">
<!-- --- BACKGROUND --- -->
<div class="menu-items">
<button class="btn" onclick="document.getElementsByName('input')[0].placeholder = 'Background Change';">Background</button>
<select onchange="Background_change(this)" class="btn-ops">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<!-- --- TEXT COLOR --- -->
<div class="menu-items">
<button class="btn" onclick="document.getElementsByName('input')[0].placeholder = 'Text Color';">Text Color</button>
<select onchange="text_color_change(this)" class="btn-ops">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<!-- --- Box Borde --- -->
<div class="menu-items">
<button class="btn" onclick="document.getElementsByName('input')[0].placeholder = 'Box Border';">Box Border</button>
<div class="menucolumitem">
<select class="btn-ops" id="border-width">
<option value="5px">5</option>
<option value="10px">10</option>
<option value="15px">15</option>
<option value="20px">20</option>
<option value="25px">25</option>
<option value="30px">30</option>
<option value="35px">35</option>
<option value="40px">40</option>
<option value="45px">45</option>
<option value="50px">50</option>
</select>
<select class="btn-ops" id="border-type">
<option value="solid">Solid</option>
<option value="dashed">Dashed</option>
<option value="doted">Doted</option>
</select>
<select onchange="box_border(this)" class="btn-ops">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- --- FONT SIZE --- -->
<div class="menu-items">
<button class="btn" onclick="document.getElementsByName('input')[0].placeholder = 'Font Size';">Font Size</button>
<select onchange="fontsizedata(this)" class="btn-ops" id="box-id">
<option value="5px">5</option>
<option value="10px">10</option>
<option value="15px">15</option>
<option value="20px">20</option>
<option value="25px">25</option>
<option value="30px">30</option>
<option value="35px">35</option>
<option value="40px">40</option>
<option value="45px">45</option>
<option value="50px">50</option>
</select>
</div>
<!-- --- BOX SHADOW --- -->
<div class="menu-items">
<button class="btn" onclick="document.getElementsByName('input')[0].placeholder = 'Box Shadow';">Box Shadow</button>
<select onchange="backchange(this)" class="btn-ops">
<option value="5px 10px">Dark Solid</option>
<option value="5px 10px #888888">Gray Solid</option>
<option value="5px 10px red">Red Solid</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- ---- section part OVER here ------ -->
</main>
<footer>
<div class="footcolor"></div>
<div class="footnote">
<div>
<span class="ftrcredit">©Copyright 2022 CSS Generator Made in India</span>
</div>
</div>
</footer>
</div>
</body>
Raw
script.js
function text_color_change(e)
{
console.log(e.value)
document.getElementById('text-color-change').style.color = e.value
}
function Background_change(e)
{
console.log(e.value)
document.getElementById('background-change').style.background = e.value
}
function box_border(e)
{
var clr = e.value
var tempw = document.getElementById('border-width').value
var tempt = document.getElementById('border-type').value
document.getElementById('text-color-change').style.border = tempw + " " + tempt + " " +clr
}
function fontsizedata(e)
{
console.log(e.value)
document.getElementById('text-color-change').style.fontSize = e.value
}
function fontsize(e)
{
console.log(value)
document.getElementsByClassName('text-color-change').innerHTML = "FONT SIZE"
}
function backchange(e)
{
document.getElementById('box_border').style.boxShadow = e.value
}
Raw
style.css
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
.contatiner{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2nbzg-l8xktnVolXYucIRq6VyTJh6zBDFmBxgbEdt5e_CktmTxIOs6WqVKMR0wo05MBrku_bX3Eqpg-z9ENO8V-lvVbOzBoM7IqDY-Fel7N_ciF5IMRz0WB6XaNhchRomRCuiQ55PaR7W-Kd9H0Q7aDe1rSZ8EQ9-jF4iY-WA9fddLA1oePHAZYu7/s1920/CSSGenerator.png);
width: 100%; height: 100%;
background-position: cover;
background-repeat: no-repeat;
background-size: cover;
}
.section{
margin: 0 5rem;
padding-top: 3.5rem;
}
.box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box h1{
font-family: proxima-nova,sans-serif;
font-size:4rem;
font-weight: 700;
color: #1c0950;
padding-bottom: 2rem;
}
.borderline{
border-bottom:5px solid #1c0950;
color: #e1ab03;
}
.spann{
border-right: 2px solid #1c0950;
font-family: proxima-nova,sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
color: rgba(28,9,80,.5);
padding: 0 1rem 0 1rem;
margin-right: 1rem;
}
/* <!-- ---- header part over here ------ --> */
/* <!-- ---- Main part start here ------ --> */
.row{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 3%;
}
#section-id{
padding-top: 2rem;
}
.whiteboard{
width: 60%; height: 450px;
background-color: #1c0950;
margin: 0 0.50rem;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.input-aliment{
width: 80%; height: 30%;
background-color: #fff;
border-radius: 9999px;
border: 5px solid #1c0950f2;
-webkit-box-shadow: 10px 10px 14px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 14px -11px rgba(0,0,0,0.75);
box-shadow: 10px 10px 14px -11px rgba(0,0,0,0.75);
}
.input-type{
width: 100%; height: 100%;
background-color: #1c0950f2;
color: #0bc496;
font-weight: 700;
text-align: center;
font-size: 2rem;
border: #1c0950;
border-radius: 9999px;
}
.navmenu{
width: 30%; height: 450px;
background-color: #0bc496;
color: rgba(28,9,80,1);
font-family: proxima-nova,sans-serif;
border-radius: 5px;
}
.menu{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.menu-items{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.menucolumitem{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width:100%;
}
.btn{
font-family: proxima-nova,sans-serif;
text-transform:capitalize;
font-weight: 600;
font-size: 1.25rem;
color: #fff;
background-color: transparent;
width: 100%;
padding: 12px;
border: none;
text-align: center;
}
.btn-ops{
width: 100%;
padding: 12px;
text-align: center;
font-weight: 600;
color: #1c0950;
font-family: proxima-nova,sans-serif;
font-size: 14px;
border: none;
}
footer{
width: 100%;
background-color: #0bc496;
height: 55PX;
margin-top: 10%;
}
.footcolor{
width: 100%; height: 10px;
background-color: #500909;
}
.footnote{
display: flex;
justify-content: center;
align-items: center;
padding-top: 1rem;
}
.ftrcredit{
color: #1c0950;
font-family: proxima-nova,sans-serif;
margin-top: auto;
font-size: 1rem;
font-weight: 600;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment