# Customized Bootstrap Classes for Chinesepod.com Brand

This repository provides a set of customized Bootstrap classes that reflect the color scheme and design aesthetics of Chinesepod.com. These classes allow users to apply the Chinesepod.com style by simply using the standard Bootstrap class names.

## Getting Started

To utilize these custom classes, include the Bootstrap 5.3.2 CSS file in your HTML:

```
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
```
## Font Family

In general Chinesepod.com uses Roboto font family and it's google link is already added in header. All the content available in body tag will automatically use Roboto font family by default. Apart from Roboto, Chinesepod.com also uses Roboto Slab font family for some fancy headings, to use this font family, simple add .roboto-slab in desired element.

# Customized CSS Classes

Here are some examples of custom css classes

##  Buttons

The .btn-primary, btn-outline-primary, .btn-danger and .btn-outline-danger CSS classes has been customized to reflect the primary and dark button style of Chinesepod.com:

```
<button type="button" class="btn btn-primary">This is primary button</button>
<button type="button" class="btn btn-outline-primary">This is primary outline button</button>
<button type="button" class="btn btn-danger">This is danger button</button>
<button type="button" class="btn btn-outline-danger">This is danger outline button</button>
```

## Typograpghy

To write any kind of text, simple use HTML5 standard tags for headings and paragraphs. These tags are already adopted with Chinesepod.com font guidelines:

```
<h1>This is a heading H1</h1>
<h2>This is a heading H2</h2>
<h3>This is a heading H3</h3>
<h4>This is a heading H4</h4>
<h5>This is a heading H5</h5>
<h6>This is a heading H6</h6>
<p>This paragrapgh is going to be amazing, with this new brand format</p>
```

To add Chinesepod.com brand color in headings or paraghraphs, just add .text-primary or .text-danger class:

```
<p class="text-primary">Text in blue color</p>
<p class="text-danger">Text in red color</p>
```

**Pre tag**

```
<pre>
Jonathan Morton, Esq.
Morton & Associates LLP
246 West Broadway
New York NY 10013
United States
</pre>
```

## Links

```
<a href="#">This is a link, test it.</a>
```
## List Items

```
<ul>
  <li>An active item</li>
  <li>A second item</li>
  <li>A third item</li>
  <li>A fourth item</li>
  <li>And a fifth one</li>
</ul>
```

## Forms

To add forms in webpage, simply use bootstrap forms:

```
<div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
```