# Customized Bootstrap Classes for Fashionone.com Brand

This repository provides a set of customized Bootstrap classes that reflect the color scheme and design aesthetics of Fashionone.com. These classes allow users to apply the Fashionone.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 Fashionone.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, Fashionone.com also uses Libre Baskerville font family for some fancy headings, to use this font family, simple add .font-libre-baskerville in desired element.

# Customized CSS Classes

Here are some examples of custom css classes

##  Buttons

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

```
<button class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
```
Fashionone use another button, that is uniquley designed, to use that button, add .btn-custom-light class to that button just like this
```
<button type="button" class="btn-custom-light">Custom Brand Button</button>
```

## Typograpghy

To write any kind of text, simple use HTML5 standard tags for headings and paragraphs. These tags are already adopted with Fashionone.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 Fashionone.com brand color in headings or paraghraphs, just add .text-primary class:

```
<p class="text-primary">Text in Fashionone.com 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>
```