├── .gitignore
├── assets
    ├── webfonts
    │   ├── fa-brands-400.eot
    │   ├── fa-brands-400.ttf
    │   ├── fa-solid-900.eot
    │   ├── fa-solid-900.ttf
    │   ├── fa-solid-900.woff
    │   ├── fa-brands-400.woff
    │   ├── fa-brands-400.woff2
    │   ├── fa-regular-400.eot
    │   ├── fa-regular-400.ttf
    │   ├── fa-regular-400.woff
    │   ├── fa-regular-400.woff2
    │   └── fa-solid-900.woff2
    ├── packages
    │   └── tailwind
    │   │   └── row-files
    │   │       └── tailwind.css
    └── demo
    │   ├── jquery-google-sheet-to-json.js
    │   ├── style.css
    │   └── script.js
├── package.json
├── LICENSE
├── README.md
└── bootstrap
    ├── eproduct-payment
        └── index.html
    ├── copyrights
        └── index.html
    ├── eproduct-list
        └── index.html
    ├── hero-headers
        └── index.html
    ├── call-to-actions
        └── index.html
    ├── hero-headers-small
        └── index.html
    ├── numbers
        └── index.html
    ├── schedule
        └── index.html
    ├── rich-contents
        └── index.html
    ├── buy-ticket-form
        └── index.html
    ├── client-logos
        └── index.html
    └── about-us
        └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | **.DS_Store
3 | assets/.DS_Store
4 | 


--------------------------------------------------------------------------------
/assets/webfonts/fa-brands-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-brands-400.eot


--------------------------------------------------------------------------------
/assets/webfonts/fa-brands-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-brands-400.ttf


--------------------------------------------------------------------------------
/assets/webfonts/fa-solid-900.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-solid-900.eot


--------------------------------------------------------------------------------
/assets/webfonts/fa-solid-900.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-solid-900.ttf


--------------------------------------------------------------------------------
/assets/webfonts/fa-solid-900.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-solid-900.woff


--------------------------------------------------------------------------------
/assets/webfonts/fa-brands-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-brands-400.woff


--------------------------------------------------------------------------------
/assets/webfonts/fa-brands-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-brands-400.woff2


--------------------------------------------------------------------------------
/assets/webfonts/fa-regular-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-regular-400.eot


--------------------------------------------------------------------------------
/assets/webfonts/fa-regular-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-regular-400.ttf


--------------------------------------------------------------------------------
/assets/webfonts/fa-regular-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-regular-400.woff


--------------------------------------------------------------------------------
/assets/webfonts/fa-regular-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-regular-400.woff2


--------------------------------------------------------------------------------
/assets/webfonts/fa-solid-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EasyFrontendHQ/html-bootstrap-components/HEAD/assets/webfonts/fa-solid-900.woff2


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bootstrapv5",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {},
 7 |   "keywords": [],
 8 |   "author": "",
 9 |   "license": "ISC",
10 |   "devDependencies": {}
11 | }
12 | 


--------------------------------------------------------------------------------
/assets/packages/tailwind/row-files/tailwind.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | /* @layer components {
 6 |   .btn-primary {
 7 |     @apply bg-blue-600 hover:bg-opacity-90 text-white font-bold border border-blue-600 py-3 px-7 rounded transition;
 8 |   }
 9 |   .btn-outline {
10 |     @apply bg-transparent hover:bg-blue-600 border border-blue-600 hover:text-white py-2 px-5 rounded transition;
11 |   }
12 |   .section-padding {
13 |     @apply py-[60px] md:py-[100px];
14 |   }
15 |   .form-control {
16 |     @apply min-h-[42px] leading-[26px] bg-white text-black focus:outline-none;
17 |   }
18 | } */
19 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | EasyFrontend LICENSE
 2 | 
 3 | # Terms Of Use
 4 | 
 5 | Welcome to EasyFrontend! By accessing and downloading any freebies provided by EasyFrontend, you are agreeing to the following terms and conditions. Please read them carefully.
 6 | 
 7 | # Freebies Usage
 8 | 
 9 | All freebies available on EasyFrontend are free for both personal and commercial use. This encompasses a wide range of digital projects such as web design, app design, online advertising, and commercial WordPress themes. You are allowed to modify these resources to suit your project needs.
10 | 
11 | # Restrictions
12 | 
13 | While you have the freedom to use the freebies, you do not possess the right to resell, sublicense, or claim ownership of them in any form. This explicitly means that you are prohibited from selling the freebies themselves. The freebies offered on EasyFrontend are exclusive to this website and cannot be distributed or made available on any other platform.
14 | 
15 | # Attribution
16 | 
17 | We greatly appreciate attribution. If you wish to promote these freebies on your website, please refrain from directly hosting the files for free download. Instead, provide a link directing visitors to the specific page on our website where they can easily access the files. Sharing our website with your friends and peers is a wonderful way to support us and our work.
18 | 
19 | # Acknowledgment and Compliance 
20 | 
21 | By using the freebies provided by EasyFrontend, you acknowledge that you have read, understood, and agreed to abide by these terms. Failing to comply with these terms and conditions may result in the termination of your rights to use the freebies.
22 | 
23 | # Contact Us
24 | 
25 | If you have any questions, concerns, or inquiries about the licensing or usage of the freebies, please don’t hesitate to get in touch with us at support@EasyFrontend.com. We’re here to assist you!
26 | 
27 | Thank you for choosing EasyFrontend. We hope our freebies enhance your creative projects and contribute to your success.
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | #EasyFrontend - HTML Bootstrap UI Components
 2 | 
 3 | You can contribute to components. <br />
 4 | Check the description below for the contribution process. 
 5 | <br /><br />
 6 | 
 7 | [![EasyFrontend Editor](https://assets.easyfrontend.com/tailwind/images/banner/easyfrontend_at1.png)](http://easyfrontend.com/)
 8 | 
 9 | [![EasyFrontend Editor](https://assets.easyfrontend.com/tailwind/images/banner/easyfrontend_at2.png)](http://easyfrontend.com/)
10 | 
11 | [![EasyFrontend Editor](https://assets.easyfrontend.com/tailwind/images/banner/easyfrontend_at3.png)](http://easyfrontend.com/)
12 | 
13 | 
14 | Enhance your app with [EasyFrontend](https://easyfrontend.com) pre-build [Bootstrap v5](https://easyfrontend.com/bootstrap), [Tailwind CSS](https://easyfrontend.com/tailwind), [React JS](https://easyfrontend.com/react-js)
15 | components for designing a modern website.
16 | 
17 | ## Website for more free components
18 | 
19 | 
20 | 
21 | 
22 | Visit: [https://easyfrontend.com](https://easyfrontend.com)
23 | <br /> <br />
24 | 
25 | ![how to contribute](https://assets.easyfrontend.com/uploads/block-banner/contribute.png)
26 | 
27 |  To contribute to this repository follow those steps. 
28 |  1. Fork this repository
29 |  2. Create a new branch <br />
30 |  name it following structure  `branch name contribute/[component_name/issue/feature/anything]` <br />  (If you add more than one components create multiple branchs)
31 |  3. Add the component to a category
32 |  4. Create a pull request
33 |  5. mention what you have added and design inspiration
34 |  6. Will check the component and publish it to EasyFrontend website
35 | 
36 | 
37 | ## More Repositories from EasyFrontend
38 | 
39 | - [Bootstrap v5 Components](https://github.com/EasyFrontend-com/html-bootstrap-components)
40 | - [Bootstrap with React JS Components](https://github.com/EasyFrontend-com/react-bootstrap-components)
41 | - [Tailwind CSS Components](https://github.com/EasyFrontend-com/html-tailwindcss-components)
42 | - [Tailwind with React JS Components](https://github.com/EasyFrontend-com/react-tailwindcss-components)
43 | 
44 | 


--------------------------------------------------------------------------------
/assets/demo/jquery-google-sheet-to-json.js:
--------------------------------------------------------------------------------
 1 | // xx -- review best practices for jquery plugins
 2 | ( function ( $, window, document, undefined ) {
 3 | 	'use strict';
 4 | 
 5 | 	// take a row in googl-ese json and return it as name:value pairs
 6 | 	function rowToObject(cell){
 7 | 
 8 | 		var returner = {};
 9 | 
10 | 		var properties = Object.getOwnPropertyNames(cell);
11 |     // sorting is important for catching numbered properties below
12 |     // name sure the un-numbered name is first
13 | 		properties.sort();
14 | 
15 | 		properties.forEach(function(key){
16 | 
17 | 			var val = cell[key].$t;
18 | 
19 | 			// don't bother with empty values
20 | 			// which also means properties will not be set for empty values!
21 | 			if(val === '') return;
22 | 
23 | 			if(key.substring(0,4) === 'gsx$'){
24 | 				var name = key.substr(4);
25 | 
26 | 				// the only tricky thing is to turn the property value into an array
27 | 				// if the property name has variations that end in a number
28 | 				// Address, Address1, Address2... etc.
29 | 				var num = name.charAt(name.length - 1);
30 | 				if(/^\d+$/.test(num)){ // indexed propery
31 | 					name = name.substr(0, name.length - 1);
32 | 					var arr = returner[name];
33 |           // if arr is not an array, but exists its the unnumbered value: ex. Address
34 |           // replace its position with an array and push it in first
35 | 					if(!Array.isArray(arr)){
36 | 						returner[name] = [];
37 | 						if(arr) returner[name].push(arr);
38 | 					}
39 | 					returner[name].push(val);
40 | 				} else returner[name] = val; // the basic case for a name/value pair
41 | 			}
42 | 		});
43 | 		return returner;
44 | 	}
45 | 
46 | 	$.googleSheetToJSON = function googleSheetToJSON(id, worksheet){
47 | 
48 | 		var deferred = new $.Deferred();
49 | 		var url = [
50 | 			'https://spreadsheets.google.com/feeds/list',
51 | 			id,
52 | 			(worksheet || 'od6'), // od6 is the default id of the first worksheet
53 | 			'public/values?alt=json&callback=?'].join('/');
54 | 
55 | 		$.getJSON(url)
56 | 			.done(function(data){
57 | 				// try to fail w/ info if we cant get any data from the sheets
58 | 				// very errorable these sheets, using a spacer row for instance
59 | 				// under the headers and boom! no data. meh.
60 | 				if(!data.feed) throw new Error('Unable to retrieve google spreadsheet JSON data for ' + url);
61 | 				if(!data.feed.entry) throw new Error('Google spreadsheet seems empty for ' + url);
62 | 				deferred.resolve(data.feed.entry.map(rowToObject));
63 | 			})
64 | 			.fail(deferred.reject);
65 | 
66 | 		return deferred.promise();
67 | 	};
68 | 
69 | } )( jQuery, window, document );


--------------------------------------------------------------------------------
/assets/demo/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background: #fff3d8 !important;
  3 |   padding-top: 62px;
  4 | }
  5 | .demo-top-navbar {
  6 |   background-color: #fff;
  7 |   position: fixed;
  8 |   top: 0;
  9 |   left: 0;
 10 |   right: 0;
 11 |   padding: 6px 32px;
 12 |   z-index: 1111;
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: center;
 16 |   box-shadow: 0 8px 27px rgba(0, 0, 0, 0.13);
 17 | }
 18 | 
 19 | .demo-top-navbar div {
 20 |   display: flex;
 21 | }
 22 | 
 23 | .demo-top-navbar button,
 24 | .demo-top-navbar a {
 25 |   border: 1px solid #ccc;
 26 |   padding: 0;
 27 |   border-radius: 50px;
 28 |   margin-right: 6px;
 29 | 
 30 |   display: inline-flex;
 31 |   text-decoration: none;
 32 |   height: 30px;
 33 |   width: 30px;
 34 |   align-items: center;
 35 |   justify-content: center;
 36 | }
 37 | 
 38 | .demo-top-navbar .back-button {
 39 |   background-color: #c7254e;
 40 |   color: #fff;
 41 | }
 42 | 
 43 | body.ezy-checktypo,
 44 | body.ezy-checktypo p {
 45 |   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
 46 |     Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
 47 | }
 48 | .ezy-checktypo h1,
 49 | .ezy-checktypo h2,
 50 | .ezy-checktypo h3,
 51 | .ezy-checktypo h4,
 52 | .ezy-checktypo h5,
 53 | .ezy-checktypo h6 {
 54 |   font-family: DM Serif Display, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 55 |     Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
 56 | }
 57 | 
 58 | /* Option Card */
 59 | .ezy-option-card {
 60 |   background-color: rgb(78 54 245);
 61 |   color: white;
 62 |   margin: 10px;
 63 |   padding: 10px 16px;
 64 |   display: inline-flex;
 65 |   align-items: center;
 66 |   gap: 20px;
 67 |   font-size: 13px;
 68 |   font-weight: 500;
 69 |   border-radius: 22px;
 70 | }
 71 | .ezy-option-card > span {
 72 |   display: flex;
 73 |   align-items: center;
 74 | }
 75 | .ezy-option-card > span > b {
 76 |   border: 1px solid #998aff;
 77 |   padding: 1px 10px;
 78 |   border-radius: 22px;
 79 |   margin-left: 5px;
 80 |   font-weight: 600;
 81 | }
 82 | 
 83 | .ezy-color-scheme-group {
 84 |   margin-bottom: 3px;
 85 | }
 86 | .ezy-color-scheme-group,
 87 | .ezy-primary-color-scheme-group {
 88 |   height: 30px;
 89 | }
 90 | 
 91 | .ezy-primary-color-scheme-group {
 92 |   border-left: 1px solid #ddd;
 93 |   border-right: 1px solid #ddd;
 94 |   padding: 0 16px;
 95 |   margin: 0 16px;
 96 | }
 97 | 
 98 | .ezy-orange * {
 99 |   --ezy-theme-color: rgb(245, 158, 11);
100 |   --ezy-theme-color-rgb: 245, 158, 11;
101 | }
102 | .ezy-red * {
103 |   --ezy-theme-color: rgb(2178, 39, 39);
104 |   --ezy-theme-color-rgb: 2178, 39, 39;
105 | }
106 | 
107 | /*//*/
108 | [class*="ezy__epqoverview"].modal,
109 | [class*="ezy__signin"].modal,
110 | [class*="ezy__signup"].modal,
111 | [class*="ezy__travel"].modal {
112 |   display: block;
113 |   position: relative;
114 |   opacity: 1;
115 |   padding: 30px 0;
116 | }
117 | 


--------------------------------------------------------------------------------
/bootstrap/eproduct-payment/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>EasyFrontend</title>
  8 | 
  9 |     <!-- Color Scheme-->
 10 |     <script src="../../assets/demo/script.js"></script>
 11 |     <script>
 12 |       appendHeadInfo("bootstrap");
 13 |     </script>
 14 |   </head>
 15 |   <body>
 16 |     <!-- ep payment 1 -->
 17 |     <style>
 18 |       .ezy__eppayment1 {
 19 |         /* Bootstrap variables */
 20 |         --bs-body-color: #000;
 21 |         --bs-body-bg: rgb(255, 255, 255);
 22 | 
 23 |         /* Easy Frontend variables */
 24 |         --ezy-theme-color: rgb(13, 110, 253);
 25 |         --ezy-theme-color-rgb: 13, 110, 253;
 26 |         --ezy-card-bg: #ffffff;
 27 |         --ezy-card-shadow: 0px 6px 44px rgba(173, 174, 197, 0.2);
 28 |         --ezy-body-color-invert: rgb(246, 246, 246);
 29 |         --ezy-border-color: rgb(213, 213, 213);
 30 | 
 31 |         background-color: var(--bs-body-bg);
 32 |         color: var(--bs-body-color);
 33 |         overflow: hidden;
 34 |         position: relative;
 35 |         padding: 60px 0;
 36 |         z-index: 1;
 37 |       }
 38 | 
 39 |       @media (min-width: 768px) {
 40 |         .ezy__eppayment1 {
 41 |           padding: 100px 0;
 42 |         }
 43 |       }
 44 | 
 45 |       /* Gray Block Style */
 46 |       .gray .ezy__eppayment1,
 47 |       .ezy__eppayment1.gray {
 48 |         /* Bootstrap variables */
 49 |         --bs-body-bg: rgb(246, 246, 246);
 50 | 
 51 |         /* Easy Frontend variables */
 52 |         --ezy-body-color-invert: rgb(246, 246, 246);
 53 |       }
 54 | 
 55 |       /* Dark Gray Block Style */
 56 |       .dark-gray .ezy__eppayment1,
 57 |       .ezy__eppayment1.dark-gray {
 58 |         /* Bootstrap variables */
 59 |         --bs-body-color: #ffffff;
 60 |         --bs-body-bg: rgb(30, 39, 53);
 61 | 
 62 |         /* Easy Frontend variables */
 63 |         --ezy-card-bg: rgb(30, 39, 53);
 64 |         --ezy-card-shadow: 0px 6px 44px rgba(0, 0, 0, 0.2);
 65 |         --ezy-body-color-invert: rgb(11, 23, 39);
 66 |         --ezy-border-color: rgba(130, 130, 130, 0.4);
 67 |       }
 68 | 
 69 |       /* Dark Block Style */
 70 |       .dark .ezy__eppayment1,
 71 |       .ezy__eppayment1.dark {
 72 |         /* Bootstrap variables */
 73 |         --bs-body-color: #ffffff;
 74 |         --bs-body-bg: rgb(11, 23, 39);
 75 | 
 76 |         /* Easy Frontend variables */
 77 |         --ezy-card-bg: rgb(30, 39, 53);
 78 |         --ezy-card-shadow: 0px 6px 44px rgba(0, 0, 0, 0.2);
 79 |         --ezy-body-color-invert: rgb(11, 23, 39);
 80 |         --ezy-border-color: rgba(130, 130, 130, 0.4);
 81 |       }
 82 | 
 83 |       .ezy__eppayment1-card {
 84 |         background-color: var(--ezy-card-bg);
 85 |         box-shadow: var(--ezy-card-shadow);
 86 |         border-radius: 0p;
 87 |       }
 88 | 
 89 |       .ezy__eppayment1 h5 {
 90 |         font-weight: 700;
 91 |         font-size: 24px;
 92 |       }
 93 | 
 94 |       .ezy__eppayment1 p {
 95 |         opacity: 0.8;
 96 |       }
 97 | 
 98 |       .ezy__eppayment1-fill-btn {
 99 |         padding: 10px 40px;
100 |         font-size: 14px;
101 |         line-height: 1;
102 |         color: #fff;
103 |         background-color: var(--ezy-theme-color);
104 |       }
105 |       .ezy__eppayment1-fill-btn:hover {
106 |         color: #fff;
107 |         background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
108 |       }
109 |       .ezy__eppayment1-outline-btn {
110 |         padding: 10px 40px;
111 |         font-size: 14px;
112 |         line-height: 1;
113 |         color: var(--ezy-theme-color);
114 |         background-color: transparent;
115 |         border: 1px solid var(--ezy-border-color);
116 |       }
117 |       .ezy__eppayment1-outline-btn:hover {
118 |         color: #fff;
119 |         border: 1px solid rgba(var(--ezy-theme-color-rgb), 0.9);
120 |         background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
121 |       }
122 |     </style>
123 |     <section class="ezy__eppayment1">
124 |       <div class="container">
125 |         <div class="ezy__eppayment1-card p-4 px-lg-5">
126 |           <div class="row">
127 |             <div class="col-12">
128 |               <h5 class="fw-bold mb-2 text-danger">Payment Failed</h5>
129 |               <p class="mb-4">Not enough balance: Error code: CSE_315489</p>
130 |               <h6 class="mb-2">Suggestion</h6>
131 |               <p class="mb-4">Use another payment method or add money to your current account</p>
132 |               <div class="d-flex align-items-center">
133 |                 <button class="btn ezy__eppayment1-fill-btn">Try Again</button>
134 |                 <button class="btn ezy__eppayment1-outline-btn ms-3">Back to Homepage</button>
135 |               </div>
136 |             </div>
137 |           </div>
138 |         </div>
139 |       </div>
140 |     </section>
141 | 
142 |     <br />
143 |   </body>
144 | </html>
145 | 


--------------------------------------------------------------------------------
/assets/demo/script.js:
--------------------------------------------------------------------------------
  1 | const colorSchemes = [
  2 |   { label: "Light", value: "light", style: 'background-color: #fff' },
  3 |   { label: "Gray", value: "gray", style: 'background-color: #d8e2ef' },
  4 |   { label: "Dark Gray", value: "dark-gray", style: 'background-color: #5e6e82' },
  5 |   { label: "Dark", value: "dark", style: 'background-color: #000' },
  6 | ];
  7 | 
  8 | const primaryColorSchemes = [
  9 |   { label: "Primary", value: "primary", style: 'background-color: rgb(0, 122, 255);' },
 10 |   { label: "Orange", value: "orange", style: 'background-color: rgb(245, 158, 11);' },
 11 |   { label: "Red", value: "red", style: 'background-color: rgb(178, 39, 39);' },
 12 | ];
 13 | 
 14 | const bootstrapHeadInfo = [
 15 |   //   { url: "../../assets/packages/bootstrap/bootstrap.min.css", type: "style" },
 16 |   { url: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css", type: "style" },
 17 |   //   { url: "../../assets/packages/bootstrap/bootstrap.bundle.min.js", type: "script" },
 18 |   { url: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js", type: "script" },
 19 | ];
 20 | const tailwindHeadInfo = [
 21 |   { url: "../../assets/packages/tailwind/tailwind.css", type: 'style' },
 22 | ];
 23 | const headInfo = [
 24 |   // demo color scheme (REQUIRED)
 25 |   { url: "https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;display=swap", type: "style" },
 26 |   { url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap", type: "style" },
 27 |   { url: "../../assets/demo/style.css", type: "style" },
 28 | 
 29 |   { url: "../../assets/packages/jquery-3.6.0.min.js", type: "script" },
 30 |   { url: "https://fonts.googleapis.com/css2?family=Roboto&display=swap", type: "style" },
 31 |   { url: "../../assets/packages/fontawesome/all.min.css", type: "style" },
 32 |   // {url: '../../assets/packages/owl-carousel/owl.carousel.min.js', type: 'script'},
 33 | ];
 34 | 
 35 | document.addEventListener("DOMContentLoaded", function () {
 36 |   var body = document.getElementsByTagName("body")[0];
 37 |   var topNavbar = document.createElement("div");
 38 |   var topNavbarLeft = document.createElement("div");
 39 |   var topNavbarRight = document.createElement("div");
 40 |   topNavbar.classList = "demo-top-navbar";
 41 | 
 42 | 
 43 |   var colorSchemeContent = document.createElement("div");
 44 |   colorSchemeContent.classList = "ezy-color-scheme-group";
 45 |   colorSchemes.forEach(function (item) {
 46 |     var button = document.createElement("button");
 47 |     button.title = item.label;
 48 |     button.style = item.style;
 49 |     button.onclick = function () {
 50 |       changeColorScheme(item.value);
 51 |     };
 52 |     colorSchemeContent.append(button);
 53 |   });
 54 |   topNavbarLeft.append(colorSchemeContent);
 55 | 
 56 |   var primaryColorSchemeContent = document.createElement("div");
 57 |   primaryColorSchemeContent.classList = "ezy-primary-color-scheme-group";
 58 |   primaryColorSchemes.forEach(function (item) {
 59 |     var button = document.createElement("button");
 60 |     button.title = item.label;
 61 |     button.style = item.style;
 62 |     button.onclick = function () {
 63 |       changePrimaryColorScheme(item.value);
 64 |     };
 65 |     primaryColorSchemeContent.append(button);
 66 |   });
 67 |   topNavbarLeft.append(primaryColorSchemeContent);
 68 | 
 69 |   // var backButton = document.createElement("a");
 70 |   // backButton.innerHTML = "Back";
 71 |   // backButton.href = "../../";
 72 |   // backButton.classList = "back-button";
 73 | 
 74 |   var typeChangeButton = document.createElement("button");
 75 |   typeChangeButton.title = "Check Typo";
 76 |   typeChangeButton.innerHTML = "Aa";
 77 |   typeChangeButton.onclick = function () {
 78 |     if (document.body.classList.contains("ezy-checktypo")) {
 79 |       document.body.classList.remove("ezy-checktypo");
 80 |     } else {
 81 |       document.body.classList.add("ezy-checktypo");
 82 |     }
 83 |   };
 84 | 
 85 |   topNavbarRight.append(typeChangeButton);
 86 |   // topNavbarRight.append(backButton);
 87 | 
 88 |   topNavbar.append(topNavbarLeft);
 89 |   topNavbar.append(topNavbarRight);
 90 |   body.append(topNavbar);
 91 | 
 92 |   changeColorScheme(window.localStorage.getItem("colorScheme") || "light");
 93 |   changePrimaryColorScheme(window.localStorage.getItem("primaryColorScheme") || "primary");
 94 | 
 95 |   // $elements = document.querySelectorAll('/(ezy__[a-z]*[0-9]*)([\s\"])/');
 96 |   var elements = document.querySelectorAll('[class^="ezy"]');
 97 |   var existingElements = [];
 98 | 
 99 |   elements.forEach(function (e) {
100 |     if (typeof e.className === "string") {
101 |       var matchClasses = e.className.match(/(ezy__[a-z]*[0-9]*)(\s|\"|$)/i);
102 | 
103 |       if (matchClasses && matchClasses[0] && !existingElements.includes(matchClasses[0])) {
104 |         var optionCardId = matchClasses[0];
105 |         var componentName = optionCardId.replace("ezy__", ``);
106 |         var componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
107 |         existingElements.push(optionCardId);
108 | 
109 |         var optionCard = document.createElement("div");
110 |         optionCard.classList = "ezy-option-card";
111 |         optionCard.innerHTML = `<span>ID: <b>${optionCardId}</b></span><span>Component Name: <b>${componentName}</b></span>`;
112 | 
113 |         e.parentNode.insertBefore(optionCard, e);
114 |       }
115 |     }
116 |   });
117 | });
118 | 
119 | function appendHeadInfo(frame) {
120 |   if (frame === "bootstrap") {
121 |     bootstrapHeadInfo.forEach(function (item) {
122 |       _addHeadInfo(item);
123 |     });
124 |   } else if (frame === "tailwind") {
125 |     tailwindHeadInfo.forEach(function (item) {
126 |       _addHeadInfo(item);
127 |     });
128 |   }
129 | 
130 |   headInfo.forEach(function (item) {
131 |     _addHeadInfo(item);
132 |   });
133 | }
134 | 
135 | function _addHeadInfo(item) {
136 |   var head = document.getElementsByTagName("head")[0];
137 | 
138 |   var element;
139 |   if (item.type === "script") {
140 |     element = document.createElement("script");
141 |     element.src = item.url;
142 |   } else if (item.type === "style") {
143 |     element = document.createElement("link");
144 |     element.href = item.url;
145 |     element.rel = "stylesheet";
146 |   }
147 | 
148 |   element && head.append(element);
149 | }
150 | 
151 | function changeColorScheme(color) {
152 |   document.body.classList.remove("light", "gray", "dark", "dark-gray");
153 | 
154 |   switch (color) {
155 |     case "light":
156 |       document.body.classList.add("light");
157 |       window.localStorage.setItem("colorScheme", "light");
158 |       break;
159 |     case "gray":
160 |       document.body.classList.add("gray");
161 |       window.localStorage.setItem("colorScheme", "gray");
162 |       break;
163 |     case "dark":
164 |       document.body.classList.add("dark");
165 |       window.localStorage.setItem("colorScheme", "dark");
166 |       break;
167 |     case "dark-gray":
168 |       document.body.classList.add("dark-gray");
169 |       window.localStorage.setItem("colorScheme", "dark-gray");
170 |       break;
171 |     default:
172 |       break;
173 |   }
174 | }
175 | 
176 | function changePrimaryColorScheme(color) {
177 |   document.body.classList.remove("ezy-primary", "ezy-orange", "ezy-red");
178 | 
179 |   switch (color) {
180 |     case "primary":
181 |       document.body.classList.add("ezy-primary");
182 |       window.localStorage.setItem("primaryColorScheme", "primary");
183 |       break;
184 |     case "orange":
185 |       document.body.classList.add("ezy-orange");
186 |       window.localStorage.setItem("primaryColorScheme", "orange");
187 |       break;
188 |     case "red":
189 |       document.body.classList.add("ezy-red");
190 |       window.localStorage.setItem("primaryColorScheme", "red");
191 |       break;
192 |     default:
193 |       break;
194 |   }
195 | }
196 | 
197 | var checkReady = function (callback) {
198 |   if (window.jQuery) {
199 |     callback(jQuery);
200 |   } else {
201 |     window.setTimeout(function () {
202 |       checkReady(callback);
203 |     }, 1000);
204 |   }
205 | };
206 | 


--------------------------------------------------------------------------------
/bootstrap/copyrights/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Copyright (HTML-Bootstrap)</title>
  8 | 
  9 |     <!-- Color Scheme-->
 10 |     <script src="../../assets/demo/script.js"></script>
 11 |     <script>
 12 |       appendHeadInfo("bootstrap");
 13 |     </script>
 14 |   </head>
 15 | 
 16 |   <body style="background: #000">
 17 |     <!--
 18 |     Name: copyrights 1
 19 |  -->
 20 |     <style>
 21 |       .ezy__copyright1 {
 22 |         /* easy frontend variables */
 23 |         --ezy-theme-color: rgb(13, 110, 253);
 24 |         --ezy-theme-color-rgb: 13, 110, 253;
 25 | 
 26 |         background-color: var(--ezy-theme-color);
 27 |         color: #fff;
 28 |       }
 29 | 
 30 |       .ezy__copyright1 > div {
 31 |         background-color: var(--ezy-theme-color);
 32 |         padding: 48px 0;
 33 |       }
 34 | 
 35 |       .ezy__copyright1-nav .nav-link {
 36 |         color: #fff;
 37 |       }
 38 | 
 39 |       .ezy__copyright1-nav .nav-link:hover {
 40 |         color: rgba(255, 255, 255, 0.8);
 41 |       }
 42 | 
 43 |       .ezy__copyright1-social li {
 44 |         list-style-type: none;
 45 |         display: inline-block;
 46 |         margin: 6px 8px;
 47 |       }
 48 | 
 49 |       .ezy__copyright1-social li a {
 50 |         color: #fff;
 51 |       }
 52 | 
 53 |       .ezy__copyright1-social li a:hover {
 54 |         opacity: 0.8;
 55 |       }
 56 |     </style>
 57 |     <section class="ezy__copyright1">
 58 |       <div class="text-center text-lg-start">
 59 |         <div class="container">
 60 |           <div class="row d-flex justify-content-between align-items-center">
 61 |             <div class="col-lg-4">
 62 |               <p class="text-white mb-lg-0">Copyright all rights reserved</p>
 63 |             </div>
 64 |             <div class="col-lg-4">
 65 |               <ul class="ezy__copyright1-nav nav justify-content-center">
 66 |                 <li class="nav-item">
 67 |                   <a class="nav-link" href="#">Home</a>
 68 |                 </li>
 69 |                 <li class="nav-item">
 70 |                   <a class="nav-link" href="#">About</a>
 71 |                 </li>
 72 |                 <li class="nav-item">
 73 |                   <a class="nav-link" href="#">Contact</a>
 74 |                 </li>
 75 |               </ul>
 76 |             </div>
 77 |             <div class="col-lg-4 d-flex justify-content-center justify-content-lg-end">
 78 |               <ul class="ezy__copyright1-social nav">
 79 |                 <li>
 80 |                   <a href="" class=""><i class="fab fa-facebook"></i></a>
 81 |                 </li>
 82 |                 <li>
 83 |                   <a href="" class=""><i class="fab fa-twitter"></i></a>
 84 |                 </li>
 85 |                 <li>
 86 |                   <a href="" class=""><i class="fab fa-pinterest"></i></a>
 87 |                 </li>
 88 |                 <li>
 89 |                   <a href="" class=""><i class="fab fa-linkedin"></i></a>
 90 |                 </li>
 91 |               </ul>
 92 |             </div>
 93 |           </div>
 94 |         </div>
 95 |       </div>
 96 |     </section>
 97 | 
 98 |     <br />
 99 | 
100 |     <!--
101 |     Name: copyrights 2
102 |  -->
103 |     <style>
104 |       .ezy__copyright2 {
105 |         /* easy frontend variables */
106 |         --ezy-theme-color: rgb(13, 110, 253);
107 |         --ezy-theme-color-rgb: 13, 110, 253;
108 | 
109 |         background-color: var(--ezy-theme-color);
110 |         color: #fff;
111 |       }
112 | 
113 |       .ezy__copyright2 > div {
114 |         background-color: var(--ezy-theme-color);
115 |         padding: 48px 0;
116 |       }
117 |     </style>
118 |     <section class="ezy__copyright2">
119 |       <div>
120 |         <div class="container">
121 |           <div class="text-center">
122 |             <p class="text-white mb-0">Copyright all rights reserved</p>
123 |           </div>
124 |         </div>
125 |       </div>
126 |     </section>
127 | 
128 |     <br />
129 | 
130 |     <!--
131 |     Name: copyrights 3
132 |  -->
133 |     <style>
134 |       .ezy__copyright3 {
135 |         /* Bootstrap variables */
136 |         --bs-body-color: #212529;
137 |         --bs-body-bg: rgb(255, 255, 255);
138 | 
139 |         /* easy frontend variables */
140 |         --ezy-theme-color: rgb(13, 110, 253);
141 |         --ezy-theme-color-rgb: 13, 110, 253;
142 | 
143 |         background-color: var(--bs-body-bg);
144 |         color: var(--bs-body-color);
145 |       }
146 | 
147 |       /* Gray Block Style */
148 |       .gray .ezy__copyright3,
149 |       .ezy__copyright3.gray {
150 |         /* Bootstrap variables */
151 |         --bs-body-bg: rgb(246, 246, 246);
152 |       }
153 | 
154 |       /* Dark Gray Block Style */
155 |       .dark-gray .ezy__copyright3,
156 |       .ezy__copyright3.dark-gray {
157 |         /* Bootstrap variables */
158 |         --bs-body-color: #ffffff;
159 |         --bs-body-bg: rgb(30, 39, 53);
160 |       }
161 | 
162 |       /* Dark Block Style */
163 |       .dark .ezy__copyright3,
164 |       .ezy__copyright3.dark {
165 |         /* Bootstrap variables */
166 |         --bs-body-color: #ffffff;
167 |         --bs-body-bg: rgb(11, 23, 39);
168 |       }
169 | 
170 |       .ezy__copyright3-nav .nav-link {
171 |         color: var(--bs-body-color);
172 |       }
173 | 
174 |       .ezy__copyright3-nav .nav-link:hover {
175 |         color: var(--bs-body-color);
176 |         opacity: 0.9;
177 |       }
178 | 
179 |       .ezy__copyright3-social li {
180 |         list-style-type: none;
181 |         display: inline-block;
182 |         margin: 6px 8px;
183 |       }
184 | 
185 |       .ezy__copyright3-social li a {
186 |         color: var(--bs-body-color);
187 |       }
188 | 
189 |       .ezy__copyright3-social li a:hover {
190 |         color: var(--ezy-theme-color);
191 |       }
192 |     </style>
193 |     <section class="ezy__copyright3 text-center text-lg-start pt-5 pb-5">
194 |       <div class="container">
195 |         <div class="row justify-content-between align-items-center">
196 |           <div class="col-lg-4">
197 |             <p class="mb-lg-0">Copyright all rights reserved</p>
198 |           </div>
199 |           <div class="col-lg-4 d-flex justify-content-center justify-content-lg-end">
200 |             <ul class="ezy__copyright3-social nav">
201 |               <li>
202 |                 <a href="" class=""><i class="fab fa-facebook"></i></a>
203 |               </li>
204 |               <li>
205 |                 <a href="" class=""><i class="fab fa-twitter"></i></a>
206 |               </li>
207 |               <li>
208 |                 <a href="" class=""><i class="fab fa-pinterest"></i></a>
209 |               </li>
210 |               <li>
211 |                 <a href="" class=""><i class="fab fa-linkedin"></i></a>
212 |               </li>
213 |             </ul>
214 |           </div>
215 |         </div>
216 |       </div>
217 |     </section>
218 | 
219 |     <br />
220 | 
221 |     <!--
222 |     Name: copyrights 4
223 |  -->
224 |     <style>
225 |       .ezy__copyright4 {
226 |         /* Bootstrap variables */
227 |         --bs-body-color: #28303b;
228 |         --bs-body-bg: rgb(255, 255, 255);
229 | 
230 |         /* easy frontend variables */
231 |         --ezy-theme-color: rgb(13, 110, 253);
232 |         --ezy-theme-color-rgb: 13, 110, 253;
233 | 
234 |         background-color: var(--bs-body-bg);
235 |         color: var(--bs-body-color);
236 |       }
237 | 
238 |       /* Gray Block Style */
239 |       .gray .ezy__copyright4,
240 |       .ezy__copyright4.gray {
241 |         /* Bootstrap variables */
242 |         --bs-body-bg: rgb(246, 246, 246);
243 |       }
244 | 
245 |       /* Dark Gray Block Style */
246 |       .dark-gray .ezy__copyright4,
247 |       .ezy__copyright4.dark-gray {
248 |         /* Bootstrap variables */
249 |         --bs-body-color: #ffffff;
250 |         --bs-body-bg: rgb(30, 39, 53);
251 |       }
252 | 
253 |       /* Dark Block Style */
254 |       .dark .ezy__copyright4,
255 |       .ezy__copyright4.dark {
256 |         /* Bootstrap variables */
257 |         --bs-body-color: #ffffff;
258 |         --bs-body-bg: rgb(11, 23, 39);
259 |       }
260 |     </style>
261 |     <section class="ezy__copyright4 pt-5 pb-5">
262 |       <div class="container">
263 |         <div class="text-center">
264 |           <p class="mb-0">Copyright all rights reserved</p>
265 |         </div>
266 |       </div>
267 |     </section>
268 | 
269 |     <br />
270 | 
271 |     <!--
272 |     Name: copyrights 5
273 |  -->
274 |     <style>
275 |       .ezy__copyright5 {
276 |         /* Bootstrap variables */
277 |         --bs-body-color: #212529;
278 |         --bs-body-bg: rgb(255, 255, 255);
279 | 
280 |         /* easy frontend variables */
281 |         --ezy-theme-color: rgb(13, 110, 253);
282 |         --ezy-theme-color-rgb: 13, 110, 253;
283 | 
284 |         background-color: var(--bs-body-bg);
285 |         color: var(--bs-body-color);
286 |       }
287 | 
288 |       /* Gray Block Style */
289 |       .gray .ezy__copyright5,
290 |       .ezy__copyright5.gray {
291 |         /* Bootstrap variables */
292 |         --bs-body-bg: rgb(246, 246, 246);
293 |       }
294 | 
295 |       /* Dark Gray Block Style */
296 |       .dark-gray .ezy__copyright5,
297 |       .ezy__copyright5.dark-gray {
298 |         /* Bootstrap variables */
299 |         --bs-body-color: #ffffff;
300 |         --bs-body-bg: rgb(30, 39, 53);
301 |       }
302 | 
303 |       /* Dark Block Style */
304 |       .dark .ezy__copyright5,
305 |       .ezy__copyright5.dark {
306 |         /* Bootstrap variables */
307 |         --bs-body-color: #ffffff;
308 |         --bs-body-bg: rgb(11, 23, 39);
309 |       }
310 | 
311 |       .ezy__copyright5-nav .nav-link {
312 |         color: var(--bs-body-color);
313 |       }
314 | 
315 |       .ezy__copyright5-nav .nav-link:hover {
316 |         color: var(--bs-body-color);
317 |         opacity: 0.9;
318 |       }
319 | 
320 |       .ezy__copyright5-social li {
321 |         list-style-type: none;
322 |         display: inline-block;
323 |         margin: 6px 8px;
324 |       }
325 | 
326 |       .ezy__copyright5-social li a {
327 |         color: var(--bs-body-color);
328 |       }
329 | 
330 |       .ezy__copyright5-social li a:hover {
331 |         color: var(--ezy-theme-color);
332 |       }
333 |     </style>
334 |     <section class="ezy__copyright5 text-center pt-5 pb-5">
335 |       <div class="container">
336 |         <div class="row justify-content-between align-items-center">
337 |           <div class="col-lg-4 d-flex justify-content-center justify-content-lg-start">
338 |             <ul class="ezy__copyright5-social nav">
339 |               <li>
340 |                 <a href="" class=""><i class="fab fa-facebook"></i></a>
341 |               </li>
342 |               <li>
343 |                 <a href="" class=""><i class="fab fa-twitter"></i></a>
344 |               </li>
345 |               <li>
346 |                 <a href="" class=""><i class="fab fa-pinterest"></i></a>
347 |               </li>
348 |               <li>
349 |                 <a href="" class=""><i class="fab fa-linkedin"></i></a>
350 |               </li>
351 |             </ul>
352 |           </div>
353 |           <div class="col-lg-4">
354 |             <p class="text-center text-lg-end mb-0">Copyright all rights reserved</p>
355 |           </div>
356 |         </div>
357 |       </div>
358 |     </section>
359 | 
360 |     <br />
361 | 
362 |   </body>
363 | </html>
364 | 


--------------------------------------------------------------------------------
/bootstrap/eproduct-list/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8 |   <title>EasyFrontend</title>
  9 | 
 10 |   <!-- Color Scheme-->
 11 |   <script src="../../assets/demo/script.js"></script>
 12 |   <script>
 13 |     appendHeadInfo("bootstrap");
 14 |   </script>
 15 | </head>
 16 | 
 17 | <body style="background: #000" class="">
 18 |   <!--
 19 |    Name:  eproductlist 1
 20 | -->
 21 |   <style>
 22 | .ezy__eproductlist1 {
 23 |   /* Bootstrap variables */
 24 |   --bs-body-color: #000;
 25 |   --bs-body-bg: #fff;
 26 | 
 27 |   /* Easy Frontend variables */
 28 |   --ezy-theme-color: rgb(13, 110, 253);
 29 |   --ezy-theme-color-rgb: 13, 110, 253;
 30 |   --ezy-rating-color: #f0c800;
 31 |   --ezy-success-color: #00d27a;
 32 |   --ezy-warning-color: #f5803e;
 33 |   --ezy-danger-color: #e63757;
 34 |   --ezy-new-text-color: #ffffff;
 35 | 
 36 |   background-color: var(--bs-body-bg);
 37 |   padding: 60px 0;
 38 | }
 39 | 
 40 | @media (min-width: 768px) {
 41 |   .ezy__eproductlist1 {
 42 |     padding: 100px 0;
 43 |   }
 44 | }
 45 | 
 46 | /* Gray Block Style */
 47 | .gray .ezy__eproductlist1,
 48 | .ezy__eproductlist1.gray {
 49 |   /* Bootstrap variables */
 50 |   --bs-body-bg: rgb(246, 246, 246);
 51 | }
 52 | 
 53 | /* Dark Gray Block Style */
 54 | .dark-gray .ezy__eproductlist1,
 55 | .ezy__eproductlist1.dark-gray {
 56 |   /* Bootstrap variables */
 57 |   --bs-body-color: #ffffff;
 58 |   --bs-body-bg: rgb(30, 39, 53);
 59 | }
 60 | 
 61 | /* Dark Block Style */
 62 | .dark .ezy__eproductlist1,
 63 | .ezy__eproductlist1.dark {
 64 |   /* Bootstrap variables */
 65 |   --bs-body-color: #fff;
 66 |   --bs-body-bg: rgb(11, 23, 39);
 67 | }
 68 | 
 69 | .ezy__eproductlist1 img {
 70 |   max-height: 270px;
 71 | }
 72 | 
 73 | .ezy__eproductlist1-new-text {
 74 |   position: absolute;
 75 |   top: 10px;
 76 |   right: 20px;
 77 |   background-color: var(--ezy-success-color);
 78 |   color: var(--ezy-new-text-color);
 79 |   padding: 5px 10px;
 80 |   border-radius: 15px;
 81 | }
 82 | 
 83 | /* title, sub-title */
 84 | .ezy__eproductlist1-title {
 85 |   font-size: 19px;
 86 |   line-height: 1.2;
 87 |   color: var(--bs-body-color);
 88 | }
 89 | 
 90 | .ezy__eproductlist1-title:hover,
 91 | .ezy__eproductlist1-sub-title:hover {
 92 |   text-decoration: underline;
 93 | }
 94 | 
 95 | .ezy__eproductlist1-sub-title {
 96 |   font-size: 14px;
 97 |   line-height: 1;
 98 |   color: var(--bs-body-color);
 99 |   opacity: 0.6;
100 | }
101 | 
102 | .ezy__eproductlist1 a {
103 |   text-decoration: none;
104 | }
105 | 
106 | /* specifications */
107 | .ezy__eproductlist1-specifications li {
108 |   font-size: 16px;
109 |   color: var(--bs-body-color);
110 |   opacity: 0.6;
111 | }
112 | 
113 | /* prices */
114 | .ezy__eproductlist1-discount-price {
115 |   color: var(--ezy-theme-color);
116 |   font-size: 24px;
117 | }
118 | 
119 | .ezy__eproductlist1-real-price {
120 |   color: var(--bs-body-color);
121 |   font-size: 14px;
122 |   font-weight: 500;
123 |   opacity: 0.55;
124 | }
125 | 
126 | .ezy__eproductlist1-real-price h5 {
127 |   font-size: 14px;
128 | }
129 | 
130 | /* rating */
131 | .ezy__eproductlist1-rating {
132 |   color: var(--ezy-rating-color);
133 |   font-size: 15px;
134 | }
135 | 
136 | .ezy__eproductlist1-rating .count {
137 |   color: var(--bs-body-color);
138 |   opacity: 0.7;
139 | }
140 | 
141 | /* availability */
142 | .ezy__eproductlist1-shipping,
143 | .ezy__eproductlist1-stock {
144 |   color: var(--bs-body-color);
145 |   opacity: 0.6;
146 |   font-size: 14px;
147 | }
148 | 
149 | .ezy__eproductlist1-available {
150 |   color: var(--ezy-success-color);
151 | }
152 | 
153 | .ezy__eproductlist1-not-available {
154 |   color: var(--ezy-danger-color);
155 | }
156 | 
157 | /* icons */
158 | .ezy__eproductlist1-fav,
159 | .ezy__eproductlist1-cart {
160 |   width: 100%;
161 |   font-size: 15px;
162 |   line-height: 1.2;
163 | }
164 | 
165 | .ezy__eproductlist1-fav {
166 |   color: var(--ezy-theme-color);
167 |   border-color: var(--ezy-theme-color);
168 | }
169 | 
170 | .ezy__eproductlist1-fav:hover {
171 |   color: #fff;
172 |   background-color: var(--ezy-theme-color);
173 |   border-color: var(--ezy-theme-color);
174 | }
175 | 
176 | .ezy__eproductlist1-cart {
177 |   background-color: var(--ezy-theme-color);
178 |   border-color: var(--ezy-theme-color);
179 | }
180 | 
181 | .ezy__eproductlist1-cart:hover {
182 |   background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
183 |   border-color: rgba(var(--ezy-theme-color-rgb), 0.9);
184 | }
185 |   </style>
186 | <section class="ezy__eproductlist1">
187 |   <div class="container">
188 |     <div class="row">
189 |       <!-- each item -->
190 |       <div class="col-12">
191 |         <div class="row">
192 |           <!-- image -->
193 |           <div class="col-12 col-xl-4 position-relative">
194 |             <h6 class="ezy__eproductlist1-new-text">New</h6>
195 |             <!-- img starts -->
196 |             <a href="#">
197 |               <img src="https://cdn.easyfrontend.com/pictures/blog/blog_11_1.png" alt="..."
198 |                 class="rounded img-fluid w-100" />
199 |             </a>
200 |           </div>
201 |           <!-- details -->
202 |           <div class="col-12 col-lg-7 col-xl-5 pt-4 pt-xl-0 px-lg-4">
203 |             <!-- title -->
204 |             <a href="#">
205 |               <h5 class="ezy__eproductlist1-title">
206 |                 2021 Apple iMac (24-inch, Apple M1 chip with 8‑core CPU and 8‑core GPU, 8GB RAM, 256GB)
207 |               </h5>
208 |             </a>
209 |             <!-- sub title -->
210 |             <a href="#">
211 |               <h5 class="ezy__eproductlist1-sub-title">Computer & Accessories</h5>
212 |             </a>
213 |             <!-- specifications -->
214 |             <ul class="ezy__eproductlist1-specifications ps-4 pt-3">
215 |               <li>16GB RAM</li>
216 |               <li>1TB SSD Hard Drive</li>
217 |               <li>10-core Intel Xeon</li>
218 |               <li>Mac OS</li>
219 |               <li>Secured</li>
220 |             </ul>
221 |           </div>
222 | 
223 |           <!-- buttons -->
224 |           <div class="col-12 col-lg-5 col-xl-3 pt-4 pt-xl-0">
225 |             <!-- price -->
226 |             <div class="mb-4">
227 |               <h5 class="ezy__eproductlist1-discount-price">$1199.5</h5>
228 |               <div class="ezy__eproductlist1-real-price d-flex align-items-center">
229 |                 <h5 class="text-decoration-line-through mb-0 me-1">$2399</h5>
230 |                 <span>-50%</span>
231 |               </div>
232 |             </div>
233 |             <ul class="nav flex-column my-3">
234 |               <li class="mb-1">
235 |                 <!-- ratings -->
236 |                 <div class="d-flex align-items-center ezy__eproductlist1-rating">
237 |                   <i class="fas fa-star"></i>
238 |                   <i class="fas fa-star"></i>
239 |                   <i class="fas fa-star"></i>
240 |                   <i class="fas fa-star"></i>
241 |                   <i class="fas fa-star"></i>
242 |                   <span class="count ms-1">(8)</span>
243 |                 </div>
244 |               </li>
245 |               <li>
246 |                 <span class="ezy__eproductlist1-shipping">Shipping Cost: $50</span>
247 |               </li>
248 |               <li>
249 |                 <span class="ezy__eproductlist1-stock">
250 |                   Stock: <span class="ezy__eproductlist1-available">Available</span>
251 |                 </span>
252 |               </li>
253 |             </ul>
254 | 
255 |             <!-- icons -->
256 |             <div class="d-flex flex-column mt-4">
257 |               <a href="#" class="btn btn-outline-danger ezy__eproductlist1-fav me-2"><i
258 |                   class="fas fa-heart me-2"></i><span>Favourite</span>
259 |               </a>
260 |               <a href="#" class="btn btn-primary ezy__eproductlist1-cart mt-2"><i
261 |                   class="fas fa-shopping-cart me-2"></i><span>Add to Cart</span>
262 |               </a>
263 |             </div>
264 |           </div>
265 |         </div>
266 |       </div>
267 |       <!-- each item -->
268 |       <div class="col-12 mt-5">
269 |         <div class="row">
270 |           <!-- image -->
271 |           <div class="col-12 col-xl-4 position-relative">
272 |             <h6 class="ezy__eproductlist1-new-text">New</h6>
273 |             <!-- img starts -->
274 |             <a href="#">
275 |               <img src="https://cdn.easyfrontend.com/pictures/blog/blog_11_2.png" alt="..."
276 |                 class="rounded img-fluid w-100" />
277 |             </a>
278 |           </div>
279 |           <!-- details -->
280 |           <div class="col-12 col-lg-7 col-xl-5 pt-4 pt-xl-0 px-lg-4">
281 |             <!-- title -->
282 |             <a href="#">
283 |               <h5 class="ezy__eproductlist1-title">
284 |                 2020 Apple MacBook Air Laptop: Apple M1 Chip, 13” Retina Display, 8GB RAM
285 |               </h5>
286 |             </a>
287 |             <!-- sub title -->
288 |             <a href="#">
289 |               <h5 class="ezy__eproductlist1-sub-title">Computer & Accessories</h5>
290 |             </a>
291 |             <!-- specifications -->
292 |             <ul class="ezy__eproductlist1-specifications ps-4 pt-3">
293 |               <li>16GB RAM</li>
294 |               <li>1TB SSD Hard Drive</li>
295 |               <li>10-core Intel Xeon</li>
296 |               <li>Mac OS</li>
297 |               <li>Secured</li>
298 |             </ul>
299 |           </div>
300 | 
301 |           <!-- buttons -->
302 |           <div class="col-12 col-lg-5 col-xl-3 pt-4 pt-xl-0">
303 |             <!-- price -->
304 |             <div class="mb-4">
305 |               <h5 class="ezy__eproductlist1-discount-price">$1199.5</h5>
306 |               <div class="ezy__eproductlist1-real-price d-flex align-items-center">
307 |                 <h5 class="text-decoration-line-through mb-0 me-1">$2399</h5>
308 |                 <span>-50%</span>
309 |               </div>
310 |             </div>
311 |             <ul class="nav flex-column my-3">
312 |               <li class="mb-1">
313 |                 <!-- ratings -->
314 |                 <div class="d-flex align-items-center ezy__eproductlist1-rating">
315 |                   <i class="fas fa-star"></i>
316 |                   <i class="fas fa-star"></i>
317 |                   <i class="fas fa-star"></i>
318 |                   <i class="fas fa-star"></i>
319 |                   <i class="fas fa-star"></i>
320 |                   <span class="count ms-1">(8)</span>
321 |                 </div>
322 |               </li>
323 |               <li>
324 |                 <span class="ezy__eproductlist1-shipping">Shipping Cost: $50</span>
325 |               </li>
326 |               <li>
327 |                 <span class="ezy__eproductlist1-stock">
328 |                   Stock: <span class="ezy__eproductlist1-available">Available</span>
329 |                 </span>
330 |               </li>
331 |             </ul>
332 | 
333 |             <!-- icons -->
334 |             <div class="d-flex flex-column mt-4">
335 |               <a href="#" class="btn btn-outline-danger ezy__eproductlist1-fav me-2"><i
336 |                   class="fas fa-heart me-2"></i><span>Favourite</span>
337 |               </a>
338 |               <a href="#" class="btn btn-primary ezy__eproductlist1-cart mt-2"><i
339 |                   class="fas fa-shopping-cart me-2"></i><span>Add to Cart</span>
340 |               </a>
341 |             </div>
342 |           </div>
343 |         </div>
344 |       </div>
345 |       <!-- each item -->
346 |       <div class="col-12 mt-5">
347 |         <div class="row">
348 |           <!-- image -->
349 |           <div class="col-12 col-xl-4 position-relative">
350 |             <h6 class="ezy__eproductlist1-new-text">New</h6>
351 |             <!-- img starts -->
352 |             <a href="#">
353 |               <img src="https://cdn.easyfrontend.com/pictures/blog/blog_11_3.png" alt="..."
354 |                 class="rounded img-fluid w-100" />
355 |             </a>
356 |           </div>
357 |           <!-- details -->
358 |           <div class="col-12 col-lg-7 col-xl-5 pt-4 pt-xl-0 px-lg-4">
359 |             <!-- title -->
360 |             <a href="#">
361 |               <h5 class="ezy__eproductlist1-title">
362 |                 Lenovo - Tab P11 Plus - Tablet - 11" 2K Display - MediaTek Octa-Core Processor - 4GB Memory - 128GB
363 |                 Storage
364 |               </h5>
365 |             </a>
366 |             <!-- sub title -->
367 |             <a href="#">
368 |               <h5 class="ezy__eproductlist1-sub-title">Computer & Accessories</h5>
369 |             </a>
370 |             <!-- specifications -->
371 |             <ul class="ezy__eproductlist1-specifications ps-4 pt-3">
372 |               <li>16GB RAM</li>
373 |               <li>1TB SSD Hard Drive</li>
374 |               <li>10-core Intel Xeon</li>
375 |               <li>Mac OS</li>
376 |               <li>Secured</li>
377 |             </ul>
378 |           </div>
379 | 
380 |           <!-- buttons -->
381 |           <div class="col-12 col-lg-5 col-xl-3 pt-4 pt-xl-0">
382 |             <!-- price -->
383 |             <div class="mb-4">
384 |               <h5 class="ezy__eproductlist1-discount-price">$1199.5</h5>
385 |               <div class="ezy__eproductlist1-real-price d-flex align-items-center">
386 |                 <h5 class="text-decoration-line-through mb-0 me-1">$2399</h5>
387 |                 <span>-50%</span>
388 |               </div>
389 |             </div>
390 |             <ul class="nav flex-column my-3">
391 |               <li class="mb-1">
392 |                 <!-- ratings -->
393 |                 <div class="d-flex align-items-center ezy__eproductlist1-rating">
394 |                   <i class="fas fa-star"></i>
395 |                   <i class="fas fa-star"></i>
396 |                   <i class="fas fa-star"></i>
397 |                   <i class="fas fa-star"></i>
398 |                   <i class="fas fa-star"></i>
399 |                   <span class="count ms-1">(8)</span>
400 |                 </div>
401 |               </li>
402 |               <li>
403 |                 <span class="ezy__eproductlist1-shipping">Shipping Cost: $50</span>
404 |               </li>
405 |               <li>
406 |                 <span class="ezy__eproductlist1-stock">
407 |                   Stock: <span class="ezy__eproductlist1-available">Available</span>
408 |                 </span>
409 |               </li>
410 |             </ul>
411 | 
412 |             <!-- icons -->
413 |             <div class="d-flex flex-column mt-4">
414 |               <a href="#" class="btn btn-outline-danger ezy__eproductlist1-fav me-2"><i
415 |                   class="fas fa-heart me-2"></i><span>Favourite</span>
416 |               </a>
417 |               <a href="#" class="btn btn-primary ezy__eproductlist1-cart mt-2"><i
418 |                   class="fas fa-shopping-cart me-2"></i><span>Add to Cart</span>
419 |               </a>
420 |             </div>
421 |           </div>
422 |         </div>
423 |       </div>
424 |     </div>
425 |   </div>
426 | </section>
427 | </body>
428 | 
429 | </html>


--------------------------------------------------------------------------------
/bootstrap/hero-headers/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Header (HTML-Bootstrap)</title>
  8 | 
  9 |     <!-- Color Scheme-->
 10 |     <script src="../../assets/demo/script.js"></script>
 11 |     <script>
 12 |       appendHeadInfo("bootstrap");
 13 |     </script>
 14 |   </head>
 15 | 
 16 |   <body>
 17 |     <!--
 18 |     Name: Header 1
 19 |  -->
 20 |     <style>
 21 |       .ezy__header1 {
 22 |         /* Bootstrap variables */
 23 |         --bs-body-color: #373572;
 24 |         --bs-body-bg: rgb(231, 246, 253);
 25 | 
 26 |         /* Easy Frontend variables */
 27 |         --ezy-theme-color: rgb(13, 110, 253);
 28 |         --ezy-theme-color-rgb: 13, 110, 253;
 29 |         --ezy-shadow: 0px 4px 44px rgba(159, 190, 218, 0.37);
 30 | 
 31 |         background-color: var(--bs-body-bg);
 32 |         overflow: hidden;
 33 |         padding: 60px 0;
 34 |         position: relative;
 35 |       }
 36 | 
 37 |       @media (min-width: 768px) {
 38 |         .ezy__header1 {
 39 |           padding: 100px 0;
 40 |         }
 41 |       }
 42 | 
 43 |       .ezy__header1-heading {
 44 |         font-weight: bold;
 45 |         font-size: 25px;
 46 |         line-height: 25px;
 47 |         color: var(--bs-body-color);
 48 |       }
 49 | 
 50 |       @media (min-width: 768px) {
 51 |         .ezy__header1-heading {
 52 |           font-size: 70px;
 53 |           line-height: 70px;
 54 |         }
 55 |       }
 56 | 
 57 |       .ezy__header1-sub-heading {
 58 |         color: var(--bs-body-color);
 59 |         font-size: 22px;
 60 |         line-height: 1.5;
 61 |         opacity: 0.8;
 62 |       }
 63 | 
 64 |       .ezy__header1-btn {
 65 |         padding: 12px 30px;
 66 |         color: var(--bs-body-color);
 67 |         box-shadow: var(--ezy-shadow);
 68 |       }
 69 |     </style>
 70 |     <section class="ezy__header1">
 71 |       <svg
 72 |         class="position-absolute start-0 top-0 bottom-0"
 73 |         width="602"
 74 |         height="742"
 75 |         viewBox="0 0 602 742"
 76 |         fill="none"
 77 |         xmlns="http://www.w3.org/2000/svg"
 78 |       >
 79 |         <path
 80 |           d="M529.67 368.784C488.233 175.629 530.084 75.9263 602 0H0V742C7.22773 740.175 75.4574 695.495 242.852 656.948C584.139 584.605 555.256 488.05 529.67 368.784Z"
 81 |           fill="url(#paint0_linear_4_4301)"
 82 |           fill-opacity="0.6"
 83 |         />
 84 |         <defs>
 85 |           <linearGradient
 86 |             id="paint0_linear_4_4301"
 87 |             x1="310.118"
 88 |             y1="576.967"
 89 |             x2="770.228"
 90 |             y2="95.337"
 91 |             gradientUnits="userSpaceOnUse"
 92 |           >
 93 |             <stop stop-color="#E7F6FD" />
 94 |             <stop offset="1" stop-color="#DBEEF8" />
 95 |           </linearGradient>
 96 |         </defs>
 97 |       </svg>
 98 |       <div class="container position-relative">
 99 |         <div class="row align-items-center">
100 |           <div class="col-lg-6 pe-xl-5 text-center text-lg-start">
101 |             <h2 class="ezy__header1-heading mb-4">Building a Better life with Packing.</h2>
102 |             <p class="ezy__header1-sub-heading">
103 |               It's easier to reach your savings goals when you have the right savings account.
104 |             </p>
105 |             <a href="" class="btn btn-light ezy__header1-btn fs-5 mt-4 mt-md-5">Try Now</a>
106 |           </div>
107 |           <div class="col-lg-6 mt-5 mt-lg-0">
108 |             <img src="https://cdn.easyfrontend.com/pictures/hero/hero-1.png" alt="" class="rounded img-fluid mt-3" />
109 |           </div>
110 |         </div>
111 |       </div>
112 |     </section>
113 | 
114 |     <br />
115 | 
116 |     <!--
117 |     Name: Header 2
118 |  -->
119 |     <style>
120 |       .ezy__header2 {
121 |         /* Bootstrap variables */
122 |         --bs-body-color: #373572;
123 |         --bs-body-bg: rgb(231, 246, 253);
124 | 
125 |         /* Easy Frontend variables */
126 |         --ezy-theme-color: rgb(13, 110, 253);
127 |         --ezy-theme-color-rgb: 13, 110, 253;
128 |         --ezy-shadow: 0px 4px 44px rgba(159, 190, 218, 0.37);
129 | 
130 |         background-color: var(--bs-body-bg);
131 |         overflow: hidden;
132 |         padding: 80px 0;
133 |         position: relative;
134 |       }
135 | 
136 |       @media (min-width: 768px) {
137 |         .ezy__header2 {
138 |           padding: 150px 0;
139 |         }
140 |       }
141 | 
142 |       .ezy__header2-heading {
143 |         font-weight: bold;
144 |         font-size: 25px;
145 |         line-height: 25px;
146 |         color: var(--bs-body-color);
147 |       }
148 | 
149 |       @media (min-width: 768px) {
150 |         .ezy__header2-heading {
151 |           font-size: 70px;
152 |           line-height: 70px;
153 |         }
154 |       }
155 | 
156 |       .ezy__header2-sub-heading {
157 |         color: var(--bs-body-color);
158 |         font-size: 22px;
159 |         line-height: 1.5;
160 |         opacity: 0.8;
161 |       }
162 | 
163 |       .ezy__header2-registration-note {
164 |         color: var(--bs-body-color);
165 |       }
166 | 
167 |       .ezy__header2-btn {
168 |         padding: 12px 30px;
169 |         color: var(--bs-body-color);
170 |         box-shadow: var(--ezy-shadow);
171 |       }
172 |     </style>
173 |     <section class="ezy__header2">
174 |       <div class="container position-relative">
175 |         <div class="row align-items-center justify-content-center">
176 |           <div class="col-lg-12 text-center">
177 |             <h2 class="ezy__header2-heading mb-4">Nice Workplace For storming Meetings</h2>
178 |             <div class="row justify-content-center">
179 |               <div class="col-12 col-lg-9">
180 |                 <p class="ezy__header3-sub-heading px-5">
181 |                   Egestas sed sed risus pretium quam vulputate dignissim suspendisse in. Pharetra sit amet aliquam id
182 |                   diam maecenas ultricies mi.
183 |                 </p>
184 |               </div>
185 |             </div>
186 |             <a href="" class="btn btn-light ezy__header2-btn fs-5 mt-4 mt-md-5"
187 |               >Try Now <span class="fas fa-arrow-right ms-2"></span
188 |             ></a>
189 |             <p class="ezy__header2-registration-note mb-0 mt-4">No registration required</p>
190 |           </div>
191 |         </div>
192 |       </div>
193 |     </section>
194 | 
195 |     <br />
196 | 
197 |     <!--
198 |     Name: Header 3
199 |  -->
200 |     <style>
201 |       .ezy__header3 {
202 |         /* Bootstrap variables */
203 |         --bs-body-color: #ffffff;
204 |         --bs-body-bg: rgb(231, 246, 253);
205 | 
206 |         /* Easy Frontend variables */
207 |         --ezy-theme-color: rgb(13, 110, 253);
208 |         --ezy-theme-color-rgb: 13, 110, 253;
209 |         --ezy-shadow: 0px 4px 44px rgba(159, 190, 218, 0.37);
210 | 
211 |         background-image: linear-gradient(145deg, #9013fe 0%, #101a8e 100%);
212 |         overflow: hidden;
213 |         padding: 80px 0;
214 |         position: relative;
215 |       }
216 | 
217 |       @media (min-width: 768px) {
218 |         .ezy__header3 {
219 |           padding: 150px 0;
220 |         }
221 |       }
222 | 
223 |       .ezy__header3-heading {
224 |         font-weight: bold;
225 |         font-size: 25px;
226 |         line-height: 25px;
227 |         color: var(--bs-body-color);
228 |       }
229 | 
230 |       @media (min-width: 768px) {
231 |         .ezy__header3-heading {
232 |           font-size: 70px;
233 |           line-height: 70px;
234 |         }
235 |       }
236 | 
237 |       .ezy__header3-sub-heading {
238 |         color: var(--bs-body-color);
239 |         font-size: 22px;
240 |         line-height: 1.5;
241 |         opacity: 0.8;
242 |       }
243 | 
244 |       .ezy__header3-registration-note {
245 |         color: var(--bs-body-color);
246 |       }
247 | 
248 |       .ezy__header3-btn {
249 |         box-shadow: var(--ezy-shadow);
250 |         border: none;
251 |         padding: 0;
252 |       }
253 |     </style>
254 |     <section class="ezy__header3">
255 |       <div class="container position-relative">
256 |         <div class="row align-items-center justify-content-center">
257 |           <div class="col-lg-12 text-center">
258 |             <h2 class="ezy__header3-heading mb-4">Modern Flat With Touch Of Creativity</h2>
259 |             <div class="row justify-content-center">
260 |               <div class="col-12 col-lg-9">
261 |                 <p class="ezy__header3-sub-heading px-5">
262 |                   Being creative within the constraints of client briefs, budgets and timelines is the norm for most
263 |                   agencies. However, investing in research and …
264 |                 </p>
265 |               </div>
266 |             </div>
267 |             <div class="mt-5">
268 |               <a href="" class="btn ezy__header3-btn m-1"
269 |                 ><img src="https://cdn.easyfrontend.com/pictures/hero/play-app-android.png" alt=""
270 |               /></a>
271 |               <a href="" class="btn ezy__header3-btn m-1"
272 |                 ><img src="https://cdn.easyfrontend.com/pictures/hero/play-app-apple.png" alt=""
273 |               /></a>
274 |             </div>
275 |             <p class="ezy__header3-registration-note mb-0 mt-4">* No registration required</p>
276 |           </div>
277 |         </div>
278 |       </div>
279 |     </section>
280 | 
281 |     <br />
282 | 
283 |     <!--
284 |     Name: Header 4
285 |  -->
286 |     <style>
287 |       .ezy__header4 {
288 |         /* Bootstrap variables */
289 |         --bs-body-color: #ffffff;
290 |         --bs-body-bg: rgb(231, 246, 253);
291 | 
292 |         /* Easy Frontend variables */
293 |         --ezy-theme-color: rgb(13, 110, 253);
294 |         --ezy-theme-color-rgb: 13, 110, 253;
295 |         --ezy-shadow: 0px 4px 44px rgba(159, 190, 218, 0.37);
296 | 
297 |         background-image: var(--bs-body-bg);
298 |         background-position: center;
299 |         background-size: cover;
300 |         background-attachment: fixed;
301 |         overflow: hidden;
302 |         padding: 80px 0;
303 |         position: relative;
304 |       }
305 | 
306 |       .ezy__header4::before {
307 |         content: "";
308 |         position: absolute;
309 |         left: 0;
310 |         right: 0;
311 |         top: 0;
312 |         bottom: 0;
313 |         background-image: linear-gradient(145deg, #9013fe 0%, #101a8e 100%);
314 |         opacity: 0.8;
315 |       }
316 | 
317 |       @media (min-width: 768px) {
318 |         .ezy__header4 {
319 |           padding: 150px 0;
320 |         }
321 |       }
322 | 
323 |       .ezy__header4-heading {
324 |         font-weight: bold;
325 |         font-size: 25px;
326 |         line-height: 25px;
327 |         color: var(--bs-body-color);
328 |       }
329 | 
330 |       @media (min-width: 768px) {
331 |         .ezy__header4-heading {
332 |           font-size: 70px;
333 |           line-height: 70px;
334 |         }
335 |       }
336 | 
337 |       .ezy__header4-sub-heading {
338 |         color: var(--bs-body-color);
339 |         font-size: 22px;
340 |         line-height: 1.5;
341 |         opacity: 0.8;
342 |       }
343 | 
344 |       .ezy__header4-registration-note {
345 |         color: var(--bs-body-color);
346 |       }
347 | 
348 |       .ezy__header4-btn {
349 |         box-shadow: var(--ezy-shadow);
350 |         border: none;
351 |         padding: 0;
352 |       }
353 |     </style>
354 |     <section
355 |       class="ezy__header4"
356 |       style="background-image: url(https://cdn.easyfrontend.com/pictures/contact/contact13.jpg)"
357 |     >
358 |       <div class="container position-relative">
359 |         <div class="row align-items-center justify-content-center">
360 |           <div class="col-lg-12 text-center">
361 |             <h2 class="ezy__header4-heading mb-4">How I Escape My Mind By Listening</h2>
362 |             <div class="row justify-content-center">
363 |               <div class="col-12 col-lg-9">
364 |                 <p class="ezy__header4-sub-heading px-5">
365 |                   Discover thousands of easy to customize themes, templates & CMS products, made by world-class
366 |                   developers...
367 |                 </p>
368 |               </div>
369 |             </div>
370 |             <div class="mt-5">
371 |               <a href="" class="btn ezy__header4-btn m-1"
372 |                 ><img src="https://cdn.easyfrontend.com/pictures/hero/play-app-android.png" alt=""
373 |               /></a>
374 |               <a href="" class="btn ezy__header4-btn m-1"
375 |                 ><img src="https://cdn.easyfrontend.com/pictures/hero/play-app-apple.png" alt=""
376 |               /></a>
377 |             </div>
378 |             <p class="ezy__header4-registration-note mb-0 mt-4">* No registration required</p>
379 |           </div>
380 |         </div>
381 |       </div>
382 |     </section>
383 | 
384 |     <br />
385 | 
386 |     <!--
387 |     Name: Header 5
388 |  -->
389 |     <style>
390 |       .ezy__header5 {
391 |         /* Bootstrap variables */
392 |         --bs-body-color: #373572;
393 |         --bs-body-bg: rgb(252, 236, 209);
394 | 
395 |         /* Easy Frontend variables */
396 |         --ezy-theme-color: rgb(13, 110, 253);
397 |         --ezy-theme-color-rgb: 13, 110, 253;
398 |         --ezy-shadow: 0px 4px 44px rgba(159, 190, 218, 0.37);
399 | 
400 |         background-color: var(--bs-body-bg);
401 |         overflow: hidden;
402 |         padding: 60px 0;
403 |         position: relative;
404 |       }
405 | 
406 |       @media (min-width: 768px) {
407 |         .ezy__header5 {
408 |           padding: 100px 0;
409 |         }
410 |       }
411 | 
412 |       .ezy__header5-heading {
413 |         font-weight: bold;
414 |         font-size: 25px;
415 |         line-height: 25px;
416 |         color: var(--bs-body-color);
417 |       }
418 | 
419 |       @media (min-width: 768px) {
420 |         .ezy__header5-heading {
421 |           font-size: 70px;
422 |           line-height: 70px;
423 |         }
424 |       }
425 | 
426 |       .ezy__header5-sub-heading {
427 |         color: var(--bs-body-color);
428 |         font-size: 22px;
429 |         line-height: 1.5;
430 |         opacity: 0.8;
431 |       }
432 | 
433 |       .ezy__header5-btn {
434 |         padding: 12px 30px;
435 |         color: var(--bs-body-color);
436 |         box-shadow: var(--ezy-shadow);
437 |         border-radius: 10px;
438 |       }
439 |     </style>
440 |     <section class="ezy__header5">
441 |       <svg
442 |         class="position-absolute start-0 bottom-0"
443 |         width="474"
444 |         height="624"
445 |         viewBox="0 0 474 624"
446 |         fill="none"
447 |         xmlns="http://www.w3.org/2000/svg"
448 |       >
449 |         <rect
450 |           x="307.203"
451 |           y="-77"
452 |           width="380"
453 |           height="1282.77"
454 |           rx="190"
455 |           transform="rotate(49.9815 307.203 -77)"
456 |           fill="rgba(255, 255, 255, .25)"
457 |         />
458 |       </svg>
459 |       <svg
460 |         class="position-absolute end-0 top-0"
461 |         width="568"
462 |         height="579"
463 |         viewBox="0 0 568 579"
464 |         fill="none"
465 |         xmlns="http://www.w3.org/2000/svg"
466 |       >
467 |         <rect
468 |           x="521.617"
469 |           y="-138"
470 |           width="380"
471 |           height="782.419"
472 |           rx="190"
473 |           transform="rotate(49.9815 521.617 -138)"
474 |           fill="rgba(255, 255, 255, .25)"
475 |         />
476 |       </svg>
477 |       <div class="container position-relative">
478 |         <div class="row align-items-center">
479 |           <div class="col-lg-6 pe-xl-5 text-center text-lg-start">
480 |             <h2 class="ezy__header5-heading mb-4">Malesuada fames ac turpis egest</h2>
481 |             <p class="ezy__header5-sub-heading">
482 |               Malesuada fames ac turpis egestas enas pharetra convallis. Cras pulvinar mattis nunc sed blandit.
483 |             </p>
484 |             <a href="" class="btn btn-light ezy__header5-btn fs-5 mt-4 mt-md-5"
485 |               >Try Now <span class="fas fa-arrow-right ms-2"></span
486 |             ></a>
487 |           </div>
488 |           <div class="col-lg-6 mt-5 mt-lg-0 text-center text-lg-start">
489 |             <img src="https://cdn.easyfrontend.com/pictures/hero/hero-5.png" alt="" class="rounded img-fluid mt-3" />
490 |           </div>
491 |         </div>
492 |       </div>
493 |     </section>
494 | 
495 |     <br />
496 | 
497 |   </body>
498 | </html>
499 | 


--------------------------------------------------------------------------------
/bootstrap/call-to-actions/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Call To Action(HTML-Bootstrap)</title>
  8 | 
  9 |     <!-- Color Scheme-->
 10 |     <script src="../../assets/demo/script.js"></script>
 11 |     <script>
 12 |       appendHeadInfo("bootstrap");
 13 |     </script>
 14 |   </head>
 15 | 
 16 |   <body>
 17 |     <!--
 18 |    Name:  Call To Action 1
 19 | -->
 20 |     <style>
 21 |       .ezy__cta1 {
 22 |         /* Bootstrap variables */
 23 |         --bs-body-color: #28303b;
 24 |         --bs-body-bg: rgb(255, 255, 255);
 25 | 
 26 |         /* Easy Frontend variables */
 27 |         --ezy-theme-color: rgb(13, 110, 253);
 28 |         --ezy-theme-color-rgb: 13, 110, 253;
 29 |         --ezy-form-card-bg: #ffffff;
 30 | 
 31 |         background: #ff4e53;
 32 |         background: -webkit-linear-gradient(131deg, #ff9d66, #ff4e53);
 33 |         background: linear-gradient(131deg, #ff9d66, #ff4e53);
 34 |         overflow: hidden;
 35 |         padding: 50px 0;
 36 |       }
 37 | 
 38 |       @media (min-width: 992px) {
 39 |         .ezy__cta1 {
 40 |           padding: 100px 0;
 41 |         }
 42 |       }
 43 | 
 44 |       /* Gray Block Style */
 45 |       .gray .ezy__cta1,
 46 |       .ezy__cta1.gray {
 47 |         /* Bootstrap variables */
 48 |         --bs-body-bg: rgb(246, 246, 246);
 49 | 
 50 |         /* Easy Frontend variables */
 51 |         --ezy-form-card-bg: #f6f6f6;
 52 |       }
 53 | 
 54 |       /* Dark Gray Block Style */
 55 |       .dark-gray .ezy__cta1,
 56 |       .ezy__cta1.dark-gray {
 57 |         /* Bootstrap variables */
 58 |         --bs-body-color: #ffffff;
 59 |         --bs-body-bg: rgb(30, 39, 53);
 60 | 
 61 |         /* Easy Frontend variables */
 62 |         --ezy-form-card-bg: #1f2d3f;
 63 |       }
 64 | 
 65 |       /* Dark Block Style */
 66 |       .dark .ezy__cta1,
 67 |       .ezy__cta1.dark {
 68 |         --bs-body-color: #ffffff;
 69 |         --bs-body-bg: rgb(11, 23, 39);
 70 | 
 71 |         /* Easy Frontend variables */
 72 |         --ezy-form-card-bg: #162231;
 73 |       }
 74 | 
 75 |       .ezy__cta1-shape {
 76 |         color: var(--bs-body-bg);
 77 |       }
 78 | 
 79 |       .ezy__cta1-heading {
 80 |         font-weight: bold;
 81 |         font-size: 25px;
 82 |         line-height: 25px;
 83 |         color: var(--ezy-theme-color);
 84 |       }
 85 | 
 86 |       @media (min-width: 768px) {
 87 |         .ezy__cta1-heading {
 88 |           font-size: 35px;
 89 |           line-height: 35px;
 90 |         }
 91 |       }
 92 | 
 93 |       .ezy__cta1-sub-heading {
 94 |         font-size: 18px;
 95 |         line-height: 25px;
 96 |         color: var(--bs-body-color);
 97 |       }
 98 | 
 99 |       .ezy__cta1-form-card {
100 |         background-color: var(--ezy-form-card-bg);
101 |         border-radius: 10px;
102 |       }
103 | 
104 |       .ezy__cta1-btn {
105 |         padding: 12px 30px;
106 |       }
107 | 
108 |       .ezy__cta1 .btn-primary {
109 |         background-color: var(--ezy-theme-color);
110 |         border-color: var(--ezy-theme-color);
111 |         color: #fff;
112 |       }
113 |     </style>
114 |     <section class="ezy__cta1 position-relative">
115 |       <svg
116 |         class="ezy__cta1-shape position-absolute top-0 start-0"
117 |         xmlns="http://www.w3.org/2000/svg"
118 |         viewBox="0 0 1920 90"
119 |         preserveAspectRatio="none"
120 |       >
121 |         <path
122 |           d="M959 90c320.067 0 640.4-38.333 961-90H0c319.267 76.667 638.933 90 959 90z"
123 |           fill="currentColor"
124 |           fill-rule="evenodd"
125 |         />
126 |       </svg>
127 |       <svg
128 |         class="ezy__cta1-shape position-absolute bottom-0 start-0"
129 |         xmlns="http://www.w3.org/2000/svg"
130 |         viewBox="0 0 1920 90"
131 |         preserveAspectRatio="none"
132 |       >
133 |         <path
134 |           d="M959 0c320.067 0 640.4 38.333 961 90H0C319.267 38.333 638.933 0 959 0z"
135 |           fill="currentColor"
136 |           fill-rule="evenodd"
137 |         />
138 |       </svg>
139 | 
140 |       <div class="container position-relative">
141 |         <div class="row justify-content-center text-white">
142 |           <div class="col-lg-6">
143 |             <section class="ezy__cta1-form-card p-4">
144 |               <h2 class="ezy__cta1-heading mb-4">Did you know?</h2>
145 |               <p class="ezy__cta1-sub-heading mb-4">
146 |                 It’s easier to reach your savings goals when you have the right savings account.
147 |               </p>
148 |               <button type="submit" class="btn btn-primary ezy__cta1-btn">Subscribe</button>
149 |             </section>
150 |           </div>
151 |         </div>
152 |       </div>
153 |     </section>
154 | 
155 |     <br />
156 | 
157 |     <!--
158 |    Name:  Call To Action 2
159 | -->
160 |     <style>
161 |       .ezy__cta2 {
162 |         /* Bootstrap variables */
163 |         --bs-body-color: #ffffff;
164 |         --bs-body-bg: rgb(79, 42, 192);
165 | 
166 |         /* Easy Frontend variables */
167 |         --ezy-theme-color: rgb(13, 110, 253);
168 |         --ezy-theme-color-rgb: 13, 110, 253;
169 | 
170 |         background-color: var(--bs-body-bg);
171 |         overflow: hidden;
172 |         padding: 50px 0;
173 |       }
174 | 
175 |       @media (min-width: 992px) {
176 |         .ezy__cta2 {
177 |           padding: 80px 0;
178 |         }
179 |       }
180 | 
181 |       .ezy__cta2-heading {
182 |         font-weight: bold;
183 |         font-size: 25px;
184 |         line-height: 25px;
185 |         color: var(--bs-body-color);
186 |       }
187 | 
188 |       @media (min-width: 768px) {
189 |         .ezy__cta2-heading {
190 |           font-size: 45px;
191 |           line-height: 45px;
192 |         }
193 |       }
194 | 
195 |       .ezy__cta2-sub-heading {
196 |         font-size: 18px;
197 |         line-height: 25px;
198 |         color: var(--bs-body-color);
199 |       }
200 | 
201 |       .ezy__cta2-shape {
202 |         width: 400px;
203 |         height: 400px;
204 |         background-color: rgba(255, 255, 255, 0.03);
205 |         border-radius: 50%;
206 |         margin: -100px;
207 |       }
208 | 
209 |       .ezy__cta2-btn {
210 |         padding: 12px 30px;
211 |       }
212 |     </style>
213 |     <section class="ezy__cta2 position-relative">
214 |       <div class="ezy__cta2-shape position-absolute start-0 top-0"></div>
215 |       <div class="ezy__cta2-shape position-absolute end-0 bottom-0"></div>
216 | 
217 |       <div class="container position-relative">
218 |         <div class="row justify-content-center text-center text-white">
219 |           <div class="col-lg-5">
220 |             <h2 class="ezy__cta2-heading mb-4">Did you know?</h2>
221 |             <p class="ezy__cta2-sub-heading mb-5">
222 |               It’s easier to reach your savings goals when you have the right savings account.
223 |             </p>
224 |             <button type="submit" class="btn btn-light ezy__cta2-btn">Subscribe</button>
225 |           </div>
226 |         </div>
227 |       </div>
228 |     </section>
229 | 
230 |     <br />
231 | 
232 |     <!--
233 |    Name:  Call To Action 3
234 | -->
235 |     <style>
236 |       .ezy__cta3 {
237 |         /* Bootstrap variables */
238 |         --bs-body-color: #ffffff;
239 |         --bs-body-bg: rgb(250, 192, 87);
240 | 
241 |         /* Easy Frontend variables */
242 |         --ezy-theme-color: rgb(13, 110, 253);
243 |         --ezy-theme-color-rgb: 13, 110, 253;
244 | 
245 |         background-color: var(--bs-body-bg);
246 |         overflow: hidden;
247 |         padding: 50px 0;
248 |       }
249 | 
250 |       @media (min-width: 992px) {
251 |         .ezy__cta3 {
252 |           padding: 80px 0;
253 |         }
254 |       }
255 | 
256 |       .ezy__cta3-heading {
257 |         font-weight: bold;
258 |         font-size: 25px;
259 |         line-height: 25px;
260 |         color: var(--bs-body-color);
261 |       }
262 | 
263 |       @media (min-width: 768px) {
264 |         .ezy__cta3-heading {
265 |           font-size: 45px;
266 |           line-height: 45px;
267 |         }
268 |       }
269 | 
270 |       .ezy__cta3-sub-heading {
271 |         font-size: 18px;
272 |         line-height: 25px;
273 |         color: var(--bs-body-color);
274 |       }
275 | 
276 |       .ezy__cta3 .form-control {
277 |         min-height: 48px;
278 |         line-height: 26px;
279 |         border: none;
280 |         background: rgba(255, 255, 255, 1);
281 |         color: #000000;
282 |       }
283 | 
284 |       .ezy__cta3 .form-control:focus {
285 |         box-shadow: none;
286 |       }
287 | 
288 |       .ezy__cta3-btn {
289 |         padding: 12px 30px;
290 |         min-width: 110px;
291 |         height: 48px;
292 |         background-color: var(--ezy-theme-color);
293 |         border-color: var(--ezy-theme-color);
294 |       }
295 | 
296 |       .ezy__cta3-btn:hover {
297 |         background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
298 |         border-color: rgba(var(--ezy-theme-color-rgb), 0.9);
299 |       }
300 |     </style>
301 |     <section class="ezy__cta3">
302 |       <div class="container">
303 |         <div class="row align-items-center justify-content-between text-white">
304 |           <div class="col-lg-5">
305 |             <h2 class="ezy__cta3-heading mb-4">Did you know?</h2>
306 |             <p class="ezy__cta3-sub-heading mb-0">
307 |               It’s easier to reach your savings goals when you have the right savings account.
308 |             </p>
309 |           </div>
310 |           <div class="col-md-8 col-lg-5 mt-5">
311 |             <form>
312 |               <div class="form-group mb-0">
313 |                 <div class="input-group p-1 bg-white rounded">
314 |                   <input type="email" class="form-control" placeholder="Enter Email" />
315 |                   <div class="input-group-append">
316 |                     <button class="btn btn-dark ezy__cta3-btn">Subscribe</button>
317 |                   </div>
318 |                 </div>
319 |               </div>
320 |             </form>
321 |           </div>
322 |         </div>
323 |       </div>
324 |     </section>
325 | 
326 |     <br />
327 | 
328 |     <!--
329 |    Name:  Call To Action 4
330 | -->
331 |     <style>
332 |       .ezy__cta4 {
333 |         /* Bootstrap variables */
334 |         --bs-body-color: #ffffff;
335 |         --bs-body-bg: #291e6a;
336 | 
337 |         /* Easy Frontend variables */
338 |         --ezy-theme-color: rgb(13, 110, 253);
339 |         --ezy-theme-color-rgb: 13, 110, 253;
340 | 
341 |         background-color: var(--bs-body-bg);
342 |         overflow: hidden;
343 |         padding: 50px 0;
344 |       }
345 | 
346 |       @media (min-width: 992px) {
347 |         .ezy__cta4 {
348 |           padding: 80px 0;
349 |         }
350 |       }
351 | 
352 |       .ezy__cta4-heading {
353 |         font-weight: bold;
354 |         font-size: 25px;
355 |         line-height: 25px;
356 |         color: var(--bs-body-color);
357 |       }
358 | 
359 |       @media (min-width: 768px) {
360 |         .ezy__cta4-heading {
361 |           font-size: 45px;
362 |           line-height: 45px;
363 |         }
364 |       }
365 | 
366 |       .ezy__cta4-sub-heading {
367 |         font-size: 18px;
368 |         line-height: 25px;
369 |         color: var(--bs-body-color);
370 |         opacity: 0.7;
371 |       }
372 | 
373 |       .ezy__cta4 .form-control {
374 |         min-height: 48px;
375 |         line-height: 26px;
376 |         border: none;
377 |         background: rgba(255, 255, 255, 1);
378 |         color: #000000;
379 |       }
380 | 
381 |       .ezy__cta4 .form-control:focus {
382 |         box-shadow: none;
383 |       }
384 | 
385 |       .ezy__cta4-btn {
386 |         padding: 12px 30px;
387 |         min-width: 110px;
388 |         height: 48px;
389 |         background-color: var(--ezy-theme-color);
390 |         border-color: var(--ezy-theme-color);
391 |       }
392 | 
393 |       .ezy__cta4-btn:hover {
394 |         background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
395 |         border-color: rgba(var(--ezy-theme-color-rgb), 0.9);
396 |       }
397 |     </style>
398 |     <section class="ezy__cta4">
399 |       <div class="container">
400 |         <div class="row justify-content-center text-center text-white">
401 |           <div class="col-lg-7">
402 |             <h2 class="ezy__cta4-heading mb-4">Join with us for more information</h2>
403 | 
404 |             <div class="row justify-content-center">
405 |               <div class="col-sm-8">
406 |                 <p class="ezy__cta4-sub-heading mb-5">
407 |                   It’s easier to reach your savings goals when you have the right savings account.
408 |                 </p>
409 |               </div>
410 |               <div class="col-sm-8">
411 |                 <form>
412 |                   <div class="form-group mb-0">
413 |                     <div class="input-group p-1 bg-white rounded">
414 |                       <input type="email" class="form-control" placeholder="Enter Email" />
415 |                       <div class="input-group-append">
416 |                         <button class="btn btn-danger ezy__cta4-btn">Subscribe</button>
417 |                       </div>
418 |                     </div>
419 |                   </div>
420 |                 </form>
421 |               </div>
422 |             </div>
423 |           </div>
424 |         </div>
425 |       </div>
426 |     </section>
427 | 
428 |     <br />
429 | 
430 |     <!--
431 |    Name:  Call To Action 5
432 | -->
433 |     <style>
434 |       .ezy__cta5 {
435 |         /* Bootstrap variables */
436 |         --bs-body-color: #28303b;
437 |         --bs-body-bg: rgb(255, 255, 255);
438 | 
439 |         /* Easy Frontend variables */
440 |         --ezy-theme-color: rgb(13, 110, 253);
441 |         --ezy-theme-color-rgb: 13, 110, 253;
442 | 
443 |         background-color: var(--bs-body-bg);
444 |         overflow: hidden;
445 |         padding: 50px 0;
446 |       }
447 | 
448 |       /* Gray Block Style */
449 |       .gray .ezy__cta5,
450 |       .ezy__cta5.gray {
451 |         /* Bootstrap variables */
452 |         --bs-body-bg: rgb(246, 246, 246);
453 |       }
454 | 
455 |       /* Dark Gray Block Style */
456 |       .dark-gray .ezy__cta5,
457 |       .ezy__cta5.dark-gray {
458 |         /* Bootstrap variables */
459 |         --bs-body-color: #ffffff;
460 |         --bs-body-bg: rgb(30, 39, 53);
461 |       }
462 | 
463 |       /* Dark Block Style */
464 |       .dark .ezy__cta5,
465 |       .ezy__cta5.dark {
466 |         /* Bootstrap variables */
467 |         --bs-body-color: #ffffff;
468 |         --bs-body-bg: rgb(11, 23, 39);
469 |       }
470 | 
471 |       @media (min-width: 992px) {
472 |         .ezy__cta5 {
473 |           padding: 80px 0;
474 |         }
475 |       }
476 | 
477 |       .ezy__cta5-heading {
478 |         font-weight: bold;
479 |         font-size: 25px;
480 |         line-height: 25px;
481 |         color: var(--bs-body-color);
482 |       }
483 | 
484 |       @media (min-width: 768px) {
485 |         .ezy__cta5-heading {
486 |           font-size: 45px;
487 |           line-height: 45px;
488 |         }
489 |       }
490 | 
491 |       .ezy__cta5-sub-heading {
492 |         font-size: 18px;
493 |         line-height: 25px;
494 |         color: var(--bs-body-color);
495 |         opacity: 0.7;
496 |       }
497 | 
498 |       .ezy__cta5 .form-control {
499 |         min-height: 48px;
500 |         line-height: 26px;
501 |         border: none;
502 |         background: rgba(255, 255, 255, 1);
503 |         color: #000000;
504 |       }
505 | 
506 |       .ezy__cta5 .form-control:focus {
507 |         box-shadow: none;
508 |       }
509 | 
510 |       .ezy__cta5-btn {
511 |         padding: 12px 30px;
512 |         min-width: 110px;
513 |         height: 48px;
514 |         background-color: var(--ezy-theme-color);
515 |         border-color: var(--ezy-theme-color);
516 |       }
517 | 
518 |       .ezy__cta5-btn:hover {
519 |         background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
520 |         border-color: rgba(var(--ezy-theme-color-rgb), 0.9);
521 |       }
522 |     </style>
523 |     <section class="ezy__cta5">
524 |       <div class="container">
525 |         <div class="row justify-content-center text-center">
526 |           <div class="col-lg-7">
527 |             <h2 class="ezy__cta5-heading mb-4">Join with us for more information</h2>
528 | 
529 |             <div class="row justify-content-center">
530 |               <div class="col-sm-8">
531 |                 <p class="ezy__cta5-sub-heading mb-5">
532 |                   It’s easier to reach your savings goals when you have the right savings account.
533 |                 </p>
534 |               </div>
535 |             </div>
536 | 
537 |             <button type="submit" class="btn btn-primary ezy__cta5-btn">Quote Now</button>
538 |             <div>
539 |               <img src="https://cdn.easyfrontend.com/pictures/cta/cta_5.png" alt="" class="img-fluid" />
540 |             </div>
541 |           </div>
542 |         </div>
543 |       </div>
544 |     </section>
545 | 
546 |     <br />
547 | 
548 |   </body>
549 | </html>
550 | 


--------------------------------------------------------------------------------
/bootstrap/hero-headers-small/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Secondary Header(HTML-Bootstrap)</title>
  8 | 
  9 |     <!-- Color Scheme-->
 10 |     <script src="../../assets/demo/script.js"></script>
 11 |     <script>
 12 |       appendHeadInfo("bootstrap");
 13 |     </script>
 14 |   </head>
 15 | 
 16 |   <body>
 17 |     <!--
 18 |     Name: secondary header 1
 19 | -->
 20 |     <style>
 21 |       .ezy__sheader1 {
 22 |         /* Bootstrap variables */
 23 |         --bs-body-bg: #fff;
 24 | 
 25 |         /* Easy Frontend variables */
 26 |         --ezy-theme-color: rgb(13, 110, 253);
 27 |         --ezy-theme-color-rgb: 13, 110, 253;
 28 |         --ezy-card-bg: rgb(246, 246, 246);
 29 |         --ezy-svg-color: #fff;
 30 | 
 31 |         background-color: var(--bs-body-bg);
 32 |         color: var(--bs-body-color);
 33 |         overflow: hidden;
 34 |         position: relative;
 35 |       }
 36 | 
 37 |       /* Gray Block Style */
 38 |       .gray .ezy__sheader1,
 39 |       .ezy__sheader1.gray {
 40 |         /* Bootstrap variables */
 41 |         --bs-body-bg: rgb(246, 246, 246);
 42 | 
 43 |         /* Easy Frontend variables */
 44 |         --ezy-card-bg: #fff;
 45 |         --ezy-svg-color: #f6f6f6;
 46 |       }
 47 | 
 48 |       /* Dark Gray Block Style */
 49 |       .dark-gray .ezy__sheader1,
 50 |       .ezy__sheader1.dark-gray {
 51 |         /* Bootstrap variables */
 52 |         --bs-body-color: #ffffff;
 53 |         --bs-body-bg: rgb(30, 39, 53);
 54 | 
 55 |         /* Easy Frontend variables */
 56 |         --ezy-svg-color: rgb(30, 39, 53);
 57 |         --ezy-card-bg: rgb(11, 23, 39);
 58 |       }
 59 | 
 60 |       /* Dark Block Style */
 61 |       .dark .ezy__sheader1,
 62 |       .ezy__sheader1.dark {
 63 |         /* Bootstrap variables */
 64 |         --bs-body-color: #ffffff;
 65 |         --bs-body-bg: rgb(11, 23, 39);
 66 | 
 67 |         /* Easy Frontend variables */
 68 |         --ezy-svg-color: rgb(11, 23, 39);
 69 |         --ezy-card-bg: rgb(30, 39, 53);
 70 |       }
 71 | 
 72 |       .ezy__sheader1-heading {
 73 |         font-weight: bold;
 74 |         font-size: 35px;
 75 |         line-height: 1;
 76 |       }
 77 | 
 78 |       @media (min-width: 768px) {
 79 |         .ezy__sheader1-heading {
 80 |           font-size: 60px;
 81 |         }
 82 |       }
 83 | 
 84 |       .ezy__sheader1-sub-heading {
 85 |         font-size: 20px;
 86 |         line-height: 1.2px;
 87 |         opacity: 0.8;
 88 |       }
 89 | 
 90 |       /*  ezy__sheader1-top */
 91 |       .ezy__sheader1-top {
 92 |         background-color: var(--ezy-card-bg);
 93 |         padding: 70px 0;
 94 |       }
 95 | 
 96 |       @media (min-width: 768px) {
 97 |         .ezy__sheader1-top {
 98 |           padding: 100px 0;
 99 |         }
100 |       }
101 | 
102 |       /* svg */
103 |       @media (min-width: 768px) {
104 |         .ezy__sheader1-svg {
105 |           position: absolute;
106 |           bottom: 60px;
107 |           right: 300px;
108 |         }
109 |       }
110 |     </style>
111 |     <section class="ezy__sheader1">
112 |       <div class="ezy__sheader1-top position-relative">
113 |         <svg
114 |           class="ezy__sheader1-svg d-none d-md-block"
115 |           width="104"
116 |           height="104"
117 |           viewBox="0 0 104 104"
118 |           fill="none"
119 |           xmlns="http://www.w3.org/2000/svg"
120 |         >
121 |           <circle cx="52" cy="52" r="52" fill="var(--ezy-svg-color)" />
122 |         </svg>
123 |         <svg
124 |           class="position-absolute bottom-0 end-0 d-none d-md-block"
125 |           width="242"
126 |           height="164"
127 |           viewBox="0 0 242 164"
128 |           fill="none"
129 |           xmlns="http://www.w3.org/2000/svg"
130 |         >
131 |           <circle cx="165.5" cy="165.5" r="150.5" stroke="var(--ezy-svg-color)" stroke-width="30" />
132 |         </svg>
133 |         <div class="container">
134 |           <div class="row">
135 |             <div class="col-12 col-md-8">
136 |               <p class="ezy__sheader1-sub-heading mb-4">Home / About Us</p>
137 |               <h1 class="ezy__sheader1-heading mb-0">Let's reveal something new!</h1>
138 |             </div>
139 |           </div>
140 |         </div>
141 |       </div>
142 |     </section>
143 | 
144 |     <br />
145 | 
146 |     <!--
147 |     Name: secondary header 2
148 | -->
149 |     <style>
150 |       .ezy__sheader2 {
151 |         /* Bootstrap variables */
152 |         --bs-body-bg: #fff;
153 |         --bs-body-color: #000;
154 | 
155 |         /* Easy Frontend variables */
156 |         --ezy-theme-color: rgb(13, 110, 253);
157 |         --ezy-theme-color-rgb: 13, 110, 253;
158 |         --ezy-svg-color: rgb(246, 246, 246);
159 |         --ezy-border-color: rgba(0, 0, 0, 0.2);
160 |         --ezy-topbar-bg: #f6f6f6;
161 | 
162 |         background-color: var(--bs-body-bg);
163 |         color: var(--bs-body-color);
164 |         overflow: hidden;
165 |         position: relative;
166 |         padding: 70px 0;
167 |         z-index: 1;
168 |       }
169 | 
170 |       @media (min-width: 768px) {
171 |         .ezy__sheader2 {
172 |           padding: 100px 0;
173 |         }
174 |       }
175 | 
176 |       /* Gray Block Style */
177 |       .gray .ezy__sheader2,
178 |       .ezy__sheader2.gray {
179 |         /* Bootstrap variables */
180 |         --bs-body-bg: rgb(246, 246, 246);
181 | 
182 |         /* Easy Frontend variables */
183 |         --ezy-topbar-bg: #fff;
184 |         --ezy-svg-color: #fff;
185 |       }
186 | 
187 |       /* Dark Gray Block Style */
188 |       .dark-gray .ezy__sheader2,
189 |       .ezy__sheader2.dark-gray {
190 |         /* Bootstrap variables */
191 |         --bs-body-color: #ffffff;
192 |         --bs-body-bg: rgb(30, 39, 53);
193 | 
194 |         /* Easy Frontend variables */
195 |         --ezy-svg-color: rgb(11, 23, 39);
196 |         --ezy-border-color: rgba(255, 255, 255, 0.2);
197 |         --ezy-topbar-bg: rgb(11, 23, 39);
198 |       }
199 | 
200 |       /* Dark Block Style */
201 |       .dark .ezy__sheader2,
202 |       .ezy__sheader2.dark {
203 |         /* Bootstrap variables */
204 |         --bs-body-color: #ffffff;
205 |         --bs-body-bg: rgb(11, 23, 39);
206 | 
207 |         /* Easy Frontend variables */
208 |         --ezy-svg-color: rgb(30, 39, 53);
209 |         --ezy-border-color: rgba(150, 150, 150, 0.25);
210 |         --ezy-topbar-bg: rgb(30, 39, 53);
211 |       }
212 | 
213 |       .ezy__sheader2-heading {
214 |         font-weight: bold;
215 |         font-size: 35px;
216 |         line-height: 1.2;
217 |       }
218 | 
219 |       @media (min-width: 768px) {
220 |         .ezy__sheader2-heading {
221 |           font-size: 60px;
222 |         }
223 |       }
224 | 
225 |       .ezy__sheader2-sub-heading {
226 |         font-size: 20px;
227 |         line-height: 1.2;
228 |         opacity: 0.75;
229 |       }
230 |     </style>
231 |     <section class="ezy__sheader2">
232 |       <div class="container">
233 |         <div class="row">
234 |           <div class="col-12 col-md-8">
235 |             <h1 class="ezy__sheader2-heading">Finally you're here!</h1>
236 |             <p class="ezy__sheader2-sub-heading mt-4 mb-0">
237 |               Coquettish darn pernicious foresaw therefore much amongst lingeringly shed much due antagonistically
238 |               alongside so then more and about turgid wrote gravida consequat so stunningly this that much slew.
239 |             </p>
240 |           </div>
241 |         </div>
242 |       </div>
243 |     </section>
244 | 
245 |     <br />
246 | 
247 |     <!--
248 |     Name: secondary header 3
249 | -->
250 |     <style>
251 |       .ezy__sheader3 {
252 |         /* Bootstrap variables */
253 |         --bs-body-bg: #fff;
254 |         --bs-body-color: #000;
255 | 
256 |         /* Easy Frontend variables */
257 |         --ezy-theme-color: rgb(13, 110, 253);
258 |         --ezy-theme-color-rgb: 13, 110, 253;
259 |         --ezy-svg-color: rgb(246, 246, 246);
260 |         --ezy-border-color: rgba(0, 0, 0, 0.2);
261 |         --ezy-topbar-bg: #f6f6f6;
262 | 
263 |         background-color: var(--bs-body-bg);
264 |         color: var(--bs-body-color);
265 |         overflow: hidden;
266 |         position: relative;
267 |         padding: 70px 0;
268 |         z-index: 1;
269 |       }
270 | 
271 |       @media (min-width: 768px) {
272 |         .ezy__sheader3 {
273 |           padding: 100px 0;
274 |         }
275 |       }
276 | 
277 |       /* Gray Block Style */
278 |       .gray .ezy__sheader3,
279 |       .ezy__sheader3.gray {
280 |         /* Bootstrap variables */
281 |         --bs-body-bg: rgb(246, 246, 246);
282 | 
283 |         /* Easy Frontend variables */
284 |         --ezy-topbar-bg: #fff;
285 |         --ezy-svg-color: #fff;
286 |       }
287 | 
288 |       /* Dark Gray Block Style */
289 |       .dark-gray .ezy__sheader3,
290 |       .ezy__sheader3.dark-gray {
291 |         /* Bootstrap variables */
292 |         --bs-body-color: #ffffff;
293 |         --bs-body-bg: rgb(30, 39, 53);
294 | 
295 |         /* Easy Frontend variables */
296 |         --ezy-svg-color: rgb(11, 23, 39);
297 |         --ezy-border-color: rgba(255, 255, 255, 0.2);
298 |         --ezy-topbar-bg: rgb(11, 23, 39);
299 |       }
300 | 
301 |       /* Dark Block Style */
302 |       .dark .ezy__sheader3,
303 |       .ezy__sheader3.dark {
304 |         /* Bootstrap variables */
305 |         --bs-body-color: #ffffff;
306 |         --bs-body-bg: rgb(11, 23, 39);
307 | 
308 |         /* Easy Frontend variables */
309 |         --ezy-svg-color: rgb(30, 39, 53);
310 |         --ezy-border-color: rgba(150, 150, 150, 0.25);
311 |         --ezy-topbar-bg: rgb(30, 39, 53);
312 |       }
313 | 
314 |       .ezy__sheader3-heading {
315 |         font-weight: bold;
316 |         font-size: 35px;
317 |         line-height: 1.2;
318 |       }
319 | 
320 |       @media (min-width: 768px) {
321 |         .ezy__sheader3-heading {
322 |           font-size: 60px;
323 |         }
324 |       }
325 | 
326 |       .ezy__sheader3-sub-heading {
327 |         font-size: 20px;
328 |         line-height: 1.2;
329 |         opacity: 0.75;
330 |       }
331 |     </style>
332 |     <section class="ezy__sheader3">
333 |       <div class="container">
334 |         <div class="row justify-content-center">
335 |           <div class="col-12 col-md-8 text-center">
336 |             <h1 class="ezy__sheader3-heading">Page Heading</h1>
337 |             <p class="ezy__sheader3-sub-heading mt-4 mb-0">
338 |               Metus, iaculis aliquam convallis vitae placerat ullamcorper cum id id. Gravida est est, sapien, lacus.
339 |               Cursus facilisis tortor feugiat maecenas gravida consequat non blandit.
340 |             </p>
341 |           </div>
342 |         </div>
343 |       </div>
344 |     </section>
345 | 
346 |     <br />
347 | 
348 |     <!--
349 |     Name: secondary header 4
350 | -->
351 |     <style>
352 |       .ezy__sheader4 {
353 |         /* Bootstrap variables */
354 |         --bs-body-bg: #000;
355 |         --bs-body-color: #fff;
356 | 
357 |         /* Easy Frontend variables */
358 |         --ezy-theme-color: rgb(13, 110, 253);
359 |         --ezy-theme-color-rgb: 13, 110, 253;
360 | 
361 |         background-color: var(--bs-body-bg);
362 |         background-image: url(https://cdn.easyfrontend.com/pictures/background/background1.jpg);
363 |         background-position: center;
364 |         background-repeat: no-repeat;
365 |         background-size: cover;
366 |         color: var(--bs-body-color);
367 |         overflow: hidden;
368 |         position: relative;
369 |         padding: 100px 0;
370 |         z-index: 1;
371 |       }
372 | 
373 |       @media (min-width: 768px) {
374 |         .ezy__sheader4 {
375 |           padding: 150px 0;
376 |         }
377 |       }
378 |       .ezy__sheader4-heading {
379 |         font-weight: bold;
380 |         font-size: 35px;
381 |         line-height: 1.2;
382 |       }
383 | 
384 |       @media (min-width: 768px) {
385 |         .ezy__sheader4-heading {
386 |           font-size: 60px;
387 |         }
388 |       }
389 | 
390 |       .ezy__sheader4-sub-heading {
391 |         font-size: 20px;
392 |         line-height: 1.45;
393 |         opacity: 0.75;
394 |       }
395 |       .ezy__sheader4-overlay {
396 |         position: absolute;
397 |         top: 0;
398 |         left: 0;
399 |         right: 0;
400 |         bottom: 0;
401 |         background-color: rgba(0, 0, 0, 0.6);
402 |         z-index: -1;
403 |       }
404 |     </style>
405 |     <section class="ezy__sheader4">
406 |       <div class="ezy__sheader4-overlay"></div>
407 |       <div class="container">
408 |         <div class="row justify-content-center">
409 |           <div class="col-12 col-md-8 text-center">
410 |             <h1 class="ezy__sheader4-heading">Secondary Heading</h1>
411 |             <p class="ezy__sheader4-sub-heading mt-4 mb-0">
412 |               Cupiditate ullam provident delectus. Eveniet dicta possimus est, alias quo ab cumque labore modi et fuga
413 |               quas deleniti ipsa quasi magni eius culpa quibusdam a!
414 |             </p>
415 |           </div>
416 |         </div>
417 |       </div>
418 |     </section>
419 | 
420 |     <br />
421 | 
422 |     <!--
423 | Name: secondary header 5
424 | -->
425 |     <style>
426 |       .ezy__sheader5 {
427 |         /* Bootstrap variables */
428 |         --bs-body-bg: #fff;
429 |         --bs-body-color: #fff;
430 | 
431 |         /* Easy Frontend variables */
432 |         --ezy-theme-color: rgb(13, 110, 253);
433 |         --ezy-theme-color-rgb: 13, 110, 253;
434 | 
435 |         background-color: #fff;
436 |         background-image: url(https://cdn.easyfrontend.com/pictures/background/abstract-background1.jpg);
437 |         background-position: center;
438 |         background-repeat: no-repeat;
439 |         background-size: contain;
440 |         color: var(--bs-body-color);
441 |         overflow: hidden;
442 |         position: relative;
443 |         padding: 100px 0;
444 |         z-index: 1;
445 |       }
446 | 
447 |       @media (min-width: 768px) {
448 |         .ezy__sheader5 {
449 |           padding: 200px 0;
450 |         }
451 |       }
452 | 
453 |       /* Gray Block Style */
454 |       .gray .ezy__sheader5,
455 |       .ezy__sheader5.gray {
456 |         /* Bootstrap variables */
457 |         --bs-body-bg: rgb(246, 246, 246);
458 |       }
459 | 
460 |       /* Dark Gray Block Style */
461 |       .dark-gray .ezy__sheader5,
462 |       .ezy__sheader5.dark-gray {
463 |         /* Bootstrap variables */
464 |         --bs-body-bg: rgb(30, 39, 53);
465 |       }
466 | 
467 |       /* Dark Block Style */
468 |       .dark .ezy__sheader5,
469 |       .ezy__sheader5.dark {
470 |         /* Bootstrap variables */
471 |         --bs-body-bg: rgb(11, 23, 39);
472 |       }
473 | 
474 |       .ezy__sheader5-heading {
475 |         font-weight: bold;
476 |         font-size: 35px;
477 |         line-height: 1.2;
478 |       }
479 | 
480 |       @media (min-width: 768px) {
481 |         .ezy__sheader5-heading {
482 |           font-size: 60px;
483 |         }
484 |       }
485 | 
486 |       .ezy__sheader5-sub-heading {
487 |         font-size: 20px;
488 |         line-height: 1.45;
489 |         opacity: 0.75;
490 |       }
491 |       .ezy__sheader5-overlay {
492 |         position: absolute;
493 |         top: 0;
494 |         left: 0;
495 |         right: 0;
496 |         bottom: 0;
497 |         background: linear-gradient(to right, #0ba6f9, #33f3e4);
498 |         opacity: 0.9;
499 |         z-index: -1;
500 |       }
501 | 
502 |       .ezy__sheader5 li a {
503 |         color: #fff;
504 |         padding: 0 10px;
505 |         font-size: 18px;
506 |       }
507 | 
508 |       .ezy__sheader5-shape-divider {
509 |         position: absolute;
510 |         bottom: 0;
511 |         left: 0;
512 |         width: 100%;
513 |         overflow: hidden;
514 |         line-height: 0;
515 |         transform: rotate(180deg);
516 |       }
517 | 
518 |       .ezy__sheader5-shape-divider svg {
519 |         position: relative;
520 |         display: block;
521 |         width: calc(100% + 1.3px);
522 |         height: 56px;
523 |       }
524 | 
525 |       .ezy__sheader5-shape-divider .shape-fill {
526 |         color: var(--bs-body-bg);
527 |       }
528 |     </style>
529 |     <section class="ezy__sheader5">
530 |       <div class="ezy__sheader5-overlay"></div>
531 |       <div class="container">
532 |         <div class="row justify-content-center">
533 |           <div class="col-12 col-md-8 text-center">
534 |             <h1 class="ezy__sheader5-heading">Artificial Inteligence</h1>
535 |             <p class="ezy__sheader5-sub-heading mt-4 mb-0">
536 |               Tenetur et neque delectus deleniti suscipit eos. Delectus quis quaerat illum sit esse, qui, quasi
537 |               obcaecati magni ea cum Beatae non distinctio.
538 |             </p>
539 |             <div class="mt-5">
540 |               <h5>Join Us On</h5>
541 |               <ul class="nav align-items-center justify-content-center mt-3">
542 |                 <li>
543 |                   <a href="#"><i class="fab fa-facebook-f"></i></a>
544 |                 </li>
545 |                 <li>
546 |                   <a href="#"><i class="fab fa-twitter"></i></a>
547 |                 </li>
548 |                 <li>
549 |                   <a href="#"><i class="fab fa-instagram"></i></a>
550 |                 </li>
551 |               </ul>
552 |             </div>
553 |           </div>
554 |         </div>
555 |       </div>
556 | 
557 |       <div class="ezy__sheader5-shape-divider">
558 |         <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
559 |           <path
560 |             fill="currentColor"
561 |             d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
562 |             class="shape-fill"
563 |           ></path>
564 |         </svg>
565 |       </div>
566 |     </section>
567 | 
568 |     <br />
569 | 
570 |   </body>
571 | </html>
572 | 


--------------------------------------------------------------------------------
/bootstrap/numbers/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Numbers(HTML-Bootstrap)</title>
  8 | 
  9 |     <!-- Color Scheme-->
 10 |     <script src="../../assets/demo/script.js"></script>
 11 |     <script>
 12 |       appendHeadInfo("bootstrap");
 13 |     </script>
 14 |   </head>
 15 | 
 16 |   <body style="background: #000" class="">
 17 |     <!--
 18 |     Name: numbers 1
 19 | -->
 20 |     <style>
 21 |       .ezy__numbers1 {
 22 |         /* Bootstrap variables */
 23 |         --bs-body-color: rgb(50, 62, 80);
 24 |         --bs-body-bg: #fff;
 25 | 
 26 |         /* Easy Frontend variables */
 27 |         --ezy-theme-color: rgb(13, 110, 253);
 28 |         --ezy-theme-color-rgb: 13, 110, 253;
 29 | 
 30 |         padding: 50px 0;
 31 |         background-color: var(--bs-body-bg);
 32 |       }
 33 | 
 34 |       /* Gray Block Style */
 35 |       .gray .ezy__numbers1,
 36 |       .ezy__numbers1.gray {
 37 |         /* Bootstrap variables */
 38 |         --bs-body-bg: rgb(246, 246, 246);
 39 |       }
 40 | 
 41 |       /* Dark Gray Block Style */
 42 |       .dark-gray .ezy__numbers1,
 43 |       .ezy__numbers1.dark-gray {
 44 |         /* Bootstrap variables */
 45 |         --bs-body-color: #ffffff;
 46 |         --bs-body-bg: rgb(30, 39, 53);
 47 |       }
 48 | 
 49 |       /* Dark Block Style */
 50 |       .dark .ezy__numbers1,
 51 |       .ezy__numbers1.dark {
 52 |         /* Bootstrap variables */
 53 |         --bs-body-color: #ffffff;
 54 |         --bs-body-bg: rgb(11, 23, 39);
 55 |       }
 56 | 
 57 |       .ezy__numbers1-tag-code {
 58 |         color: var(--bs-body-color);
 59 |       }
 60 | 
 61 |       .ezy__numbers1 {
 62 |         color: var(--bs-body-color);
 63 |       }
 64 | 
 65 |       .ezy__numbers1-tag-code span,
 66 |       .ezy__numbers1 strong,
 67 |       .ezy__numbers1 .btn {
 68 |         color: var(--ezy-theme-color);
 69 |       }
 70 | 
 71 |       .ezy__numbers1 .btn {
 72 |         border-color: var(--ezy-theme-color);
 73 |         border-radius: 0;
 74 |         font-size: 14px;
 75 |         font-style: normal;
 76 |         text-transform: uppercase;
 77 |         transition: 0.5s;
 78 |       }
 79 | 
 80 |       .ezy__numbers1 .btn:hover {
 81 |         background-color: var(--ezy-theme-color);
 82 |         color: var(--bs-body-color);
 83 |       }
 84 |     </style>
 85 |     <section class="ezy__numbers1">
 86 |       <div class="container">
 87 |         <div class="row align-items-center">
 88 |           <div class="col-12 col-lg-4 text-center my-4 my-sm-0">
 89 |             <h3 class="ezy__numbers1-tag-code">
 90 |               Flying
 91 |               <span class="color ms-1">
 92 |                 <span>&lt;</span>
 93 |                 <span>/</span>
 94 |                 <span>dreams</span>
 95 |                 <span>></span>
 96 |               </span>
 97 |             </h3>
 98 |           </div>
 99 | 
100 |           <div class="col-12 col-lg-8 d-flex mt-3 mt-lg-0 justify-content-center justify-content-lg-end">
101 |             <ul class="fix-count-down nav align-items-center">
102 |               <li class="d-flex flex-column pe-4">
103 |                 <strong>11</strong>
104 |                 <span>Speakers</span>
105 |               </li>
106 |               <li class="d-flex flex-column pe-4">
107 |                 <strong>4</strong>
108 |                 <span>Hours</span>
109 |               </li>
110 |               <li class="d-flex flex-column pe-4">
111 |                 <strong>3</strong>
112 |                 <span>Topics</span>
113 |               </li>
114 |               <li>
115 |                 <a href="#" class="btn border-2 py-2 px-4">Get Tickets</a>
116 |               </li>
117 |             </ul>
118 |           </div>
119 |         </div>
120 |       </div>
121 |     </section>
122 | 
123 |     <br />
124 | 
125 |     <!--
126 |     Name: numbers 2
127 | -->
128 |     <style>
129 |       .ezy__numbers2 {
130 |         --bs-body-color: #262e3b;
131 |         --bs-body-bg: rgb(255, 255, 255);
132 | 
133 |         /* Easy Frontend variables */
134 |         --ezy-theme-color: rgb(13, 110, 253);
135 |         --ezy-theme-color-rgb: 13, 110, 253;
136 | 
137 |         background-color: var(--bs-body-bg);
138 |         padding: 60px 0;
139 |       }
140 | 
141 |       @media (min-width: 768px) {
142 |         .ezy__numbers2 {
143 |           padding: 100px 0;
144 |         }
145 |       }
146 | 
147 |       /* Gray Block Style */
148 |       .gray .ezy__numbers2,
149 |       .ezy__numbers2.gray {
150 |         /* Bootstrap variables */
151 |         --bs-body-bg: rgb(246, 246, 246);
152 |       }
153 | 
154 |       /* Dark Gray Block Style */
155 |       .dark-gray .ezy__numbers2,
156 |       .ezy__numbers2.dark-gray {
157 |         /* Bootstrap variables */
158 |         --bs-body-color: #ffffff;
159 |         --bs-body-bg: rgb(30, 39, 53);
160 |       }
161 | 
162 |       /* Dark Block Style */
163 |       .dark .ezy__numbers2,
164 |       .ezy__numbers2.dark {
165 |         /* Bootstrap variables */
166 |         --bs-body-color: #ffffff;
167 |         --bs-body-bg: rgb(11, 23, 39);
168 |       }
169 | 
170 |       .ezy__numbers2-heading {
171 |         font-size: 28px;
172 |         font-weight: 700;
173 |         line-height: 1.3;
174 |         color: var(--bs-body-color);
175 |       }
176 | 
177 |       @media (min-width: 768px) {
178 |         .ezy__numbers2-heading {
179 |           font-size: 45px;
180 |         }
181 |       }
182 | 
183 |       .ezy__numbers2-sub-heading {
184 |         font-size: 18px;
185 |         line-height: 25px;
186 |         color: var(--bs-body-color);
187 |         opacity: 0.8;
188 |       }
189 | 
190 |       /* card */
191 |       .ezy__numbers2 .card {
192 |         background-color: transparent !important;
193 |         color: var(--bs-body-color);
194 |       }
195 | 
196 |       .ezy__numbers2 .card h3 {
197 |         font-size: 45px;
198 |         font-weight: 900;
199 |         color: var(--ezy-theme-color);
200 |       }
201 | 
202 |       .ezy__numbers2 .card h5 {
203 |         font-size: 18px;
204 |         font-weight: 700;
205 |       }
206 | 
207 |       .ezy__numbers2 .card p {
208 |         font-size: 16px;
209 |         opacity: 0.8;
210 |       }
211 | 
212 |       .ezy__numbers2 img {
213 |         border-radius: 10px;
214 |       }
215 |     </style>
216 |     <section class="ezy__numbers2">
217 |       <div class="container">
218 |         <!-- heading -->
219 |         <div class="row justify-content-between">
220 |           <div class="col-12 col-lg-6">
221 |             <div class="ezy__numbers2-contents-wrapper">
222 |               <h1 class="ezy__numbers2-heading mb-3">Let's reveal Something !</h1>
223 |               <p class="ezy__numbers2-sub-heading mb-5">
224 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quod perferendis nihil cupiditate
225 |                 aliquid qui exercitationem labore veritatis eaque nobis libero earum.
226 |               </p>
227 |             </div>
228 |             <!-- cards -->
229 |             <div class="d-flex flex-column flex-sm-row">
230 |               <!-- card starts -->
231 |               <div class="card border-0 mb-3">
232 |                 <div class="card-body">
233 |                   <h3 class="mb-3">432</h3>
234 |                   <h5>Completed Event</h5>
235 |                   <p class="mb-0">Partner removes the hassle and confusion that comes from managing.</p>
236 |                 </div>
237 |               </div>
238 |               <!-- card ends -->
239 |               <!-- card starts -->
240 |               <div class="card border-0 mb-3">
241 |                 <div class="card-body">
242 |                   <h3 class="mb-3">758</h3>
243 |                   <h5>Game Completed</h5>
244 |                   <p class="mb-0">It’s no secret that the digital. From exciting startups to global brands.</p>
245 |                 </div>
246 |               </div>
247 |               <!-- card ends -->
248 |             </div>
249 | 
250 |             <div class="d-flex flex-column flex-sm-row">
251 |               <!-- card starts -->
252 |               <div class="card border-0 mb-3">
253 |                 <div class="card-body">
254 |                   <h3 class="mb-3">31+</h3>
255 |                   <h5>Completed Fund</h5>
256 |                   <p class="mb-0">Sed ut in perspiciatis unde omnis istema natus error sit tatem.</p>
257 |                 </div>
258 |               </div>
259 |               <!-- card ends -->
260 |               <!-- card starts -->
261 |               <div class="card border-0 mb-3">
262 |                 <div class="card-body">
263 |                   <h3 class="mb-3">994</h3>
264 |                   <h5>Completed Ticket</h5>
265 |                   <p class="mb-0">Viverra tellus in hac habitasse platea dictumst tempor id eu nisl.</p>
266 |                 </div>
267 |               </div>
268 |               <!-- card ends -->
269 |             </div>
270 |           </div>
271 |           <div class="col-12 col-lg-5 d-flex justify-content-center align-items-end">
272 |             <img src="https://cdn.easyfrontend.com/pictures/numbers2.jpg" alt="" class="img-fluid mt-5 mt-md-0" />
273 |           </div>
274 |         </div>
275 |       </div>
276 |     </section>
277 | 
278 |     <br />
279 | 
280 |     <!--
281 |     Name: numbers 3
282 | -->
283 |     <style>
284 |       .ezy__numbers3 {
285 |         --bs-body-color: #161b22;
286 |         --bs-body-bg: rgb(255, 255, 255);
287 | 
288 |         /* Easy Frontend variables */
289 |         --ezy-theme-color: rgb(13, 110, 253);
290 |         --ezy-theme-color-rgb: 13, 110, 253;
291 | 
292 |         background-color: var(--bs-body-bg);
293 |         padding: 60px 0;
294 |       }
295 | 
296 |       @media (min-width: 768px) {
297 |         .ezy__numbers3 {
298 |           padding: 100px 0;
299 |         }
300 |       }
301 | 
302 |       /* Gray Block Style */
303 |       .gray .ezy__numbers3,
304 |       .ezy__numbers3.gray {
305 |         /* Bootstrap variables */
306 |         --bs-body-bg: rgb(246, 246, 246);
307 |       }
308 | 
309 |       /* Dark Gray Block Style */
310 |       .dark-gray .ezy__numbers3,
311 |       .ezy__numbers3.dark-gray {
312 |         /* Bootstrap variables */
313 |         --bs-body-color: #ffffff;
314 |         --bs-body-bg: rgb(30, 39, 53);
315 |       }
316 | 
317 |       /* Dark Block Style */
318 |       .dark .ezy__numbers3,
319 |       .ezy__numbers3.dark {
320 |         /* Bootstrap variables */
321 |         --bs-body-color: #ffffff;
322 |         --bs-body-bg: rgb(11, 23, 39);
323 |       }
324 | 
325 |       .ezy__numbers3-heading {
326 |         font-size: 28px;
327 |         font-weight: 700;
328 |         line-height: 1.3;
329 |         color: var(--bs-body-color);
330 |       }
331 | 
332 |       @media (min-width: 768px) {
333 |         .ezy__numbers3-heading {
334 |           font-size: 45px;
335 |         }
336 |       }
337 | 
338 |       .ezy__numbers3-sub-heading {
339 |         font-size: 18px;
340 |         line-height: 25px;
341 |         color: var(--bs-body-color);
342 |         opacity: 0.8;
343 |       }
344 | 
345 |       /* card */
346 |       .ezy__numbers3 .card {
347 |         background-color: transparent !important;
348 |         color: var(--bs-body-color);
349 |       }
350 | 
351 |       .ezy__numbers3 .card h3 {
352 |         font-size: 45px;
353 |         font-weight: 900;
354 |       }
355 | 
356 |       .ezy__numbers3 .card h5 {
357 |         font-size: 18px;
358 |         font-weight: 700;
359 |       }
360 | 
361 |       .ezy__numbers3 .card p {
362 |         font-size: 16px;
363 |         opacity: 0.8;
364 |       }
365 | 
366 |       .ezy__numbers3 img {
367 |         border-radius: 10px;
368 |       }
369 |     </style>
370 |     <section class="ezy__numbers3">
371 |       <div class="container">
372 |         <!-- heading -->
373 |         <div class="row justify-content-between">
374 |           <div class="col-12 col-lg-6">
375 |             <div class="ezy__numbers3-contents-wrapper">
376 |               <h1 class="ezy__numbers3-heading mb-3">Some Important Numbers</h1>
377 |               <p class="ezy__numbers3-sub-heading mb-5">
378 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quod perferendis nihil cupiditate
379 |                 aliquid qui exercitationem labore veritatis eaque nobis libero earum.
380 |               </p>
381 |             </div>
382 |             <!-- cards -->
383 |             <div class="d-flex flex-column flex-sm-row">
384 |               <!-- card starts -->
385 |               <div class="card border-0 mb-3">
386 |                 <div class="card-body">
387 |                   <h3 class="mb-3">432</h3>
388 |                   <h5>Completed Event</h5>
389 |                   <p class="mb-0">Partner removes the hassle and confusion that comes from managing.</p>
390 |                 </div>
391 |               </div>
392 |               <!-- card ends -->
393 |               <!-- card starts -->
394 |               <div class="card border-0 mb-3">
395 |                 <div class="card-body">
396 |                   <h3 class="mb-3">756</h3>
397 |                   <h5>Game Completed</h5>
398 |                   <p class="mb-0">It’s no secret that the digital. From exciting startups to global brands.</p>
399 |                 </div>
400 |               </div>
401 |               <!-- card ends -->
402 |             </div>
403 | 
404 |             <div class="d-flex flex-column flex-sm-row">
405 |               <!-- card starts -->
406 |               <div class="card border-0 mb-3">
407 |                 <div class="card-body">
408 |                   <h3 class="mb-3">73+</h3>
409 |                   <h5>Completed Fund</h5>
410 |                   <p class="mb-0">Sed ut in perspiciatis unde omnis istema natus error sit tatem.</p>
411 |                 </div>
412 |               </div>
413 |               <!-- card ends -->
414 |               <!-- card starts -->
415 |               <div class="card border-0 mb-3">
416 |                 <div class="card-body">
417 |                   <h3 class="mb-3">999+</h3>
418 |                   <h5>Completed Ticket</h5>
419 |                   <p class="mb-0">Viverra tellus in hac habitasse platea dictumst tempor id eu nisl.</p>
420 |                 </div>
421 |               </div>
422 |               <!-- card ends -->
423 |             </div>
424 |           </div>
425 |           <div class="col-12 col-lg-5 d-flex justify-content-center align-items-end">
426 |             <img src="https://cdn.easyfrontend.com/pictures/featured/three.png" alt="" class="img-fluid mt-5 mt-md-0" />
427 |           </div>
428 |         </div>
429 |       </div>
430 |     </section>
431 | 
432 |     <br />
433 | 
434 |     <!--
435 |     Name: numbers 4
436 | -->
437 |     <style>
438 |       .ezy__numbers4 {
439 |         --bs-body-color: #262e3b;
440 |         --bs-body-bg: rgb(255, 255, 255);
441 | 
442 |         /* easy frontend variables */
443 |         --ezy-theme-color: rgb(13, 110, 253);
444 |         --ezy-theme-color-rgb: 13, 110, 253;
445 | 
446 |         background-color: var(--bs-body-bg);
447 |         color: var(--bs-body-color);
448 |         padding: 190px 0;
449 |       }
450 | 
451 |       @media (min-width: 991px) {
452 |         .ezy__numbers4 {
453 |           padding: 120px 0;
454 |         }
455 |       }
456 | 
457 |       /* Gray Block Style */
458 |       .gray .ezy__numbers4,
459 |       .ezy__numbers4.gray {
460 |         /* Bootstrap variables */
461 |         --bs-body-bg: rgb(246, 246, 246);
462 |       }
463 | 
464 |       /* Dark Gray Block Style */
465 |       .dark-gray .ezy__numbers4,
466 |       .ezy__numbers4.dark-gray {
467 |         /* Bootstrap variables */
468 |         --bs-body-color: #ffffff;
469 |         --bs-body-bg: rgb(30, 39, 53);
470 |       }
471 | 
472 |       /* Dark Block Style */
473 |       .dark .ezy__numbers4,
474 |       .ezy__numbers4.dark {
475 |         /* Bootstrap variables */
476 |         --bs-body-color: #ffffff;
477 |         --bs-body-bg: rgb(11, 23, 39);
478 |       }
479 | 
480 |       .ezy__numbers4 h3 {
481 |         font-size: 45px;
482 |         font-weight: 900;
483 |       }
484 | 
485 |       .ezy__numbers4 h5 {
486 |         font-size: 18px;
487 |         font-weight: 500;
488 |         opacity: 0.8;
489 |       }
490 |     </style>
491 |     <section class="ezy__numbers4">
492 |       <div class="container">
493 |         <div class="row text-center">
494 |           <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">
495 |             <h3 class="mb-3 mb-md-4">139</h3>
496 |             <h5>Completed Event</h5>
497 |           </div>
498 |           <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">
499 |             <h3 class="mb-3 mb-md-4">12k</h3>
500 |             <h5>Game Completed</h5>
501 |           </div>
502 |           <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">
503 |             <h3 class="mb-3 mb-md-4">97+</h3>
504 |             <h5>Completed Fund</h5>
505 |           </div>
506 |           <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">
507 |             <h3 class="mb-3 mb-md-4">333</h3>
508 |             <h5>Completed Ticket</h5>
509 |           </div>
510 |         </div>
511 |       </div>
512 |     </section>
513 | 
514 |     <br />
515 | 
516 |     <!--
517 |     Name: numbers 5
518 | -->
519 |     <style>
520 |       .ezy__numbers5 {
521 |         --bs-body-color: #262e3b;
522 |         --bs-body-bg: rgb(255, 255, 255);
523 | 
524 |         /* Easy Frontend variables */
525 |         --ezy-theme-color: rgb(13, 110, 253);
526 |         --ezy-theme-color-rgb: 13, 110, 253;
527 | 
528 |         background-color: var(--bs-body-bg);
529 |         color: var(--bs-body-color);
530 |         padding: 100px 0;
531 |       }
532 | 
533 |       @media (min-width: 991px) {
534 |         .ezy__numbers5 {
535 |           padding: 150px 0;
536 |         }
537 |       }
538 | 
539 |       /* Gray Block Style */
540 |       .gray .ezy__numbers5,
541 |       .ezy__numbers5.gray {
542 |         /* Bootstrap variables */
543 |         --bs-body-bg: rgb(246, 246, 246);
544 |       }
545 | 
546 |       /* Dark Gray Block Style */
547 |       .dark-gray .ezy__numbers5,
548 |       .ezy__numbers5.dark-gray {
549 |         /* Bootstrap variables */
550 |         --bs-body-color: #ffffff;
551 |         --bs-body-bg: rgb(30, 39, 53);
552 |       }
553 | 
554 |       /* Dark Block Style */
555 |       .dark .ezy__numbers5,
556 |       .ezy__numbers5.dark {
557 |         /* Bootstrap variables */
558 |         --bs-body-color: #ffffff;
559 |         --bs-body-bg: rgb(11, 23, 39);
560 |       }
561 | 
562 |       .ezy__numbers5 h3 {
563 |         font-size: 45px;
564 |         font-weight: 900;
565 |         color: var(--ezy-theme-color);
566 |       }
567 | 
568 |       .ezy__numbers5 h5 {
569 |         font-size: 18px;
570 |         font-weight: 500;
571 |         opacity: 0.8;
572 |       }
573 |     </style>
574 |     <section class="ezy__numbers5">
575 |       <div class="container">
576 |         <div class="row text-center">
577 |           <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">
578 |             <h3 class="mb-3 mb-md-4">754</h3>
579 |             <h5 class="mb-0">Completed Event</h5>
580 |           </div>
581 |           <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">
582 |             <h3 class="mb-3 mb-md-4">19k</h3>
583 |             <h5 class="mb-0">Game Completed</h5>
584 |           </div>
585 |           <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">
586 |             <h3 class="mb-3 mb-md-4">53</h3>
587 |             <h5 class="mb-0">Completed Fund</h5>
588 |           </div>
589 |           <div class="col-12 col-sm-6 col-lg-3 mb-5 mb-lg-0">
590 |             <h3 class="mb-3 mb-md-4">111</h3>
591 |             <h5 class="mb-0">Completed Ticket</h5>
592 |           </div>
593 |         </div>
594 |       </div>
595 |     </section>
596 | 
597 |     <br />
598 | 
599 |   </body>
600 | </html>
601 | 


--------------------------------------------------------------------------------
/bootstrap/schedule/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Schedule</title>
  8 | 
  9 |     <!-- Color Scheme-->
 10 |     <script src="../../assets/demo/script.js"></script>
 11 |     <script>
 12 |       appendHeadInfo("bootstrap");
 13 |     </script>
 14 |   </head>
 15 | 
 16 |   <body>
 17 |     <!-- Start: schedule 1
 18 |     ======================================-->
 19 |     <style>
 20 |       .ezy__schedule1 {
 21 |         /* Bootstrap variables */
 22 |         --bs-body-color: rgb(50, 62, 80);
 23 |         --bs-body-bg: rgb(255, 255, 255);
 24 | 
 25 |         /* Easy Frontend variables */
 26 |         --ezy-theme-color: rgb(13, 110, 253);
 27 |         --ezy-theme-color-rgb: 13, 110, 253;
 28 |         --ezy-body-color-invert: #fff;
 29 | 
 30 |         background-color: var(--bs-body-bg);
 31 |         color: var(--bs-body-color);
 32 |         position: relative;
 33 |       }
 34 | 
 35 |       /* Gray Block Style */
 36 |       .gray .ezy__schedule1,
 37 |       .ezy__schedule1.gray {
 38 |         /* Bootstrap variables */
 39 |         --bs-body-bg: rgb(246, 246, 246);
 40 |       }
 41 | 
 42 |       /* Dark Gray Block Style */
 43 |       .dark-gray .ezy__schedule1,
 44 |       .ezy__schedule1.dark-gray {
 45 |         /* Bootstrap variables */
 46 |         --bs-body-color: #ffffff;
 47 |         --bs-body-bg: rgb(30, 39, 53);
 48 |       }
 49 | 
 50 |       /* Dark Block Style */
 51 |       .dark .ezy__schedule1,
 52 |       .ezy__schedule1.dark {
 53 |         /* Bootstrap variables */
 54 |         --bs-body-color: #ffffff;
 55 |         --bs-body-bg: rgb(11, 23, 39);
 56 |       }
 57 | 
 58 |       .ezy__schedule1-heading-line {
 59 |         position: absolute;
 60 |         bottom: -55px;
 61 |         right: 21px;
 62 |         display: none;
 63 |         transform-origin: 0 50%;
 64 |         transform: rotate(90deg) translate3d(-100%, 0, 0);
 65 |         z-index: 11;
 66 |       }
 67 | 
 68 |       @media (min-width: 768px) {
 69 |         .ezy__schedule1-heading-line {
 70 |           display: block;
 71 |         }
 72 |       }
 73 | 
 74 |       .ezy__schedule1-long-line {
 75 |         width: 120px;
 76 |         height: 2px !important;
 77 |         background-color: var(--ezy-theme-color);
 78 |         position: relative;
 79 |         top: -4px;
 80 |         opacity: 1;
 81 |       }
 82 | 
 83 |       .ezy__schedule1-start {
 84 |         height: 1rem;
 85 |         position: relative;
 86 |         display: inline-block;
 87 |         left: 0;
 88 |         top: 0;
 89 |         font-size: 13px;
 90 |         font-weight: 700;
 91 |         line-height: 1rem;
 92 |         text-transform: uppercase;
 93 |         letter-spacing: 1px;
 94 |         margin: 0 5px;
 95 |         transform: rotate(180deg);
 96 |       }
 97 | 
 98 |       .ezy__schedule1-headline {
 99 |         font-weight: 400;
100 |         font-size: 42px;
101 |         line-height: 52px;
102 |         z-index: 1;
103 |         color: rgb(37, 45, 58);
104 |       }
105 | 
106 |       .ezy__schedule1-headline::after {
107 |         width: 110px;
108 |         height: 5px;
109 |         content: "";
110 |         position: absolute;
111 |         background-color: var(--ezy-theme-color);
112 |         bottom: 15px;
113 |         z-index: -1;
114 |         transform: translate3d(-50%, 0, 0);
115 |       }
116 | 
117 |       @media (min-width: 768px) {
118 |         .ezy__schedule1-headline {
119 |           font-size: 50px;
120 |           line-height: 42px;
121 |         }
122 |       }
123 | 
124 |       .ezy__schedule1-wrapper {
125 |         position: absolute;
126 |         vertical-align: middle;
127 |         top: 0;
128 |         bottom: 0;
129 |         background-image: none;
130 |         background-size: cover;
131 |         background-position: top;
132 |         background-attachment: initial;
133 |         background-repeat: no-repeat;
134 |         display: none;
135 |       }
136 | 
137 |       @media (min-width: 991px) {
138 |         .ezy__schedule1-wrapper {
139 |           display: block;
140 |         }
141 |       }
142 | 
143 |       .ezy__schedule1-inner-wrapper {
144 |         padding: 80px 0;
145 |         margin: 0 -15px;
146 |       }
147 | 
148 |       @media (min-width: 768px) {
149 |         .ezy__schedule1-inner-wrapper {
150 |           padding: 155px 0;
151 |         }
152 |       }
153 | 
154 |       .ezy__schedule1-schedule-heading {
155 |         border-top: 1px solid;
156 |         border-top-color: var(--bs-body-color);
157 |         border-bottom: 1px solid;
158 |         border-bottom-color: var(--bs-body-color);
159 |         padding: 8px 0;
160 |         display: inline-block;
161 |       }
162 | 
163 |       .ezy__schedule1-day {
164 |         font-size: 20px;
165 |         font-weight: 400;
166 |         line-height: 32px;
167 |         text-transform: uppercase;
168 |       }
169 | 
170 |       .ezy__schedule1-heading {
171 |         line-height: 27px;
172 |         font-weight: 500;
173 |         text-transform: uppercase;
174 |         color: var(--bs-body-color);
175 |       }
176 | 
177 |       .ezy__schedule1-sub-heading {
178 |         font-size: 13px;
179 |         font-weight: 400;
180 |         color: var(--bs-body-color);
181 |         opacity: 0.69;
182 |       }
183 | 
184 |       .ezy__schedule1-time {
185 |         color: var(--ezy-theme-color);
186 |       }
187 |     </style>
188 |     <section class="ezy__schedule1">
189 |       <div class="container">
190 |         <div class="ezy__schedule1-heading-line">
191 |           <div class="ezy__schedule1-start">Topics</div>
192 |           <hr class="ezy__schedule1-long-line d-inline-block m-0" />
193 |         </div>
194 | 
195 |         <div class="row position-relative">
196 |           <div
197 |             class="ezy__schedule1-wrapper col-md-4"
198 |             style="background-image: url(https://cdn.easyfrontend.com/pictures/schedule/schedule1.jpg)"
199 |           ></div>
200 |           <div class="col-md-8"></div>
201 | 
202 |           <div class="row ezy__schedule1-inner-wrapper">
203 |             <div class="col-12 col-lg-4">
204 |               <!-- Start: Section Header -->
205 |               <div class="mb-5 text-center text-md-start text-lg-center">
206 |                 <h2 class="ezy__schedule1-headline position-relative">Schedule</h2>
207 |               </div>
208 |               <!-- End: Section Header -->
209 |             </div>
210 |             <div class="col-12 col-lg-8 text-center text-md-start">
211 |               <div class="row ps-lg-5">
212 |                 <div class="col-sm-6 col-xs-12">
213 |                   <div>
214 |                     <p class="ezy__schedule1-schedule-heading">
215 |                       <span class="ezy__schedule1-day">Day 1 </span>
216 |                       <span class="ezy__schedule1-sub-heading">Thursday, October 13th</span>
217 |                     </p>
218 | 
219 |                     <div>
220 |                       <div>
221 |                         <p class="ezy__schedule1-time mb-0">12.30 - 1.30 PM</p>
222 |                         <p class="ezy__schedule1-heading mb-0">EVERYONE ELSE IS SO CLEVER</p>
223 |                         <p class="ezy__schedule1-sub-heading">Johnny Ferguson</p>
224 |                       </div>
225 |                       <!-- End: .each-schedule -->
226 |                       <div>
227 |                         <p class="ezy__schedule1-time mb-0">12.30 - 1.30 PM</p>
228 |                         <p class="ezy__schedule1-heading mb-0">EVERYONE ELSE IS SO CLEVER</p>
229 |                         <p class="ezy__schedule1-sub-heading">Johnny Ferguson</p>
230 |                       </div>
231 |                       <!-- End: .each-schedule -->
232 |                       <div>
233 |                         <p class="ezy__schedule1-time mb-0">12.30 - 1.30 PM</p>
234 |                         <p class="ezy__schedule1-heading mb-0">EVERYONE ELSE IS SO CLEVER</p>
235 |                         <p class="ezy__schedule1-sub-heading">Johnny Ferguson</p>
236 |                       </div>
237 |                       <!-- End: .each-schedule -->
238 |                       <div>
239 |                         <p class="ezy__schedule1-time mb-0">12.30 - 1.30 PM</p>
240 |                         <p class="ezy__schedule1-heading mb-0">EVERYONE ELSE IS SO CLEVER</p>
241 |                         <p class="ezy__schedule1-sub-heading">Johnny Ferguson</p>
242 |                       </div>
243 |                       <!-- End: .each-schedule -->
244 |                     </div>
245 |                   </div>
246 |                 </div>
247 |                 <div class="col-sm-6 col-xs-12">
248 |                   <div>
249 |                     <p class="ezy__schedule1-schedule-heading">
250 |                       <span class="ezy__schedule1-day">Day 2 </span>
251 |                       <span class="ezy__schedule1-sub-heading">Thursday, October 13th</span>
252 |                     </p>
253 | 
254 |                     <div>
255 |                       <div>
256 |                         <p class="ezy__schedule1-time mb-0">12.30 - 1.30 PM</p>
257 |                         <p class="ezy__schedule1-heading mb-0">EVERYONE ELSE IS SO CLEVER</p>
258 |                         <p class="ezy__schedule1-sub-heading">Johnny Ferguson</p>
259 |                       </div>
260 |                       <!-- End: .each-schedule -->
261 |                       <div>
262 |                         <p class="ezy__schedule1-time mb-0">12.30 - 1.30 PM</p>
263 |                         <p class="ezy__schedule1-heading mb-0">EVERYONE ELSE IS SO CLEVER</p>
264 |                         <p class="ezy__schedule1-sub-heading">Johnny Ferguson</p>
265 |                       </div>
266 |                       <!-- End: .each-schedule -->
267 |                       <div>
268 |                         <p class="ezy__schedule1-time mb-0">12.30 - 1.30 PM</p>
269 |                         <p class="ezy__schedule1-heading mb-0">EVERYONE ELSE IS SO CLEVER</p>
270 |                         <p class="ezy__schedule1-sub-heading">Johnny Ferguson</p>
271 |                       </div>
272 |                       <!-- End: .each-schedule -->
273 |                       <div>
274 |                         <p class="ezy__schedule1-time mb-0">12.30 - 1.30 PM</p>
275 |                         <p class="ezy__schedule1-heading mb-0">EVERYONE ELSE IS SO CLEVER</p>
276 |                         <p class="ezy__schedule1-sub-heading">Johnny Ferguson</p>
277 |                       </div>
278 |                       <!-- End: .each-schedule -->
279 |                     </div>
280 |                   </div>
281 |                 </div>
282 |               </div>
283 |             </div>
284 |           </div>
285 |           <!-- End: .row -->
286 |         </div>
287 |       </div>
288 |     </section>
289 | 
290 |     <br />
291 | 
292 |     <!-- start: schedule 2
293 | ================================== -->
294 | 
295 |     <style>
296 |       .ezy__schedule2 {
297 |         /* Bootstrap variables */
298 |         --bs-body-bg: rgb(255, 255, 255);
299 |         --bs-body-bg-rgb: 255, 255, 255;
300 | 
301 |         /* Easy Frontend variables */
302 |         --ezy-theme-color: rgb(13, 110, 253);
303 |         --ezy-theme-color-rgb: 13, 110, 253;
304 |         --ezy-item-bg: #ffffff;
305 |         --ezy-item-shadow: 0px 4px 44px rgba(159, 190, 218, 0.37);
306 |         --ezy-rating-rgb: 255, 215, 0;
307 | 
308 |         background-color: var(--bs-body-bg);
309 |         color: var(--bs-body-color);
310 |         overflow: hidden;
311 |         padding: 60px 0;
312 |       }
313 | 
314 |       @media (min-width: 768px) {
315 |         .ezy__schedule2 {
316 |           padding: 100px 0;
317 |         }
318 |       }
319 | 
320 |       /* Gray Block Style */
321 |       .gray .ezy__schedule2,
322 |       .ezy__schedule2.gray {
323 |         /* Bootstrap variables */
324 |         --bs-body-bg: rgb(246, 246, 246);
325 |       }
326 | 
327 |       /* Dark Gray Block Style */
328 |       .dark-gray .ezy__schedule2,
329 |       .ezy__schedule2.dark-gray {
330 |         /* Bootstrap variables */
331 |         --bs-body-color: #ffffff;
332 |         --bs-body-bg: rgb(30, 39, 53);
333 |         --bs-body-bg-rgb: 30, 39, 53;
334 | 
335 |         /* Easy Frontend variables */
336 |         --ezy-item-bg: #162231;
337 |         --ezy-item-shadow: none;
338 |       }
339 | 
340 |       /* Dark Block Style */
341 |       .dark .ezy__schedule2,
342 |       .ezy__schedule2.dark {
343 |         /* Bootstrap variables */
344 |         --bs-body-color: #ffffff;
345 |         --bs-body-bg: rgb(11, 23, 39);
346 |         --bs-body-bg-rgb: 11, 23, 39;
347 | 
348 |         /* Easy Frontend variables */
349 |         --ezy-item-bg: #162231;
350 |         --ezy-item-shadow: none;
351 |       }
352 | 
353 |       .ezy__schedule2-heading {
354 |         font-weight: bold;
355 |         font-size: 35px;
356 |         line-height: 45px;
357 |         color: var(--bs-body-color);
358 |       }
359 | 
360 |       @media (min-width: 768px) {
361 |         .ezy__schedule2-heading {
362 |           font-size: 55px;
363 |           line-height: 70px;
364 |         }
365 |       }
366 | 
367 |       .ezy__schedule2-sub-heading {
368 |         font-size: 14px;
369 |         line-height: 28px;
370 |         color: var(--bs-body-color);
371 |         font-weight: 400;
372 |         text-transform: uppercase;
373 |         letter-spacing: 2px;
374 |         opacity: 0.9;
375 |       }
376 | 
377 |       .ezy__schedule2 p {
378 |         letter-spacing: 1px;
379 |         opacity: 0.6;
380 |       }
381 | 
382 |       .ezy__schedule2-image {
383 |         position: relative;
384 |         width: 100px;
385 |       }
386 | 
387 |       .ezy__schedule2-image::before {
388 |         content: "";
389 |         position: absolute;
390 |         left: 0;
391 |         right: 0;
392 |         top: 0;
393 |         bottom: 0;
394 |         z-index: 1;
395 |         background-image: linear-gradient(
396 |           rgba(var(--bs-body-bg-rgb), 0.2) 34%,
397 |           rgba(var(--bs-body-bg-rgb), 0.8) 80%,
398 |           rgba(var(--bs-body-bg-rgb), 1) 98%
399 |         );
400 |       }
401 | 
402 |       .ezy__schedule2-schedule {
403 |         line-height: 16px;
404 |         color: var(--bs-body-color);
405 |         opacity: 0.6;
406 |       }
407 | 
408 |       .ezy__schedule2-title {
409 |         text-transform: uppercase;
410 |         font-size: 18px;
411 |         font-weight: 400;
412 |       }
413 | 
414 |       .ezy__schedule2-description {
415 |         color: var(--bs-body-color);
416 |         line-height: 20px;
417 |         opacity: 0.6;
418 |       }
419 | 
420 |       .ezy__schedule2-nav a {
421 |         color: var(--bs-body-color);
422 |         opacity: 0.6;
423 |         text-decoration: none;
424 |       }
425 |     </style>
426 |     <section class="ezy__schedule2" id="ezy__schedule2">
427 |       <div class="container">
428 |         <div class="row">
429 |           <!-- Start: Section Heading -->
430 |           <div class="col-12 text-center text-sm-start">
431 |             <h2 class="ezy__schedule2-heading mb-0">Schedule</h2>
432 |             <p class="ezy__schedule2-sub-heading ms-sm-4">We design &amp; develop quality products.</p>
433 |           </div>
434 |           <!-- End: Section Heading -->
435 |         </div>
436 |         <!-- /.row -->
437 |         <div class="row mt-5">
438 |           <div class="col-12 col-md-6">
439 |             <h3>Day 1</h3>
440 |             <p>Sunday, October 16th</p>
441 | 
442 |             <div>
443 |               <div class="mt-5">
444 |                 <div class="ezy__schedule2-image">
445 |                   <img
446 |                     class="img-fluid"
447 |                     src="https://cdn.easyfrontend.com/pictures/team/easy-frontend-team-1.png"
448 |                     alt="Team Member"
449 |                   />
450 |                 </div>
451 |                 <div class="position-relative">
452 |                   <h3 class="ezy__schedule2-title mb-0">Branding The Digital Age</h3>
453 |                   <span class="ezy__schedule2-schedule">12.30 - 1.30 PM</span>
454 |                   <p class="ezy__schedule2-description mt-3">
455 |                     Pitch crowdsource freemium handshake virality user experience termsheet vesting.
456 |                   </p>
457 |                   <ul class="nav ezy__schedule2-nav">
458 |                     <li class="me-3">Speaker: <a href="">KATHY HUDSON</a></li>
459 |                     <li>Place: <a href=""> Hall 1</a></li>
460 |                   </ul>
461 |                 </div>
462 |               </div>
463 |               <!-- /.each-schedule -->
464 |               <div class="mt-5">
465 |                 <div class="ezy__schedule2-image">
466 |                   <img
467 |                     class="img-fluid"
468 |                     src="https://cdn.easyfrontend.com/pictures/team/easy-frontend-team-2.png"
469 |                     alt="Team Member"
470 |                   />
471 |                 </div>
472 |                 <div class="position-relative">
473 |                   <h3 class="ezy__schedule2-title mb-0">EVERYONE ELSE IS SO CLEVER</h3>
474 |                   <span class="ezy__schedule2-schedule">12.30 - 1.30 PM</span>
475 |                   <p class="ezy__schedule2-description mt-3">
476 |                     Pitch crowdsource freemium handshake virality user experience termsheet vesting.
477 |                   </p>
478 |                   <ul class="nav ezy__schedule2-nav">
479 |                     <li class="me-3">Speaker: <a href="">KATHY HUDSON</a></li>
480 |                     <li>Place: <a href=""> Hall 1</a></li>
481 |                   </ul>
482 |                 </div>
483 |               </div>
484 |               <!-- /.each-schedule -->
485 |             </div>
486 |           </div>
487 |           <!-- /.schedule-area -->
488 |           <div class="col-12 col-md-6">
489 |             <h3>Day 2</h3>
490 |             <p class="mb-0">Monday, October 17th</p>
491 | 
492 |             <div>
493 |               <div class="mt-5">
494 |                 <div class="ezy__schedule2-image">
495 |                   <img
496 |                     class="img-fluid"
497 |                     src="https://cdn.easyfrontend.com/pictures/team/easy-frontend-team-4.png"
498 |                     alt="Team Member"
499 |                   />
500 |                 </div>
501 |                 <div class="position-relative">
502 |                   <h3 class="ezy__schedule2-title mb-0">Cerasa Redesign</h3>
503 |                   <span class="ezy__schedule2-schedule">12.30 - 1.30 PM</span>
504 |                   <p class="ezy__schedule2-description mt-3">
505 |                     Pitch crowdsource freemium handshake virality user experience termsheet vesting.
506 |                   </p>
507 |                   <ul class="nav ezy__schedule2-nav">
508 |                     <li class="me-3">Speaker: <a href="">KATHY HUDSON</a></li>
509 |                     <li>Place: <a href=""> Hall 1</a></li>
510 |                   </ul>
511 |                 </div>
512 |               </div>
513 |               <!-- /.each-schedule -->
514 | 
515 |               <div class="mt-5">
516 |                 <div class="ezy__schedule2-image">
517 |                   <img
518 |                     class="img-fluid"
519 |                     src="https://cdn.easyfrontend.com/pictures/team/easy-frontend-team-5.png"
520 |                     alt="Team Member"
521 |                   />
522 |                 </div>
523 |                 <div class="position-relative">
524 |                   <h3 class="ezy__schedule2-title mb-0">EVERYONE ELSE IS SO CLEVER</h3>
525 |                   <span class="ezy__schedule2-schedule">12.30 - 1.30 PM</span>
526 |                   <p class="ezy__schedule2-description mt-3">
527 |                     Pitch crowdsource freemium handshake virality user experience termsheet vesting.
528 |                   </p>
529 |                   <ul class="nav ezy__schedule2-nav">
530 |                     <li class="me-3">Speaker: <a href="">KATHY HUDSON</a></li>
531 |                     <li>Place: <a href=""> Hall 1</a></li>
532 |                   </ul>
533 |                 </div>
534 |               </div>
535 |               <!-- /.each-schedule -->
536 |             </div>
537 |           </div>
538 |           <!-- /.schedule-area -->
539 |         </div>
540 |       </div>
541 |       <!-- /.container -->
542 |     </section>
543 |   </body>
544 | </html>
545 | 


--------------------------------------------------------------------------------
/bootstrap/rich-contents/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Rich Contents(HTML-Bootstrap)</title>
  8 | 
  9 |     <!-- Color Scheme-->
 10 |     <script src="../../assets/demo/script.js"></script>
 11 |     <script>
 12 |       appendHeadInfo("bootstrap");
 13 |     </script>
 14 |   </head>
 15 | 
 16 |   <body style="background: #000" class="">
 17 |     <!--
 18 |     Name: rich contents 1
 19 | -->
 20 |     <style>
 21 |       .ezy__richcontents1 {
 22 |         /* Bootstrap variables */
 23 |         --bs-body-color: #262e3a;
 24 |         --bs-body-bg: #fff;
 25 | 
 26 |         /* Easy Frontend variables */
 27 |         --ezy-theme-color: rgb(13, 110, 253);
 28 |         --ezy-theme-color-rgb: 13, 110, 253;
 29 | 
 30 |         padding: 60px 0;
 31 |         background-color: var(--bs-body-bg);
 32 |       }
 33 | 
 34 |       @media (min-width: 768px) {
 35 |         .ezy__richcontents1 {
 36 |           padding: 100px 0;
 37 |         }
 38 |       }
 39 | 
 40 |       /* Gray Block Style */
 41 |       .gray .ezy__richcontents1,
 42 |       .ezy__richcontents1.gray {
 43 |         /* Bootstrap variables */
 44 |         --bs-body-bg: rgb(246, 246, 246);
 45 |       }
 46 | 
 47 |       /* Dark Gray Block Style */
 48 |       .dark-gray .ezy__richcontents1,
 49 |       .ezy__richcontents1.dark-gray {
 50 |         /* Bootstrap variables */
 51 |         --bs-body-color: #ffffff;
 52 |         --bs-body-bg: rgb(30, 39, 53);
 53 |       }
 54 | 
 55 |       /* Dark Block Style */
 56 |       .dark .ezy__richcontents1,
 57 |       .ezy__richcontents1.dark {
 58 |         /* Bootstrap variables */
 59 |         --bs-body-color: #ffffff;
 60 |         --bs-body-bg: rgb(11, 23, 39);
 61 |       }
 62 | 
 63 |       .ezy__richcontents1-heading {
 64 |         font-size: 28px;
 65 |         font-weight: 700;
 66 |         line-height: 1.2;
 67 |         color: var(--bs-body-color);
 68 |       }
 69 | 
 70 |       @media (min-width: 768px) {
 71 |         .ezy__richcontents1-heading {
 72 |           font-size: 45px;
 73 |         }
 74 |       }
 75 | 
 76 |       .ezy__richcontents1-sub-heading {
 77 |         font-size: 17px !important;
 78 |         font-weight: 500 !important;
 79 |       }
 80 | 
 81 |       .ezy__richcontents1 .btn {
 82 |         padding: 12px 25px;
 83 |         transition: 0.5s;
 84 |         color: #fff;
 85 |       }
 86 | 
 87 |       .ezy__richcontents1 .btn-primary {
 88 |         background-color: var(--ezy-theme-color);
 89 |         border-color: var(--ezy-theme-color);
 90 |       }
 91 | 
 92 |       .ezy__richcontents1 .btn-primary:hover {
 93 |         background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
 94 |         border-color: rgba(var(--ezy-theme-color-rgb), 0.9);
 95 |       }
 96 | 
 97 |       .ezy__richcontents1-btn {
 98 |         color: var(--bs-body-color) !important;
 99 |       }
100 | 
101 |       .ezy__richcontents1-btn:hover {
102 |         color: var(--ezy-theme-color) !important;
103 |       }
104 | 
105 |       .ezy__richcontents1 p {
106 |         line-height: 28px;
107 |         color: var(--bs-body-color);
108 |         opacity: 0.7;
109 |       }
110 | 
111 |       @media (min-width: 991px) {
112 |         .ezy__richcontents1-contents {
113 |           column-count: 2;
114 |           column-gap: 30px;
115 |         }
116 |       }
117 |     </style>
118 |     <section class="ezy__richcontents1">
119 |       <div class="container">
120 |         <div class="row justify-content-between align-items-center">
121 |           <div class="col-12 col-lg-6">
122 |             <h1 class="ezy__richcontents1-heading mb-3">Become a master of model in a week with Coursera</h1>
123 |             <p class="ezy__richcontents1-sub-heading">
124 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quod perferendis nihil cupiditate aliquid
125 |               qui.
126 |             </p>
127 |           </div>
128 |           <div class="col-12 col-lg-6 text-lg-end mt-3 mt-lg-0">
129 |             <button class="btn btn-primary">Get Started</button>
130 |             <button class="btn ezy__richcontents1-btn">Learn More</button>
131 |           </div>
132 |         </div>
133 |         <div class="row mt-5">
134 |           <div class="col-12">
135 |             <div class="ezy__richcontents1-contents">
136 |               <p>
137 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
138 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
139 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
140 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
141 |               </p>
142 |               <p>
143 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
144 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
145 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
146 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
147 |               </p>
148 |               <p>
149 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
150 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
151 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
152 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
153 |               </p>
154 | 
155 |               <p>
156 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
157 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
158 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
159 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
160 |               </p>
161 |               <p>
162 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
163 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
164 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
165 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
166 |               </p>
167 |               <p>
168 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
169 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
170 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
171 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
172 |               </p>
173 |             </div>
174 |           </div>
175 |         </div>
176 |       </div>
177 |     </section>
178 | 
179 |     <br />
180 | 
181 |     <!--
182 |     Name: rich contents 2
183 | -->
184 |     <style>
185 |       .ezy__richcontents2 {
186 |         /* Bootstrap variables */
187 |         --bs-body-color: #262e3a;
188 |         --bs-body-bg: #fff;
189 | 
190 |         /* Easy Frontend variables */
191 |         --ezy-theme-color: rgb(13, 110, 253);
192 |         --ezy-theme-color-rgb: 13, 110, 253;
193 | 
194 |         padding: 60px 0;
195 |         background-color: var(--bs-body-bg);
196 |       }
197 | 
198 |       @media (min-width: 768px) {
199 |         .ezy__richcontents2 {
200 |           padding: 100px 0;
201 |         }
202 |       }
203 | 
204 |       /* Gray Block Style */
205 |       .gray .ezy__richcontents2,
206 |       .ezy__richcontents2.gray {
207 |         /* Bootstrap variables */
208 |         --bs-body-bg: rgb(246, 246, 246);
209 |       }
210 | 
211 |       /* Dark Gray Block Style */
212 |       .dark-gray .ezy__richcontents2,
213 |       .ezy__richcontents2.dark-gray {
214 |         /* Bootstrap variables */
215 |         --bs-body-color: #ffffff;
216 |         --bs-body-bg: rgb(30, 39, 53);
217 |       }
218 | 
219 |       /* Dark Block Style */
220 |       .dark .ezy__richcontents2,
221 |       .ezy__richcontents2.dark {
222 |         /* Bootstrap variables */
223 |         --bs-body-color: #ffffff;
224 |         --bs-body-bg: rgb(11, 23, 39);
225 |       }
226 | 
227 |       .ezy__richcontents2-heading {
228 |         font-size: 28px;
229 |         font-weight: 700;
230 |         line-height: 1.2;
231 |         color: var(--bs-body-color);
232 |       }
233 | 
234 |       @media (min-width: 768px) {
235 |         .ezy__richcontents2-heading {
236 |           font-size: 45px;
237 |         }
238 |       }
239 | 
240 |       .ezy__richcontents2-sub-heading {
241 |         font-size: 17px !important;
242 |         font-weight: 500;
243 |         line-height: 25px !important;
244 |         color: var(--bs-body-color);
245 |       }
246 | 
247 |       .ezy__richcontents2 .btn {
248 |         padding: 12px 25px;
249 |         transition: 0.5s;
250 |         color: #fff;
251 |       }
252 | 
253 |       .ezy__richcontents2-btn {
254 |         color: var(--bs-body-color) !important;
255 |       }
256 | 
257 |       .ezy__richcontents2 p {
258 |         line-height: 28px;
259 |         color: var(--bs-body-color);
260 |         opacity: 0.7;
261 |       }
262 | 
263 |       @media (min-width: 991px) {
264 |         .ezy__richcontents2-contents {
265 |           column-count: 2;
266 |           column-gap: 30px;
267 |         }
268 |       }
269 |     </style>
270 |     <section class="ezy__richcontents2">
271 |       <div class="container">
272 |         <div class="row justify-content-between">
273 |           <div class="col-12 ezy__richcontents2-contents">
274 |             <h1 class="ezy__richcontents2-heading mb-3">Izomart is providing free course on Web Development</h1>
275 |             <p class="ezy__richcontents2-sub-heading pe-3 mb-4">
276 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quod perferendis nihil cupiditate aliquid
277 |               qui.
278 |             </p>
279 |             <p>
280 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
281 |               odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
282 |               cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
283 |               Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
284 |             </p>
285 |             <p>
286 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
287 |               odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
288 |               cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
289 |               Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
290 |             </p>
291 |             <p>
292 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
293 |               odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
294 |               cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
295 |               Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
296 |             </p>
297 | 
298 |             <p>
299 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
300 |               odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
301 |               cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
302 |               Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
303 |             </p>
304 |             <p>
305 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
306 |               odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
307 |               cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
308 |               Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
309 |             </p>
310 |             <p>
311 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
312 |               odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
313 |               cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
314 |               Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
315 |             </p>
316 |           </div>
317 |         </div>
318 |       </div>
319 |     </section>
320 | 
321 |     <br />
322 | 
323 |     <!--
324 |     Name: rich contents 3
325 | -->
326 |     <style>
327 |       .ezy__richcontents3 {
328 |         /* Bootstrap variables */
329 |         --bs-body-color: #262e3a;
330 |         --bs-body-bg: #fff;
331 | 
332 |         /* Easy Frontend variables */
333 |         --ezy-theme-color: rgb(13, 110, 253);
334 |         --ezy-theme-color-rgb: 13, 110, 253;
335 | 
336 |         padding: 60px 0;
337 |         background-color: var(--bs-body-bg);
338 |       }
339 | 
340 |       @media (min-width: 768px) {
341 |         .ezy__richcontents3 {
342 |           padding: 100px 0;
343 |         }
344 |       }
345 | 
346 |       /* Gray Block Style */
347 |       .gray .ezy__richcontents3,
348 |       .ezy__richcontents3.gray {
349 |         /* Bootstrap variables */
350 |         --bs-body-bg: rgb(246, 246, 246);
351 |       }
352 | 
353 |       /* Dark Gray Block Style */
354 |       .dark-gray .ezy__richcontents3,
355 |       .ezy__richcontents3.dark-gray {
356 |         /* Bootstrap variables */
357 |         --bs-body-color: #ffffff;
358 |         --bs-body-bg: rgb(30, 39, 53);
359 |       }
360 | 
361 |       /* Dark Block Style */
362 |       .dark .ezy__richcontents3,
363 |       .ezy__richcontents3.dark {
364 |         /* Bootstrap variables */
365 |         --bs-body-color: #ffffff;
366 |         --bs-body-bg: rgb(11, 23, 39);
367 |       }
368 | 
369 |       .ezy__richcontents3-heading {
370 |         font-size: 28px;
371 |         font-weight: 700;
372 |         line-height: 1.2;
373 |         color: var(--bs-body-color);
374 |       }
375 | 
376 |       @media (min-width: 768px) {
377 |         .ezy__richcontents3-heading {
378 |           font-size: 45px;
379 |         }
380 |       }
381 | 
382 |       .ezy__richcontents3-sub-heading {
383 |         font-size: 17px !important;
384 |         font-weight: 500 !important;
385 |       }
386 | 
387 |       .ezy__richcontents3 .btn {
388 |         padding: 12px 25px;
389 |         transition: 0.5s;
390 |         color: #fff;
391 |       }
392 | 
393 |       .ezy__richcontents3 .btn-primary {
394 |         background-color: var(--ezy-theme-color);
395 |         border-color: var(--ezy-theme-color);
396 |       }
397 | 
398 |       .ezy__richcontents3 .btn-primary:hover {
399 |         background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
400 |         border-color: rgba(var(--ezy-theme-color-rgb), 0.9);
401 |       }
402 | 
403 |       .ezy__richcontents3-btn {
404 |         color: var(--bs-body-color) !important;
405 |       }
406 | 
407 |       .ezy__richcontents3-btn:hover {
408 |         color: var(--ezy-theme-color) !important;
409 |       }
410 | 
411 |       .ezy__richcontents3 p {
412 |         line-height: 28px;
413 |         color: var(--bs-body-color);
414 |         opacity: 0.7;
415 |       }
416 |     </style>
417 |     <section class="ezy__richcontents3">
418 |       <div class="container">
419 |         <div class="row justify-content-between align-items-center">
420 |           <div class="col-12 col-lg-6">
421 |             <h1 class="ezy__richcontents3-heading mb-3">Lorem ipsum dolor sit amet.</h1>
422 |             <p class="ezy__richcontents3-sub-heading">
423 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quod perferendis nihil cupiditate aliquid
424 |               qui.
425 |             </p>
426 |           </div>
427 |           <div class="col-12 col-lg-6 text-lg-end mt-3 mt-lg-0">
428 |             <button class="btn btn-primary">Get Started</button>
429 |             <button class="btn ezy__richcontents3-btn">Learn More</button>
430 |           </div>
431 |         </div>
432 |         <div class="row mt-5 justify-content-center">
433 |           <div class="col-12 col-lg-10 col-xl-8">
434 |             <div class="ezy__richcontents3-contents">
435 |               <p>
436 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
437 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
438 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
439 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
440 |               </p>
441 |               <p>
442 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
443 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
444 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
445 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
446 |               </p>
447 |               <p>
448 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
449 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
450 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
451 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
452 |               </p>
453 | 
454 |               <p>
455 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
456 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
457 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
458 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
459 |               </p>
460 |               <p>
461 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
462 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
463 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
464 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
465 |               </p>
466 |               <p>
467 |                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus non ab obcaecati praesentium
468 |                 odit, porro ea ratione eos laudantium. Corrupti alias soluta corporis tenetur ea ab debitis, sit
469 |                 cupiditate dolor libero voluptatibus vel reiciendis quaerat magni tempora sapiente odit aperiam fugiat!
470 |                 Ipsum laudantium, exercitationem consequuntur eligendi pariatur eius porro.
471 |               </p>
472 |             </div>
473 |           </div>
474 |         </div>
475 |       </div>
476 |     </section>
477 | 
478 |     <br />
479 |   </body>
480 | </html>
481 | 


--------------------------------------------------------------------------------
/bootstrap/buy-ticket-form/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8 |   <title>Buy Ticket Form</title>
  9 | 
 10 |   <!-- Color Scheme-->
 11 |   <script src="../../assets/demo/script.js"></script>
 12 |   <script>
 13 |     appendHeadInfo("bootstrap");
 14 |   </script>
 15 | </head>
 16 | 
 17 | <body>
 18 |   <!-- Start: buy ticket form 1
 19 |     ======================================-->
 20 |   <style>
 21 | .ezy__buyticket1 {
 22 |   /* Bootstrap variables */
 23 |   --bs-body-color: #323e50;
 24 |   --bs-body-bg: rgb(50, 62, 80);
 25 | 
 26 |   /* Easy Frontend variables */
 27 |   --ezy-theme-color: rgb(13, 110, 253);
 28 |   --ezy-theme-color-rgb: 13, 110, 253;
 29 |   --ezy-shape-color: #fff;
 30 |   --ezy-body-color-invert: #fff;
 31 |   --ezy-form-card-bg: #fff;
 32 |   --ezy-box-shadow: 0 7px 65px 0 rgb(50, 61, 79, 0.2);
 33 | 
 34 |   background-color: var(--bs-body-bg);
 35 |   position: relative;
 36 |   overflow: hidden;
 37 |   padding: 0;
 38 | }
 39 | 
 40 | /* Gray Block Style */
 41 | .gray .ezy__buyticket1,
 42 | .ezy__buyticket1.gray {
 43 |   /* Bootstrap variables */
 44 |   --bs-body-bg: rgb(60, 71, 88);
 45 | }
 46 | 
 47 | /* Dark Gray Block Style */
 48 | .dark-gray .ezy__buyticket1,
 49 | .ezy__buyticket1.dark-gray {
 50 |   /* Bootstrap variables */
 51 |   --bs-body-color: #ffffff;
 52 |   --bs-body-bg: rgb(30, 39, 53);
 53 | 
 54 |   /* Easy Frontend variables */
 55 |   --ezy-shape-color: rgb(77, 88, 105);
 56 |   --ezy-body-color-invert: #fff;
 57 |   --ezy-form-card-bg: rgb(77, 88, 105);
 58 |   --ezy-box-shadow: 0 7px 65px 0 rgba(0, 0, 0, 0.5);
 59 | }
 60 | 
 61 | /* Dark Block Style */
 62 | .dark .ezy__buyticket1,
 63 | .ezy__buyticket1.dark {
 64 |   /* Bootstrap variables */
 65 |   --bs-body-color: #ffffff;
 66 |   --bs-body-bg: rgb(11, 23, 39);
 67 | 
 68 |   /* Easy Frontend variables */
 69 |   --ezy-shape-color: rgb(50, 62, 80);
 70 |   --ezy-body-color-invert: #fff;
 71 |   --ezy-form-card-bg: rgb(50, 62, 80);
 72 |   --ezy-box-shadow: 0 7px 65px 0 rgba(0, 0, 0, 0.2);
 73 | }
 74 | 
 75 | .ezy__buyticket1-inner-wrapper {
 76 |   position: relative;
 77 |   padding: 60px 0;
 78 | }
 79 | 
 80 | @media (min-width: 768px) {
 81 |   .ezy__buyticket1-inner-wrapper {
 82 |     padding: 100px 0;
 83 |   }
 84 | }
 85 | 
 86 | .ezy__buyticket1-triangle-shape {
 87 |   position: absolute;
 88 |   left: 0;
 89 |   top: 0;
 90 |   border-style: solid;
 91 |   border-right-width: calc(50vw);
 92 |   border-left-width: calc(50vw);
 93 |   border-top-width: 420px;
 94 |   border-color: var(--ezy-shape-color) transparent transparent;
 95 | }
 96 | 
 97 | .ezy__buyticket1-buy-ticket-inner {
 98 |   box-shadow: var(--ezy-box-shadow);
 99 |   padding: 50px;
100 |   overflow: hidden;
101 |   background-color: var(--ezy-form-card-bg);
102 | }
103 | 
104 | .ezy__buyticket1-headline {
105 |   color: var(--bs-body-color);
106 |   font-weight: 400;
107 |   font-size: 42px;
108 |   line-height: 52px;
109 |   z-index: 1;
110 | }
111 | 
112 | .ezy__buyticket1-headline::after {
113 |   width: 110px;
114 |   height: 5px;
115 |   content: "";
116 |   position: absolute;
117 |   background-color: var(--ezy-theme-color);
118 |   bottom: 15px;
119 |   z-index: -1;
120 |   transform: translate3d(-50%, 0, 0);
121 | }
122 | 
123 | @media (min-width: 768px) {
124 |   .ezy__buyticket1-headline {
125 |     font-size: 50px;
126 |     line-height: 42px;
127 |   }
128 | }
129 | 
130 | .ezy__buyticket1-inner {
131 |   padding: 12px 0 12px 12px;
132 |   border: 1px solid;
133 |   border-color: var(--ezy-theme-color);
134 |   overflow: hidden;
135 | }
136 | 
137 | .ezy__buyticket1-heading {
138 |   font-size: 15px;
139 |   font-weight: 700;
140 |   line-height: 27px;
141 |   color: var(--bs-body-color);
142 |   text-transform: uppercase;
143 | }
144 | 
145 | .ezy__buyticket1-sub-heading {
146 |   font-size: 16px;
147 |   line-height: 24px;
148 |   color: var(--bs-body-color);
149 |   opacity: 0.7;
150 | }
151 | 
152 | .ezy__buyticket1-btn {
153 |   background-color: var(--bs-body-bg);
154 |   color: #fff;
155 |   font-size: 14px;
156 |   font-weight: 600;
157 |   text-transform: uppercase;
158 |   transition: 0.5s;
159 |   border: 0;
160 | }
161 | 
162 | .ezy__buyticket1-btn .ezy__buyticket1-btn-icon {
163 |   color: var(--ezy-theme-color);
164 | }
165 | 
166 | .ezy__buyticket1-btn:hover {
167 |   color: #fff !important;
168 |   background-color: var(--ezy-theme-color);
169 | }
170 | 
171 | .ezy__buyticket1-btn:hover .ezy__buyticket1-btn-icon {
172 |   color: #fff !important;
173 | }
174 | 
175 | .ezy__buyticket1-heading-line {
176 |   position: absolute;
177 |   bottom: -55px;
178 |   left: 21px;
179 |   display: none;
180 |   z-index: 11;
181 | }
182 | 
183 | .ezy__buyticket1-heading-line-inner {
184 |   transform-origin: 0 50%;
185 |   transform: rotate(90deg) translate3d(-100%, 0, 0);
186 | }
187 | 
188 | @media (min-width: 768px) {
189 |   .ezy__buyticket1-heading-line {
190 |     display: inline-flex;
191 |   }
192 | }
193 | 
194 | .ezy__buyticket1-long-line {
195 |   width: 120px;
196 |   height: 2px !important;
197 |   background-color: var(--ezy-theme-color);
198 |   position: relative;
199 |   top: -4px;
200 |   opacity: 1;
201 | }
202 | 
203 | .ezy__buyticket1-start {
204 |   height: 1rem;
205 |   position: relative;
206 |   display: inline-block;
207 |   left: 0;
208 |   top: 0;
209 |   font-size: 13px;
210 |   font-weight: 700;
211 |   line-height: 1rem;
212 |   text-transform: uppercase;
213 |   letter-spacing: 1px;
214 |   margin: 0 5px;
215 |   transform: rotate(180deg);
216 |   color: var(--ezy-body-color-invert);
217 | }
218 | 
219 | .ezy__buyticket1-sponsors {
220 |   display: grid;
221 |   grid-template-columns: repeat(2, 1fr);
222 | }
223 | 
224 | @media (min-width: 567px) {
225 |   .ezy__buyticket1-sponsors {
226 |     grid-template-columns: repeat(3, 1fr);
227 |   }
228 | }
229 | 
230 | @media (min-width: 991px) {
231 |   .ezy__buyticket1-sponsors {
232 |     grid-template-columns: repeat(4, 1fr);
233 |   }
234 | }
235 | 
236 | .ezy__buyticket1-sponsors-item {
237 |   position: relative;
238 |   padding: 20px 30px;
239 | }
240 | 
241 | .ezy__buyticket1-sponsors-item img {
242 |   max-width: 100%;
243 |   height: auto;
244 | }
245 |   </style>
246 | <section class="ezy__buyticket1">
247 |   <div class="ezy__buyticket1-triangle-shape"></div>
248 | 
249 |   <div class="container">
250 |     <div class="ezy__buyticket1-inner-wrapper">
251 |       <div class="row d-flex justify-content-center">
252 |         <div class="ezy__buyticket1-buy-ticket col-md-11 col-lg-10 col-xl-8">
253 |           <div class="ezy__buyticket1-buy-ticket-inner">
254 |             <!-- Start: Section Header -->
255 |             <div class="section-header mb-5">
256 |               <h2 class="ezy__buyticket1-headline position-relative">Buy Ticket</h2>
257 |             </div>
258 |             <!-- End: Section Header -->
259 | 
260 |             <div class="col-12">
261 |               <div class="row ezy__buyticket1-inner mb-5">
262 |                 <div class="col-md-6 d-flex flex-column">
263 |                   <span class="ezy__buyticket1-heading">Full conference Pass</span>
264 |                   <span class="ezy__buyticket1-sub-heading">2 Days Full Access + Launch + Gifts</span>
265 |                 </div>
266 |                 <div class="col-md-6 d-flex justify-content-md-end align-items-center my-2 m-md-0">
267 |                   <a href="#" class="ezy__buyticket1-btn btn px-5 py-3">Order full pass <i
268 |                       class="fas fa-arrow-right ezy__buyticket1-btn-icon ms-2"></i></a>
269 |                 </div>
270 |               </div>
271 |               <!-- End: .row -->
272 |             </div>
273 |             <!-- End: .buy-ticket-form -->
274 | 
275 |             <div class="col-12">
276 |               <div class="row ezy__buyticket1-inner">
277 |                 <div class="col-md-6 d-flex flex-column">
278 |                   <span class="ezy__buyticket1-heading">Full conference Pass</span>
279 |                   <span class="ezy__buyticket1-sub-heading">2 Days Full Access + Launch + Gifts</span>
280 |                 </div>
281 |                 <div class="col-md-6 d-flex justify-content-md-end align-items-center my-2 m-md-0">
282 |                   <a href="#" class="ezy__buyticket1-btn btn px-5 py-3">Order full pass <i
283 |                       class="fas fa-arrow-right ezy__buyticket1-btn-icon ms-2"></i></a>
284 |                 </div>
285 |               </div>
286 |               <!-- End: .row -->
287 |             </div>
288 |             <!-- End: .buy-ticket-form -->
289 |           </div>
290 |         </div>
291 | 
292 |         <div class="ezy__buyticket1-heading-line">
293 |           <div class="ezy__buyticket1-heading-line-inner">
294 |             <div class="ezy__buyticket1-start">CONFERENCE SPONSORS</div>
295 |             <hr class="ezy__buyticket1-long-line d-inline-block m-0" />
296 |           </div>
297 |         </div>
298 | 
299 |         <div class="col-md-8 mt-5">
300 |           <ul class="ezy__buyticket1-sponsors nav text-center">
301 |             <li class="ezy__buyticket1-sponsors-item">
302 |               <img src="https://cdn.easyfrontend.com/pictures/logos/dark-logo-1.png" alt="" />
303 |             </li>
304 |             <li class="ezy__buyticket1-sponsors-item">
305 |               <img src="https://cdn.easyfrontend.com/pictures/logos/dark-logo-2.png" alt="" />
306 |             </li>
307 |             <li class="ezy__buyticket1-sponsors-item">
308 |               <img src="https://cdn.easyfrontend.com/pictures/logos/dark-logo-3.png" alt="" />
309 |             </li>
310 |             <li class="ezy__buyticket1-sponsors-item">
311 |               <img src="https://cdn.easyfrontend.com/pictures/logos/dark-logo-4.png" alt="" />
312 |             </li>
313 |             <li class="ezy__buyticket1-sponsors-item">
314 |               <img src="https://cdn.easyfrontend.com/pictures/logos/dark-logo-2.png" alt="" />
315 |             </li>
316 |             <li class="ezy__buyticket1-sponsors-item">
317 |               <img src="https://cdn.easyfrontend.com/pictures/logos/dark-logo-4.png" alt="" />
318 |             </li>
319 |             <li class="ezy__buyticket1-sponsors-item">
320 |               <img src="https://cdn.easyfrontend.com/pictures/logos/dark-logo-1.png" alt="" />
321 |             </li>
322 |             <li class="ezy__buyticket1-sponsors-item">
323 |               <img src="https://cdn.easyfrontend.com/pictures/logos/dark-logo-3.png" alt="" />
324 |             </li>
325 |           </ul>
326 |         </div>
327 |       </div>
328 |       <!-- End: .row -->
329 |     </div>
330 |   </div>
331 |   <!-- End:.container -->
332 | </section>
333 | 
334 |   <br />
335 | 
336 |   <!-- Start: buy ticket form 2
337 | ================================== -->
338 |   <style>
339 | .ezy__buyticket2 {
340 |   /* Bootstrap variables */
341 |   --bs-body-color: #28303b;
342 |   --bs-body-bg: rgb(255, 255, 255);
343 | 
344 |   /* Easy Frontend variables */
345 |   --ezy-theme-color: rgb(13, 110, 253);
346 |   --ezy-theme-color-rgb: 13, 110, 253;
347 |   --ezy-card-bg: rgb(239, 244, 253);
348 |   --ezy-card-header-bg: rgb(228, 236, 250);
349 | 
350 |   background-color: var(--bs-body-bg);
351 |   overflow: hidden;
352 |   padding: 60px 0;
353 |   color: var(--bs-body-color);
354 | }
355 | 
356 | @media (min-width: 768px) {
357 |   .ezy__buyticket2 {
358 |     padding: 100px 0;
359 |   }
360 | }
361 | 
362 | /* Gray Block Style */
363 | .gray .ezy__buyticket2,
364 | .ezy__buyticket2.gray {
365 |   /* Bootstrap variables */
366 |   --bs-body-bg: rgb(246, 246, 246);
367 | }
368 | 
369 | /* Dark Gray Block Style */
370 | .dark-gray .ezy__buyticket2,
371 | .ezy__buyticket2.dark-gray {
372 |   /* Bootstrap variables */
373 |   --bs-body-color: #ffffff;
374 |   --bs-body-bg: rgb(30, 39, 53);
375 | 
376 |   /* Easy Frontend variables */
377 |   --ezy-card-bg: #162231;
378 |   --ezy-card-header-bg: rgb(14 27 43);
379 | }
380 | 
381 | /* Dark Block Style */
382 | .dark .ezy__buyticket2,
383 | .ezy__buyticket2.dark {
384 |   /* Bootstrap variables */
385 |   --bs-body-color: #ffffff;
386 |   --bs-body-bg: rgb(11, 23, 39);
387 | 
388 |   /* Easy Frontend variables */
389 |   --ezy-card-bg: #162231;
390 |   --ezy-card-header-bg: rgb(14 27 43);
391 | }
392 | 
393 | .ezy__buyticket2-heading {
394 |   font-weight: bold;
395 |   font-size: 35px;
396 |   line-height: 45px;
397 |   color: var(--bs-body-color);
398 | }
399 | 
400 | @media (min-width: 768px) {
401 |   .ezy__buyticket2-heading {
402 |     font-size: 55px;
403 |     line-height: 70px;
404 |   }
405 | }
406 | 
407 | .ezy__buyticket2-sub-heading {
408 |   font-size: 14px;
409 |   line-height: 28px;
410 |   color: var(--bs-body-color);
411 |   font-weight: 400;
412 |   text-transform: uppercase;
413 |   letter-spacing: 2px;
414 |   opacity: 0.9;
415 | }
416 | 
417 | .ezy__buyticket2-item-title {
418 |   font-size: 35px;
419 |   line-height: 45px;
420 |   margin: 0;
421 | }
422 | 
423 | .ezy__buyticket2-item-price {
424 |   text-transform: uppercase;
425 |   font-size: 14px;
426 |   line-height: 15px;
427 |   letter-spacing: 2px;
428 | }
429 | 
430 | .ezy__buyticket2-item-header {
431 |   min-height: 108px;
432 |   background-color: var(--ezy-card-header-bg);
433 | }
434 | 
435 | .ezy__buyticket2-item-key-features ul {
436 |   padding: 0 40px;
437 | }
438 | 
439 | .ezy__buyticket2-item-key-features ul li {
440 |   list-style: none;
441 |   padding: 12px 0;
442 | }
443 | 
444 | .ezy__buyticket2-item-key-features ul li:not(:first-child) {
445 |   border-top: 1px solid rgba(255, 255, 255, 0.08);
446 | }
447 | 
448 | .ezy__buyticket2-item-inner-wrapper {
449 |   background-color: var(--ezy-card-bg);
450 |   border-right: 2px solid var(--bs-body-bg);
451 | }
452 | 
453 | .ezy__buyticket2-item:last-child .ezy__buyticket2-item-inner-wrapper {
454 |   border-right-width: 0;
455 | }
456 | 
457 | @media (max-width: 991px) {
458 |   .ezy__buyticket2-item {
459 |     margin-bottom: 30px;
460 |   }
461 | }
462 | 
463 | .ezy__buyticket2-form-card {
464 |   background-color: var(--ezy-card-bg);
465 | }
466 | 
467 | .ezy__buyticket2-form-card .card-body:not(:first-child) {
468 |   border-top: 2px solid var(--bs-body-bg);
469 | }
470 | 
471 | .ezy__buyticket2 .form-control {
472 |   min-height: 48px;
473 |   line-height: 40px;
474 |   border: none;
475 |   border-bottom: 2px solid rgba(163, 190, 241, 0.24);
476 |   background: transparent;
477 |   border-radius: 0;
478 |   color: var(--bs-body-color);
479 |   outline: none;
480 | }
481 | 
482 | .ezy__buyticket2 .form-control:focus {
483 |   border-color: var(--ezy-theme-color);
484 |   box-shadow: none;
485 | }
486 | 
487 | .ezy__buyticket2 input[type="checkbox"] {
488 |   appearance: none;
489 |   cursor: pointer;
490 |   margin: 0;
491 |   outline-width: 0;
492 |   width: 30px;
493 |   height: 30px;
494 |   position: relative;
495 | }
496 | 
497 | .ezy__buyticket2 input[type="checkbox"]:before,
498 | .ezy__buyticket2 input[type="checkbox"]:checked:after {
499 |   content: "";
500 |   position: absolute;
501 | }
502 | 
503 | .ezy__buyticket2 input[type="checkbox"]:before {
504 |   top: 0;
505 |   left: 0;
506 |   width: 100%;
507 |   height: 100%;
508 |   border: 2px solid var(--bs-body-color);
509 |   opacity: 0.4;
510 | }
511 | 
512 | .ezy__buyticket2 input[type="checkbox"]:checked:after {
513 |   top: 7px;
514 |   left: 7px;
515 |   height: 16px;
516 |   width: 16px;
517 |   background-color: var(--bs-body-color);
518 | }
519 | 
520 | .ezy__buyticket2-qty {
521 |   width: 80px;
522 | }
523 | 
524 | .ezy__buyticket2 .btn-outline-light {
525 |   color: var(--bs-body-color);
526 |   background-color: transparent;
527 |   border: 1px solid rgba(163, 190, 241, 0.24);
528 |   padding: 12px 20px;
529 |   transition: 0.5s;
530 | }
531 | 
532 | .ezy__buyticket2 .btn-outline-light:hover {
533 |   color: var(--bs-body-bg);
534 |   background-color: var(--bs-body-color);
535 | }
536 | 
537 |     /* .ezy__buyticket2 .btn-outline-light {
538 |         color: var(--bs-body-color);
539 |         border-color: rgba(163, 190, 241, 0.24);
540 |         padding: 12px 20px;
541 |       }
542 |       .ezy__buyticket2 .btn-outline-light:hover {
543 |         color: var(--bs-body-bg);
544 |         background-color: var(--bs-body-color);
545 |       } */
546 |   </style>
547 | <section class="ezy__buyticket2" id="ezy__buyticket2">
548 |   <div class="container">
549 |     <div class="row section-separator">
550 |       <!-- Start: Section Heading -->
551 |       <div class="col-12 text-center text-sm-start">
552 |         <h2 class="ezy__buyticket2-heading mb-0">Book Your Ticket</h2>
553 |         <p class="ezy__buyticket2-sub-heading ms-sm-4">We have worked with hundreds of clients.</p>
554 |       </div>
555 |       <!-- End: Section Heading -->
556 | 
557 |       <!-- Start: Pricing Table Area -->
558 |       <div class="pricing-table pricing-table-1 col-xs-12 mt-5">
559 |         <div class="row justify-content-center mx-0">
560 |           <div class="col-12 col-md-6 px-0 ezy__buyticket2-item">
561 |             <div class="ezy__buyticket2-item-inner-wrapper text-center">
562 |               <div class="ezy__buyticket2-item-header px-3 py-4">
563 |                 <h3 class="ezy__buyticket2-item-title">Day 1</h3>
564 |                 <div class="ezy__buyticket2-item-price">Ticket price only $15</div>
565 |               </div>
566 |               <div class="ezy__buyticket2-item-key-features">
567 |                 <ul>
568 |                   <li>Includes breakfast, lunch and snacks during the day</li>
569 |                 </ul>
570 |               </div>
571 |             </div>
572 |           </div>
573 |           <div class="col-12 col-md-6 px-0 ezy__buyticket2-item">
574 |             <div class="ezy__buyticket2-item-inner-wrapper text-center">
575 |               <div class="ezy__buyticket2-item-header px-3 py-4">
576 |                 <h3 class="ezy__buyticket2-item-title">Day 2</h3>
577 |                 <div class="ezy__buyticket2-item-price">Ticket price only $15</div>
578 |               </div>
579 |               <div class="ezy__buyticket2-item-key-features">
580 |                 <ul>
581 |                   <li>Includes breakfast, lunch and snacks during the day</li>
582 |                 </ul>
583 |               </div>
584 |             </div>
585 |           </div>
586 |           <div class="col-12 col-md-6">
587 |             <div class="card ezy__buyticket2-form-card rounded-0 border-0">
588 |               <div class="card-body d-flex justify-content-between align-items-center px-md-5 py-md-4">
589 |                 <div class="d-flex">
590 |                   <input type="checkbox" name="day_2" id="day_1" value="re" />
591 |                   <label for="day_1" class="ms-2 fs-5 text-uppercase">Day 1</label>
592 |                 </div>
593 |                 <div class="form-group">
594 |                   <input name="number-of-ticket-1" class="form-control ezy__buyticket2-qty px-0 text-center"
595 |                     type="text" data-value="15" required="" placeholder="QTY" />
596 |                 </div>
597 |               </div>
598 |               <div class="card-body d-flex justify-content-between align-items-center px-md-5 py-md-4">
599 |                 <div class="d-flex">
600 |                   <input type="checkbox" name="day_2" id="day_2" value="re" />
601 |                   <label for="day_2" class="ms-2 fs-5 text-uppercase">Day 2</label>
602 |                 </div>
603 |                 <div class="form-group">
604 |                   <input name="number-of-ticket-2" class="form-control ezy__buyticket2-qty px-0 text-center"
605 |                     type="text" data-value="15" required="" placeholder="QTY" />
606 |                 </div>
607 |               </div>
608 |               <div class="card-body p-md-5">
609 |                 <div class="form-group">
610 |                   <input name="name" class="form-control px-0" type="text" required=""
611 |                     placeholder="Enter Your Name" />
612 |                 </div>
613 |                 <div class="form-group mt-4">
614 |                   <input name="email" class="form-control px-0" type="email" required=""
615 |                     placeholder="Enter Your Email" />
616 |                 </div>
617 | 
618 |                 <!-- Submit Button -->
619 |                 <div class="mt-4 mt-md-5 text-center">
620 |                   <button class="btn btn-outline-light">
621 |                     Proceed to Checkout <i class="fas fa-angle-right ms-1"></i>
622 |                   </button>
623 |                 </div>
624 |               </div>
625 |             </div>
626 |           </div>
627 |         </div>
628 |         <!-- /.row -->
629 |       </div>
630 |       <!-- End: Pricing Table Area -->
631 |     </div>
632 |     <!-- /.row -->
633 |   </div>
634 |   <!-- /.container -->
635 | </section>
636 | 
637 |   <br />
638 | </body>
639 | 
640 | </html>


--------------------------------------------------------------------------------
/bootstrap/client-logos/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Client Logos(HTML-Bootstrap)</title>
  8 | 
  9 |     <!-- Color Scheme-->
 10 |     <script src="../../assets/demo/script.js"></script>
 11 |     <script>
 12 |       appendHeadInfo("bootstrap");
 13 |     </script>
 14 |   </head>
 15 | 
 16 |   <body style="background: #000" class="">
 17 |     <!--
 18 |     Name: Client Logos 1
 19 |  -->
 20 |     <style>
 21 |       .ezy__clients1 {
 22 |         /* Bootstrap variables */
 23 |         --bs-body-color: #28303b;
 24 |         --bs-body-bg: rgb(255, 255, 255);
 25 | 
 26 |         /* Easy Frontend variables */
 27 |         --ezy-theme-color: rgb(13, 110, 253);
 28 |         --ezy-theme-color-rgb: 13, 110, 253;
 29 | 
 30 |         background-color: var(--bs-body-bg);
 31 |         overflow: hidden;
 32 |         padding: 60px 0;
 33 |       }
 34 | 
 35 |       @media (min-width: 768px) {
 36 |         .ezy__clients1 {
 37 |           padding: 100px 0;
 38 |         }
 39 |       }
 40 | 
 41 |       /* Gray Block Style */
 42 |       .gray .ezy__clients1,
 43 |       .ezy__clients1.gray {
 44 |         /* Bootstrap variables */
 45 |         --bs-body-bg: rgb(246, 246, 246);
 46 |       }
 47 | 
 48 |       /* Dark Gray Block Style */
 49 |       .dark-gray .ezy__clients1,
 50 |       .ezy__clients1.dark-gray {
 51 |         /* Bootstrap variables */
 52 |         --bs-body-color: #ffffff;
 53 |         --bs-body-bg: rgb(30, 39, 53);
 54 |       }
 55 | 
 56 |       /* Dark Block Style */
 57 |       .dark .ezy__clients1,
 58 |       .ezy__clients1.dark {
 59 |         /* Bootstrap variables */
 60 |         --bs-body-color: #ffffff;
 61 |         --bs-body-bg: rgb(11, 23, 39);
 62 |       }
 63 | 
 64 |       .ezy__clients1-img {
 65 |         max-height: 50px;
 66 |       }
 67 |     </style>
 68 |     <section class="ezy__clients1">
 69 |       <div class="container">
 70 |         <div class="d-flex flex-wrap justify-content-center align-items-center text-center">
 71 |           <img
 72 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-1.png"
 73 |             alt=""
 74 |             class="ezy__clients1-img img-fluid px-5 my-4"
 75 |           />
 76 |           <img
 77 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-2.png"
 78 |             alt=""
 79 |             class="ezy__clients1-img img-fluid px-5 my-4"
 80 |           />
 81 |           <img
 82 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-3.png"
 83 |             alt=""
 84 |             class="ezy__clients1-img img-fluid px-5 my-4"
 85 |           />
 86 |           <img
 87 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-4.png"
 88 |             alt=""
 89 |             class="ezy__clients1-img img-fluid px-5 my-4"
 90 |           />
 91 |           <img
 92 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-5.png"
 93 |             alt=""
 94 |             class="ezy__clients1-img img-fluid px-5 my-4"
 95 |           />
 96 |           <img
 97 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-6.png"
 98 |             alt=""
 99 |             class="ezy__clients1-img img-fluid px-5 my-4"
100 |           />
101 |           <img
102 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-7.png"
103 |             alt=""
104 |             class="ezy__clients1-img img-fluid px-5 my-4"
105 |           />
106 |           <img
107 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-8.png"
108 |             alt=""
109 |             class="ezy__clients1-img img-fluid px-5 my-4"
110 |           />
111 |         </div>
112 |       </div>
113 |     </section>
114 | 
115 |     <br />
116 | 
117 |     <!--
118 |     Name: Client Logos 2
119 |  -->
120 |     <style>
121 |       .ezy__clients2 {
122 |         /* Bootstrap variables */
123 |         --bs-body-color: #28303b;
124 |         --bs-body-bg: rgb(255, 255, 255);
125 | 
126 |         /* Easy Frontend variables */
127 |         --ezy-theme-color: rgb(13, 110, 253);
128 |         --ezy-theme-color-rgb: 13, 110, 253;
129 | 
130 |         background-color: var(--bs-body-bg);
131 |         overflow: hidden;
132 |         padding: 60px 0;
133 |       }
134 | 
135 |       @media (min-width: 768px) {
136 |         .ezy__clients2 {
137 |           padding: 100px 0;
138 |         }
139 |       }
140 | 
141 |       /* Gray Block Style */
142 |       .gray .ezy__clients2,
143 |       .ezy__clients2.gray {
144 |         /* Bootstrap variables */
145 |         --bs-body-bg: rgb(246, 246, 246);
146 |       }
147 | 
148 |       /* Dark Gray Block Style */
149 |       .dark-gray .ezy__clients2,
150 |       .ezy__clients2.dark-gray {
151 |         /* Bootstrap variables */
152 |         --bs-body-color: #ffffff;
153 |         --bs-body-bg: rgb(30, 39, 53);
154 |       }
155 | 
156 |       /* Dark Block Style */
157 |       .dark .ezy__clients2,
158 |       .ezy__clients2.dark {
159 |         /* Bootstrap variables */
160 |         --bs-body-color: #ffffff;
161 |         --bs-body-bg: rgb(11, 23, 39);
162 |       }
163 | 
164 |       .ezy__clients2-heading {
165 |         font-weight: bold;
166 |         font-size: 25px;
167 |         line-height: 25px;
168 |         color: var(--bs-body-color);
169 |       }
170 | 
171 |       @media (min-width: 768px) {
172 |         .ezy__clients2-heading {
173 |           font-size: 45px;
174 |           line-height: 45px;
175 |         }
176 |       }
177 | 
178 |       .ezy__clients2-sub-heading {
179 |         font-size: 18px;
180 |         line-height: 25px;
181 |         color: var(--bs-body-color);
182 |         opacity: 0.7;
183 |       }
184 | 
185 |       .ezy__clients2-img {
186 |         max-height: 50px;
187 |       }
188 |     </style>
189 |     <section class="ezy__clients2">
190 |       <div class="container">
191 |         <div class="row justify-content-center mb-5">
192 |           <div class="col-lg-8 col-xl-7 col-xxl-6 text-center">
193 |             <h2 class="ezy__clients2-heading mb-4">Meet Our Clients & Partners</h2>
194 |             <p class="ezy__clients2-sub-heading mb-4">
195 |               Create amazing carousel to display your client or partner logos with extensive design controls.
196 |             </p>
197 |           </div>
198 |         </div>
199 |         <div class="d-flex flex-wrap justify-content-center align-items-center text-center">
200 |           <img
201 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-1.png"
202 |             alt=""
203 |             class="ezy__clients2-img img-fluid px-5 my-4"
204 |           />
205 |           <img
206 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-2.png"
207 |             alt=""
208 |             class="ezy__clients2-img img-fluid px-5 my-4"
209 |           />
210 |           <img
211 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-3.png"
212 |             alt=""
213 |             class="ezy__clients2-img img-fluid px-5 my-4"
214 |           />
215 |           <img
216 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-4.png"
217 |             alt=""
218 |             class="ezy__clients2-img img-fluid px-5 my-4"
219 |           />
220 |           <img
221 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-5.png"
222 |             alt=""
223 |             class="ezy__clients2-img img-fluid px-5 my-4"
224 |           />
225 |           <img
226 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-6.png"
227 |             alt=""
228 |             class="ezy__clients2-img img-fluid px-5 my-4"
229 |           />
230 |           <img
231 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-7.png"
232 |             alt=""
233 |             class="ezy__clients2-img img-fluid px-5 my-4"
234 |           />
235 |           <img
236 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-8.png"
237 |             alt=""
238 |             class="ezy__clients2-img img-fluid px-5 my-4"
239 |           />
240 |         </div>
241 |       </div>
242 |     </section>
243 | 
244 |     <br />
245 | 
246 |     <!--
247 |     Name: Client Logos 3
248 |  -->
249 |     <style>
250 |       .ezy__clients3 {
251 |         /* Bootstrap variables */
252 |         --bs-body-color: #28303b;
253 |         --bs-body-bg: rgb(255, 255, 255);
254 | 
255 |         /* Easy Frontend variables */
256 |         --ezy-theme-color: rgb(13, 110, 253);
257 |         --ezy-theme-color-rgb: 13, 110, 253;
258 | 
259 |         background-color: var(--bs-body-bg);
260 |         overflow: hidden;
261 |         padding: 60px 0;
262 |       }
263 | 
264 |       @media (min-width: 768px) {
265 |         .ezy__clients3 {
266 |           padding: 80px 0;
267 |         }
268 |       }
269 | 
270 |       /* Gray Block Style */
271 |       .gray .ezy__clients3,
272 |       .ezy__clients3.gray {
273 |         /* Bootstrap variables */
274 |         --bs-body-bg: rgb(246, 246, 246);
275 |       }
276 | 
277 |       /* Dark Gray Block Style */
278 |       .dark-gray .ezy__clients3,
279 |       .ezy__clients3.dark-gray {
280 |         /* Bootstrap variables */
281 |         --bs-body-color: #ffffff;
282 |         --bs-body-bg: rgb(30, 39, 53);
283 |       }
284 | 
285 |       /* Dark Block Style */
286 |       .dark .ezy__clients3,
287 |       .ezy__clients3.dark {
288 |         /* Bootstrap variables */
289 |         --bs-body-color: #ffffff;
290 |         --bs-body-bg: rgb(11, 23, 39);
291 |       }
292 | 
293 |       .ezy__clients3-heading {
294 |         font-weight: bold;
295 |         font-size: 25px;
296 |         line-height: 25px;
297 |         color: var(--bs-body-color);
298 |       }
299 | 
300 |       @media (min-width: 768px) {
301 |         .ezy__clients3-heading {
302 |           font-size: 35px;
303 |           line-height: 35px;
304 |         }
305 |       }
306 | 
307 |       .ezy__clients3-img {
308 |         max-height: 50px;
309 |       }
310 |     </style>
311 |     <section class="ezy__clients3">
312 |       <div class="container">
313 |         <div class="text-center mb-5">
314 |           <h2 class="ezy__clients3-heading">Meet Our Clients & Partners</h2>
315 |         </div>
316 |         <div class="d-flex flex-wrap justify-content-center align-items-center text-center">
317 |           <img
318 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-1.png"
319 |             alt=""
320 |             class="ezy__clients3-img img-fluid px-5 my-4"
321 |           />
322 |           <img
323 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-2.png"
324 |             alt=""
325 |             class="ezy__clients3-img img-fluid px-5 my-4"
326 |           />
327 |           <img
328 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-3.png"
329 |             alt=""
330 |             class="ezy__clients3-img img-fluid px-5 my-4"
331 |           />
332 |           <img
333 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-4.png"
334 |             alt=""
335 |             class="ezy__clients3-img img-fluid px-5 my-4"
336 |           />
337 |           <img
338 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-5.png"
339 |             alt=""
340 |             class="ezy__clients3-img img-fluid px-5 my-4"
341 |           />
342 |           <img
343 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-6.png"
344 |             alt=""
345 |             class="ezy__clients3-img img-fluid px-5 my-4"
346 |           />
347 |           <img
348 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-7.png"
349 |             alt=""
350 |             class="ezy__clients3-img img-fluid px-5 my-4"
351 |           />
352 |           <img
353 |             src="https://cdn.easyfrontend.com/pictures/logos/color-logo-8.png"
354 |             alt=""
355 |             class="ezy__clients3-img img-fluid px-5 my-4"
356 |           />
357 |         </div>
358 |       </div>
359 |     </section>
360 | 
361 |     <br />
362 | 
363 |     <!--
364 |     Name: Client Logos 4
365 |  -->
366 |     <style>
367 |       .ezy__clients4 {
368 |         /* Bootstrap variables */
369 |         --bs-body-color: #28303b;
370 |         --bs-body-bg: rgb(255, 255, 255);
371 | 
372 |         /* Easy Frontend variables */
373 |         --ezy-theme-color: rgb(13, 110, 253);
374 |         --ezy-theme-color-rgb: 13, 110, 253;
375 | 
376 |         background-color: var(--bs-body-bg);
377 |         overflow: hidden;
378 |         padding: 60px 0;
379 |       }
380 | 
381 |       @media (min-width: 768px) {
382 |         .ezy__clients4 {
383 |           padding: 80px 0;
384 |         }
385 |       }
386 | 
387 |       /* Gray Block Style */
388 |       .gray .ezy__clients4,
389 |       .ezy__clients4.gray {
390 |         /* Bootstrap variables */
391 |         --bs-body-bg: rgb(246, 246, 246);
392 |       }
393 | 
394 |       /* Dark Gray Block Style */
395 |       .dark-gray .ezy__clients4,
396 |       .ezy__clients4.dark-gray {
397 |         /* Bootstrap variables */
398 |         --bs-body-color: #ffffff;
399 |         --bs-body-bg: rgb(30, 39, 53);
400 |       }
401 | 
402 |       /* Dark Block Style */
403 |       .dark .ezy__clients4,
404 |       .ezy__clients4.dark {
405 |         /* Bootstrap variables */
406 |         --bs-body-color: #ffffff;
407 |         --bs-body-bg: rgb(11, 23, 39);
408 |       }
409 | 
410 |       .ezy__clients4-heading {
411 |         font-weight: bold;
412 |         font-size: 25px;
413 |         line-height: 25px;
414 |         color: var(--bs-body-color);
415 |       }
416 | 
417 |       @media (min-width: 768px) {
418 |         .ezy__clients4-heading {
419 |           font-size: 35px;
420 |           line-height: 35px;
421 |         }
422 |       }
423 | 
424 |       .ezy__clients4-img {
425 |         max-height: 50px;
426 |       }
427 |     </style>
428 |     <section class="ezy__clients4">
429 |       <div class="container">
430 |         <div class="text-center mb-5">
431 |           <h2 class="ezy__clients4-heading">Meet Our Clients & Partners</h2>
432 |         </div>
433 |         <marquee behavior="scroll" direction="left" loop>
434 |           <div class="d-flex justify-content-center align-items-center text-center">
435 |             <img
436 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-1.png"
437 |               alt=""
438 |               class="ezy__clients4-img img-fluid px-5 my-4"
439 |             />
440 |             <img
441 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-2.png"
442 |               alt=""
443 |               class="ezy__clients4-img img-fluid px-5 my-4"
444 |             />
445 |             <img
446 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-3.png"
447 |               alt=""
448 |               class="ezy__clients4-img img-fluid px-5 my-4"
449 |             />
450 |             <img
451 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-4.png"
452 |               alt=""
453 |               class="ezy__clients4-img img-fluid px-5 my-4"
454 |             />
455 |             <img
456 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-5.png"
457 |               alt=""
458 |               class="ezy__clients4-img img-fluid px-5 my-4"
459 |             />
460 |             <img
461 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-6.png"
462 |               alt=""
463 |               class="ezy__clients4-img img-fluid px-5 my-4"
464 |             />
465 |             <img
466 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-7.png"
467 |               alt=""
468 |               class="ezy__clients4-img img-fluid px-5 my-4"
469 |             />
470 |             <img
471 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-8.png"
472 |               alt=""
473 |               class="ezy__clients4-img img-fluid px-5 my-4"
474 |             />
475 |           </div>
476 |         </marquee>
477 |       </div>
478 |     </section>
479 | 
480 |     <br />
481 | 
482 |     <!--
483 |     Name: Client Logos 5
484 |  -->
485 |     <style>
486 |       .ezy__clients5 {
487 |         /* Bootstrap variables */
488 |         --bs-body-color: #28303b;
489 |         --bs-body-bg: rgb(255, 255, 255);
490 | 
491 |         /* Easy Frontend variables */
492 |         --ezy-theme-color: rgb(13, 110, 253);
493 |         --ezy-theme-color-rgb: 13, 110, 253;
494 | 
495 |         background-color: var(--bs-body-bg);
496 |         overflow: hidden;
497 |         padding: 60px 0;
498 |       }
499 | 
500 |       @media (min-width: 768px) {
501 |         .ezy__clients5 {
502 |           padding: 80px 0;
503 |         }
504 |       }
505 | 
506 |       /* Gray Block Style */
507 |       .gray .ezy__clients5,
508 |       .ezy__clients5.gray {
509 |         /* Bootstrap variables */
510 |         --bs-body-bg: rgb(246, 246, 246);
511 |       }
512 | 
513 |       /* Dark Gray Block Style */
514 |       .dark-gray .ezy__clients5,
515 |       .ezy__clients5.dark-gray {
516 |         /* Bootstrap variables */
517 |         --bs-body-color: #ffffff;
518 |         --bs-body-bg: rgb(30, 39, 53);
519 |       }
520 | 
521 |       /* Dark Block Style */
522 |       .dark .ezy__clients5,
523 |       .ezy__clients5.dark {
524 |         /* Bootstrap variables */
525 |         --bs-body-color: #ffffff;
526 |         --bs-body-bg: rgb(11, 23, 39);
527 |       }
528 | 
529 |       .ezy__clients5-heading {
530 |         font-weight: bold;
531 |         font-size: 25px;
532 |         line-height: 25px;
533 |         color: var(--bs-body-color);
534 |       }
535 | 
536 |       @media (min-width: 768px) {
537 |         .ezy__clients5-heading {
538 |           font-size: 35px;
539 |           line-height: 35px;
540 |         }
541 |       }
542 | 
543 |       .ezy__clients5-img {
544 |         max-height: 60px;
545 |       }
546 |     </style>
547 |     <section class="ezy__clients5">
548 |       <div class="container">
549 |         <div class="text-center mb-5">
550 |           <h2 class="ezy__clients5-heading">Meet Our Clients & Partners</h2>
551 |         </div>
552 |         <marquee behavior="scroll" direction="left" scrollamount="20" loop>
553 |           <div class="d-flex justify-content-center align-items-center text-center">
554 |             <img
555 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-1.png"
556 |               alt=""
557 |               class="ezy__clients5-img img-fluid px-5 my-4"
558 |             />
559 |             <img
560 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-2.png"
561 |               alt=""
562 |               class="ezy__clients5-img img-fluid px-5 my-4"
563 |             />
564 |             <img
565 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-3.png"
566 |               alt=""
567 |               class="ezy__clients5-img img-fluid px-5 my-4"
568 |             />
569 |             <img
570 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-4.png"
571 |               alt=""
572 |               class="ezy__clients5-img img-fluid px-5 my-4"
573 |             />
574 |             <img
575 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-5.png"
576 |               alt=""
577 |               class="ezy__clients5-img img-fluid px-5 my-4"
578 |             />
579 |             <img
580 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-6.png"
581 |               alt=""
582 |               class="ezy__clients5-img img-fluid px-5 my-4"
583 |             />
584 |             <img
585 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-7.png"
586 |               alt=""
587 |               class="ezy__clients5-img img-fluid px-5 my-4"
588 |             />
589 |             <img
590 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-8.png"
591 |               alt=""
592 |               class="ezy__clients5-img img-fluid px-5 my-4"
593 |             />
594 |           </div>
595 |         </marquee>
596 |         <marquee behavior="scroll" direction="right" scrollamount="10" loop>
597 |           <div class="d-flex justify-content-center align-items-center text-center">
598 |             <img
599 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-1.png"
600 |               alt=""
601 |               class="ezy__clients5-img img-fluid px-5 my-4"
602 |             />
603 |             <img
604 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-2.png"
605 |               alt=""
606 |               class="ezy__clients5-img img-fluid px-5 my-4"
607 |             />
608 |             <img
609 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-3.png"
610 |               alt=""
611 |               class="ezy__clients5-img img-fluid px-5 my-4"
612 |             />
613 |             <img
614 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-4.png"
615 |               alt=""
616 |               class="ezy__clients5-img img-fluid px-5 my-4"
617 |             />
618 |             <img
619 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-5.png"
620 |               alt=""
621 |               class="ezy__clients5-img img-fluid px-5 my-4"
622 |             />
623 |             <img
624 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-6.png"
625 |               alt=""
626 |               class="ezy__clients5-img img-fluid px-5 my-4"
627 |             />
628 |             <img
629 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-7.png"
630 |               alt=""
631 |               class="ezy__clients5-img img-fluid px-5 my-4"
632 |             />
633 |             <img
634 |               src="https://cdn.easyfrontend.com/pictures/logos/color-logo-8.png"
635 |               alt=""
636 |               class="ezy__clients5-img img-fluid px-5 my-4"
637 |             />
638 |           </div>
639 |         </marquee>
640 |       </div>
641 |     </section>
642 | 
643 |     <br />
644 | 
645 |   </body>
646 | </html>
647 | 


--------------------------------------------------------------------------------
/bootstrap/about-us/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>About Us(HTML-Bootstrap)</title>
  8 | 
  9 |     <!-- Color Scheme-->
 10 |     <script src="../../assets/demo/script.js"></script>
 11 |     <script>
 12 |       appendHeadInfo("bootstrap");
 13 |     </script>
 14 |   </head>
 15 | 
 16 |   <body>
 17 |     <!-- Start: about us 1
 18 | ================================== -->
 19 |     <style>
 20 |       .ezy__about1 {
 21 |         /* Bootstrap variables */
 22 |         --bs-body-color: #1e2329;
 23 |         --bs-body-bg: rgb(255, 255, 255);
 24 | 
 25 |         /* Easy Frontend variables */
 26 |         --ezy-theme-color: rgb(13, 110, 253);
 27 |         --ezy-theme-color-rgb: 13, 110, 253;
 28 | 
 29 |         background-color: var(--bs-body-bg);
 30 |         overflow: hidden;
 31 |         padding: 60px 0;
 32 |       }
 33 | 
 34 |       @media (min-width: 768px) {
 35 |         .ezy__about1 {
 36 |           padding: 100px 0;
 37 |         }
 38 |       }
 39 | 
 40 |       /* Gray Block Style */
 41 |       .gray .ezy__about1,
 42 |       .ezy__about1.gray {
 43 |         /* Bootstrap variables */
 44 |         --bs-body-bg: rgb(246, 246, 246);
 45 |       }
 46 | 
 47 |       /* Dark Gray Block Style */
 48 |       .dark-gray .ezy__about1,
 49 |       .ezy__about1.dark-gray {
 50 |         /* Bootstrap variables */
 51 |         --bs-body-color: #ffffff;
 52 |         --bs-body-bg: rgb(30, 39, 53);
 53 |       }
 54 | 
 55 |       /* Dark Block Style */
 56 |       .dark .ezy__about1,
 57 |       .ezy__about1.dark {
 58 |         /* Bootstrap variables */
 59 |         --bs-body-color: #ffffff;
 60 |         --bs-body-bg: rgb(11, 23, 39);
 61 |       }
 62 | 
 63 |       .ezy__about1-heading {
 64 |         font-weight: 400;
 65 |         font-size: 35px;
 66 |         line-height: 45px;
 67 |         color: var(--bs-body-color);
 68 |       }
 69 | 
 70 |       @media (min-width: 768px) {
 71 |         .ezy__about1-heading {
 72 |           font-size: 55px;
 73 |           line-height: 70px;
 74 |         }
 75 |       }
 76 | 
 77 |       .ezy__about1-content p {
 78 |         font-size: 16px;
 79 |         line-height: 1.5;
 80 |         color: var(--bs-body-color);
 81 |         opacity: 0.8;
 82 |         letter-spacing: 2px;
 83 |       }
 84 |     </style>
 85 |     <section class="ezy__about1" id="ezy__about1">
 86 |       <div class="container">
 87 |         <div class="row">
 88 |           <div class="col-12 col-md-6">
 89 |             <!-- Start: Section Heading -->
 90 |             <h2 class="ezy__about1-heading text-md-end pe-md-4 fw-light">
 91 |               Developing Amazing Things with Passion since 2016.
 92 |             </h2>
 93 |             <!-- End: Section Heading -->
 94 |           </div>
 95 |           <div class="col-12 col-md-6 mt-3">
 96 |             <div class="ezy__about1-content">
 97 |               <p class="mb-0">
 98 |                 Created forth two. Behold appear first, kind all i saying fowl man itself moved which every open shall
 99 |                 moved subdue appear. Saying life wherein stars. Give dry, own, male had that us third lesser over deep.
100 |                 May every bring in it Whose. Female earth heaven won't behold female.
101 |               </p>
102 |               <p class="mt-5">
103 |                 Moved bearing give a two after. Had. Seas. Man they're. Grass above kind saying thing for that void
104 |                 sixth fly His after it.
105 |               </p>
106 |               <p class="mt-5 mb-0">
107 |                 The set doesn't moved. Deep don't fruit fowl gathering heaven days moving creeping under from i air. Set
108 |                 it fifth Meat wasness. every bring in it Whose. Female earth heaven won't behold female.
109 |               </p>
110 |             </div>
111 |           </div>
112 |         </div>
113 |         <!-- /.row -->
114 |       </div>
115 |       <!-- /.container -->
116 |     </section>
117 | 
118 |     <br />
119 | 
120 |     <!-- Start: about us 2
121 | ================================== -->
122 |     <style>
123 |       .ezy__about2 {
124 |         /* Bootstrap variables */
125 |         --bs-body-color: #1e2329;
126 |         --bs-body-bg: rgb(255, 255, 255);
127 | 
128 |         /* Easy Frontend variables */
129 |         --ezy-theme-color: rgb(13, 110, 253);
130 |         --ezy-theme-color-rgb: 13, 110, 253;
131 | 
132 |         background-color: var(--bs-body-bg);
133 |         overflow: hidden;
134 |         padding: 60px 0;
135 |       }
136 | 
137 |       @media (min-width: 768px) {
138 |         .ezy__about2 {
139 |           padding: 100px 0;
140 |         }
141 |       }
142 | 
143 |       /* Gray Block Style */
144 |       .gray .ezy__about2,
145 |       .ezy__about2.gray {
146 |         /* Bootstrap variables */
147 |         --bs-body-bg: rgb(246, 246, 246);
148 |       }
149 | 
150 |       /* Dark Gray Block Style */
151 |       .dark-gray .ezy__about2,
152 |       .ezy__about2.dark-gray {
153 |         /* Bootstrap variables */
154 |         --bs-body-color: #ffffff;
155 |         --bs-body-bg: rgb(30, 39, 53);
156 |       }
157 | 
158 |       /* Dark Block Style */
159 |       .dark .ezy__about2,
160 |       .ezy__about2.dark {
161 |         /* Bootstrap variables */
162 |         --bs-body-color: #ffffff;
163 |         --bs-body-bg: rgb(11, 23, 39);
164 |       }
165 | 
166 |       .ezy__about2-heading {
167 |         font-weight: 400;
168 |         font-size: 35px;
169 |         line-height: 45px;
170 |         color: var(--bs-body-color);
171 |       }
172 | 
173 |       @media (min-width: 768px) {
174 |         .ezy__about2-heading {
175 |           font-size: 50px;
176 |           line-height: 77px;
177 |         }
178 |       }
179 | 
180 |       .ezy__about2-banner {
181 |         min-height: 300px;
182 |         background-size: cover;
183 |         background-position: center;
184 |       }
185 | 
186 |       .ezy__about2-content p {
187 |         font-size: 16px;
188 |         line-height: 1.5;
189 |         color: var(--bs-body-color);
190 |         opacity: 0.8;
191 |         letter-spacing: 2px;
192 |       }
193 |     </style>
194 |     <section class="ezy__about2" id="ezy__about2">
195 |       <div class="container">
196 |         <div class="row">
197 |           <div class="col-12 col-lg-4">
198 |             <!-- Start: Section Heading -->
199 |             <h2 class="ezy__about2-heading text-lg-end fw-light mb-0">
200 |               Traveller Visiting nowadays Iceage Caves With Amazing Eye-catching Scenes.
201 |             </h2>
202 |             <!-- End: Section Heading -->
203 |           </div>
204 |           <div class="col-12 col-lg-4 px-md-4 my-4 my-lg-0">
205 |             <div
206 |               class="h-100 ezy__about2-banner"
207 |               style="background-image: url(https://cdn.easyfrontend.com/pictures/contents/contents-banner.jpg)"
208 |             ></div>
209 |           </div>
210 |           <div class="col-12 col-lg-4">
211 |             <div class="ezy__about2-content">
212 |               <p class="mb-0">
213 |                 Created forth two. Behold appear first, kind all i saying fowl man itself moved which every open shall
214 |                 moved subdue appear. Saying life wherein stars. Give dry, own, male had that us third lesser over deep.
215 |                 May every bring in it Whose. Female earth heaven won't behold female.
216 |               </p>
217 |               <p class="mt-4">
218 |                 Moved bearing give a two after. Had. Seas. Man they're. Grass above kind saying thing for that void
219 |                 sixth fly His after it.
220 |               </p>
221 |               <p class="mt-4 mb-0">
222 |                 The set doesn't moved. Deep don't fruit fowl gathering heaven days moving creeping under from i air. Set
223 |                 it fifth Meat wasness. every bring in it Whose. Female earth heaven won't behold female.
224 |               </p>
225 |             </div>
226 |           </div>
227 |         </div>
228 |         <!-- /.row -->
229 |       </div>
230 |       <!-- /.container -->
231 |     </section>
232 | 
233 |     <br />
234 | 
235 |     <!--
236 |     Name: about 3
237 | -->
238 |     <style>
239 |       .ezy__about3 {
240 |         /* Bootstrap variables */
241 |         --bs-body-bg: rgb(255, 255, 255);
242 | 
243 |         /* Easy Frontend variables */
244 |         --ezy-theme-color: rgb(13, 110, 253);
245 |         --ezy-theme-color-rgb: 13, 110, 253;
246 | 
247 |         background-color: var(--bs-body-bg);
248 |         color: var(--bs-body-color);
249 |         overflow: hidden;
250 |         padding: 60px 0;
251 |         position: relative;
252 |       }
253 | 
254 |       @media (min-width: 768px) {
255 |         .ezy__about3 {
256 |           padding: 100px 0;
257 |         }
258 |       }
259 | 
260 |       /* Gray Block Style */
261 |       .gray .ezy__about3,
262 |       .ezy__about3.gray {
263 |         /* Bootstrap variables */
264 |         --bs-body-bg: rgb(246, 246, 246);
265 |       }
266 | 
267 |       /* Dark Gray Block Style */
268 |       .dark-gray .ezy__about3,
269 |       .ezy__about3.dark-gray {
270 |         /* Bootstrap variables */
271 |         --bs-body-color: #ffffff;
272 |         --bs-body-bg: rgb(30, 39, 53);
273 |       }
274 | 
275 |       /* Dark Block Style */
276 |       .dark .ezy__about3,
277 |       .ezy__about3.dark {
278 |         /* Bootstrap variables */
279 |         --bs-body-color: #ffffff;
280 |         --bs-body-bg: rgb(11, 23, 39);
281 |       }
282 | 
283 |       .ezy__about3-heading {
284 |         font-weight: bold;
285 |         font-size: 32px;
286 |         line-height: 1;
287 |       }
288 | 
289 |       @media (min-width: 768px) {
290 |         .ezy__about3-heading {
291 |           font-size: 45px;
292 |         }
293 |       }
294 | 
295 |       .ezy__about3 .card {
296 |         background-color: transparent;
297 |         border: 0;
298 |       }
299 | 
300 |       .ezy__about3-icon {
301 |         color: var(--ezy-theme-color);
302 |         font-size: 60px;
303 |       }
304 | 
305 |       .ezy__about3 .card-title {
306 |         font-size: 28px;
307 |       }
308 | 
309 |       .ezy__about3 .card-text {
310 |         font-size: 16px;
311 |         opacity: 0.8;
312 |       }
313 |     </style>
314 |     <section class="ezy__about3">
315 |       <div class="container">
316 |         <div class="row justify-content-center">
317 |           <div class="col-md-6 text-center">
318 |             <h1 class="ezy__about3-heading">What is CourseCloud Live?</h1>
319 |           </div>
320 |         </div>
321 |         <div class="row mt-4">
322 |           <div class="col-12 col-md-4">
323 |             <div class="card text-center mt-4">
324 |               <i class="fab fa-500px ezy__about3-icon"></i>
325 |               <div class="card-body">
326 |                 <h5 class="card-title">Flexible Learning</h5>
327 |                 <p class="card-text">Take classes at your own pace with on-demand videos and class workbooks.</p>
328 |               </div>
329 |             </div>
330 |           </div>
331 |           <div class="col-12 col-md-4">
332 |             <div class="card text-center mt-4">
333 |               <i class="fas fa-comments ezy__about3-icon"></i>
334 |               <div class="card-body">
335 |                 <h5 class="card-title">Engaging Community</h5>
336 |                 <p class="card-text">
337 |                   Participate in student opportunities and connect with other students on the CourseCloud.
338 |                 </p>
339 |               </div>
340 |             </div>
341 |           </div>
342 |           <div class="col-12 col-md-4">
343 |             <div class="card text-center mt-4">
344 |               <i class="fas fa-compass ezy__about3-icon"></i>
345 |               <div class="card-body">
346 |                 <h5 class="card-title">Explore</h5>
347 |                 <p class="card-text">MasterClass offers full refunds up to 30 days after gift redemption.</p>
348 |               </div>
349 |             </div>
350 |           </div>
351 |         </div>
352 |       </div>
353 |     </section>
354 | 
355 |     <br />
356 | 
357 |     <!-- Start: about us 4
358 | ================================== -->
359 |     <style>
360 |       .ezy__about4 {
361 |         /* Bootstrap variables */
362 |         --bs-body-color: #1e2329;
363 |         --bs-body-bg: rgb(255, 255, 255);
364 | 
365 |         /* Easy Frontend variables */
366 |         --ezy-theme-color: rgb(13, 110, 253);
367 |         --ezy-theme-color-rgb: 13, 110, 253;
368 | 
369 |         background-color: var(--bs-body-bg);
370 |         overflow: hidden;
371 |         padding: 60px 0;
372 |       }
373 | 
374 |       @media (min-width: 768px) {
375 |         .ezy__about4 {
376 |           padding: 100px 0;
377 |         }
378 |       }
379 | 
380 |       /* Gray Block Style */
381 |       .gray .ezy__about4,
382 |       .ezy__about4.gray {
383 |         /* Bootstrap variables */
384 |         --bs-body-bg: rgb(246, 246, 246);
385 |       }
386 | 
387 |       /* Dark Gray Block Style */
388 |       .dark-gray .ezy__about4,
389 |       .ezy__about4.dark-gray {
390 |         /* Bootstrap variables */
391 |         --bs-body-color: #ffffff;
392 |         --bs-body-bg: rgb(30, 39, 53);
393 |       }
394 | 
395 |       /* Dark Block Style */
396 |       .dark .ezy__about4,
397 |       .ezy__about4.dark {
398 |         /* Bootstrap variables */
399 |         --bs-body-color: #ffffff;
400 |         --bs-body-bg: rgb(11, 23, 39);
401 |       }
402 | 
403 |       .ezy__about4-heading {
404 |         font-size: 35px;
405 |         line-height: 45px;
406 |         color: var(--bs-body-color);
407 |       }
408 | 
409 |       @media (min-width: 768px) {
410 |         .ezy__about4-heading {
411 |           font-size: 50px;
412 |           line-height: 70px;
413 |         }
414 |       }
415 | 
416 |       .ezy__about4-banner {
417 |         min-height: 300px;
418 |         background-size: cover;
419 |         background-position: center;
420 |       }
421 | 
422 |       .ezy__about4-content p {
423 |         font-size: 16px;
424 |         line-height: 1.7;
425 |         color: var(--bs-body-color);
426 |         opacity: 0.7;
427 |       }
428 |     </style>
429 |     <section class="ezy__about4" id="ezy__about4">
430 |       <div class="container">
431 |         <div class="row">
432 |           <div class="col-12 col-lg-4">
433 |             <!-- Start: Section Heading -->
434 |             <h2 class="ezy__about4-heading text-lg-end fw-light mb-0">
435 |               About the Conference and Developing Amazing Things with Passion since 2016.
436 |             </h2>
437 |             <!-- End: Section Heading -->
438 |           </div>
439 |           <div class="col-12 col-lg-4 px-md-4 my-4 my-lg-0">
440 |             <div
441 |               class="h-100 ezy__about4-banner"
442 |               style="background-image: url(https://cdn.easyfrontend.com/pictures/about/about4.jpg)"
443 |             ></div>
444 |           </div>
445 |           <div class="col-12 col-lg-4">
446 |             <div class="ezy__about4-content">
447 |               <p class="mb-0">
448 |                 Created forth two. Behold appear first, kind all i saying fowl man itself moved which every open shall
449 |                 moved subdue appear. Saying life wherein stars. Give dry, own, male had that us third lesser over deep.
450 |                 May every bring in it Whose. Female earth heaven won't behold female.
451 |               </p>
452 |               <p class="mt-4">
453 |                 Moved bearing give a two after. Had. Seas. Man they're. Grass above kind saying thing for that void
454 |                 sixth fly His after it.
455 |               </p>
456 |               <p class="mt-4 mb-0">
457 |                 The set doesn't moved. Deep don't fruit fowl gathering heaven days moving creeping under from i air. Set
458 |                 it fifth Meat wasness. every bring in it Whose. Female earth heaven won't behold female.
459 |               </p>
460 |             </div>
461 |           </div>
462 |         </div>
463 |         <!-- /.row -->
464 |       </div>
465 |       <!-- /.container -->
466 |     </section>
467 | 
468 |     <br />
469 | 
470 |     <!-- Start: about us 5
471 | ================================== -->
472 |     <style>
473 |       .ezy__about5 {
474 |         /* Bootstrap variables */
475 |         --bs-body-color: #1e2329;
476 |         --bs-body-bg: rgb(255, 255, 255);
477 | 
478 |         /* Easy Frontend variables */
479 |         --ezy-theme-color: rgb(13, 110, 253);
480 |         --ezy-theme-color-rgb: 13, 110, 253;
481 | 
482 |         background-color: var(--bs-body-bg);
483 |         color: var(--bs-body-color);
484 |         overflow: hidden;
485 |         padding: 60px 0;
486 |       }
487 | 
488 |       @media (min-width: 768px) {
489 |         .ezy__about5 {
490 |           padding: 100px 0;
491 |         }
492 |       }
493 | 
494 |       /* Gray Block Style */
495 |       .gray .ezy__about5,
496 |       .ezy__about5.gray {
497 |         /* Bootstrap variables */
498 |         --bs-body-bg: rgb(246, 246, 246);
499 |       }
500 | 
501 |       /* Dark Gray Block Style */
502 |       .dark-gray .ezy__about5,
503 |       .ezy__about5.dark-gray {
504 |         /* Bootstrap variables */
505 |         --bs-body-color: #ffffff;
506 |         --bs-body-bg: rgb(30, 39, 53);
507 |       }
508 | 
509 |       /* Dark Block Style */
510 |       .dark .ezy__about5,
511 |       .ezy__about5.dark {
512 |         /* Bootstrap variables */
513 |         --bs-body-color: #ffffff;
514 |         --bs-body-bg: rgb(11, 23, 39);
515 |       }
516 | 
517 |       .ezy__about5-heading {
518 |         font-size: 35px;
519 |         line-height: 45px;
520 |       }
521 |       @media (min-width: 768px) {
522 |         .ezy__about5-heading {
523 |           font-size: 50px;
524 |           line-height: 70px;
525 |         }
526 |       }
527 |       .ezy__about5-sub-heading {
528 |         font-size: 20px;
529 |         line-height: 28px;
530 |         opacity: 0.8;
531 |       }
532 | 
533 |       .ezy__about5-banner {
534 |         min-height: 300px;
535 |         background-size: cover;
536 |         background-position: center;
537 |       }
538 | 
539 |       .ezy__about5-content p {
540 |         font-size: 16px;
541 |         line-height: 1.7;
542 |         opacity: 0.7;
543 |       }
544 |       .ezy__about5-content a {
545 |         color: var(--bs-body-color);
546 |       }
547 |       .ezy__about5-content a:hover {
548 |         color: var(--ezy-theme-color);
549 |       }
550 | 
551 |       .ezy__about5-btn {
552 |         background-color: var(--bs-body-color);
553 |         color: var(--bs-body-bg);
554 |         transition: 0.5s;
555 |       }
556 |       .ezy__about5-btn:hover {
557 |         background-color: var(--bs-body-color);
558 |         color: var(--bs-body-bg);
559 |         opacity: 0.9;
560 |       }
561 |     </style>
562 |     <section class="ezy__about5" id="ezy__about5">
563 |       <div class="container">
564 |         <div class="row justify-content-center">
565 |           <div class="col-12 col-md-8">
566 |             <h2 class="ezy__about5-heading fw-bold mb-2">About Us</h2>
567 |             <p class="ezy__about5-sub-heading">
568 |               We are a sister-owned company that creates skin care with minimal ingredients in powerful combinations.
569 |             </p>
570 |             <div class="ezy__about5-content">
571 |               <p class="mb-0">
572 |                 We obsess over every single ingredient that we add to our products, avoiding anything that is known to
573 |                 be irritating or cause for concern, and hone in on unique blends of botanicals and clays that are
574 |                 especially effective and truly feel incredible to use.
575 |               </p>
576 |               <h4 class="my-4">OUR STORY</h4>
577 |               <p class="mb-0">
578 |                 We're sisters, Zeena and Letisha. We started Brown and Coconut as a lifestyle blog in 2013 while living
579 |                 in Boston, MA. We shared our journey to living a more conscious and holistic life with a special focus
580 |                 on our efforts to heal our acneic skin, which didn’t get better with conventional treatment methods. We
581 |                 knew the type of skin care products we were looking for but couldn’t find them in stores, trying
582 |                 countless products that were too expensive and didn’t meet our expectations, leaving us disappointed and
583 |                 out of money. Frustrated, but motivated, we embarked on the journey to develop our own line of skin care
584 |                 products.
585 |               </p>
586 |               <h4 class="my-4">OUR PRODUCTS</h4>
587 |               <p class="mb-0">
588 |                 After identifying the ingredients we found effective in healing our skin, we began crafting entirely
589 |                 unique formulas. Countless hours of research, cosmetic chemist expertise, trial, and error led to the
590 |                 creation of our line of plant-based powerhouse products that not only do what they say they do, but that
591 |                 feel incredible to use. We’ve come a long way since we made our debut at our first-ever local pop-up
592 |                 event in Massachusetts, but what has not changed is our love for making luxurious botanical skin care
593 |                 that you simply can’t wait to come home to.
594 |               </p>
595 |               <h4 class="my-4">OUR IMPACTY</h4>
596 |               <p class="mb-0">
597 |                 Our products are packaged in glass bottles that can be reused and recycled. Orders are shipped in
598 |                 recyclable cardboard boxes with recyclable packing paper. Each item is hand-rolled in recycled paper
599 |                 wraps to protect the glass during shipment. We use paper tape with a starch-based adhesive to seal the
600 |                 boxes. To save paper and reduce the need to print, we do not include invoices with orders. To offset our
601 |                 shipping emissions, we pay a fee for every order which is then donated to forest protection initiatives,
602 |                 specifically <a href="#">the Acapa - Bajo Mira y Frontera Forest Conservation Project</a> in Colombia.
603 |               </p>
604 |               <div class="mt-5 d-flex align-items-center justify-content-center">
605 |                 <button class="btn ezy__about5-btn text-center">Follow Us On Instagram</button>
606 |               </div>
607 |             </div>
608 |           </div>
609 |         </div>
610 |       </div>
611 |     </section>
612 | 
613 |     <br />
614 | 
615 |   </body>
616 | </html>
617 | 


--------------------------------------------------------------------------------