Web-Site-Style-CSS @HTML @CSS

Installation :

1. Download CSS

2. Import/link CSS

/*Import React*/

import './style.css';

/*HTML*/

<link rel="stylesheet" href="style.css">

3. Add HTML Commands

---

HTML Commands :

Buttons

HTML Commands: /Button

<>
	<button class="btn"><span>BUTTON-defult</span></button>
	<button class="btn btn-primary"><span>BUTTON-Primary</span></button>
	<button class="btn btn-secondary"><span>BUTTON-secondary</span></button>
	<button class="btn btn-success"><span>BUTTON-success</span></button>
	<button class="btn btn-danger"><span>BUTTON-Primary</span></button>
	<button class="btn btn-warning"><span>BUTTON-secondary</span></button>
	<button class="btn btn-info"><span>BUTTON-success</span></button>
	<button class="btn btn-dark"><span>BUTTON-success</span></button>
<>

HTML Commands: /Button-Edge-Curve

<>
	<button class="btn btn-edge-curve"><span>BUTTON-defult</span></button>
	<button class="btn btn-edge-curve btn-primary"><span>BUTTON-Primary</span></button>
	<button class="btn btn-edge-curve btn-secondary"><span>BUTTON-secondary</span></button>
	<button class="btn btn-edge-curve btn-success"><span>BUTTON-success</span></button>
	<button class="btn btn-edge-curve btn-danger"><span>BUTTON-Primary</span></button>
	<button class="btn btn-edge-curve btn-warning"><span>BUTTON-secondary</span></button>
	<button class="btn btn-edge-curve btn-info"><span>BUTTON-success</span></button>
	<button class="btn btn-edge-curve btn-dark"><span>BUTTON-success</span></button>
<>

HTML Commands: /Button-Curve

<>
	<button class="btn btn-curve"><span>BUTTON-defult</span></button>
	<button class="btn btn-curve btn-primary"><span>BUTTON-Primary</span></button>
	<button class="btn btn-curve btn-secondary"><span>BUTTON-secondary</span></button>
	<button class="btn btn-curve btn-success"><span>BUTTON-success</span></button>
	<button class="btn btn-curve btn-danger"><span>BUTTON-Primary</span></button>
	<button class="btn btn-curve btn-warning"><span>BUTTON-secondary</span></button>
	<button class="btn btn-curve btn-info"><span>BUTTON-success</span></button>
	<button class="btn btn-curve btn-dark"><span>BUTTON-success</span></button>
<>

Cards

HTML Commands: /Card-Normal

<>
	<div class="box" style="width: 30%;">
		<h2>Lorem ipsum dolor sit amet.</h2>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam eveniet voluptates, error dicta natus sint quisquam amet doloremque placeat perferendis?</p>
	</div>
<>

HTML Commands: /Card-With-Link

<>
	<div class="box" style="width: 30%;">
		<h2>Lorem ipsum dolor sit amet.</h2>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam eveniet voluptates, error dicta natus sint quisquam amet doloremque placeat perferendis?</p>
		<a href="#">Link</a>
	</div>
<>

HTML Commands: /Card-With-Button

<>
	<div class="box" style="width: 30%;">
		<h2>Lorem ipsum dolor sit amet.</h2>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam eveniet voluptates, error dicta natus sint quisquam amet doloremque placeat perferendis?
		</p>
		<button class="btn btn-edge-curve btn-dark"><span>button</span></button>
	</div>
<>

HTML Commands: /Card-With-Button

<>
	<div class="box" style="width: 30%;">
		<img class="card-img" data-src="image" alt="image" data-holder-rendered="true" src="image.jpg">
		<h2>Lorem ipsum dolor sit amet.</h2>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam eveniet voluptates, error dicta natus sint quisquam amet doloremque placeat perferendis?
		</p>
		<button class="btn btn-edge-curve btn-dark"><span>button</span></button>
	</div>
<>

Cards

HTML Commands: /Card-Normal

<>
	<input type="text" name="inputdata" placeholder="Enter your input"/>
<>