## Royalwine - Documentation

### Wine HTML Template

- 1. About Royalwine
- 2. Files & How to use
- 3. Custom template
  - 3.1. Header
  - 3.2. Change background
  - 3.3. Color
  - 3.4. Form
  - 3.5. Button
  - 3.6. Font
  - 3.7. Icons
  - 3.8. Change location Google map
- 4. Sources

## 1. About Royalwine

Royalwine is a HTML5 Template built using Bootstrap framword and HTML5 and CSS3 technology suilable for wine shop, bar, restaurant website . It's compatible with all major web browsers and works nicely on smartphones, tablet, PCs and desktops.

### Features

- - 22 Home pages
- - HTML5 and CSS3
- - Bootstrap 3.x
- - Responsive design
- - Browser Compatibility
- - Well Documented
- - Clean code
- - W3C Valid
- - Easy to Customization
- - Google Fonts
- - Google Map
- - Awesome font icons

## 2. Files & How to use

After download and unzip you'll find the following directories and files. You can edit html files with your favourite editor or view in web browser from your computer that don't need an internet connection.

royalwine_1.0.zip
- - HTML
    - home_1.html
    - home_2.html
    - home_3.html
    - home_4.html
    - about.html
    - product_1.html
    - product_2.html
    - product_3.html
    - product_details.html
    - cart.html
    - checkout.html
    - blog_1.html
    - blog_2.html
    - blog_3.html
    - blog_details.html
    - register.html
    - login.html
    - error_404.html
    - event.html
    - event_details.html
    - contact.html
  - CSS
    - Owl-coursel
      - owl-coursel.css
      - owl.theme.css
      - owl.transitionsl.css
    - magnific-popup
      - magnific-popup.css
    - jquery
      - jquery_ui.css
    - bootstrap
      - bootstrap.min.css
    - animate.css
    - font-awesome.min.css
    - css.css
    - style.css
  - JS
    - Owl-coursel
      - owl-coursel.js
    - magnific-popup
      - jquery.magnific-popup.min.js
    - jquery
      - jquery_ui.js
    - bootstrap
      - bootstrap.min.js
    - classie.js
    - script.css
  - Images
    - logo-res.png
    - img-demo-1.png
    - img-demo-2.png
  - Fonts
    - fontAwesome.otf
    - fontawesome-webfont.eot
    - fontawesome-webfont.svg
    - fontawesome-webfont.ttf
    - fontawesome-webfont.woff
    - fontawesome-webfont.woff2
- Documentation

## 3. Custom Template

## 3.1. Header

Header default :

    <header></header>

Header-fixed : Fiexd menu on top

    <header class="header-fixed"></header>

## 3.2. Change background image

Open style.css file and find width keyword "bg-image-1". You will change background by your image( remove background:#555 )

    .bg-image-1{
    	background-image:url('../images/wine-186018_960_720.png');
    	background:#555; /*remove this line*/
    	background-repeat:no-repeat;
    	background-size:cover;
    }
    .bg-image-2{
    	background-image:url('../images/bottle-50574_960_720.jpg');
    	background:#555; /*remove this line*/
    	background-repeat:no-repeat;
    	background-size:cover;
    }
    .bg-image-3{
    	background-image:url('../images/bottle-50574_960_720.jpg');
    	background:#555; /*remove this line*/
    	background-repeat:no-repeat;
    	background-size:cover;
    }
    .bg-image-4{
    	background-image:url('../images/wine-54ttt1922_960_720.jpg');
    	background:#555; /*remove this line*/
    	background-repeat:no-repeat;
    	background-size:cover;
    }
    .bg-image-5{
    	background-image:url('../images/wine-1562157_960_720.jpg');
    	background:#555; /*remove this line*/
    	background-repeat:no-repeat;
    	background-size:cover;
    }
    .bg-image-6{
    	background-image:url('../images/event-3.jpg');
    	background:#555; /*remove this line*/
    	background-repeat:no-repeat;
    	background-size:cover;
    }
    .bg-image-7{
    	background-image:url('../images/champagne-697347_960_720.jpg');
    	background:#555; /*remove this line*/
    	background-repeat:no-repeat;
    	background-size:cover;
    }
    .bg-image-8{
    	background-image:url('../images/christopher-john-pratt-227357.jpg');
    	background:#555; /*remove this line*/
    	background-repeat:no-repeat;
    	background-size:cover;
    }

## 3.3. Color

Main color use in template :#feda00, #dc4c46

bg-540b23
bg-005960
bg-dc4c46
bg-fbf9f2

## 3.4. Form

You can use .form-item to custom input, textarea, select option

Input Sizing:

## 3.5. Button

ht-btn ht-btn-1x ht-btn ht-btn-2x ht-btn ht-btn-3x ht-btn ht-btn-4x

## 3.6. Font family

All Google Fonts are open source. This means that you are free to use them in your template. You can find more fonts here https://www.google.com/fonts.

Link

      @import url("https://fonts.googleapis.com/css?family=Cinzel:400,700|Montserrat:200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Playfair+Display:400,700|Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet"");

How to use

    font-family: 'Roboto', sans-serif; font-family: 'Montserrat', sans-serif;font-family: 'Cinzel', serif;font-family: 'Playfair Display', serif;

## 3.7. Icons

Font Awesome is free to use. You can visit page http://fontawesome.io/ to view details. You can add style to <i> element to change size, color, rotate

###### Link

      <link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">

###### How to use

    <i class="fa fa-envelope-o m-r-5"></i>

## 3.8. Change location google map

      <script async defer src="http://maps.googleapis.com/maps/api/js?key=Your key&callback=initialize"></script>		<script>		function initialize()		{			var myLallgn={lat: 40.80029619806279, lng: -73.30284118652344};			var mapDiv = document.getElementById('googlemap');			var map = new google.maps.Map(mapDiv, {				center: myLallgn,				zoom: 12			});			var image = 'Your image;			var beachMarker = new google.maps.Marker({				position: myLallgn,				map: map,				icon: image,				title: 'Your company name'			});		}		</script>

###### API code

You must first create an google account

1. Open link https://console.developers.google.com/flows/enableapi?apiid=webmasters&credential=client_key

2. Press "Continue" to create project

3. Press "go to credentials"

4. On the left you click credentials -> click create credentials-> on top downlown you select "API key" 1 popub display you click close

5. copy API paste into "Your key"

`<script async defer src="http://maps.googleapis.com/maps/api/js?key=Your key&callback=initialize"></script>`

Position (lat and lng)

You open https://www.gps-coordinates.net/ select your location after paste lat and lng into code

`var myLallgn={lat: 40.80029619806279, lng: -73.30284118652344};`

Logo

`var image = 'Your logo';`

Title

`title: 'Your company name'`

## 4. Source

- Libraries Jquery, Bootstrap 3.x
- PluginsOwlCarousel, Google map, Classie, magnific-popup
- ImagesPixabay.com
- Fonts Google font
- IconsAwesome font icons