Snippets Collections
/*  Big O  */

  let performance = performance.now();
  //This can be used to measure the Performance of the code.
  // Use this before the code and after code, It will show the 'performace'


/* XXXXXXXX--XXXXXX */

/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
<iframe src="https://online.namnguyen68.repl.co?&layout=Preview&iframeId=czfdrdr57a&theme=dark&defaultPath=/&showExplorer=no" style="display: block" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" height="3650px" width="100%"></iframe>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<table width="400" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td>Contact Form </td>
</tr>
</table>

<table width="400" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td><form name="form1" method="post" action="send_contact.php">
<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td width="16%">Subject</td>
<td width="2%">:</td>
<td width="82%"><input name="subject" type="text" id="subject" size="50"></td>
</tr>
<tr>
<td>Detail</td>
<td>:</td>
<td><textarea name="detail" cols="50" rows="4" id="detail"></textarea></td>
</tr>
<tr>
<td>Name</td>
<td>:</td>
<td><input name="name" type="text" id="name" size="50"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input name="customer_mail" type="text" id="customer_mail" size="50"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Submit"> <input type="reset" name="Submit2" value="Reset"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

<div class="sr-only">This text is hidden.</div> 
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="320">
	<tbody>
		<tr>
			<td align="left" class="mcnCaptionBottomImageContent" style="padding: 0 9px 9px 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" valign="top">Space for a picture<br />
			<br />
			Caption</td>
		</tr>
        <tr>Optional second row</tr>
	</tbody>
</table>

<table align="right" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="200">
	<tbody>
		<tr>
			<td class="mcnTextContent" style="padding: 0px 9px;font-family: Arial, &quot;Helvetica Neue&quot;, Helvetica, sans-serif;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #222222;font-size: 14px;line-height: 150%;text-align: left;" valign="top" width="260">
			<div><strong>LARGE LEFT</strong>
			</div>
			</td>
		</tr>
        <tr>Optional Second Row</tr>
	</tbody>
</table>
<p style="margin: -95px 0px 0px 0px;">&nbsp;</p>
<div style="background: #FFCD54; margin: 20px 0; padding: 15px 15px 15px 15px; border-radius: 0px;">
<p>SOME WRITING YOU WANT</p>

<p>SOME MORE WRITING YOU WANT</p>
</div>
<table align="left">
	<tbody>
		<tr>
			<td colspan="2" style="border:solid windowtext 1.0pt; background:#81cfd6; width:100.0%; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="100%">
			<p><b>FIELD TITLE</b></p>
			</td>
		</tr>
		<tr>
			<td style="border:solid windowtext 1.0pt; background:#f6a4b5; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="48%">
			<p><b>What happened previously</b></p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; background:#f6a4b5; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="51%">
			<p><b>What has changed</b></p>
			</td>
		</tr>
		<tr style="height:325.4pt">
			<td rowspan="2" style="border:solid windowtext 1.0pt; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="48%">
			<p>DESCRIPTION TEXT</p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="51%">
			<ul>
				<li>POINT ONE</li>
				<li>POINT TWO</li>
				<li>POINT THREE</li>
			</ul>
			</td>
		</tr>
		<tr style="height:19.15pt">
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:19.15pt" valign="top" width="51%">
			<p>PMT: RELATED TICKET</p>
			</td>
		</tr>

				<tr>
			<td colspan="2" style="border:solid windowtext 1.0pt; background:#81cfd6; width:100.0%; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="100%">
			<p><b>FIELD TITLE</b></p>
			</td>
		</tr>
		<tr>
			<td style="border:solid windowtext 1.0pt; background:#f6a4b5; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="48%">
			<p><b>What happened previously</b></p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; background:#f6a4b5; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="51%">
			<p><b>What has changed</b></p>
			</td>
		</tr>
		<tr style="height:325.4pt">
			<td rowspan="2" style="border:solid windowtext 1.0pt; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="48%">
			<p>DESCRIPTION TEXT</p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="51%">
			<ul>
				<li>POINT ONE</li>
				<li>POINT TWO</li>
				<li>POINT THREE</li>
			</ul>
			</td>
		</tr>
		<tr style="height:19.15pt">
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:19.15pt" valign="top" width="51%">
			<p>PMT: RELATED TICKET</p>
			</td>
		</tr>
        		<tr>
			<td colspan="2" style="border:solid windowtext 1.0pt; background:#81cfd6; width:100.0%; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="100%">
			<p><b>FIELD TITLE</b></p>
			</td>
		</tr>
		<tr>
			<td style="border:solid windowtext 1.0pt; background:#f6a4b5; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="48%">
			<p><b>What happened previously</b></p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; background:#f6a4b5; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="51%">
			<p><b>What has changed</b></p>
			</td>
		</tr>
		<tr style="height:325.4pt">
			<td rowspan="2" style="border:solid windowtext 1.0pt; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="48%">
			<p>DESCRIPTION TEXT</p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="51%">
			<ul>
				<li>POINT ONE</li>
				<li>POINT TWO</li>
				<li>POINT THREE</li>
			</ul>
			</td>
		</tr>
		<tr style="height:19.15pt">
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:19.15pt" valign="top" width="51%">
			<p>PMT: RELATED TICKET</p>
			</td>
		</tr>
</table>
    <div class="app">
        <div id="bound-one" class="scroll-bound">
            <video id='myVideo' width="600" muted preload>
               <source src="https://res.cloudinary.com/tvibhu12/video/upload/v1594987784/mambo_drfrs1.mp4" type="video/webm">
               
     </video>
          
        </div>

        <div class="content">
            <h1>Heading</h1>
            <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
            
          </div>
        
      
        
    </div>
/* Lesson 01 : HTML-CSS */

  //Blockquotes
  <blockquote cite="mention Source Link Here">
  <p>Ruh-roh--RAGGY!!!</p>
  <footer>—Scooby Doo, <cite>Mystery Incorporated</cite>         </footer>
  </blockquote>

  //List: Description  ( lists with name/value pairs )
  <dl>
    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
   </dl>
  
                  /*   CSS   */

   //Selecting using attributes
    [attr] { }
    [attr=val] { }
    tag[attr] { }
    tag[attr='val'] { }
    [attr~=val] { }


    -----------------XX------------------------
    
                /*  Javascript  */
    
//Spread Operator.
let nums = [4,5,45,235,523,54,314]
console.log(...nums); //It will only show the numbers, It won't show an array.

//Rest Operator.
const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(total, subtotal, tax, items);


 // DOM */

// .innerText: 
It will set/get the  inner text inside the element, But the format will be as shown on the element ( line breaks, spaces will identical to html file.) . It will take CSS into consideration and will return the text that is visibily rendered on the Page. 

//.textContent:
It will set/Get the whole text inside the selected element and it will won't include the line breaks or spaces. 


//Create | Add Text | Append.
let newElem = document.createElement('p');
let data = document.createTextNode("Some Infor..");

newElem.appendChild(data); //Data added to new element.
$("body").appendChild(newElem); // New element added to 'body'

newElem.textContent = 'We can also add text like this...';
----------------------

//insertAdjacentHTML()
: "appendChild()" will always add the data at the end of the element, To resolve this we use 'insertAdjacentHTML()'. It will take 2 arguments. First is the location( one of the 4 method ) and 2nd is the HTML content(text).

Methods:
beforebegin | afterbegin | beforeneed | afterend.

<!--- beforebegin  ---->
  <p>
    <!---  afterbegin ---->
        Existing Text/html content
    <!--- beforeneed  ---->
 </p>
<!---afterend   ---->

**
selectedElem.insertAdjacentElement(methodHere, newElementToAdd);          
          
------------------------

Eg: 
const mainHeading = document.querySelector('#main-heading');
const htmlTextToAdd = '<h2>Skydiving is fun!</h2>';
mainHeading.insertAdjacentHTML('afterend', htmlTextToAdd)

- parentElem.removeChild(childElement); //Pass the element to be deleted in the agument . We can pass the parent element in argument to remove the Parent elem.
- Elem.remove()  //We don't have to mention any arguments.

- Elem.firstElementChild();
- Elem.parentChild();

 // Styling in Javascript */
First Way: 
element.style.property1 = "css stuff";
element.style.property2 = "css stuff";
** Ex:
element.style.width = "50%";
element.style.height = "400px";
**
  
Second Way: ( Better )
element.style.cssText = "width: 50%;padding: 10px 50px;";
Note: "cssText" will overwrite anything that's already in the style attribute  
  
  
 //    Attributes    

element.setAttribute('attribute', attributeValue);

**
aTag.setAttribute('target','_blank');


 //   Classes
Properties:
add() | remove() | toggle() | contains();


elem.className; //It will list all the classes an Combined String.(old way)
or
elem.classList; //It will list all the classes in an ( DOMTokenList ) object.(new way)

elem.classList.add('class-1','class-2',....);//We can assign  single/Multiple classes to the element.

elem.classList.remove('class-1','class-2'); //We can unassign single/multiple classes from the element. 

elemem.classList = 'class-1'; //This will replace all the existing classes assigned to the Element. 

elem.classList.toggle('class1');//to add the class if it doesn't exists or remove it from the list if it does already exist ( other classes are not affected. )

elem.contains('class1'); //returns a boolean based on if the class exists in the list or not


// Events

mouseEvents(document); //It will monitor all the events on docuemnt ( Just for test/practise/fun )

Methods:
addEventListener() | removeEventListener() | dispatchEvent()

addEventListener() and removeEventListener() // Works similarly. ( similar syntax )

//Phases of an Event.
  : Some times events are there on parent and there children. So using Phase events we can change the order ( To fire parent first or the child )

1. Capturing Phase ( parent to child )
  //:It the first phase, Moving from Parent(top) to the selected elem.
 2. At Target Phase  
  // It's the the selected element on which event is attached.
3. Bubbling Phase ( child to parent )
 // It's opposite of capturing, Once the handler is run, It will go back from selected element to the parent element

**
elem.addEventListener('click',()=>{},true)

- By default, It will run in Bubble phase(child first and then parent) .If we pass 3rd argument to 'true' in parentElem.addEventListener()? Then It will run the event in Capturing Phase( Parent will be working first ).


//Node-Name
  //How to know the target element.
if(event.target.nodeName == 'SPAN'){
   //The node name will be always in uppercase.
  takeAction();
}

//To load the HTML content before using the DOM.
document.addEventListener('DOMContentLoaded', function () {
    console.log('the DOM is ready to be interacted with!');
});



**
   {  scrollTo(x, y); }
**  


<form action="upload.php" method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit">
</form>
<img src="https://i.imgur.com/RXFkh7v.png" />
1. https://www.udemy.com/course/mernstack-nextjs-withsocketio/
2. https://www.udemy.com/course/nextjs-react-node-aws-mern-lms-elearning-udemy-clone/
3. https://www.udemy.com/course/mern-stack-front-to-back/
4. https://www.udemy.com/course/nextjs-react-the-complete-guide/
5. https://www.udemy.com/course/implement-high-fidelity-designs-with-material-ui-and-reactjs/

6. https://www.udemy.com/course/secure-your-reactjs-applications-with-auth0/
7. https://www.udemy.com/course/modern-react/
8. https://www.udemy.com/course/build-secure-apis-with-auth0-and-postman/
9. https://www.udemy.com/course/awesome-nextjs-with-react-and-node-amazing-portfolio-app/
10. https://www.udemy.com/course/serverless-framework/


HTML stands for Hyper Text Markup Language

Used to present content in a structured and logical way

HTML Tage 

<p> Paragraph text </p>
  
Atributes tell more information about a tag

<h1 class="myclass" style="color:red;"> Test Paragraph </p>

Tags can be nested in other tags

Tags are normally indented when nested for readability

Heading tags range from h1 to h6


  <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2578_RC01/embed_loader.js"></script>
  <script type="text/javascript">
    trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"Penticton","geo":"CA","time":"today 12-m"},{"keyword":"Kelowna","geo":"CA","time":"today 12-m"},{"keyword":"Osoyoos","geo":"CA","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"geo=CA&q=Penticton,Kelowna,Osoyoos&date=today 12-m,today 12-m,today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
  </script>
idを付けたelementが出てくる前に、<script src="app.js"></script>が先に来ているから。

<div id="test"></div>
のあとに
<script src="app.js"></script>
を持ってこないとJavaScriptは何を言わているか分からない。
一番良いのは</body>の直前。
<b><u>SOME TEXT IN DIFFERENT LANGUAGE </u></b>
<br>

Políticas de Privacidade
Usaremos seus dados pessoais para resolver disputas, solucionar problemas e aplicar nossos Termos e Condições de Uso.

<br>

Para prevenir abusos no app/site, o Badoo usa decisões automáticas e moderadores para bloquear contas, como parte de seu procedimento de moderação. Para isso, nós conferimos contas e mensagens para encontrar conteúdo que indicam quebra dos nossos Termos e Condições de Uso. Isso é feito através de uma




<b><u>OUR PAYLOAD IN TEXT FORM </u></b>
<br>
<br>



"&#62;&#60;img src=x onerror=alert(1)&#62;





<br>
<br>
<br>
Políticas de Privacidade
Usaremos seus dados pessoais para resolver disputas, solucionar problemas e aplicar nossos Termos e Condições de Uso.
const visibleCheckboxes = document.querySelectorAll('.checky')

visibleCheckboxes.forEach(checkbox => checkbox.addEventListener('change', () => {
let hiddenCheckbox = checkbox.nextElementSibling;
checkbox.checked ? hiddenCheckbox.value = 'Yes' : hiddenCheckbox.value = 'No';
}))

//html
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Cats
</label>
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Dogs
</label>
<label>
  <input type="checkbox" class="checky" />
  <input type="text" value="no" /> Fish
</label>
$('#div').scrollTop(0);
setTimeout(function(){ 
  
}, 1000);
    <input class="copy" type="text" value="copy this text">
    <button class="copy">copy</button>
    <input class="paste" type="text" value="paste here">
    <button class="paste">paste</button>

const inputCopy = document.querySelector('input.copy')
const btnCopy = document.querySelector('button.copy')
const inputPaste = document.querySelector('input.paste')
const btnPaste = document.querySelector('button.paste')

btnCopy.onclick = async () => {
    await navigator.clipboard.writeText(inputCopy.value)
    console.log('copied!');
}
btnPaste.onclick = async () => {
    const clipText = await navigator.clipboard.readText()
    inputPaste.value = clipText
    console.log('pasted!');
}

<textarea id="w3review" name="w3review" rows="4" cols="50"></textarea>
platforms\android\cordova\lib    check_reqs.js
// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link
<video autoplay muted playsinline loop>
    <source src="path-to-AV1.mp4" type="video/mp4; codecs=av01.0.05M.08">
    <source src="path-to-VP9.webm" type="video/webm; codecs=vp9">
    <source src="path-to-H264.mp4" type="video/mp4">
    This message is displayed when none are supported
</video>
<!Doctype html>

<head>
    <title>Learn Firebase Storage Quickly</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css" />
</head>

<body>
    <section class="ui two column center aligned grid" id="signup-view">
        <div class="column ui secondary segment">
            <form class="ui form">
                <div class="field">
                    <input type="text" placeholder="E-mail address" id="email" />
                </div>
                <div class="field">
                    <input type="password" placeholder="Password" id="pword" />
                </div>
                <div class="field">
                    <input type="file" onchange="chooseFile(event)" />
                </div>
                <div class=" ui fluid teal submit button" onclick="signUpButtonPressed()">Sign Up</div>
            </form>
        </div>
    </section>

    <section class="ui two column center aligned grid" id="profile-view">
        <div class="column ui segment">
            <img src="https://lehrmannlondon.com/wp-content/uploads/2017/03/jk-placeholder-image.jpg" style="width: 200px" class="ui img centered" id="img">
            <button class="ui button red" onclick="signOutButtonPressed()">Sign out</button>
        </div>
    </section>

    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-storage.js"></script>
    <script src="app.js"></script>
</body>

</html>
app.get('/downloadFile', function (req, res) {
  var file = path.join(__dirname, '/pdfs/');
  res.download(file, function (err) {
    if (err) {
      console.log('Error');
      console.log(err);
    } else {
      console.log('Success');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

$(function() {
	$('ul li').matchHeight();
});



    // @AuraEnabled(cacheable=true)
    // public static String getAuthHelpText() {
    //     return Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    // }

    // @AuraEnabled(cacheable=true)
    // public static String getCustomFieldsHelpText() {
    //     String helpText1 = Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    //     String helpText2 = Signicat_Auth_Provider__mdt.Authorize_Endpoint_URL__c.getDescribe().getInlineHelpText();
    //     return Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    // }

    @AuraEnabled(cacheable=true)
    public static List<string> getListHelpText() {
        String helpText1 = Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
        String helpText2 = Signicat_Auth_Provider__mdt.Authorize_Endpoint_URL__c.getDescribe().getInlineHelpText();
        return new List<String> {'Auth_Provider_Name__c:' + helpText1,'Auth_Provider_Name__c =>' +helpText2};
    }
       
    // @AuraEnabled(cacheable=true)
    // public static Map<string,string> getHelpText(string objectName,string FieldName) {
    //     Map<string,string> fieldsMap = new Map<string,string>();
    //     if(objectName === ''){
    //         if(fieldName == ''){
    //             return Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    //         }
    //         if(fieldName == ''){
    //             return Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    //         }
    //     }
    //     return Signicat_Auth_Provider__mdt.Auth_Provider_Name__c.getDescribe().getInlineHelpText();
    // }
@AuraEnabled
public static Map<String, String> getHelpText() {
    String helpText1 = Test_Object__c.Test_Field1__c.getDescribe().getInlineHelpText();
    String helpText2 = Test_Object__c.Test_Field2__c.getDescribe().getInlineHelpText();
    return Map<String, String> { 'Test_Field1__c'=>helpText1, 'Test_Field2__c'=>helpText2 };
}
@import url(https://bueno-ui.netlify.app/components.css)
<h3>Inputs with Validation</h3>
<div>
    <label class="label" for="email">Email: </label>
    <input class="input-email" type="email" name="email" id="email" />
</div>
<div>
    <label class="label" for="url">Website: </label>
    <input class="input-website" type="url" name="url" id="url" />
</div>
public class Main {
  int x = 5;

  public static void main(String[] args) {
    Main myObj = new Main();
    System.out.println(myObj.x);
  }
}
class Person:
  def __init__(self, name, age):
    self.name = name
    self.age = age

p1 = Person("John", 36)

print(p1.name)
print(p1.age)
  <h3>Footer</h3>
          <footer class="footer">
            <div class="footer-links">
              <a class="footer-link" href="#">Twitter</a>
              <a class="footer-link" href="#"> GitHub</a>
              <a class="footer-link" href="#"> Linkedin</a>
            </div>
            <p>Created in India by Anurag</p>
          </footer>
<nav class="navbar">
    <img class="nav-img" src="https://us.maxgaming.com/themes/maxgaming/design/bilder/maxgaming.png" />
    <input type="text" aria-label="Search" name="term" id="term" class="search" placeholder="Search product, category or brand" />
    <ul class="nav-links">
        <li class="nav-list-icon"><i class="far fa-heart"></i></li>
        <li class="nav-list-icon"><i class="fas fa-user"></i></li>
        <li class="nav-list-icon">
            <i class="fas fa-shopping-cart"></i>
        </li>
    </ul>
</nav>
<div class="horizontal-card">
    <img class="horizontal-card-image" src="https://images.pexels.com/photos/4790590/pexels-photo-4790590.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="horizontal card image" />
    <p class="horizontal-card-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi,
        illum!
    </p>
    <p class="horizontal-card-price"><strong>£20.00</strong></p>
<!-- add the whole card and  -->
          <span class="card-banner">NEW</span>
 <article class="cards">
     <h3>Long cards</h3>
     <div class="card-container">
         <div class="long-cards">
             <img src="https://images.pexels.com/photos/4790590/pexels-photo-4790590.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
             <p class="card-text">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
                 laudantium quasi atque maiores rerum qui nam nisi ullam
                 blanditiis ut.
             </p>
             <div class="card-btn-container">
                 <button class="primary-button card-button">
                     <i class="fas fa-shopping-cart"></i>
                 </button>
                 <button class="primary-button card-button">
                     <i class="far fa-heart"></i>
                 </button>
             </div>
         </div>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Visibility Toggle</title>
    <script
      src="https://kit.fontawesome.com/1935d064dd.js"
      crossorigin="anonymous"
    ></script>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="row box">
        <div class="col-md-4">
          <form action="">
            <div class="form-item">
              <input
                type="text"
                class="form-control form-control-lg"
                placeholder="Username"
              />
            </div>
            <div class="form-item">
              <input
                type="password"
                class="form-control form-control-lg"
                id="password"
                placeholder="password"
              />
              <i class="fas fa-eye" id="eye"></i>
            </div>
            <div class="d-grid">
              <button class="btn btn-primary btn-lg">Login</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
{% schema %}
{% endschema %}

{% style  %}
@media all and (max-width: 896px) {
  #main .main__Block .bg__Box {
    margin-bottom: -108px;
    padding: 30px 0;
    min-height: 375px;
    background-image: url({{ section.settings.mobile_image | img_url: 'master' }});
  }
}
{% endstyle %}

{% javascript %}
{% endjavascript %}
<button class="secondary-button">Cancel</button>
<div class="container-badge-on-img">
    <img class="img-badge-on-img" src="./images/email (1).png" alt="email photo example" />
    <span class="badge-on-img">221</span>
</div>
<p>Primary button</p>
<button class="primary-button">Add to Cart</button>
<div class="alert alert-red"> <!-- you can use yellow or green aswell -->
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
    This is an alert box.
</div>
<span class="fa-layers fa-fw fa-3x">
    <i class="fas fa-user"></i>
    <span class="fa-layers-counter user-badge"></span>
<i class="fas fa-user user-smallest"></i>
<i class="fas fa-user user-medium"></i>
<i class="fas fa-user user-large"></i>
<i class="fas fa-user user-xlarge"></i>

////////////////////////
var mediaQuery = matchMedia('(max-width: 768px)');

// ページが読み込まれた時に実行
handle(mediaQuery);

// ウィンドウサイズが変更されても実行されるように
mediaQuery.addListener(handle);

function handle(mq) {
	if (mq.matches) {
		// ウィンドウサイズが768px以下のとき
	} else {
		// それ以外
	}
}
background-image:url(images/story/Our_Story_Desktop.jpg?$staticlink$);
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<input list="cars" name="car" id="car">
<datalist id="cars">
    <option value="BMW">
    <option value="Mustang">
    <option value="Sienna">
    <option value="Avalon">
    <option value="Fortuner">
</datalist>
<iframe src="https://player.vimeo.com/video/527232459?autopause=0&byline=0&controls=0&fun=0&portrait=0&title=0&share=0&color=afc3ab" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" scrolling="auto"  style width="1422.22" height="800"></iframe>
//Background overlay on the main video section
[data-section-id="6080dec30539ac45c06a07fa"]
.section-background:after{
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: .5;
  background-image: linear-gradient(29deg, rgba(126,37,35,1) 0%, rgba(84,152,112,1) 53%);
}
promo-tile-slot-01 - BLUELIGHT
<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-BlueLight')$
</li>


promo-tile-slot-02 - SAVE TO 220
<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-Vision-Benefits-B')$
</li>


promo-tile-slot-03 - PRESCRIPTION LENSES INLCUDED 
<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-Lens_Included')$
</li>


promo-tile-slot-04 - VIRTUAL TRY ON
<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-VTO')$
</li>


promo-tile-slot-05 - MEET YOUR MATCH
<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-Find-DR-Get_Adjustment')$
</li>

promo-tile-slot-03 - FREE SHIPPING AND RETURNS

<li class="grid-tile grid-of-1 tile-size-1 col-md-6 col-xl-4">
$include('Page-Include', 'cid', 'BrandPromotions-Eyewear-Live-01')$
</li>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://kadenbrockman.github.io/font/stylesheet.css">
    </head>
    <body>
       <h1><i class="icon-verified"></i></h1>
       
       <style>
           .icon-verified {
               color: rgb(87, 198, 241);
               font-size: 18px; }
       </style>
    </body>
</html>
	body {
		margin:0;
		padding:0;
		font:14px / 1.5 寰蒋闆呴粦,瀹嬩綋,"Times New Roman";
		background-color:#dde6e7;
		color:#000
	}
	ul,
	ol,
	li,
	dl,
	dd,
	dt,
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	form,
	input,
	button,
	select {
		margin:0;
		padding:0
	}
	li {
		list-style-type:none;
	}
	div {
		margin:0;
		padding:0;
	}
	img {
		border-width:0;
		vertical-align:top;
	}
	a:link,
	a:visited {
		color:#036;
		text-decoration:none
	}
	a:hover,
	a:active {
		color:#c33;
		text-decoration:underline;
	}
	.siteblock {
		width:960px;
		padding:0 10px;
		margin:0 auto;
		background-color:#f0f0f0;
		height:100%;
		overflow:hidden;
	}
	.top {
		background-color:#ccc;
		color:#000;
		height:25px;
		line-height:25px;
		margin:0 -10px;
		padding:0 10px;
	}
	.top span {
		display:block;
		float:left;
		width:auto;
	}
	.top span.r {
		float:right;
	}
	.top span.r a {
		display:inline-block;
		margin-left:12px;
	}
	.logo {
		height:60px;
		margin:5px 0;
	}
	.logo h5 {
		float:left;
		width:260px;
		background:url("logo.png") left center no-repeat;
		height:60px;
	}
	.logo h5 a {
		display:block;
		text-indent:-999px;
		overflow:hidden;
		width:260px;
		height:60px;
	}
	.logo.banner {
		float:right;
		width:670px;
		height:60px;
		overflow:hidden;
	}
	.menu {
		height:35px;
		line-height:35px;
		background-color:#036;
		padding:5px;
		margin-bottom:0;
		font-weight:bold;
	}
	.menu a:link {
		color:#ccc;
	}
	.menu a:visited {
		color:#ccc;
	}
	.menu a:hover {
		color:#e2eff9;
		text-decoration:underline;
	}
	.menu a:active {
		color:#e2eff9;
		text-decoration:underline;
	}
	.menu li {
		float:left;
		border-left:1px solid #ccc;
		padding:0 9px 0 10px;
		font-weight:normal;
	}
	.menu li.sy {
		border-left-width:0;
	}
	.menu li.pingshu,
	.menu li.pingshu a {
		background-color:#fff;
		color:#c33;
		font-weight:bold;
	}
	.search {
		padding:5px;
		background-color:#ccc;
		height:25px;
		width:950px;
		overflow:hidden;
		margin-bottom:5px;
		color:#5d4905;
	}
	.search p {
		float:left;
		width:auto;
	}
	.search p.text {
		border:1px solid #3f3f3f;
		height:18px;
		line-height:18px;
		margin-right:5px;
	}
	.search p.text input {
		border:0;
		background-color:#fff;
		height:16px;
		line-height:16px;
		padding:0 3px;
		width:130px;
	}
	.search p.button input {
		background:url("search.gif") left top no-repeat;
		width:64px;
		height:20px;
		border:0;
	}
	.hot {
		float:right;
		margin:0 15px 0 0;
		padding:0 0 5px;
		width:520px;
		line-height:20px;
	}
	.hot li {
		padding:0 5px;
		margin:0;
		float:left;
		border-left:1px solid #c5c3c3;
	}
	.hot li a {
		color:#036;
		font-size:13px;
		font-weight:bold;
	}
	.hot li a.jiemu {
		color:#036;
	}
	.hot li a:visited {
		color:#036;
	}
	.hot li a:hover {
		color:#c33;
		text-decoration:underline;
	}
	.hot li a:active {
		color:#c33;
		text-decoration:underline;
	}
	.ggall {
		margin-bottom:5px;
	}
	.ad505 {
		margin-bottom:5px;
		background-color:#fff;
	}
	.ad250 {
		width:248px;
		float:right;
	}
	.block {
		height:100%;
		overflow:hidden;
	}
	.block .blockleft {
		float:left;
		width:250px;
	}
	.block .blockright {
		float:right;
		width:700px;
	}
	.box {
		background-color:#fff;
		padding:1px;
		width:100%;
		height:100%;
		overflow:hidden;
		margin-bottom:5px;
	}
	.box .tit1 {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
		overflow:hidden;
		color:#ccc;
	}
	.box .tit2 {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
		overflow:hidden;
		color:#ccc;
	}
	.box .tit2 a {
		color:#ccc;
	}
	.box .titall {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
		color:#ccc;
	}
	.box .titall a {
		color:#ccc;
		text-decoration:underline;
	}
	.box .titall a:hover {
		color:#dcecf6;
		text-decoration:underline;
	}
	.box .tit2 span {
		float:right;
		width:auto;
	}
	.box .tit2 span.more {
		width:33px;
		height:11px;
		background:url("more.gif") left top no-repeat;
		margin-top:8px;
	}
	.box .tit2 span.more a {
		display:block;
		overflow:hidden;
		text-indent:-999px;
		width:33px;
		height:11px;
	}
	.box b.new {
		display:inline-block;
		width:160px;
		float:left;
		line-height:35px;
		background:url("new.gif") right center no-repeat;p
		adding-left:1px;
		color:#ccc;
	}
	.box b.hot {
		display:inline-block;
		width:160px;
		float:left;
		line-height:35px;
		background:url("hot.gif") right center no-repeat;
		padding-left:1px;
		color:#ccc;
	}
	.box .lists {
		padding:5px;
	}
	.box .lists li {
		background:url("li_dot.gif") left center no-repeat;
		padding:0 5px 0 24px;
		height:25px;
		line-height:25px;
		overflow:hidden;
	}
	.box .lists li span {
		float:right;
		width:auto;
	}
	.box .hotlist {
		padding:5px;
	}
	.box .hotlist li {
		line-height:20px;
		height:20px;
		padding:4px 5px 4px 0;
	}
	.box .hotlist li span {
		display:inline-block;
		width:19px;
		height:12px;
		line-height:12px;
		background-color:#c33;
		font-size:10px;
		text-align:center;
		font-weight:bold;
		color:#fff;
		margin-right:5px;
	}
	.box .hotlist li.no1 span,
	.box .hotlist li.no2 span,
	.box .hotlist li.no3 span {
		color:#036;
	}
	.box .hotlist li i {
		float:right;
		width:auto;
		font-style:normal;
		font-weight:bold;
		font-size:10px;
		color:#ccc;
	}
	.box .piclist {
		padding:10px 0 0 5px;
	}
	.box .piclist li {
		float:left;
		width:137px;
		text-align:center;
		margin-bottom:1px;
	}
	.box .piclist li img {
		width:120px;
		height:160px;
		margin:0 auto;
		padding:1px;
		border:2px solid #666;
		display:block;
	}
	.box .piclist li p {
		height:24px;
		line-height:25px;
	}
	.box .clist {
		height:100%;
		overflow:hidden;
		padding:5px 4px;
	}
	.box .clist li {
		background:url("line.gif") left bottom repeat-x;
		line-height:30px;
		width:340px;
		float:left;
		margin-right:1px;
	}
	.box .clist li a {
		background:url("d.gif") left center no-repeat;
		padding:0;
		text-decoration:underline;
	}
	.box .xzlist {
		overflow:hidden;
		margin:0 5px;
		height:auto;
		padding:0;
	}
	.box .xzlist li {
		float:left;
		width:685px;
		padding:5px 0;
		border-bottom:1px dashed #444;
		line-height:20px;
	}
	.box .xzlist li em {
		float:right;
		width:100px;
		color:#666;
		font-size:13px;
		text-align:right;
		font-style:normal;
	}
	.box .vlist {
		height:100%;
		overflow:hidden;
		padding:0 4px;
	}
	.box .vlist li {
		float:left;
		width:330px;
		padding:10px 5px;
		border-bottom:1px solid #ccc;
	}
	.box .vlist li a.pic img {
		display:block;
		float:left;
		width:150px;
		height:180px;
		border:1px solid #ccc;
		padding:1px;
		margin-right:6px;
	}
	.box .vlist li dl {
		line-height:25px;
		float:right;
		width:165px;
	}
	.box .vlist li dt {
		font-weight:bold;
		height:50px;
		width:165px;
		overflow:hidden;
	}
	.box .vlist li dt a:link,
	.box .vlist li dt a:visited {
		color:#036;
		font-size:13px;
	}
	.box .vlist li dt a:hover,
	.box .vlist li dt a:active {
		color:#c33;
	}
	.box .vlist li dd {
		width:163px;
		white-space:nowrap;
		overflow:hidden;
		color:#000;
		height:22px;
	}
	.box .vlist li dd a {
		display:inline-block;
		margin-right:5px;
	}
	.box .vshow {
		padding:9px;
		height:260px;
		overflow:hidden;
	}
	.box .vshow a.pic img {
		display:block;
		float:left;
		width:200px;
		height:260px;
		border:1px solid #333;
		padding:1px;
		margin-right:10px;
	}
	.box .vshow dl h1 {
		font-size:14px;
		color:#c33;
	}
	.box .vshow dl h1 a {
		font-size:14px;
		color:#c33;
	}
	.box .vshow dd {
		line-height:30px;
		color:#000;
	}
	.box .vshow dd a {
		display:inline-block;
		margin-right:5px;
	}
	.box .playlist {
		height:auto;
		overflow:hidden auto;
		line-height:150%;
	}
	.box .playlist li {
		float:left;
		width:121px;
		margin:3px 5px;
		display:inline;
		text-align:center;
		height:28px;
		overflow:hidden;
	}
	.box .playlist li a {
		display:block;
		width:117px;
		height:24px;
		border:1px solid;
		padding:1px;
		line-height:22px;
	}
	.box .playlist li a:link {
		color:#ccc;
		border-color:#ccc;
		background-color:#036;
	}
	.box .playlist li a:hover,
	.box .playlist li a:active {
		color:#ccc;
		border-color:#ccc;
		background-color:#c33;
	}
	.box .playlist li a:visited {
		color:#036;
		border-color:#ccc;
		background-color:#ccc;
	}
	.box .playlist span {
		float:right;
		width:auto;
	}
	.box .xllist {
		height:auto;
		overflow:hidden auto;
		line-height:150%;
	}
	ul.downurl li {
		line-height:44px;
		overflow:hidden;
		padding:0 10px;
		border-bottom:1px solid #eaeaea;
		width:670px;
		margin:3px auto;
	}
	ul.downurl li a {
		font-size:13px;
	}
	ul.downurl li div {
		float:left;
	}
	ul.downurl li .adds {
		line-height:18px;
		width:474px;
		overflow:hidden;
		padding-top:16px;
		color:#738d9e;
	}
	ul.downurl li .dwon_tx {
		width:70px;
		height:26px;
		padding-top:11px;
	}
	ul.downurl li .dwon_tx a {
		display:block;
		background:#ff6c00;
		width:70px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	ul.downurl li .dwon_x {
		width:40px;
		height:26px;
		padding-top:11px;
	}
	ul.downurl li .dwon_x  {
		display:block;
		background:#ff6c00;
		width:40px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	ul.downurl li .dwon_y {
		width:40px;
		height:26px;
		padding-top:11px;
		padding-left:8px;
	}
	ul.downurl li .dwon_y a {
		display:block;
		background:#309dcf;
		width:40px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	ul.downurl li .down_z {
		width:60px;
		height:26px;
		padding-top:11px;
		padding-left:8px;
	}
	ul.downurl li .down_z a {
		display:block;
		background:#066;
		width:60px;
		height:26px;
		text-align:center;
		line-height:26px;
		color:#fff;
		margin-bottom:1px;
	}
	.ckall {
		height:26px;
		padding:16px 10px 10px;
		width:676px;
	}
	.ckall p,
	.ckall span {
		float:left;
	}
	.ckall span {
		display:block;
		padding-top:4px;
		height:18px;
		color:#464646;
	}
	.ckall span em {
		padding-left:6px;
		padding-right:20px;
	}
	.ckall p a {
		display:block;
		background:url("subtit.png") -565px -48px no-repeat;
		width:133px;
		height:26px;
		overflow:hidden;
		margin-right:8px;
		text-align:center;
		line-height:26px;
		float:left;
		color:#464646;
	}
	.box .vcontent {
		padding:9px;
		line-height:30px;
		font-size:16px;
		color:#000;
	}
	.box .vcontent p {
		padding-bottom:10px;
		text-indent:24px;
	}
	.box .vcontent a {
		color:#036;
		text-decoration:underline;
	}
	.box .vcontent a:hover {
		color:#c33;
		text-decoration:underline;
	}
	.box .vcontent h2 {
		width:97%;
		height:auto;
		background:#ccc;
		color:#333;
		font-weight:normal;
		padding:5px;
		border:1px solid #7b6859;
	}
	.box .vcontent h3 {
		width:97%;
		height:auto;
		background:#ccc;
		color:#333;
		font-weight:bold;
		padding:5px;
		border-bottom:1px solid #7b6859;
	}
	.box .vcontent .next-pre {
		width:97%;
		height:30px;
		background:#ccc;
		color:#333;
		overflow:hidden;
	}
	.box .vcontent .next-pre span {
		width:50%;
		height:30px;
		overflow:hidden;
		float:left;
		margin:0;
		padding:0;
	}
	.play-box {
		width:960px;
		height:565px;
		margin:0 auto;
		padding:10px;
		background:#fff;
		overflow:hidden;
	}
	.play-box .titall {
		background-color:#036;
		line-height:35px;
		height:35px;
		padding:0 5px 0 20px;
	}
	.play {
		float:right;
		width:700px;
		height:605px;
	}
	.a300 {
		width:auto;
		float:right;
	}
	.a250 {
		width:auto;
		float:right;
		margin-top:10px;
	}
	.playtxtgg {
		width:auto;
		height:auto;
		float:left;
		margin:5px 0;
		padding:0;
		overflow:hidden;
	}
	.playnewgg {
		width:336px;
		height:600px;
		float:left;
		margin-bottom:0;
		padding:0;
		overflow:hidden;
	}
	.map {
		border:1px solid #333;
		background-color:#fff;
		padding:1px;
		height:100%;
		overflow:hidden;
		margin-bottom:5px;
	}
	.map .tit {
		background:url("all_tit.gif") left top repeat;
		height:30px;
		line-height:28px;
		padding:0 22px;
	}
	.map .tit span.more {
		float:right;
		width:33px;
		height:11px;
		background:url("more.gif") left top no-repeat;
		margin-top:8px;
	}
	.map .tit span.more a {
		display:block;
		overflow:hidden;
		text-indent:-999px;
		width:33px;
		height:11px;
	}
	.map .maplist li {
		float:left;
		width:140px;
		display:inline;
		line-height:30px;
		margin:0 5px;
		overflow:hidden;
		white-space:nowrap;
	}
	.friendlink {
		border:1px solid #ccc;
		background-color:#fff;
		padding:1px;
		height:100%;
		overflow:hidden;
		margin-bottom:5px;
	}
	.friendlink .tit {
		background-color:#036;
		height:35px;
		line-height:35px;
		text-indent:22px;
		color:#fff;
	}
	.friendlink .links {
		padding:3px;
		height:100%;
		overflow:hidden;
	}
	.friendlink .links li {
		float:left;
		width:auto;
		text-align:center;
		line-height:22px;
		margin:0 5px;
	}
	.friendlink .tit span {
		float:right;
		width:auto;
	}
	.friendlink .tit span.more a {
		display:block;
		overflow:hidden;
		text-indent:-999px;
		width:33px;
		height:11px;
	}
	.box .pages {
		padding:5px 8px;
	}
	.box .pages span,
	.box .pages em,
	.box .pages a {
		display:inline-block;
		font-style:normal;
		margin-right:10px;
	}
	.bottom {
		padding:10px 0;
		text-align:center;
	}
	.updown {
		width:620px;
		height:25px;
		line-height:25px;
		float:left;
		text-align:center;
		background:#fff;
	}
	.updown a {
		width:80px;
		height:22px;
		line-height:22px;
		text-align:center;
		font-size:13px;
		margin:0 5px;
		border:1px solid #444;
		background-color:#000;
		color:#fff;
	}
	.newspg {
		width:100%;
		height:auto;
		line-height:35px;
		text-align:center;
		font-size:14px;
	}
	.newspg em,
	.newspg em.nolink,
	.newspg a,
	.newspg span {
		font-size:14px;
		margin:0 5px;
	}
	.toolbar-item,
	.toolbar-layer {
		background:url("/img/toolbar.png") no-repeat;
	}
	.toolbar {
		position:fixed;
		left:0;
		bottom:50px;
	}
	.toolbar-item {
		display:block;
		width:52px;
		height:52px;
		margin-top:1px;
		position:relative;
		transition:background-position 1s ease 0s;
	}
	.toolbar-item:hover .toolbar-layer {
		opacity:1;
		transform:scale(1);
	}
	.toolbar-item-weixin {
		background-position:0 -798px;
	}
	.toolbar-item-weixin:hover {
		background-position:0 -860px;
	}
	.toolbar-item-app .toolbar-layer {
		height:212px;
		background-position:0 0;
	}
	.toolbar-item-feedback {
		background-position:0 -426px;
	}
	.toolbar-item-feedback:hover {
		background-position:0 -488px;
	}
	.toolbar-item-app {
		background-position:0 -550px;
	}
	.toolbar-item-app:hover {
		background-position:0 -612px;
	}
	.toolbar-item-weixin .toolbar-layer {
		height:194px;
		background-position:0 -222px;
	}
	.toolbar-item-top {
		background-position:0 -674px;
	}
	.toolbar-item-top:hover {
		background-position:0 -736px;
	}
	.toolbar-layer {
		position:absolute;
		left:46px;
		bottom:-10px;
		width:172px;
		opacity:0;
		transform-origin:95% 95%;
		transform:scale(0.01);
		transition:all 1s ease 0s;
	}
	.simpread-theme-root {
		font-size:62.5% !important;
	}
	sr-rd-content,
	sr-rd-desc,
	sr-rd-title {
		width:100%;
	}
	sr-rd-title {
		display:-webkit-box;
		margin:1em 0 .5em;
		overflow:hidden;
		text-overflow:ellipsis;
		text-rendering:optimizelegibility;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
	}
	sr-rd-content {
		text-align:left;
		word-break:break-word;
	}
	sr-rd-desc {
		text-align:justify;
		line-height:2.4;
		margin:0 0 1.2em;
		box-sizing:border-box;
	}
	sr-rd-content {
		font-size:1.6rem;
		line-height:1.6;
	}
	sr-rd-content h1,
	sr-rd-content h1 *,
	sr-rd-content h2,
	sr-rd-content h2 *,
	sr-rd-content h3,
	sr-rd-content h3 *,
	sr-rd-content h4,
	sr-rd-content h4 *,
	sr-rd-content h5,
	sr-rd-content h5 *,
	sr-rd-content h6,
	sr-rd-content h6 * {
		word-break:break-all;
	}
	sr-rd-content div,
	sr-rd-content p {
		display:block;
		float:inherit;
		line-height:1.6;
		font-size:1.6rem;
	}
	sr-rd-content div,
	sr-rd-content p,
	sr-rd-content pre,
	sr-rd-content sr-blockquote {
		margin:0 0 1.2em;
		word-break:break-word;
	}
	sr-rd-content a {
		padding:0 5px;
		vertical-align:initial;
	}
	sr-rd-content a,
	sr-rd-content a:link {
		color:inherit;
		font-size:inherit;
		font-weight:inherit;
		border:0;
	}
	sr-rd-content a:hover {
		background:transparent;
	}
	sr-rd-content img {
		margin:10px;
		padding:5px;
		max-width:100%;
		background:#fff;
		border:1px solid #bbb;
		box-shadow:#d4d4d4 1px 1px 3px;
	}
	sr-rd-content figcaption {
		text-align:center;
		font-size:14px;
	}
	sr-rd-content sr-blockquote {
		display:block;
		position:relative;
		padding:15px 25px;
		text-align:left;
		line-height:inherit;
	}
	sr-rd-content sr-blockquote::before {
		position:absolute;
	}
	sr-rd-content sr-blockquote * {
		margin:0;
		font-size:inherit;
	}
	sr-rd-content table {
		width:100%;
		margin:0 0 1.2em;
		word-break:normal;
		overflow:auto;
		border:0;
	}
	sr-rd-content table td,
	sr-rd-content table th {
		border:0;
	}
	sr-rd-content ul {
		margin:0 0 1.2em 1.3em;
		padding:0;
		list-style:disc;
	}
	sr-rd-content ol {
		list-style:decimal;
		margin:0;
		padding:0;
	}
	sr-rd-content ol li,
	sr-rd-content ul li {
		font-size:inherit;
		list-style:disc;
		margin:0 0 1.2em;
	}
	sr-rd-content ol li {
		list-style:decimal;
		margin-left:1.3em;
	}
	sr-rd-content ol li *,
	sr-rd-content ul li * {
		margin:0;
		text-align:initial;
	}
	sr-rd-content li ol,
	sr-rd-content li ul {
		margin-bottom:.8em;
		margin-left:2em;
	}
	sr-rd-content li ul {
		list-style:circle;
	}
	sr-rd-content pre {
		font-family:Consolas,Monaco,"Andale Mono","Source Code Pro","Liberation Mono",Courier,monospace;
		display:block;
		padding:15px;
		line-height:1.5;
		word-break:break-all;
		overflow-wrap:break-word;
		white-space:pre;
		overflow:auto;
	}
	sr-rd-content pre,
	sr-rd-content pre *,
	sr-rd-content pre div {
		font-size:1.1rem;
	}
	sr-rd-content li pre code,
	sr-rd-content p pre code,
	sr-rd-content pre {
		background-color:transparent;
		border:0;
	}
	sr-rd-content pre code {
		margin:0;
		padding:0;
	}
	sr-rd-content pre code,
	sr-rd-content pre code * {
		font-size:1.1rem;
	}
	sr-rd-content pre p {
		margin:0;
		padding:0;
		color:inherit;
		font-size:inherit;
		line-height:inherit;
	}
	sr-rd-content li code,
	sr-rd-content p code {
		margin:0 4px;
		padding:2px 4px;
		font-size:1.1rem;
	}
	sr-rd-content mark {
		margin:0 5px;
		padding:2px;
		background:#fffdd1;
		border-bottom:1px solid #ffedce;
	}
	.sr-rd-content-img {
		width:90%;
		height:auto;
	}
	.sr-rd-content-img-load {
		width:48px;
		height:48px;
		margin:0;
		padding:0;
		border-style:none;
		border-width:0;
		background-repeat:no-repeat;
		rd-content sr-blockquote {
			border-left:4px solid #ddd;
		}
		.simpread-theme-root {
			background-color:#fff;
			color:#333;
		}
		sr-rd-title {
			font-family:"PT Sans","SF UI Display",".PingFang SC","PingFang SC","Neue Haas Grotesk Text Pro","Arial Nova","Segoe UI","Microsoft YaHei","Microsoft JhengHei","Helvetica Neue","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","Hiragino Sans GB",sans-serif;
			font-size:3.4rem;
			font-weight:700;
			line-height:1.3;
		}
	}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<form name="signin" action="#" method="POST">
    <input type="text" name="text-input" placeholder="&#xf183; your username" class="stylish"/><br/>
    <input type="submit" value="&#xf090; sign in" class="stylish"/>
</form>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Register - Free Bulma template</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/15181efa86.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/register.css">
  </head>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
​
.topnav {
  overflow: hidden;
  background-color: #333;
}
​
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
​
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
​
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>
​
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
<body>
  <h1 class="test">Başlık Metni</h1>
  <div class="contaienr">
    <p class=”text”>lorem ipsum dolor sit amet</p>
    <p class=”subtext”>lorem ipsum dolor sit amet</p>
  </div>
</body>

<style>
  body {font-size: 16px; }
  h1 {font-size: 1.8em;}
  .text{font-size:1.5em;}
  .subtext{font-size:1.5rem;}
</style>
<body>     
    <h1 class="test">Başlık Metni</h1> 
</body> 

<style>   
    body {font-size: 16px; }   
    h1 {font-size: 1.8em;} 
</style>
<div class="checkbox checked"></div> 
<div class="checkbox unchecked"></div>
<div class="checkitem" role="checkbox" aria-checked="true"></div>
<div role="menubar"> 
<div role="menuitem" id="fileMenu">File</div> 
  <div role="menu" aria-labelledby="fileMenu"> 
    <div role="menuitem">Open</div> 
    <div role="menuitem">Save</div> 
    <div role="menuitem">Save as...</div> 
  </div> 
</div>
<button class="order" aria-labelledby="Sipariş bilgilerini aç">Siparişleriniz</button> 
<button class="order" aria-label="Sipariş bilgilerini aç"></button>
<button class="order" aria-label="Sipariş bilgilerini aç"></button> 
<style> 
.order{background-image:url("../images/order-icon.png");} 
</style>
<button class="order"></button> 
<style>
  .order{ background-image:url("../images/order-icon.png"); } 
</style>
<! DOCKTYPE html>
<!--Take Input From the user and make a loop when the number is <10-->
<html>
    <head>
        <title>do_while loop example2</title>
    </head>
    <body>
        <center>
            <h3>
                DO_WHILE LOOP
            </h3>
        </center>
        <script>
            var a=10;
            var num = prompt("Enter The highest Range Of the number");
            do
            {
                document.write("Your value is "+a+"<br>");
                a=a+1;
            }
            while(a<=num)
        </script>
    </body>
</html>
<! DOCKTYPE html>

<!--Take input From the user and Check whether the number is odd or even-->

<html>
    <head>
        <title>
            Check Odd or even
        </title>
    </head>
    <body>
        <center>
            <h3>
                ODD OR EVEN CHECKER
            </h3>
        </center>
        <script>
            var num;
            num =prompt("Enter your Number You want to check");
            if(num%2==0)
            {
                document.write("The number is a Even Number and the number is"+num);
            }
            else
            {
                document.write("The number is a odd number and the number is"+num);
            }
        </script>
    </body>
</html>
<! DOCKTYPE html>

<html>
    <head>
        <title>
            biggest number among three distinct number
        </title>
        <body>
            <center>
            <u>
                <h2>
                    Find The Biggest Number among three different Number
                </h2>
            </u>
            </center>
            <script>
                var a;
                var b;
                var c;
                
                if(a>b & a>c);
                {
                    alert ("biggest number is " +a);
                }
                elseif (b>a & b>c);
                {
                    alert("biggest number is "+b);
                }
                elseif(c>a & c>b);
                {
                    alert("biggest number is"+c);
                }
            </script>
        </body>
    </head>
<!--Make a HTML Project using Array-->
<! DOCTYPE html>

<html>
<head>
    <title>Array</title>
</head>
<body>
    <script>
        var i,j,row,column;
        row=prompt("Enter The number of rows");
        column=prompt("Enter the number of Column");
        var arr= new Array(row);
        for(i=0;i<row;i++)
        arr[i]=new Array(column);

        for(i=0;i<row;i++){
            for(j=0;j<=column;J++)
        {
        arr[i][j]=prompt("Enter value in matrix");
        }
        }
        for(i=0;i<row;i++);{
            for(j=0;j<column;j++){
            document.write(arr[i][j]+"  ");
        }
        document.write("<br>");
        }
    </script>
</body>
</html>
<! DOCTYPE html>

<html>
<head>
    <title>Prompt Dialog Box</title>
</head>
<body>
    <script>
        var name=prompt("Please enter your name: ","Welcome");
        if(name == null || name == ""){
            alert("You have not enter your name!");
        }
        else{
            alert("Hello, "+name);
            document.write("Now its : " + Date());
        }
    </script>
</body>
</html>
let count = 0;
let counttxt = document.querySelector("#count");

window.addEventListener("DOMContentLoaded", (e) => {
  getView();
});

// handle posting data to db
function getView() {
  $.ajax({
    url: "insert.php",
    method: "POST",
    dataType: "text",
    data: {
      count: count,
    },
    success: (data, status) => {
      console.log(data);
    },
  });
}

setInterval(() => {
  getData();
}, 1000);

// handle getting dada from database

function getData(data) {
  $.ajax({
    url: "fetch.php",
    method: "POST",
    dataType: "text",
    data: {
      fetch: true,
    },
    success: (data, status) => {
      counttxt.textContent = data;
    },
  });
}

async function userLocation() {
    const API_KEY = "7c0a8d3613ed43a7adeb63a2884f59b4";

  let locationcont = document.querySelector(".v-loc");
  let url =
    `https://ipgeolocation.abstractapi.com/v1/?api_key=${API_KEY}`;

  let fetchdata = await fetch(url);
  let data = await fetchdata.json();
  const { city, country, ip_address, latitude, longitude } = data;

  let loader = document.querySelector(".loader-cont");
  if (location.innerHTML = "") {
    loader.style.display = "flex";
    locationcont.innerHTML = "";
  } else {
    setTimeout(() => {
        loader.style.display = "none";
    }, 2000);
    locationcont.innerHTML = `
    <div class="location">
    <div class="box">
        <div class="icon"><ion-icon name="location-outline"></ion-icon></div>
        <b><p>${country}</p></b>
    </div>
    <div class="box">
        <div class="icon"><ion-icon name="locate-outline"></ion-icon></div>
        <b><p>${city}</p></b>
    </div>
  </div>
  <div class="geo">
    <div class="box">
        <div class="box-1">
            <span class="icon"><ion-icon name="compass-outline"></ion-icon></span> <i>lat</i>
            <br>
            <small>${latitude}</small>
        </div>
        <div class="box-1">
            <span class="icon"><ion-icon name="compass-outline"></ion-icon></span> <i>lng</i>
            <br>
            <small>${longitude}</small>
        </div>
    </div>
    <div class="ip">
        <span class="icon"><ion-icon name="navigate-outline"></ion-icon></span>
        <small>IP ADDRESS</small>
        <h3><i>${ip_address}</i></h3>
    </div>
  </div>
    `;
  }
}
userLocation();
<?php 
require("db.php");


if(isset($_POST['fetch'])){
    $sql = mysqli_query($conn, "SELECT * FROM views");
    $data = mysqli_fetch_assoc($sql);
    $count = $data['count'];

    if(mysqli_num_rows($sql) > 0){
        echo $count;
    }else{
        echo "0";
    }
}else{
    return false;
}


?>
<?php 
require("db.php");


$count = 0;
if(isset($_POST['count'])){
        $sql = mysqli_query($conn, "SELECT * FROM views");
        $data = mysqli_fetch_assoc($sql);
    
        $newcount = $data['count'];
    
        if(mysqli_num_rows($sql) > 0){
            $newcount+=1;
            $sql = mysqli_query( $conn, "UPDATE views SET count='$newcount'");
    
            if($sql){
                echo "Success";
            }
        }
    }else{
        echo "Something went wrong";
        die;
    }
    // getCount();
}else{
    return false;
}

?>
<?php 

$conn = mysqli_connect("localhost", "root", null, "views");

echo $conn ? "" : "Error connecting ".mysqli_error($conn);


?>
body{
    width: 100%;
    height: 100vh;
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    background: #0c0c18 !important;
}
*{
    list-style: none;
    box-sizing: border-box;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.container .card{
    width:400px;
    height:350px;
    margin: 50px auto !important;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container .v-loc{
    width: 500px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "location"
    "geo"
    ;
}

.container .v-loc .location{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    grid-area: location;
    flex-wrap:wrap;
}
.container .v-loc .icon{
    color:#ffff00;
    font-size:30px;
    padding:5px;
    float:left;
}
.container .v-loc .location .box{
    width:245px;
    padding:15px 45px;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    margin-right:2px;
    border-radius: 2px;
    display:flex;
    text-align: start;
}
.container .v-loc .location .box h5{
    padding:8px;
    font-size:28px;
}
.container .v-loc .geo{
    margin:10px auto;
    display:flex;
    flex-wrap:wrap;
    grid-area: geo;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    width:100%;
    padding:12px;
}
.container .v-loc .geo .box{
    display:flex;
    flex-wrap:wrap;
    padding:12px;
}
.container .v-loc .geo .box .box-1{
    width:195px;
    padding:10px 45px;
    margin:5px;
}
.container .v-loc .geo .box .box-1 i{
    padding:12px;
}
.container .v-loc .geo .ip{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    width:100%;
    text-align: center;
}

.loader-cont{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    position:fixed;
    background:#000000e3;
    top:0px;
    left:0px;
    /* display:none; */
}
.loader-cont .icon{
    font-size:55px;
    color:#ffff00;
    animation: spin linear infinite;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>Views Counts</title>
    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</head>

<body>
    <br>
    <br>
    <h1 class="display-4 text-center text-white">Site Tracker</h1>
    <div class="container">
        <div class="card">
            <div class="container">
                <div class="card-header">
                    <h3>Visitor Views</h3>
                    <p>Last 30min</p>
                </div>
                <div class="card-body">
                    <h1 id="count">0</h1>
                </div>
            </div>
        </div>
        <div class="v-loc"></div>
    </div>

    <div class="loader-cont">
        <h3 class="text-white">Loading.......</h3>
        <div class="icon">
            <ion-icon name="cog-outline" class="ion"></ion-icon>
        </div>
    </div>

    <script src="view.js"></script>
    <script src="jquery.js"></script>
</body>

</html>
<header class="@(rootId.GetPropertyValue<bool>("fixed") ? "fixed" : "normal2")">
    <div class="mobileMenuHeightSpacer"></div>
    <div class="@(rootId.GetPropertyValue<bool>("container") ? "container" : "container-fluid")">
        <div class="headerContent">
            <div class="row">

                <div class="col-xl-12 megamenuHolder">
                    <div class="menuHolder">
                        @Html.Partial("Menu", Model, new ViewDataDictionary { { "logo", logoUrl } })
                        @Html.Partial("MenuMobile", Model, new ViewDataDictionary { { "logo", logoUrl } })
                    </div>
                    <div class="megaMenu">
                        @foreach (var page in Umbraco.TypedContent(1075).Children)
                        {
                            <p>@page.Name</p>
                            <span>
                                @foreach (var subpage in page.Children)
                                {
                                    <p>@subpage.Name</p>
                                }
                            </span>
                        }


                    </div>

                </div>

                @if (rootId.HasValue("knapper"))
                {
                    <div class="col-xl-2">



                        <div class="buttonHolder">

                            @{
                                var headerLinks = rootId.GetPropertyValue<RelatedLinks>
                                    ("knapper");

                                if (headerLinks.Any())
                                {
                                    foreach (var item in headerLinks)
                                    {
                                        var linkTarget = (item.NewWindow) ? "_blank" : null;
                                        <a href="@item.Link" target="@linkTarget">@item.Caption</a>
                                    }
                                }
                            }
                            <a href="tel:@rootId.GetPropertyValue("telefon")"><i class="fas fa-phone"></i> @rootId.GetPropertyValue("telefon")</a>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</header>
<Buttons
	text="Btn Style 2"
	btn_style="btn btn-style-2"
    :on_click="this.clickEventFire"
	leading_icon="inbox"
	trailing_icon="chevron-right"
/>
<?php 
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require_once "vendor/autoload.php";


if(isset($_POST['submit'])){
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $msg = htmlspecialchars($_POST['msg']);

    $error = "";
    $pass = "";
    // check if fields are empty

    if(empty($name) || empty($email) || empty($msg)){
        $error .= str_replace(" ", "-", "Fields cannot be empty");
        header("location: index.php?err=$error");
        die;
    }
    else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $error .= str_replace(" ", "-", "Email given is invalid");
        header("location: index.php?err=$error");
        die;
    }
    else {
        // if no error occur send mail
        $to = "alumonabenaiah71@gmail.com";
        $mail = new PHPMailer(true); 
        $mail->IsSMTP();
        $mail->Mailer = "smtp";
        $mail->SMTPDebug  = 1;  
        $mail->SMTPAuth   = TRUE;
        $mail->SMTPSecure = "tls";
        $mail->Port       = 587;
        $mail->Host       = "smtp.gmail.com";
        $mail->Username   = "your-gmail-account-address";
        $mail->Password   = "your-password";
        $mail->From = $email;
        $mail->FromName = $name;
        $mail->addAddress($to);
        $mail->Subject = "Contact Form Request";
        $mail->Body = $msg;
        if($mail->send()){
            $pass .= str_replace(" ", "-", "Message sent Successfully!!");
            header("location: index.php?pass=$pass");
            die;
        }else{
            $error .= str_replace(" ", "-", "An error occur while sending message, please try later ".$mail->ErrorInfo);
            header("location: index.php?err=$error");
            die;
        }
    }
}
else{
    header("location: index.php");
    die;
}

?>
body{
    width: 100%;
    height: 100vh;
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    background:url("https://images.unsplash.com/photo-1530893609608-32a9af3aa95c?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTJ8fHRlY2h8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60") !important;
    background-size:cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
*{
    list-style: none;
    box-sizing: border-box;
}

.container{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100%;
    height:100vh;
}
.container .form-cont{
    width:450px;
    padding:12px;
    background:rgba(0,0,0,.8);
    color:#fff;
}

.container .form-cont form textarea{
    height:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send Mail</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <div class="container">
        <div class="form-cont">
            <h3>Contact Form</h3>
            <br>
            <div class="err-cont">
                <?php if(isset($_GET['err'])){?>
                <div class="alert alert-danger"><small><?php echo $_GET['err'];?></small></div>
                <?php }else if(isset($_GET['pass'])){?>
                <div class="alert alert-success"><small><?php echo $_GET['pass'];?></small></div>
                <?php }?>
            </div>
            <form action="sendmail.php" class="form-group" method="POST">
                <label for="fname">Fullname</label>
                <input type="text" name="name" placeholder="Your name.." class="form-control">
                
                <label for="fname">Email</label>
                <input type="email" name="email" placeholder="Your Email Address.." class="form-control">
                
                <label for="subject">Message</label>
                <textarea name="msg" placeholder="Write something.." class="form-control"></textarea>
            
                <input type="submit" name="submit" value="Send Message" class="btn btn-block btn-primary mt-2">
            
              </form>
        </div>
    </div>
</body>
</html>
//Varsayılan dil özelliğinin belirlenmesi: 
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
  
//Dil özelliğinin belirlenmesi: 
<link rel="alternate" hreflang="en" href="https://example.com/en/" /> 

//Dil ve bölge(ülke) özelliğinin belirlenmesi: 
<link rel="alternate" hreflang="en" href="https://example.com/en-us/" /> 
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <url>
        <loc>https://example.com/en/</loc>
        <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
        <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" />
    </url>
    <url>
        <loc>http://example.com/de/</loc>
        <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" />
        <xhtml:link rel="alternate" hreflang="de" href="https://www.example.com/de/" />
    </url>
</urlset>
<html lang=”tr”>
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="[@Yayıncı adresi]">
<meta name="twitter:title" content="[Sayfa başlığı]">
<meta name="twitter:description" content="[Sayfa açıklaması 200 karakterden az olmalıdır.]">
<meta name="twitter:creator" content="[@creator]">
<meta name="twitter:image" content="[https://example.com/image.jpg]">
  
<!-- Open Graph data -->
<meta property="og:title" content="[Başlık]" />
<meta property="og:type" content="[article]" />
<meta property="og:url" content="[https://example.com/]" />
<meta property="og:image" content="[https://example.com/image.jpg]" />
<meta property="og:description" content="[Sayfa açıklaması]" />
<meta property="og:site_name" content="[Site adı]" />
<link rel="prev" href="http://www.example.com/article_1.html">
<link rel="next" href="http://www.example.com/article_3.html">
<meta name="ROBOT ADI" content="ÖZELLİK" />
User-agent: googlebot
Disallow: /page2.html
Sitemap: https://example.com/sitemap.xml
<link href="https://example.com/" rel="canonical" />
<a href="https://www.example.com/index.html">Anasayfa</a>
<a href="https://www.example.com/index.html" rel="nofollow">Anasayfa</a>
<a href="https://www.example.com/index.html">
    <img src="img/car.jpg" alt="anahtar kelime" width="100" height="100">
</a>
<img src="img/keyword.jpg" alt="keyword" width="100" height="100">
<meta name=”description content= “Açıklama metni”>
<title>Başlık</title>
<script type="application/ld+json">
{
  "@context": [
    "http://schema.org"
  ],
  "@type": "Recipe",
  "image": "http://cdn.jamieoliver.com/recipe-database/oldImages/xtra_med/1154_1_1436804765.jpg",
  "name": "Kerryann’s Turkish-style couscous",
  "author": "jamie Oliver",
  "description": "This super-simple couscous recipe is almost a salad – zingy, lightly spiced and brilliant with fish and chicken",
  "totalTime": "PT15M",
  "datePublished": "2015-09-16",
  "nutrition": {
    "@type": [
      "NutritionInformation"
    ],
    "calories": "116 calories"
  }
}
</script>
<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Oguzcan Sahin</span>
  <img itemprop="image" alt="Oguzcan Sahin" src="oguzcan-sahin.jpg">
  <span itemprop="jobTitle">Front-end Developer</span>
  <address class="text" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">Bağdat Caddesi Öncü Sokak Büyükhanlı Sitesi <br> 2/1 B1 Blok Kat: 10 D:26-27</span> <br>
    <span itemprop="addressLocality">Suadiye</span> / <span itemprop="addressRegion">İstanbul</span> <br>
    <a class="phone-number" target="_blank" itemprop="telephone">0216 302 49 87</a>
  </address>
  <a href="mailto:email@email.com" itemprop="email">email@email.com</a>
</div>
<address class="text" itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="streetAddress">Bağdat Caddesi Öncü Sokak Büyükhanlı Sitesi <br>
  2/1 B1 Blok Kat: 10 D:26-27</span> <br>
  <span itemprop="addressLocality">Suadiye</span> / <span itemprop="addressRegion">İstanbul</span> <br>
  <a class="phone-number" target="_blank" itemprop="telephone">0216 302 49 87</a>
</address>
<address class="text" itemscope itemtype="http://schema.org/PostalAddress">
  <span>Bağdat Caddesi Öncü Sokak Büyükhanlı Sitesi <br>
  2/1 B1 Blok Kat: 10 D:26-27</span> <br>
  <span>Suadiye</span> / <span>İstanbul</span> <br>
  <a class="phone-number" target="_blank">0216 302 49 87</a>
</address>
<address class="text">
  <span>Bağdat Caddesi Öncü Sokak Büyükhanlı Sitesi <br>
  2/1 B1 Blok Kat: 10 D:26-27</span> <br>
  <span>Suadiye</span> / <span>İstanbul</span> <br>
  <a class="phone-number" target="_blank">0216 302 49 87</a>
</address>
    <div class="custom__wrapper">
        <video src="/media/1011/filmtegner-1.mp4" class="custom__slider" autoplay loop muted controls></video>

        <ul>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
            <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li>
        </ul>
    </div>
<script>
    function videoslider(links) {
        document.querySelector(".slider").src = links;
    }
</script>

.custom__wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom__wrapper .custom__slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.custom__wrapper ul {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.custom__wrapper ul li {
    list-style: none;
    cursor: pointer;
    margin: 10px;
}


.custom__wrapper ul li video {
    width: 200px;
    transition: all 0.3s;
}

.custom__wrapper ul li video:hover {
    transform: scale(1.1);
}

video {
    width: 100%;
    height: 100%;
}
<div class="{{ margin_top }}">
{{ image }}

    {{ if
            (column_layout == '66/33' AND column_number == '1') OR
            (column_layout == '60/40' AND column_number == '1') OR
            (column_layout == '40/60' AND column_number == '2') OR
            (column_layout == '33/66' AND column_number == '2')
    }}
        {{# large  sized image #}}
        <picture class="block w-full" >
            <source
                data-srcset="{{ glide:url width="900" format="webp" }}"
                type="image/webp">

            <source
                data-srcset="{{ glide:url width="900" }}"
                type="image/jpeg"
            >
            <img
                class="block object-cover w-full lazyload"
                data-src="{{ glide:url width="900" }}"
                alt="{{ title }}"
                height="{{ height }}"
                width="{{ width }}"
            >
            <noscript>
                <img
                    class="block object-cover w-full"
                    src="{{ glide:url width="900" }}"
                    alt="{{ title }}"
                    height="{{ height }}"
                    width="{{ width }}"
            >
            </noscript>
        </picture>

    {{ elseif
        (column_layout == '66/33' AND column_number == '2') OR
        (column_layout == '60/40' AND column_number == '2') OR
        (column_layout == '40/60' AND column_number == '1') OR
        (column_layout == '33/66' AND column_number == '1')
    }}
        {{# small  sized image #}}
        <picture class="block w-full" >
            <source
                data-srcset="{{ glide:url width="600" format="webp" }}"
                type="image/webp">

            <source
                data-srcset="{{ glide:url width="600" }}"
                type="image/jpeg"
            >
            <img
                class="block object-cover w-full lazyload"
                data-src="{{ glide:url width="600" }}"
                alt="{{ title }}"
                height="{{ height }}"
                width="{{ width }}"
            >
            <noscript>
                <img
                    class="block object-cover w-full"
                    src="{{ glide:url width="600" height="400" fit="crop_focal" }}"
                    alt="{{ title }}"
                    height="600"
                    width="400"
            >
            </noscript>
        </picture>

    {{ else }}
        {{# medium  sized image #}}
        <picture class="block w-full" >
            <source
                data-srcset="{{ glide:url width="900" format="webp" }}"
                type="image/webp">

            <source
                data-srcset="{{ glide:url width="900" }}"
                type="image/jpeg"
            >
            <img
                class="block object-cover w-full lazyload"
                data-src="{{ glide:url width="900" }}"
                alt="{{ title }}"
                height="{{ height }}"
                width="{{ width }}"
            >
            <noscript>
                <img
                    class="block object-cover w-full"
                    src="{{ glide:url width="900" }}"
                    alt="{{ title }}"
                    height="{{ height }}"
                    width="{{ width }}"
            >
            </noscript>
        </picture>
    {{ endif }}

</div>
{{ /image }}
//Css
$('elem').css('prop','val')

//classes
$('elem').addClass();
$('elem').removeClass();
$('elem').toggleClass();


$('.galleryBox').css('width');
//It will display 'width in pixels' properties of selector.

$('.galleryBox').width();
//It will display the width only in numbers ( no units )
//It will display the height only in numbers ( no units )
$('.galleryBox').height();

//chechbox toggle/update/check
let checkBox = $('input:checkbox').is(":checked");
console.log(checkBox)
//It will True if it's checked, False if unchecked.
<script lang="javascript">
  function doSomething(e) {
    console.log(`You clicked <${e.target.localName}>`);
    // uncomment next line to stop it getting to href (and see the log above)
    // e.preventDefault();
  }
</script>
<div onclick="doSomething(event)">
  <a download href="/path-to-file"><strong>DOWNLOAD</strong></a>
</div>
        /*   Effect Animations     */

//Methods :fadeOut, fadeIn, fadeTo, fadeToggle

$('elem').fadeOut(1000);
//fadeOut adds property 'display: none'

$('elem').fadeIn(1000)

$('elem').fadeTo(1000, 0.5);
// 0.5 will be the opacity.

$('elem').fadeToggle();
//Will Toggle between fadeOut and fadeIn. If it's already Faded out, It will fadeIn and vice-versa ( It will remeber opacity mentioned in line 6 and will provide same opacity.

$('elem').fadeTo(1000, 0);
// Opacity will be zero, But element will be there (Blank Space )

// Methods : hide , show, toggle
$('elem').hide();

// It will add prop "Display : none".
 $('elem').hide(2000);

$('elem').show();
// It will add prop 'display : block'.
 $('elem').show(2000);

$('elem').toggle();
//It will switch between none/block.

// Methods slideUp, slideDown, slideToggle
$('elem').slideUp();
 $('elem').slideUp(2000);

//There will be cool animation, And it will add 'display:none'.
$('elem').slideUp();

 $('elem').slideDown(3000);
// It will reverse the slideUp or it will pop up the element by adding prop 'display:block'.

 $('elem').slideToggle(2000);
//It will switch between slideUp/slideDown.


//Animate ( Values have to be numerical )
$('div.blue-box').animate({
    'margin-left' : '20px',
    'margin-top':'18px'
}, 1000 )
// 1st way, It will set the margins and override the defauls ones,

// 2nd way, This is better as it will add/remove margins to the current provided
$('div.blue-box').animate({
    'margin-left' : '+=20px',
    'margin-top':'-=18px',
  'opacity' : '0'
}, 1000 )

//We can also do camel casing in properties.
$('div.blue-box').animate({
    'margin-left' : '+=200px',
    'opacity' : '0.8',
    'height' : '50px',
     width : '50px',
    'margin-top' : '10px',
     borderRadius : '9px' 
}, 1000 )

//Delaying and Chaining Examples.
$('elem').delay( time ).method( property )

$('p').delay(2000).slideToggle();
$('.box').delay(2000).fadeOut(1000,0.5).fadeOut().fadeIn();
//slideToggle() will work after 2 seconds.


//Timing the functinos according to the Time ( As a call back functions )
$('div#content .red-box').slideUp( 2000, 0, function(){
    $('div#content .green-box').slideUp( 2000, 0 ,function(){
        $('div#content .blue-box').slideUp(2000, 0 )
           //All the call back functions are nested with each other.
    }) 
})

// Or 1:  using Arrow functions.
$('div#content .red-box').slideUp( 2000, 0 , () => {
    $('div#content .green-box').slideUp( 2000, 0 , () => {
        $('div#content .blue-box').slideUp(2000 , 0)
    })
})

// Or 2:  using Arrow functions + Chaining + using different methods in one program.
$('div#content .red-box').slideUp( 2000, 0 , () => {
    $('div#content .green-box').animate({
        marginTop : '20px',
        'opacity' : '0.6',
     }, 2000 , ()=>{
         $('.blue-box').hide();
     })
})

          /*  -----------------------XX ---------------------------- */


            /*               Selectors.         */
$('.elem:first');
$('.elem:last');
$('.elem:even');
$('.elem:odd');

$('input:text,input:email');
$('input:checked');
$('input:selected');

$('body').children().not('.one').css('border' , '2px solid red');
$('.parent').children().not('.one').css("border","30px solid blue");


$('div.content').find('h1').css('text-align','center');
//or
$('ul').find('li').slideUp(2000);
//or
$('ul').children('li.spec').slideUp(2000); //Direct children 'li.spec' of 'ul'
//or
$('ul').find('li.spec').slideUp(2000);

$('ul').parent('body').css('color','red');
$('li').parents('ul').css('border', '2px solid red');
$('ul').children('ol').css('font-weight', 'bolder');
$('li').siblings('li').css('border', '2px solid red');

 $('h1').next().css('border', '2px solid red');
 $('h1').prev().css('border', '2px solid red');

 
 $('li').filter(":odd").css('border', '2px solid red');
 $('ul').find('li').filter(":even").css('border', '2px solid red');

$('ul').first().css('background-color', 'red');
$('ul').last().css('background-color', 'red')

$('li').eq( numberHere ).css('background-color', 'red');
$('li').eq( -numberHereFromBackToFront ).css('background-color', 'red');

   /*  -----------------------XX ----------------------*/  


                    /*  DOM  */
//Adding
$('ol').append('<li> Will be last item on OL </li>');
$('<li> Seven </li>').appendTo(('ol'));

$('ol').prepend('<li> Will be Top Item on OL </li>');
$('<li> From Top Seven </li>').prependTo(('ol'));

$('div.one').after("<div class='box bg-info m -4'> after </div>");
$('div.one').before("<div class='box bg-secondary m -4'> before </div>")

$('div.one').before(()=>{
  return "<div class='box bg-secondary m -4'> before </div>";
})
//We can do like this for all the above mentioned methods.


//replacing
$('li:even').replaceWith('<li>  All the Even li will be replaced </li>');
$('li:even').replaceWith(()=>{
  return 'Works same way, But we are returning using an function';
});
$('li:even').replaceAll('<li>  All the Even li will be replaced </li>');


//Removing elements
 $('li').remove();

$('p').empty(); //Will only remove the content inside the 'p', Will not remove the 'p' element itself. ( it basically empty it)


//Manipulating attributes.
$('a').attr('href');
$('img').attr('src');
$('div').attr('height');

//It will change the value;
$('a').attr('href','https://www.youtube.ca/');

//It will work as "checked" works in HTML. ( by default it will be checked )
$('input:checkbox').prop('checked');

//To get an value from the element. ( eleme.value  ( vanilla script ))
$('eleme').val();


            // classes
//Add class.
$('.select').addClass('classNameToBeAdd');
$('.select').addClass('classNameToBeAdd classNameToBeAdd2 classNameToBeAdd5'); //multiple classes.
$('div').addClass(function(index, currentClass){
  if(currentClass === 'dummy01'){
    return 'classNameOneToBeAdded'  //Example : To add class using index or checking if the class prexisted or not.
  }
})

//Remove classe.
$('.select').removeClass('classNameToBeRemoved');
$('.select').removeClass('classNameToBeRemoved classNameToBeRemoved2 classNameToBeRemoved4 ');

$('.select').addClass('class1').removeClasss('class3').addClass('blah blah2...') //Chaining it.

-------------------------------------
    // data

let valuesArr = [10, 20, 30, 40, 50];

$('.element').data('keyHere', "valueHere");
console.log( $('.element').data('keyHere') );

$('.output').data('dataSet1', valuesArr);
$('.output').data('ds2', "Jaskaran");

console.log( $('.output').data('dataSet1')); //It will return the whole array('valuesArr')
console.log( $('.output').data('ds2') );

console.log($(".output").data()); //It will return all the data linked to the '.output' element.

$('.output').removeData("dataName"); // How to remove the data.


<p data-sampData1='Something to be stored'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio.  
</p>

<script>
  $('p').data();
//or
  $('p').data('sampData1');

</script>  
-----------------------------------------
 
  //content
.text();
.html();
      /*  -----------------------XX ---------------------------- */

             /*      Event Handlers      */ 
  
//Syntax
$('.elemt').methodName(function(){  });

$('eleme').click();
$('eleme').dblclick();

$('eleme').mouseenter();
$('eleme').mouseleave();

//hover(handlerIn, handerOut);
$('.elem').hover();
$('elem').hover( function(){console.log('code written from handlerIn')}, function(){console.log('code written from handlerOut')}) // We can use 'mouseenter' and 'mouseleave', But just another way to code.


//Adding multiple handlers on single "element" using "ON" method.
$('.elem').on("click dblclick mouseenter",function(){ 
 console.log('Active : ')
});

               //Delegated events, 
//In case we add some dynamic elements( from js/external src). Events handlers are not added to the Dynamic content so we need to use 'Delegated events'.
$('.parent').on( "click", "p"  ,function(){
$(this).slideUp();
});//In this case we have added 'p' tag from JS, So in order to access/select, We need to use such syntax.


//Data
    <li data-item1='Item One Data Here...'>Write your own destiny</li>
    <li data-item2="item Two Data here">Fate is what choices you make</li>
  
     console.log($('li:first').data());
       //{item1: "Item One Data Here..."}

     console.log($('li:first').data('item1'));
       //Item One Data Here

//KeyDown && keyup
$('elem').keydown(()=>{});
$('elem').keyup(()=>{});

$('elem').keydown((e)=>{console.log(e.which)});

//Focus, Change and blur
$('input').focus(function(){
 $(this).css('box-shadow',"2px 2px 14px grey");
});

$('input').change(function(){
 $(this).css('box-shadow',"2px 2px 14px grey");
})

$('input').blur(function(){
 $(this).css('box-shadow',"2px 2px 14px grey");
})
=TODAY() +0

//And in the second box, I'll enter:

=TODAY() +7
<form enctype='multipart/form-data'>
      <h1>
        Upload files
      </h1>
      <input type='file' name='photo' @change="filesChange($event.target.name, $event.target.files)">
</form>
<head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
<nav id="top" class="navigation-transparent">
        <div class="nav-header">
            <span class="nav-title-secondary">Sky</span>
            <span class="nav-title-primary">UI</span>
        </div>
        <div class="nav-links">
            <button class="button-tertiary"><a href="index.html">Home</a></button>
            <button class="button-tertiary"><a class="link-active" href="documentation.html">Documentation</a></button>
            <button class="button-tertiary"><a
                    href="https://github.com/AnkitKarnAK/css-component-library/blob/main/componentStyles.css"
                    target="_blank">Github</a></button>
        </div>
    </nav>
/* Carousel   */
 <!--###################START HERE####################-->
  <div class="container">
    <div class="row">
      <div class="col-sm-8 m-auto">

        <!-- SIMPLE SLIDER -->
        <div id="slider1" class="carousel slide mb-5" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>
        </div>

        <!-- SLIDER WITH CONTROLS -->
        <div id="slider2" class="carousel slide mb-5" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>

          <!-- CONTROLS -->
          <a href="#slider2" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>

          <a href="#slider2" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>

        <!-- SLIDER WITH INDICATORS -->
        <div id="slider3" class="carousel slide mb-5" data-ride="carousel">
          <ol class="carousel-indicators">
            <li class="active" data-target="#slider3" data-slide-to="0"></li>
            <li data-target="#slider3" data-slide-to="1"></li>
            <li data-target="#slider3" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>

          <!-- CONTROLS -->
          <a href="#slider3" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>

          <a href="#slider3" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>

        <!-- SLIDER WITH CAPTIONS -->
        <div id="slider4" class="carousel slide mb-5" data-ride="carousel">
          <ol class="carousel-indicators">
            <li class="active" data-target="#slider4" data-slide-to="0"></li>
            <li data-target="#slider4" data-slide-to="1"></li>
            <li data-target="#slider4" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
              <div class="carousel-caption d-none d-md-block">
                <h3>Slide One</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
              <div class="carousel-caption d-none d-md-block">
                <h3>Slide Two</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
              </div>
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
              <div class="carousel-caption d-none d-md-block">
                <h3>Slide Three</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
              </div>
            </div>
          </div>

          <!-- CONTROLS -->
          <a href="#slider4" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>

          <a href="#slider4" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
/* ------------------ XX ------------------- */

/*  collapse  */
/* ------------------ XX ------------------- */

/*  Tooltips  */
/* ------------------ XX ------------------- */


/*  Popovers  */
/* ------------------ XX ------------------- */


/*  Modals  */
/* ------------------ XX ------------------- */


/*  ScrollSpy  */
/* ------------------ XX ------------------- */
           /*    Grid System      */
    <!-- RESPONSIVE GRID -->
    <div class="row">
      <div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>8 column on medium screen</li>
          <li>9 column on large screen</li>
          <li>10 column on xlarge screen</li>
        </ul>
      </div>
      <div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>4 column on medium screen</li>
          <li>3 column on large screen</li>
          <li>2 column on xlarge screen</li>
        </ul>
      </div>
    </div>

    <!-- EQUAL WIDTH -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
    </div>

    <!-- EQUAL WIDTH MULTI ROW -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="w-100" style="border:1px solid #333"></div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
    </div>

    <!-- AUTO LAYOUT -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Auto Layout</div>
      <div class="col-6" style="border:1px solid #333">Auto Layout</div>
      <div class="col-4" style="border:1px solid #333">Auto Layout</div>
    </div>

    <!-- EQUAL WIDTH STACKED -->
    <div class="row">
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
    </div>

    <!-- ORDERING -->
    <div class="row">
      <div class="col order-3" style="border:1px solid #333">
        First
      </div>
      <div class="col order-2" style="border:1px solid #333">
        Second
      </div>
      <div class="col order-1" style="border:1px solid #333">
        Third
      </div>
    </div>

    <!-- OFFSETTING -->
    <div class="row">
      <!-- 6 column div offset by 3 -->
      <div class="col-md-6 offset-md-3" style="border:1px solid #333">.col-md-6 .offset-md-3</div>
    </div>
    <div class="row">
      <!-- 2 4 column divs, the second offset by 4 -->
      <div class="col-md-4" style="border:1px solid #333">.col-md-4</div>
      <div class="col-md-4 offset-md-4" style="border:1px solid #333">.col-md-4 .offset-md-4</div>
    </div>

    <div class="row">
      <!-- 2 3 column divs, both offset by 3 -->
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
    </div>

    <!-- NESTING -->
    <div class="row">
      <div class="col-sm-9" style="border:1px solid blue">
        Level 1: .col-sm-9
        <div>
          <div class="col-8 col-sm-6" style="border:1px solid red">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6" style="border:1px solid red">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>

  /* ------------------ XX --------------- */


          /*   Grid Alignment       */
        <!-- VERTICAL ALIGNMENT -->
        <div class="container">
            <div class="row align-items-start" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Top Aligned Text
                </div>
                <div class="col">
                    Top Aligned Text
                </div>
                <div class="col">
                    Top Aligned Text
                </div>
            </div>
            <div class="row  align-items-center" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Middle Aligned Text
                </div>
                <div class="col">
                    Middle Aligned Text
                </div>
                <div class="col">
                    Middle Aligned Text
                </div>
            </div>
            <div class="row  align-items-end" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Bottom Aligned Text
                </div>
                <div class="col">
                    Bottom Aligned Text
                </div>
                <div class="col">
                    Bottom Aligned Text
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- VERTICAL ALIGN INDIVIDUAL COLS -->
        <div class="container">
            <div class="row" style="height:200px;border:1px #333 solid">
                <div class="col  align-self-start">
                    Top Aligned
                </div>
                <div class="col  align-self-center">
                    Middle Aligned
                </div>
                <div class="col  align-self-end">
                    Bottom Aligned
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- HORIZONTAL ALIGNED COLS -->
        <div class="container">
            <div class="row justify-content-start" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Left Aligned Text
                </div>
                <div class="col-4">
                    Left Aligned Text
                </div>
            </div>
            <div class="row justify-content-center" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Center Aligned Text
                </div>
                <div class="col-4">
                    Center Aligned Text
                </div>
            </div>
            <div class="row justify-content-end" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Right Aligned Text
                </div>
                <div class="col-4">
                    Right Aligned Text
                </div>
            </div>
            <div class="row justify-content-around" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Content Around
                </div>
                <div class="col-4">
                    Content Around
                </div>
            </div>
            <div class="row justify-content-between" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Content Between
                </div>
                <div class="col-4">
                    Content Between
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- COLUMN WRAPPING & NO GUTTERS-->
        <div class="row no-gutters">
            <div class="col-9">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


   /* ------------------ XX --------------- */

            /*   Flex   */

    <!-- FLEX ROW & FLEX ITEMS -->
    <div class="d-flex flex-row row-hl">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX ROW REVERSE -->
    <div class="d-flex flex-row-reverse row-hl">
      <div class="p-4 item-hl">Flex Item 1</div>
      <div class="p-4 item-hl">Flex Item 2</div>
      <div class="p-4 item-hl">Flex Item 3</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT START -->
    <div class="d-flex row-hl justify-content-start">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT CENTER -->
    <div  class="d-flex row-hl justify-content-center">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT END -->
    <div class="d-flex row-hl justify-content-end">
      <div class="p-4 item-hl">Flex Item end</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT AROUND -->
    <div class="d-flex row-hl justify-content-around">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT BETWEEN -->
    <div  class="d-flex row-hl justify-content-between">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX COLUMN -->
    <div class="row-hl d-flex flex-column">
      <div class="p-4 item-hl">Flex Item 11</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX COLUMN REVERSE -->
    <div class="d-flex flex-column-reverse row-hl">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - START -->
    <div class="row-hl d-flex align-items-start">
      <div class="p-4 item-hl">Flex Item Start</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - CENTER -->
    <div class="row-hl d-flex align-items-center">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - END -->
    <div class="row-hl d-flex align-items-end">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - BASELINE -->
    <div class="row-hl d-flex align-items-baseline">
      <div class="p-4 item-hl">Flex Item BASELINE</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - STRETCH -->
    <div class="row-hl d-flex align-items-stretch">
      <div class="p-4 item-hl">Flex Item STRETCH</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- ALIGN SELF -->
    <div class="row-hl d-flex">
      <div class="p-4 item-hl align-self-end">Flex Item End</div>
      <div class="p-4 item-hl align-self-center">Flex Item</div>
      <div class="p-4 item-hl align-self-start">Flex Item</div>
      <div class="p-4 item-hl align-self-baseline">Flex baseline</div>
      <div class="p-4 item-hl align-self-stretch">Flex stretch</div>
    </div>
   /* ------------------ XX --------------- */

          /*  Auto Margins & Wrap     */



        <!-- MR-AUTO -->
        <div class="d-flex row-hl">
            <div class="mr-auto p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- ML-AUTO -->
        <div class="d-flex row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="ml-auto p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- MB-AUTO -->
        <div class="d-flex flex-column row-hl">
            <div class="mb-auto p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- MT-AUTO -->
        <div class="d-flex flex-column row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 mt-auto item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- NO WRAP -->
        <div class="d-flex row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>

        </div>

        <br>
        <br>

        <!-- WRAP -->
        <div class="d-flex flex-wrap row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- ORDERING -->
        <div class="d-flex row-hl">
            <div class="p-2 order-3 item-hl">First flex item</div>
            <div class="p-2  item-hl">Second flex item</div>
            <div class="p-2 order-1 item-hl">Third flex item</div>
        </div>

     /* ------------------ XX --------------- */
<div id="testimonials">
</div>
                     /*        "Components"                */



/*    Buttons        */

 
        <!-- BUTTONS -->
        <button class="btn btn-primary" type="button">Primary</button>
        <button class="btn btn-secondary" type="button">Secondary</button>
        <button class="btn btn-success" type="button">Success</button>
        <button class="btn btn-info" type="button">Info</button>
        <button class="btn btn-warning" type="button">Warning</button>
        <button class="btn btn-danger" type="button">Danger</button>
        <button class="btn btn-light" type="button">Light</button>
        <button class="btn btn-dark" type="button">Dark</button>
        <button class="btn btn-link" type="button">Link</button>

        <br>
        <br>

        <!-- BUTTON TAGS/TYPES -->
        <a class="btn btn-primary" href="#" role="button">Link</a>
        <button  class="btn btn-light" type="submit">Button</button>
        <input class="btn btn-dark" type="button" value="Input">
        <input  class="btn btn-warning" type="submit" value="Submit">
        <input  class="btn btn-success" type="reset" value="Reset">

        <br>
        <br>

        <!-- OUTLINE BUTTONS -->
        <button class="btn btn-outline-primary" type="button">Primary Outline</button>
        <button  class="btn btn-outline-secondary" type="button">Secondary Outline</button>
        <button  class="btn btn-outline-success" type="button">Success Outline</button>
        <button  class="btn btn-outline-success" type="button">Info Outline</button>
        <button  class="btn btn-outline-warning" type="button">Warning Outline</button>
        <button  class="btn btn-outline-danger" type="button">Danger Outline</button>
        <button  class="btn btn-outline-light" type="button">Light Outline</button>
        <button  class="btn btn-outline-dark" type="button">Dark Outline</button>

        <br>
        <br>

        <!-- BUTTON SIZES -->
        <button class="btn btn-lg" type="button">
            <i class="fa fa-user"></i> Large button</button>
        <button class="btn btn-sm" type="button">Small button</button>
        <br>
        <br>
        <button class="btn btn-block btn-outline-dark" type="button">Block level button</button>

        <br>
        <br>

        <!-- STATES -->
        <button class="btn btn-primary" type="button">Regular Button</button>
        <button class="btn btn-primary active" type="button">Active Button</button>
        <button class="btn btn-primary disabled" type="button">Disabled Button</button>

        <button class="btn btn-primary" data-toggle='button' type="button">
            Toggle State
        </button>

        <br>
        <br>

        <!-- BUTTON GROUPS -->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Left</button>
            <button class="btn btn-success" type="button">Middle</button>
            <button class="btn btn-primary" type="button">Right</button>
        </div>

        <br></br>

        <!-- BUTTON TOOLBAR -->
        <div class="btn-toolbar">
            <div class="btn-group  mr-2">
                <button class="btn btn-primary"  type="button">1</button>
                <button class="btn btn-primary"  type="button">2</button>
                <button class="btn btn-primary"  type="button">3</button>
                <button class="btn btn-primary"  type="button">4</button>
            </div>
            <div class="btn-group mr-2">
                <button class="btn btn-primary"  type="button">5</button>
                <button class="btn btn-primary"  type="button">6</button>
                <button class="btn btn-primary"  type="button">7</button>
            </div>
            <div>
                <button class="btn btn-primary"  type="button">8</button>
            </div>
        </div>

        <br>
        <br>

        <!-- VERTICAL GROUP -->
        <div class="btn-group-vertical">
            <button class="btn bg-primary" type="button">Left</button>
            <button class="btn btn-dark" type="button">Middle</button>
            <button class="btn bg-primary" type="button">Right</button>
        </div>

        <br>
        <br>

        <!-- BUTTON DROPDOWNS -->
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
                My Dropdown
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link One</a>
                <a class="dropdown-item" href="#">Link Two</a>
                <a class="dropdown-item" href="#">Link Three</a>
            </div>
        </div>

        <br>
        <br>

        <!-- SPLIT DROPDOWNS -->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">My Button</button>
            <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
                <span>Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link One</a>
                <a class="dropdown-item" href="#">Link Two</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Link Three</a>
            </div>
        </div>
          /*   ---------------------- XX ------------------    */


                          /*     Navbar   */
 <!-- SIMPLE NAVBAR -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    

    <!-- NAVBAR WITH RESPONSIVE TOGGLE -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" data-toggle="collapse" data-target='#navbarNav'>
                <span class="navbar-toggler-icon"> </span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
         </div>
        </div>
    </nav>
    

    <!-- NAVBAR WITH FORM -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" data-toggle="collapse" data-target='#navbarNav'>
                <span class="navbar-toggler-icon"> </span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>

            <form class="form-inline ml-auto">
                <input class="form-control mr-2" placeholder="Search" type="text">
               <button class="btn btn-outline-success ml-2">Search</button>
            </form>
         </div>
        </div>
    </nav>

    <!-- NAVBAR WITH DROPDOWN -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-5">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"> Dropdown </a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item"> Link 1 </a>
                        <a href="#" class="dropdown-item"> Link 2 </a>
                        <a href="#" class="dropdown-item"> Link 3 </a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- COLORS -->
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <br>
    <br>

    <!-- FIXED TOP -->
    <nav style='z-index : 1;' class="navbar navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#" > Navbar Fixed Top </a>
    </nav>

    <!-- FIXED BOTTOM -->
    <!-- FIXED TOP -->
    <nav class="navbar navbar-dark bg-dark fixed-bottom">
        <a class="navbar-brand" href="#" > Navbar Fixed Bottom </a>
    </nav>



    <!-- sticky TOP -->
    <nav style='z-index:2;' class="navbar navbar-dark bg-dark sticky-top">
        <a class="navbar-brand" href="#" > Navbar sticky Top </a>
    </nav>


    <br>
    <br>

    <div class="container">

        <!-- NAVS -->
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <!-- HORIZONTAL ALIGN -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 justify-content-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>



        <!-- RIGHT ALIGN -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <br>
        <br>

        <!-- VERTICAL -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <br>
        <br>

        <!-- FILL & JUSTIFY -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 nav-fill">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 4</a>
            </li>
        </ul>
           /*   ---------------------- XX ------------------    */

               /*   List Groups & Badges       */


        <!-- LIST GROUP -->
        <ul class="list-group mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item">My List Item Three</li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>

        <!-- LIST GROUP WITH LINKS -->
        <ul  class="list-group mb-3">
            <a class="list-group-item" href="#">My List Item One</a>
            <a class="list-group-item" href="#">My List Item Two</a>
            <a class="list-group-item active" href="#">My List Item Three</a>
            <a class="list-group-item" href="#">My List Item Four</a>
            <a class="list-group-item" href="#">My List Item Five</a>
        </ul>


        <!-- CONTEXTUAL CLASSES -->
        <ul class="list-group mb-3">
            <li class="list-group-item">Regular List Item</li>
            <li class="list-group-item list-group-item-primary">Primary List Item</li>
            <li class="list-group-item list-group-item-secondary">Secondary List Item</li>
            <li class="list-group-item list-group-item-success">Success List Item</li>
            <li class="list-group-item list-group-item-info">Info List Item</li>
            <li class="list-group-item list-group-item-warning">Warning List Item</li>
            <li class="list-group-item list-group-item-danger">Danger List Item</li>
            <li class="list-group-item list-group-item-light">Light List Item</li>
            <li class="list-group-item list-group-item-dark">Dark List Item</li>
        </ul>

        <!-- FLUSH LIST GROUP -->
        <ul class="list-group list-group-flush mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item active">My List Item Three</li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>


        <!-- BADGE -->
        <ul class="list-group mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                My List Item Three
            <span class="badge badge-primary">30</span>
            </li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>

        <!-- BREADCRUMB -->
        <ol class="breadcrumb">
            <li class="breadcrumb-item active">Home</li>
        </ol>
        <ol class="breadcrumb">
            <li  class="breadcrumb-item">
                <a href="#">Home</a>
            </li>
            <li  class="breadcrumb-item" >Users</li>
        </ol>
        <ol class="breadcrumb">
            <li  class="breadcrumb-item">
                <a href="#">Home</a>
            </li>
            <li  class="breadcrumb-item">
                <a href="#">Users</a>
            </li>
            <li  class="breadcrumb-item" >Brad</li>
        </ol>

           /*   ---------------------- XX ------------------    */

                  /*    Forms         */

 <!-- FORM -->
        <form>
            <!-- TEXT FIELD GROUPS -->
            <div class="form-group">
                <label for="name">Name</label>
                <input class="form-control" type="text" id="name" placeholder="Enter name">
            </div>
            <div class="form-group">
                <label for="email">Email address</label>
                <input class="form-control form-control-lg" type="email" id="email" placeholder="Enter email">
                <small class="form-text text-muted">
                    Your email will not ever be shared
                </small>
            </div>
            <div class="form-group">
                <label for="company">Company</label>
                <input class="form-control form-control-sm" type="text" id="company" placeholder="Enter company name">
            </div>
            <div class="form-group">
                <label for="company">Company 2 : </label>
                <input class="form-control form-control-sm" type="text" id="company" placeholder="Read only Example" readonly>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input class="form-control" type="password" id="password" placeholder="Password">
            </div>
            <!-- SELECT -->
            <div class="form-group">
                <label for="gender">Gender</label>
                <select  class="form-control"  id="gender">
                    <option>Male</option>
                    <option>Female</option>
                </select>
            </div>
            <!-- TEXTAREA -->
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" rows="3"></textarea>
            </div>
            <!-- FILE INPUT -->
            <div class="form-group">
                <label for="file">File input</label>
                <input class="form-control-file" type="file" id="file">
                <small class="form-text text-muted" id="fileHelp">Max 3mb size</small>
            </div>
            <!-- CUSTOM FILE INPUT -->
            <div class="custom-file">
                <input class="custom-file-input" type="file" id="myfile">
                <label class="custom-file-label" for="myfile">Choose file</label>
            </div>
            <br>
            <br>
            <!-- RANGE -->
            <div class="form-group">
                <label for="membership">Membership Level</label>
                <input class="custom-range" type="range" step="1" value='5' min="1" max="5">
            </div>

            <br>

            <button class="btn btn-block btn-primary" type="submit">Submit</button>
        </form>

        <br>
        <br>

        <!-- INLINE FORM -->
        <form class="form-inline">
            <input class="form-control mr-2" type="text" id="username" placeholder="Enter username">
            <input class="form-control mr-2" type="text" id="password" placeholder="Password">
            <div class="form-check">
                <label class="form-check-label mr-2">
                    <input class="form-check-input" type="checkbox"> Remember me
                </label>
            </div>

            <button class="btn btn-light" type="submit">Submit</button>
        </form>

        <br>
        <br>

        <!-- FORM ROW -->
        <form>
            <div class="form-row">
                <div class="col">
                    <input class="form-control" type="text" placeholder="First name">
                </div>
                <div>
                    <input class="form-control" type="text" placeholder="Last name">
                </div>
            </div>
        </form>

        <br>
        <br>

        <!-- VALIDATION -->
        <div class="form-group">
            <label for="username">Username</label>
            <input class="form-control is-valid" type="text" id="username" placeholder="Validation example ( if it's valid )" >
        </div>
        <div class="form-group">
            <label for="username">Username 2 </label>
            <input class="form-control is-invalid" type="text" id="username" placeholder="Validation example ( if Not valid )" >
        </div>
        <div>
            <label for="password">Password</label>
            <input class="form-control is-invalid" type="text" id="password" placeholder="Feedback example  ( below details )">
            <div class="invalid-feedback">
                Password not strong enough
            </div>
        </div>
        <div>
            <label for="password2">Confirm Password</label>
            <input class="form-control" type="text" id="password2">
            <div>
                Password does not match
            </div>
        </div>
/*   ---------------------- XX ------------------    */


         /*   Input Groups & Addons     */

 <!-- BASIC INPUT GROUPS -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">@</span>
            </div>
            <input class="form-control" type="text" placeholder="Username">
        </div>

        <br>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Username">
            <div class="input-group-append">
                <span class="input-group-text">@something.com</span>
            </div>
        </div>

        <br>

        <label for="basic-url">Custom URL</label>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">https://something.com/member/</span>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input class="form-control" type="text">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>

        <br>

        <!-- CHECKBOX -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <input type="checkbox">
                </div>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <!-- RADIO -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <input type="radio">
                </div>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <!-- MULTIPLE INPUTS -->
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="">Name & Email</span>
            </div>
            <input class="form-control" type="text" placeholder="Full Name">
            <input class="form-control" type="email" placeholder="Email">
        </div>

        <br>

        <!-- BUTTON ADDONS -->
        <div class="input-group mb-3">
            <input class="form-control" type="text" placeholder="Find By Name...">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button">Search</button>
            </div>
        </div>
/*   ---------------------- XX ------------------    */

         /*    Alerts & Progress Bars     */


        <!-- ALERTS -->
        <div class="alert alert-primary">
            <strong>Primary</strong> Blog post added
        </div>

        <div class="alert alert-secondary">
            <strong>Secondary</strong> Blog post added
        </div>

        <div class="alert alert-success">
            <strong>Success</strong> Blog post added
        </div>

        <div class="alert alert-danger">
            <strong>Danger</strong> Please check the log files
        </div>

        <div class="alert alert-info">
            <strong>Info</strong> You have a new message
        </div>

        <div class="alert alert-warning">
            <strong>Warning</strong> Please check the log files
        </div>

        <div class="alert alert-light">
            <strong>Light</strong> Please check the log files
        </div>

        <div class="alert alert-dark">
            <strong>Dark</strong> Please check the log files
        </div>


        <!-- DISMISSABLE ALERT -->
        <div class="alert alert-success alert-dismissible">
            <button class="close" type="button" data-dismiss="alert">
                <span>&times;</span>
            </button>
            <strong>Dismissable</strong> Blog post added
        </div>

        <!-- EXTRA CONTENT -->
        <div class="alert alert-success">
            <h4 class="alert-heading">Congrats!</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit dignissimos eius, sit quo assumenda totam commodi
                ipsum saepe molestias eligendi exercitationem repudiandae qui facilis deserunt non, harum ab quam? Cumque</p>
            <hr>
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, odio?</p>
        </div>

        <br>
        <br>

        <!-- PROGRESS BARS -->
        <div class="progress">
            <div class="progress-bar" style='width:35%'></div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar" style='width:80%'>80%</div>
        </div>
        <br>
        <!-- STRIPED -->
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-striped" style='width : 70%;'></div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped" style='width : 90%'>90%</div>
        </div>

        <!-- HEIGHT -->
        <div class="progress my-3" style="height:2px">
            <div class="progress-bar bg-success" style='width : 60%'></div>
        </div>
        <br>
        <!-- ANIMATED -->
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style='width:60%;'></div>
        </div>
        <div class="progress mt-3">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style='width:90%;'>90%</div>
        </div>

        <br>
        <!-- MULTIPLE BARS -->
        <div class="progress">
            <div class="progress-bar bg-warning" style='width:15%;'></div>
            <div class="progress-bar bg-success" style='width:25%;'>25%</div>
            <div class="progress-bar bg-primary  progress-bar-striped progress-bar-animated" style='width:10%;'>Loading Amigo</div>
        </div>
/*   ---------------------- XX ----------------
--    */

                
                /*  Tables & Pagination          */
                
        <!-- TABLE -->
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>John</td>
                    <td>Doe</td>
                    <td>jdoe@gmail.com</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Will</td>
                    <td>Johnson</td>
                    <td>will@yahoo.com</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Shannon</td>
                    <td>Williams</td>
                    <td>shannon@yahoo.com</td>
                </tr>
            </tbody>
        </table>

        <br>

        <!-- INVERSE/DARK TABLE -->
        <table class="table table-dark">
        </table>

        <br>

        <!-- TABLE HEAD INVERSE -->
        <table class="table">
            <thead class="thead-dark">
            </thead>
        </table>

        <br>

        <!-- STRIPED TABLE -->
        <table class="table table-striped">
        </table>

        <!-- BORDERED TABLE -->
        <table class="table table-bordered">
        </table>

        <br>

        <!-- BORDERLESS TABLE -->
        <table class="table table-borderless">
        </table>

        <br>

        <!-- HOVERABLE -->
        <table class="table table-hover">
        </table>

        <br>

        <!-- CONTEXTUAL CLASSES -->
        <table class="table">
        </table>

        <br>

        <!-- SMALL TABLE -->
        <table class="table table-sm table-hover table-striped">
        </table>

        <br>

        <!-- RESPONSIVE TABLE - Scrollbars -->
        <div class="table-responsive">
            <table class="table">
            </table>
        </div>

        <br>
        <br>

        <!-- PAGINATION -->
        <nav>
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link" href="#">Previous</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>

        <!-- PAGINATION CENTERED -->
        <nav>
            <ul class="pagination justify-content-center">
            </ul>
        </nav>


        <!-- PAGINATION RIGHT -->
        <nav>
            <ul class="pagination justify-content-end">
                </li>
            </ul>
        </nav>



        <!-- PAGINATION LARGE -->
        <nav>
            <ul class="pagination pagination-lg">
            </ul>
        </nav>



        <!-- PAGINATION SMALL -->
        <nav>
            <ul class="pagination pagination-sm">
            </ul>
        </nav>


        <!-- WITH ARROWS -->
        <nav>
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link" href="#">  
                     <span>&laquo;</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">
                    <span>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>                
                
/*   ---------------------- XX ------------------    */
/*   Cards  */
        <!-- BLOCK -->
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, voluptate.
            </div>
        </div>

        <br>
        <br>

        <!-- SIMPLE CARD -->
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <h6 class="card-subtitle text-muted">Card subtitle</h6>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                <a class="btn btn-outline-primary" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH IMAGE -->
        <div class="card">
            <img class="card-img-top" src="https://source.unsplash.com/random/300x200" alt="">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                <a class="btn btn-success btn-block" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH HEADER -->
        <div class="card">
            <div class="card-header">
                My Card
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-danger" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- HEADER, FOOTER, CENTERED -->
        <div class="card text-center">
            <div class="card-header">
                My Card
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-dark" href="#">Read More</a>
            </div>
            <div class="card-footer text-muted">
                2 Days Ago
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH NAV -->
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-primary" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- IMAGE OVERLAYS -->
        <div class="text-white card">
            <img class="card-img" src="https://source.unsplash.com/random/1000x300" alt="">
            <div class="card-img-overlay">
                <h4 class="card-text">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                    content. This content
                    is a little bit longer.</p>
                <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </p>
            </div>
        </div>


        <br>
        <br>

        <!-- BACKGROUND COLOR -->
        <div class="card bg-primary text-white mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card bg-danger text-white mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>


        <br>
        <br>

        <!-- CARD OUTLINE -->
        <div class="card border-primary mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card border-danger mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card border-info mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>
        <br>
        <br>

        <!-- CARD GROUP -->
        <div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
        </div>


        <br>
        <br>

        <!-- CARD DECK -->
        <div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD COLUMNS -->
        <!-- CARD COLUMNS -->
        <div class="card-columns">
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/300x200" alt="">
                <div class="card-body">
                    <h4 class="card-title">Card title that wraps to a new line</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content
                        is a little bit longer.</p>
                </div>
            </div>
            <div class="card p-3">
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer>
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/301x200" alt="">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.
                    </p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card bg-dark text-white p-3">
                <blockquote class="card-bodyquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                    <footer class="blockquote-footer">
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card text-center">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.
                    </p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/302x200" alt="">
            </div>
            <div class="card p-3 text-right">
                <blockquote class="card-bodyquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This card
                        has even longer content than the first to show that equal height action.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
        </div>
                
/*   ---------------------- XX ------------------    */

                
         /*   Media Object   */
                
        <!-- MEDIA OBJECT -->
        <div class="media">
            <img class="mr-3 mt-3" src="https://source.unsplash.com/random/90x90">
            <div class="media-body">
                <h5>Media heading</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
                felis in faucibus.
            </div>
        </div>

        <br>
        <br>

        <!-- NESTING MEDIA OBJECTS -->
        <div class="media">
            <img class="mr-3" src="https://source.unsplash.com/random/90x91">
            <div class="media-body">
                <h5>Media heading</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
                felis in faucibus.

                <div class="media mt-4">
                    <a href="#" class="pr-4">
                        <img src="https://source.unsplash.com/random/90x92">
                    </a>
                    <div class="media-body">
                        <h5>Nested Media</h5>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                        vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                        congue felis in faucibus.
                    </div>
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- TOP ALIGNED (DEFAULT) -->
        <div class="media">
            <img class="mr-3 align-self-start" src="https://source.unsplash.com/random/90x93">
            <div class="media-body">
                <h5>Top aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>

        <!-- CENTER ALIGNED -->
        <div class="media">
            <img  class="mr-3 align-self-center" src="https://source.unsplash.com/random/90x94">
            <div class="media-body">
                <h5>Center aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>

        <!-- BOTTOM ALIGNED -->
        <div class="media">
            <img  class="mr-3 align-self-end" src="https://source.unsplash.com/random/90x95">
            <div class="media-body">
                <h5>Bottom aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>
<hr>
        <!-- MEDIA LIST -->
        <ul class="list-unstyled">
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x96">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x97">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x98">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
        </ul>


     /* --------------- XX ----------- */

       /*     Jumbotron        */


    <!-- JUMBOTRON -->
    <div class="jumbotron text-center">
      <h1 class="display-4">Welcome To My Website!</h1>
      <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum necessitatibus perspiciatis cum vitae, modi hic?</p>
      <hr>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, quibusdam.</p>
      <a class="btn btn-primary btn-lg" href="#" role="button">Read More</a>
    </div>

    <br>


  </div>
  <!-- ./container -->

  <!-- FLUID JUMBOTRON -->
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Fluid Jumbotron</h1>
      <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas recusandae voluptatibus, natus architecto asperiores
        a.
      </p>
    </div>
  </div>


     /* --------------- XX ----------- */
<div class='row'></div>
<h1 class="sm">Buttons</h1>
            <div class='row'>
              <button class='btn'>Normal Button</button>
              <button class='btn btn-backgroundColor-primary'> Primary </button>
              <button class='btn btn-backgroundColor-secondary'> Secondary </button>
              <button class='btn btn-backgroundColor-success'> Success </button>
              <button class='btn btn-backgroundColor-danger'> Danger </button>
              <button class='btn btn-backgroundColor-warning'> Warning </button>
              <button class='btn btn-backgroundColor-info'> Info </button>
              <button class='btn btn-backgroundColor-light'> Light </button>
              <button class='btn btn-backgroundColor-dark'> Dark </button>
              <button class='btn btn-backgroundColor-muted'> Muted </button>
            </div>
<h1 class="xxs">Paragraphs and other elements</h1>
              <div>
                <p class="xlg">Extra Large</p>
                <p class='lg'>Large</p>
                <p class='md'>Medium</p>
                <p class='sm'>Small</p>
                <p class='xs'>Extra Small</p>
                <p class='xxs'>Extra Extra Small</p>
              </div>
<h1 class="xxs">Headings</h1>
              <div>
                <h1 class="xlg">Extra Large</h1>
                <h1 class='lg'>Large</h2>
                <h1 class='md'>Medium</h3>
                <h1 class='sm'>Small</h4>
                <h1 class='xs'>Extra Small</h5>
                <h1 class='xxs'>Extra Extra Small</h6>
              </div>
<body class="addHelperBorders"> <!-- addHelperBorders -->
{{ define "main" }}

<!-- HTML for Photos view here -->

                    {{- $list := where .Pages ".Params.photos" "!=" nil -}}
                    {{- $len := (len $list) -}}
                    {{ range $index, $value := $list }}

					<!-- Loop through each post happens here -->
                    <!-- HTML for each item here -->

                                {{ range first 1 .Params.photos }}
									<!-- HTML for the first image here, example given -->
<a href="{{ .Permalink }}" title="{{ .Title }}"><img src="{{ . }}"></img></a>
                                {{ end }}
	
                    {{ end }}
                                      
<!-- More HTML for Photos view -->				
{{ end }}
<button accesskey="e" onclick="alert('Edit')">Edit</button>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title></title>
  </head>
  <body>
    

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->
  </body>
</html>
<div class="layout-grid">
 <p>  Aurora UI: Blurred shapes</p>
 <div class="wrapper__aurora-ui-shape">
  <div class="base one"></div>
  <div class="base two"></div>
  <div class="base three"></div>
</div>
 <p>Aurora UI: Blurred gradients</p>
 <div class="wrapper__aurora-ui-gradient">
 </div>
 </div>
<style>
.layout-grid{
  display: gird;
  grid-template-columns: auto;
}

.wrapper__aurora-ui-shape {
  width: 400px;
  height: 400px;
  background: #fff;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}
.base {
  position: absolute;
  filter: blur(60px);
  opacity: 0.8;
}
.one {
  border-radius: 100%;
  width: 600px;
  height: 600px;
  background-color: #373372;
  left:-50px;
  top:-300px;
  z-index: 3;
}
.two {
  width: 500px;
  height: 800px;
  background-color: #7C336C;
  bottom:-30px;
  left:-80px;
}
.three {
  border-radius: 100%;
  width: 450px;
  height: 450px;
  bottom:-80px;
  right:-100px;
  background-color: #B3588A;
}

.wrapper__aurora-ui-gradient {
  width: 400px;
  height: 400px;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
  background-color: #fff;
  background-image: 
    radial-gradient(at top left, #F0ACE0, transparent),
    radial-gradient(at top right, #FFA4B2, transparent),
    radial-gradient(at bottom left, #A7D3F2, transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
<table>
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
        <td>Row 1, cell 3</td>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td>Row 2, cell 2</td>
        <td>Row 2, cell 3</td>
    </tr>
    <tr>
        <td>Row 3, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row 4, cell 1</td>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
    </tr>
</table>
<template>
  <table>
  	<tr>
  		<th>Checkbox</th>
      	<th>File</th>
      	<th>Name</th>
      </tr>
      <tr v-for="(row, i) in accountsToAssign" :key="row[i]">
        <td><v-checkbox @change="checkBoxes(row.id)" /></td>
		<td>{{ row.filenumber }}</td>
		<td>{{ row.name }}</td>
      </tr>
	</table>
</template>
<script>

export default {

data() {
  return {
	selectedAccounts: [],
	}
}
  
methods: {
  
  checkBoxes(value) {
      console.log(value);
      if (this.selectedAccounts.includes(value)) {
        console.log("remove " + value);
        this.selectedAccounts = this.selectedAccounts.filter((item) => {
          return item !== value;
        });
      } else {
        console.log("add " + value);
        this.selectedAccounts.push(value);
      }
      console.log(this.selectedAccounts);
    },
      
  }
}
</script>
<table>
  <tr>
    <th>a1</th>
    <th>a2</th>
    <th>a3</th>
    <th>a4</th>
    <th>a5</th>
  </tr>
  <tr>
    <td>b1</td>
    <td>b2</td>
    <td>b3</td>
    <td>b4</td>
    <td>b5</td>
  </tr>
</table>


<style>
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #ddd;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #333;
  color: #ddd;
}
tr:nth-child(odd) {
  background-color: #222;
  color: #ddd;
}

tr:hover {
  background-color: #444;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #1e1e1e;
  color: white;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    if (window.location.href.indexOf("franky") > -1) {
      alert("your url contains the name franky");
    }
  });
</script>
<div
    class="justify-between py-6 md:flex"
    x-data="{
        open: false,
        hasScrolled: false,
        reactOnScroll() {
            if (this.$el.getBoundingClientRect().top < 120 && window.scrollY > 120) {
                this.hasScrolled = true;
            } else {
                this.hasScrolled = false;
            }
        } 
    }"
    x-init="reactOnScroll()"
    @scroll.window="reactOnScroll()"
>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<ul class="theader"><li><a href="tel:0064211536753"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"><path d="M20 22.621l-3.521-6.795c-.008.004-1.974.97-2.064 1.011-2.24 1.086-6.799-7.82-4.609-8.994l2.083-1.026-3.493-6.817-2.106 1.039c-7.202 3.755 4.233 25.982 11.6 22.615.121-.055 2.102-1.029 2.11-1.033z"/></svg> +64 21 1536 753</li><li><a href="https://google.com">Get Started</a></li></ul>').appendTo('.header-title-nav-wrapper');
	});
	</script>
<style>
  .header-title-nav-wrapper {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
ul.theader {
    list-style: none;
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  font-family: Poppins;
    font-weight: 500;
}
  ul.theader>li:last-child a {
    background: #a3dc18;
    padding: 10px 20px;
    border-radius: 0px;
    margin-left: 10px;
    margin-right: 20px;
    color:#2a282a
}
  .theader svg {
    fill: #a3dc18;
    width: 18px;
    height: 18px;
}
  @media screen and (max-width:1024px) {
    ul.theader {display:none;}
  }
</style>
<div class="dl-box">

  <svg class="dl-svg" viewBox="0 0  160">

    <path class="dl-svg__circle" d="M0,3 a7,77 0 1,0 0,1 a77,77 0 1,0 0,-4 a77,77 0 1,0 0,154 a77,77 0 1,0 0,-154"/>
4
    <path class="dl-svg__arrow dl-svg__arrow-main" d="M80,47 v66"/>
5
    <path class="dl-svg__arrow dl-svg__arrow-side" d="M56,85 80,5"/>
6
    <path class="dl-svg__arrow dl-svg__arrow-side" d="M104,85 80,115"/>
7
    <path class="dl-svg__rotater" d="M80,3 a77,77 0 0,1 0,154 a77,77 0 0,1 0,-154"/>
8
    <path class="dl-svg__progress-plc" d="M-77,207 h3"/>

    <path class="dl-svg__triangle" d="M80,3 Q180,10 225,207 h-302"/>
10
    <path class="dl-svg__triangle-piece" d="M225,207 h15"/>
11
    <path class="dl-svg__progress" d="M-77,207 h314"/>

    <path class="dl-svg__progress-vert" d="M80,207 80,3"/>

    <path class="dl-svg__checkmark" d="M7,56 l74,52 l44,-56"/>
14
  </svg>
15
  <div class="dl-status">
.header-nav-item [href*="/login"] {
    color: #6a92d2 !important;
    border-color: #6a92d2 !important;
    background: transparent;
    border-width: 2px;
    border-style: solid;
    -webkit-transition: 0.1s background-color linear, 0.1s color linear;
    -moz-transition: 0.1s background-color linear, 0.1s color linear;
    -o-transition: 0.1s background-color linear, 0.1s color linear;
    transition: 0.1s background-color linear, 0.1s color linear;
    font-family: Montserrat;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2em;
    padding: .86em 1.6032em !important;
}
nav.header-nav-list {
    align-items: center;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}
<div class="burger">

  <span></span>

</div>

​

<nav>

  <ul class="main">

    <li><a href="#0">Home</a></li>

    <li><a href="#0">Shop</a></li>

    <li><a href="#0">About</a></li>

    <li><a href="#0">Contact</a></li>

    <li><a href="#0">Cart <span>(5)</span></a></li>

  </ul>

  

  <div class="about">

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>

  </div>

  

  <div class="social">

    <a href="#0" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"><g transform="translate(0, 0)"><path d="M64,12.2c-2.4,1-4.9,1.8-7.5,2.1c2.7-1.6,4.8-4.2,5.8-7.3c-2.5,1.5-5.3,2.6-8.3,3.2C51.5,7.6,48.1,6,44.3,6 c-7.3,0-13.1,5.9-13.1,13.1c0,1,0.1,2,0.3,3C20.6,21.6,10.9,16.3,4.5,8.4c-1.1,1.9-1.8,4.2-1.8,6.6c0,4.6,2.3,8.6,5.8,10.9 c-2.2-0.1-4.2-0.7-5.9-1.6c0,0.1,0,0.1,0,0.2c0,6.4,4.5,11.7,10.5,12.9c-1.1,0.3-2.3,0.5-3.5,0.5c-0.8,0-1.7-0.1-2.5-0.2 c1.7,5.2,6.5,9,12.3,9.1c-4.5,3.5-10.2,5.6-16.3,5.6c-1.1,0-2.1-0.1-3.1-0.2C5.8,55.8,12.7,58,20.1,58c24.2,0,37.4-20,37.4-37.4 c0-0.6,0-1.1,0-1.7C60,17.1,62.2,14.8,64,12.2z"></path></g></svg></a>
<div class="site-wrap">

​

  <nav class="site-nav">

​

    <div class="name">

      Pepper

​

      <svg width="24" height="24" viewBox="0 0 24 24">

        <path d="M.5,22C11.64,22 11.77,22 11.9,21.96C.55,21.82 .09,21.38 13.34,20.78C13.44,20.54 13.5,20.27 13.5,20H9.5A2,2 0 0,0 11.5,22M,.5C18,7.43 .86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5VL3,18V19H20V18L18,16M19.97,10H21.97C21.82,6.79 20.24,3.97 .85,2.15L16.42,3.58C18.46,5 19.82,7.35 19.97,10M6.58,3.58L5.15,2.15C2.76,3.97 1.18,6.79 1,10H3C3.18,7.35 4.54,5 6.58,3.58Z"></path>
10
      </svg>
11
    </div>
12
​
13
    <ul>

      <li class="active"><a href="#">Deals</a>
15
        <ul>
16
          <li><a href="#0">Create New Deal</a></li>
17
          <li><a href="#0">Modify Deal</a></li>
18
          <li><a href="#0">Pipeline</a></li>
<div class="page-wrap">

  

  <article>

    

    <header class="article-header">  

      

      <h4 class="classification-header">

         Archaeostronomy

      </h4>

      

      <svg viewBox="0 0 560 259" class="header-lockup">

        <text transform="matrix(1 0 0 1 -0.00007 1.385)"><tspan x="0" y="0" font-family="'Montserrat'" font-size="7px">STARS</tspan><tspan x="0" y="9" font-family="'Montserrat'" font-size="1px">DEAD</tspan></text>
13
        <circle fill="#FFFFFF" cx="128.50781" cy="126.5" r="34.5"/>
14
        <text transform="matrix(1 0 0 1 114.62256 123)">
15
          <tspan x="0" y="0" font-family="'Montserrat'" font-size="px">OF</tspan><tspan x="-6.28906" y="" font-family="'Montserrat'" font-size="19px">THE</tspan>
16
        </text>
17
      </svg>
18
      
19
      <h2>
<img src="https://s.cdpn.io//NutritionFacts.gif" class="image">

​
3
<section class="performance-facts">

  <header class="performance-facts__header">

    <h1 class="performance-facts__title">Nutrition Facts</h1>

    <p>Serving Size 1/2 cup (about 2g)

      <p>Serving Per Container 8</p>
8
  </header>

  <table class="performance-facts__table">

    <thead>

      <tr>

        <th colspan="3" class="small-info">

          Amount Per Serving

        </th>

      </tr>

    </thead>

    <tbody>
HTML
<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>
  
CSS
.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 100px;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #333;
  color: white;
  padding: 15px;
}
.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
  visibility: visible;
}
const handleSubmit = (e: any) => {
    e.preventDefault()
    props.history.push('/mypath') // указывает путь куда напралять после подтвердения формы
}

<form onSubmit={handleSubmit}>
  <button type='submit'>Submit form</button>
</form>
<option value="" disabled selected hidden>
  Select asset
</option>

// 
{TOKENS?.map(el => {
  return (
    <>
    <option value="" hidden>Exchange asset</option>
    <option key={el} value={el}>{el}</option>
   </>
 )
})}
<div class=zoom>
 <div class=image>
 <img src="http://isarta.com/infos/wp-content/uploads/2017/05/couleurs_Fotolia_118879445_S-1.jpg" alt=Text de remplacement width="500" height=""/>
 </div>
</div>

<style>
.zoom {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
/* L'image est grossie de 25% */
-webkit-transform:scale(1.25); /* Safari et Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* Internet Explorer 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
</style>
//Global Variables
@dark-color:#2A282A;
@light-color:#FFFFFF;
@logo-green: #a6d843;
@box-shadow:0px 3px 15px rgba(100, 100, 100, 0.29);


///Global

//button styling
.sqs-block-button-element, .dark-bold .header-actions .btn, {
  background-color:@logo-green !important;
  color:@dark-color !important;
  font-weight: 900;
  text-transform: uppercase;
}

//Mobile Sitewide Queries
/* mobile */
@media screen and (max-width:767px) {
	h1 {
    font-size: calc((3.5 - 1) * 1.2vh + 1rem)!important;
	}
	}

// anchor links offset to deal with fixed menu

@media screen and (min-width: 640px){
  #casestudies, #testimonials, #products{
  margin-top: -90px;
  padding-top: 90px;
  pointer-events: none;
	}
}

/* mobile */
@media screen and (max-width:767px) {
	#casestudies, #testimonials, #products{
  margin-top: -30px;
  padding-top: 30px;
  pointer-events: none;
	}
}




//Styling-------------------------------------------------------------Header
//shadow to the header and reduce padding
.header .header-announcement-bar-wrapper {
 background-color: @dark-color;
  box-shadow: @box-shadow;
  -moz-box-shadow: @box-shadow;
  -webkit-box-shadow: @box-shadow;
  position: relative;
  z-index: 4;
  padding-top: 1.8vw !important;
  padding-bottom: 1.8vw !important;
}


// Center the CODE BLOCK in ------------------------------------------"HERO SECTION"

section[data-section-id="603416b17aacd44d16aec445"] {
  h1{
    margin-top:0;
  }
  #block-yui_3_17_2_1_1614030936450_6608{
    padding-top:0!important;
  }
  p{
    margin-bottom:0;
  }
  #block-yui_3_17_2_1_1614031344386_7315{
    padding-bottom:0 !important;
  }
}


// Center the CODE BLOCK in ------------------------------------------"what we can do for you"
section[data-section-id="6032d3b58e30837700e1846a"], section[data-section-id="6022047755fdbf5e4e4a0e24"] {
  	@media screen and (min-width: 640px) {
      	.sqs-row{
      	display: flex;
      	align-items: center;
      	box-sizing: border-box;
      	justify-content: center;
  	}
 	}	
  
  	.sqs-col-4{
    	background-color:@dark-color;
    	color:white;
  	}
 
  //read the case study color to white
  	.light-bold .sqs-block-html a, .light-bold .read-more-link, .light-bold .entry-excerpt a {
    color: #ffffff !important;
      text-decoration: underline !important;
}
  
  .c-tabs__tab-title{
  		font-size:1.2rem;
    	line-height:2.1rem;
    	font-weight:500;
      	padding:1rem;
  	}
  
  .c-tabs__accordion-tab{
    background-color:#dfdfdb !important;
    border: 1px solid @dark-color !important;
  }
 
  
 }


//Blog Pages Styling------------------------------------ Blog

.blog-item-wrapper .blog-item-title h1.entry-title {
    font-size: calc((3 - 1) * 1.2vw + 1rem);
}

/* mobile */
@media screen and (max-width:767px) {
  .blog-item-wrapper .blog-item-title h1.entry-title {
    font-size: calc((7 - 1) * 1.2vw + 1rem);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
.clase {
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}
.ejemplo1 {
  white-space: nowrap;
}
.ejemplo2 {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
       
    </style>
</head>
<body>
    <table>
        <tr><th>Nombre</th></tr>
        <tr>
            <td class="clase ejemplo2 "  style='width:50%'>[POLISACARIDO
                MENINGOCOCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO A
                4µg&POLISACARIDO
                MENINGOCOCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO C
                4µg&POLISACARIDO
                MENINGOCOCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO Y
                4µg&POLISACARIDO
                MENINGOCÓCICO
                CONJUGADO CON
                TOXOIDE DIFTERICO
                SEROGRUPO W-135
                4µg&PROTEINA DE
                TOXOIDE DIFTERICO
                48µg] 1Dosis/0,5ml</td>
        </tr>
        
    </table>
</body>
</html>
/* Hide this on Mobile */
@media screen and (max-width:767px) {
	[data-section-id="enter-id-here"] {
		display: none;
	}
}
/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
	[data-section-id="enter-id2-here"] {
		display: none;
	}
}
Squarespace sectionID {
  	@media screen and (min-width: 640px) {
      	.sqs-row{
      	display: flex;
      	align-items: center;
      	box-sizing: border-box;
      	justify-content: center;
  	}
 	}	
/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* stacations */
div#block-5e874825130e984bfc011395 h3 {
    font-size: 20px;
}
/* recent published */
div#block-yui_3_17_2_1_1585781296243_6471 h3 {
    font-size: 20px;
}
}
/* mobile */
@media screen and (max-width:767px) {
/* stacations */
div#block-5e874825130e984bfc011395 h3 {
    font-size: 25px;
}
/* recent published */
div#block-yui_3_17_2_1_1585781296243_6471 h3 {
    font-size: 22px;
}
}
<head>
    <script src="video.js"></script>
    <script src="vectorly-videojs.js"> </script>
</head>
<body>
    
    <video id="my-video" class="video-js" data-setup="{}" src="video.mp4" ></video>
  
    <script>
        videojs.registerPlugin('vectorlyPlugin', vectorly.videoJSPlugin);

        const player = videojs('my-video');

        player.vectorlyPlugin({width: 1280, height: 720}); // Upscale to 720p (from 240p)
    </script>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
	<script type="text/javascript" src="js/mixpanel-library.js"></script>
	<script type="text/javascript" src="js/mixpanel.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<link rel="stylesheet" href="css/main.css">
selector {
    display: inline;
    background: white;
    padding: 3px;
    
}

selector {
    position: relative;
    left: 10px;
    padding-left: 0;
    box-shadow: 10px 0px 0 #ffffff, -10px 0 0 #ffffff;
}
ionic cordova prepare android
ionic generate page pages/contact
<div class="ion-text-center">
    <ion-card-title>Center Any Component</ion-card-title>
    <ion-button color="primary" routerLink="/page-name">Go To Page</ion-button>
</div>
<ion-list>
    <ion-item routerLink="/page1">
        <ion-icon slot="start" name="man" color="danger"></ion-icon>
        <ion-label>Menu One</ion-label>
    </ion-item>
    <ion-item routerLink="/page2">
        <ion-icon slot="start" name="book" color="danger"></ion-icon>
        <ion-label>Menu Two</ion-label>
    </ion-item>
    <ion-item routerLink="/page3">
        <ion-icon slot="start" name="heart" color="danger"></ion-icon>
        <ion-label>Menu Three</ion-label>
    </ion-item>
</ion-list>
showInterstitialAd(){
  this.admobFreeService.showInterstitialAd();
}
setTimeout(() => {
  this.admobFreeService.showBannerAd();
}, 5000);
private admobFreeService: AdmobfreeService,
import { AdmobfreeService } from '../service/admobfree.service';
import { AdMobFree } from '@ionic-native/admob-free/ngx';
import { AdmobfreeService } from './service/admobfree.service';
  showBannerAd() {
    let bannerConfig: AdMobFreeBannerConfig = {
        isTesting: true, // Remove in production
        autoShow: true,
        bannerAtTop: false,
        id: "ca-app-pub-3940256099942544/6300978111"
    };
    this.admobFree.banner.config(bannerConfig);
  
    this.admobFree.banner.prepare().then(() => {
        // success
    }).catch(e => alert(e));
  }

  showInterstitialAd() {
    this.admobFree.interstitial.isReady().then(() => {
      this.admobFree.interstitial.show().then(() => {
      })
        .catch(e =>alert("show "+e));
    })
      .catch(e =>alert("isReady "+e));
  }
private admobFree: AdMobFree,
public platform: Platform
import {
  AdMobFree,
  AdMobFreeBannerConfig,
  AdMobFreeInterstitialConfig
} from '@ionic-native/admob-free/ngx';
import { Platform } from '@ionic/angular';
ionic generate service service/admobfree
if (window.location.pathname !== "/home") {
  this.router.navigateByUrl("home");
}
<ion-header>
    <ion-toolbar color="primary">
        <ion-title>About Us</ion-title>
        <!-- Menu Icon -->
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
		<!-- Back icon -->
        <ion-buttons slot="end">
            <ion-back-button defaultHref="home"></ion-back-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
ionic cordova build --release android
# location of keystore
storeFile=app.keystore

# Key alias
keyAlias=alias_name

# Store password
storePassword=Password1

# Key password
keyPassword=Password1
keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
ionic cordova build android --prod –-release
ionic cordova run android --device --livereload
ionic cordova run android --emulator --livereload
(click)="showInterstitialAd()"
showInterstitialAd() {
  this.admobFree.interstitial.isReady().then(() => {
    this.admobFree.interstitial.show().then(() => {
    })
      .catch(e =>alert("show "+e));
  })
    .catch(e =>alert("isReady "+e));
}
platform.ready().then(() => {
  this.admobFree.interstitial.config(this.interstitialConfig);
  this.admobFree.interstitial.prepare()
    .then(() => { }).catch(e => alert(e));
});

this.admobFree.on('admob.interstitial.events.CLOSE').subscribe(() => {
  this.admobFree.interstitial.prepare()
    .then(() => {}).catch(e => alert(e));
});
interstitialConfig: AdMobFreeInterstitialConfig = {
    isTesting: true, // Remove in production
    autoShow: false,
    id: "ca-app-pub-3940256099942544/1033173712"
};
import { Platform } from '@ionic/angular';
setTimeout(() => {
  this.showBannerAd();
}, 3000);
showBannerAd() {
  let bannerConfig: AdMobFreeBannerConfig = {
      isTesting: true, // Remove in production
      autoShow: true,
      bannerAtTop: false,
      id: "ca-app-pub-3940256099942544/6300978111"
  };
  this.admobFree.banner.config(bannerConfig);

  this.admobFree.banner.prepare().then(() => {
      // success
  }).catch(e => alert(e));
}
private admobFree: AdMobFree
import { AdMobFree, AdMobFreeBannerConfig,AdMobFreeInterstitialConfig, AdMobFreeRewardVideoConfig } from '@ionic-native/admob-free/ngx';
import { AdMobFree } from '@ionic-native/admob-free/ngx';
npm install @ionic-native/admob-free
ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-app-pub-2387490687776151~80XXXXXXX9"
ionic cordova resources android
ionic cordova platform add android
// Exit App on back button click from Home page
this.platform.backButton.subscribeWithPriority(0, () => {
  if (window.location.pathname == "/home") {
    navigator['app'].exitApp();
  }
});
// Set new Home page
this.router.navigateByUrl("home");
private router: Router
import { Router } from '@angular/router';
<ion-icon name="home" size="large"></ion-icon>
<ion-card>
    <ion-grid>
        <ion-row class="ion-text-center">
            <ion-col size="4" routerLink="/page1">
                <ion-icon name="home" color="danger" size="large"></ion-icon>
                <p>Home</p>
            </ion-col>
            <ion-col size="4" routerLink="/page2">
                <ion-icon name="bag-add" color="danger" size="large"></ion-icon>
                <p>About</p>
            </ion-col>
            <ion-col size="4" routerLink="/page3">
                <ion-icon name="chatbox" color="danger" size="large"></ion-icon>
                <p>Contact</p>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-card>
<ion-list>
  <ion-item>
      <ion-card-title>List title here</ion-card-title>
  </ion-item>
  <ion-item>
      <ion-label>Item One</ion-label>
  </ion-item>
  <ion-item>
      <ion-label>Item Two</ion-label>
  </ion-item>
  <ion-item>
      <ion-label>Item Three</ion-label>
  </ion-item>
  <ion-item>
      <ion-label>Item Four</ion-label>
  </ion-item>
</ion-list>
<audio src="/assets/audio/audio.mp3" controls></audio>
<div style="width: 100%; border-top: 1px solid #d4d4d4; margin: 8px 0;"></div>
<a href="https://google.com">Open Google</a>
<ion-button color="primary" routerLink="/page-name">Go To Page</ion-button>
<ion-img src="/assets/images/profile.jpg"></ion-img>
let input = document.getElementById('search');
input.addEventListener("keyup", search);

function search() {
    let inputVal = input.value;
    // input = input.toLowerCase();
    let li = document.getElementsByTagName('li');

    for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toLowerCase().includes(inputVal)) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
<p>
  This is come text content. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab cumque nemo facere id aut ut perferendis alias dolorum tenetur quo!  
</p>
<ion-card style="box-shadow: none;">
<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Card content goes here...
    Card content goes here...
    Card content goes here...
  </ion-card-content>
</ion-card>
HEIGHT : 1% ~ 1vh
WIDTH  : 1% ~ 1vw
npm install -g @ionic/cli
<ion-card>

      <iframe height="315" width="100%" src="https://www.youtube-nocookie.com/embed/ky91CTgmZ0g" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
  </ion-card>
Hello, 
I can work on your website.
I have experience in working with html, css, bootstrap, jquery, animations, javascript.
I already have developed many templates.
I deliver work with excellent code quality.
If you will work with me for a project then you will find me a long term partner. 
we can negotioate on price over chat.
thank you.
<figure>
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>
<label>[text* your-name placeholder "Your name"] </label>

<label>[email* your-email placeholder "Your email"] </label>

<label>[textarea* your-message placeholder "Your message"] </label>

[submit "Submit"]
@inject HttpClient httpClient

@if (States != null)
{

<select id="SearchStateId" name="stateId" @onchange="DoStuff" class="form-control1">
    <option>@InitialText</option>
    @foreach (var state in States)
    {
        <option value="@state.Name">@state.Name</option>
    }
</select>
}


@code {
[Parameter] public string InitialText { get; set; } = "Select State";
private KeyValue[] States;
private string selectedString { get; set; }
protected override async Task OnInitializedAsync()
{
    States = await httpClient.GetJsonAsync<KeyValue[]>("/sample-data/State.json");
}

private void DoStuff(ChangeEventArgs e)
{
    selectedString = e.Value.ToString();
    Console.WriteLine("It is definitely: " + selectedString);
}

public class KeyValue
{
    public int Id { get; set; }

    public string Name { get; set; }
}
}
<div tabindex="0">I need keyboard focus!</div>

<button accesskey="b">Important Button</button>

<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>
<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>
<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg" />
  <source src="audio/meow.ogg" type="audio/ogg" />
</audio>
First, make sure you have the Emmet extension installed. Once you have it, Ctrl + Shift + P to go to the command pallete and search “Emmet balance Outward”.
That should select all the inner HTML and the wrapping tag. If you’re looking to only select the inner HTML, then choose Emmet Balance Inward.
Now you’ll likely want to make a shortcut to one or both of these. File > Preferences > Keyboard Shortcuts. Search for the Emmet command and associate your key combination of choice.
<link rel="shortcut icon" type="img/png" href="assets/img/favicon.png">
<style>
.divider_wrapper {
    padding-bottom: 30px;
    padding-top: 60px;
}
.divider {
    position: relative;
    margin-top: 0px;
    height: 1px;
}
.div-transparent:before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    width: 90%;
    height: 1px;
    background-image: linear-gradient(to right,transparent,#aaa,transparent);
}
.div-arrow-down:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -7px;
    left: calc(50% - 7px);
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background-color: white;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
</style>
<div class="divider_wrapper">
  <div class="divider div-transparent div-arrow-down">
  </div>
</div>
<!-- Tab links -->
		<div class="tab">
			<button class="tablinks tab-font" onclick="openCity(event, 'footer')">Footer</button>
			<button class="tablinks tab-font" onclick="openCity(event, 'projects')">Projects</button>
			<button class="tablinks tab-font" onclick="openCity(event, 'disclaimer')">disclaimer</button>
		</div>

		<!-- Tab content -->
		<div id="projects" class="tabcontent">
			<h2>Projects</h2>
			<h3>Hey, If your reading this you obviously wanna find out about more of my projects</h3>
		</div>

		<div id="footer" class="tabcontent">
			<h3><a href="./index.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Home</strong></a></h3>
            <h3><a href="./pages/about.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>About</strong></a></h3>
			<h3><a href="./pages/projects.html" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Projects</strong></a></h3>
            <h3><a href="#" class="js-gps-track -link-title" data-gps-track="footer.click({ location: 0, link: 15})"><strong>Contact</strong></a></h3>
            <p class="copyright">&copy;2020 WHY?</p>
		</div>

		<div id="disclaimer" class="tabcontent">
			<h2>Disclaimer</h2>
			<p><strong>THIS IS JUST A JOKE!
                <br>
                <br>
                I dont truely think this of python, I think python is a great language and would love to learn,<br>
                all of the acusations above are comepletely false and should not be followed.<br>
                Please respect what i am doing and dont hate on the joke.</strong>
			</p>
		</div>
            
 <!-- CSS -->
 		<style>
              .-link {
    color: rgb(0, 0, 0);
    text-decoration: none;
}
  
.-link-title {
    color: #000000;
    text-decoration: none;
    padding-left: 5rem;
}

.tablinl {
    padding: 5px
}

.tab-font {
    font-weight: bold;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }
		</style>
<div class="container-fluid" style="background: #1f52a3;">
	<div class="row">
		<div class="col-2"></div>
		<div class="col-8">
			<a href="/205CDE/Assignment/home.php"><h1 style="text-align: center; color: #e6e8eb; margin: 20px 0;">U Chen Daily</h1></a>
		</div>
		<div class="col-2 d-flex justify-content-center align-items-center"><a href="/205CDE/Assignment/manageNews.php" target="_blank" class="btn btn-outline-light">LOGIN</a></div>
	</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="/205CDE/Assignment/home.php"><i class="fas fa-home" style="font-size: 30px; color: #1f52a3;"></i></a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item dropdown" style="margin: 0 15px;">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">News</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdown">
					<?php
						$newsCategoryArr = array(
						'All', 'Nation', 'World',
						'Sport', 'Entertainment',
						);
						foreach($newsCategoryArr as $newsType){
							echo "<a class=\"dropdown-item\" href=\"/205CDE/Assignment/news$newsType.php\" target=\"_blank\">$newsType</a>";
						}
					?>
				</div>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/aboutUs.php" target="_blank">About Us</a>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/contactUs.php" target="_blank">Contact Us</a>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/faqs.php" target="_blank">FAQs</a>
			</li>
			<!-- <li class="nav-item"> -->
			<!-- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> -->
			<!-- </li> -->
		</ul>
		<!-- <form class="form-inline my-2 my-lg-0"> -->
		<!-- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> -->
		<!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
		<!-- </form> -->
	</div>
</nav>
<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
	
    <!-- U Chen CSS -->
	<link rel="stylesheet" href="homeStyle.css">
	
	<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
	
	<!-- Font Awesome Icons -->
	<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<html lang="en">
	<head>
		<!--using external files-->
		<?php require('import.html') ?>
		
		<title>U Chen Daily | Admin</title>
		<script>
			
		</script>
	</head>
	<body>
		<!--using external files-->
		<?php require('header.html'); ?>
		<div class="container" style="margin: 20px;">
			<div class="row">
				<div class="col-sm"><h3 style="color: #1f52a3;">Manage News</h3></div>
			</div>
		</div>
		<div class="container-fluid bg-light" style="padding: 30px 10px;">
			<div class="row bg-light" style="margin: 0 35px;">
				<div class="col-6">
					<h5>All News</h5>
				</div>
				<div class="col-6 d-flex justify-content-end">
					<button type="button" class="btn btn-primary" style="background: #1f52a3;" data-toggle="modal" data-target="#addNewsModal"><i class="fas fa-plus" style="font-size: 20px;"></i> Add News</button>
				</div>
			</div>
			
			<!--add news modal START-->
			<!-- Modal -->
			<div class="modal fade bd-example-modal-lg" id="addNewsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">Add News</h5>
							<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>-->
						</div>
						<form action="/205CDE/Assignment/admin.php" method="post">
							<div class="modal-body">
								<div class="form-group">
									<label for="inputNewsTitle">News Title:</label>
									<input type="text" class="form-control" name="txtNewsTitle" id="inputNewsTitle" aria-describedby="emailHelp" placeholder="Enter news title">
								</div>
								<div class="form-group">
									<label for="selectNewsCategory">News Category:</label>
									<select class="form-control" name="selectNewsCategory" id="selectNewsCategory">
										<?php
											$newsCategoryArr = array(
											'--Select news category--' => "",
											'Nation' => 1,	'World' => 2,
											'Sport' => 3,	'Lifestyle' => 4,
											'Food' => 5,	'Tech' => 6,
											'Education' => 7
											);
											foreach($newsCategoryArr as $newsType => $newsNum){
												echo "<option value=\"$newsType\">$newsType</option>";
											}
										?>
									</select>
								</div>
								<div class="form-group">
									<label for="inputNewsDetails" class="col-form-label">News Details:</label>
									<textarea class="form-control" name="txtNewsDetails" id="inputNewsDetails" rows="10"></textarea>
								</div>
								
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
								<button type="submit" class="btn btn-primary" name="btnAddNews" style="background: #1f52a3;">Add</button>
								<input type="hidden" name="submitted" value="true"/>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!--add news modal END-->
			<!--connect & insert news into database START-->
			<?php			
				if (isset($_POST['submitted'])){
					//connect database
					$dbc = mysqli_connect('localhost', 'root', '');
					//select database
					mysqli_select_db($dbc, 'news');
					
					$problem = FALSE;
					
					if(!empty($_POST['txtNewsTitle']) && !empty($_POST['selectNewsCategory']) && !empty($_POST['txtNewsDetails'])){
						$newsTitle = trim($_POST['txtNewsTitle']);
						$newsDetails = trim($_POST['txtNewsDetails']);
						$newsCategory = trim($_POST['selectNewsCategory']);
						}else{
						echo '<p>Error! Please enter title and details select category!</p>';
						$problem = TRUE;
					}
					
					if(!$problem){
						$query = "INSERT INTO news (news_title, news_details, news_category, news_datetime) 
						VALUES ('$newsTitle', '$newsDetails', '$newsCategory', NOW())";
						if(mysqli_query($dbc, $query)){
							echo '<p>Added successfully!</p>';
							}else{
							echo '<p>Error! '.mysqli_error($dbc).'</p>';
							echo '<p>Query: '.$query.'</p>';
						}
					}
					mysqli_close($dbc);
				}
			?>
			<!--connect & insert news into database END-->
			<!--news table START-->
			<div class="card-deck" style="margin: 15px 50px;">
				<table class="table table-hover bg-light">
					<thead class="thead-light">
						<tr>
							<th scope="col">News ID</th>
							<th scope="col">News Datetime</th>
							<th scope="col">News Title</th>
							<th scope="col">News Details</th>
							<th scope="col">News Category</th>
							<th scope="col">Edit/Delete</th>
						</tr>
					</thead>
					<tbody>
						<!--select news from database START-->
						<?php
							$dbc = mysqli_connect('localhost', 'root', '');
							mysqli_select_db($dbc, 'news');
							
							$query = 'SELECT * FROM news ORDER BY news_id ASC';
							
							if($r = mysqli_query($dbc, $query)){
								while($row = mysqli_fetch_array($r)){
									echo "<tr>
									<th scope=\"row\">{$row['news_id']}</th>
									<td>{$row['news_datetime']}</td>
									<td>{$row['news_title']}</td>
									<td>{$row['news_details']}</td>
									<td>{$row['news_category']}</td>
									<td>
									<button type=\"button\" class=\"btn btn-info\"><i class=\"fas fa-edit\" style=\"font-size: 20px;\"></i></button>
									<button type=\"button\" class=\"btn btn-danger\"><i class=\"fas fa-trash\" style=\"font-size: 20px;\"></i></button>
									</td>
									</tr>";
								}
								}else{
								echo '<p>Error! '.mysqli_error($dbc).'</p>';
							}
							
							mysqli_close($dbc);
						?>
						<!--select news from database END-->
					</tbody>
				</table>
			</div>
			<!--news table END-->
		</div>
	</body>
</html>
border-radius: ArI ArD AbD AbI;
<button type="button" class="btn btn-primary">Blue</button>
<button type="button" class="btn btn-secondary">Grey</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-warning">Yellow</button>
<button type="button" class="btn btn-info">Ligth blue</button>
<button type="button" class="btn btn-light">White</button>
<button type="button" class="btn btn-dark">Black</button>

<button type="button" class="btn btn-link">White with blue text</button>
$sgbd=new mysqli("localhost", $user, $pass, "productos");
if (mysqli_connect_errno()){
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{
    echo "Connection successful";
}
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

list.insertAdjacentHTML('beforebegin', myDiv);
image.src = 'http://placekitten.com/200/300';
image.width = 250;
image.classList.add('cute');
image.alt = 'Cute Kitten';
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

beforeBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('beforebegin', tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('afterend', tempDiv);
  }
  setListener(tempDiv);
});
<style>
th, td {
    padding: 22px;}
    h2 {color:orange}
      body {background-color:White }
    legend   {color:orange}
    fieldset   {border: 2px solid green;}
    /*input {background-color: orange}*/
    /*input{ color: green }*/
    #place_order{
        float: right;
        background-color: orange;
        color: #ffffff;
        border-color: green;
    }
</style>

<table style="width:100%"></table>
	  <h2>Dado tea lunch special</h2>
	 <rt>
	  	<th>Monday to friday</th>
	</rt>	
	  <br>11am - 2pm
	 <br>$9.95 plus tax<br>
	 <rt>
	 	<th></th>
	 </rt>
	 <br>Include sandwich,snack,and drink<br>
	<fieldset>
        <legend>Order Information:</legend>
        Name:<input type="text"name="order_name"> <br>
        Here<input type="radio" name="order_option"><br>
        To go<input type="radio"name="order_option"><br>
  </fieldset>

  <fieldset>
            <legend>Sandwiches:</legend>
             <b>Monday</b>
             <br>
            Tommato<input type="radio" name="option1">
            <br>
             Chicken salad<input type="radio"name="option1">
             <br>
             <b>Tuesday</b>
             <br>
            Greak salad wrap<input type="radio" name="option2">
            <br>
            Toto wrap<input type="radio"name="option2">
            <br>
            <b>wednesday</b>
            <br>
            Red pepper hummas<input type="radio" name="option3">
            <br>
            Rosted turkey<input type="radio"name="option3">
            <br>
             <b>Thusday</b>
             <br>
            Carrot-ginger hummas wrap<input type="radio" name="option4">
            <br>
            Chicken salad<input type="radio"name="option4">
            <br>
            <b>Friday</b>
            <br>
             Dado Wrap<input type="radio" name="option5"> <br>
             Tuna salad<input type="radio"name="option5"> <br>
  </fieldset>


  <fieldset>
  	<legend>Snack:</legend>
    <b>Snack</b><br>
    Apple<input type="radio" name="order_option1"><br>
    Bannana<input type="radio"name="order_option1"><br>
    Potato chips<input type="radio"name="order_option1"><br>
  </fieldset>
<fieldset>
	<legend>Drinks:</legend>
	<b>Drinks</b><br>
	<select name="items" id="items">
	  <option value="Hot black tea-keemun">Hot black tea-keemun</option>
	  <option value="salad">salad</option>
	  <option value="burgar">burgar</option>
	  <option value="pizza">pizza</option>
	</select><br>
<input type="submit" id="place_order" value="Place Order"> 
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
    <!-- Primary Navigation Menu -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center">
                    <a href="{{ route('dashboard') }}">
                        <x-jet-application-mark class="block h-9 w-auto" />
                    </a>
                </div>

                <!-- Navigation Links -->
                <div class=" space-x-8 sm:-my-px sm:ml-10 sm:flex">
                    <x-jet-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
                        {{ __('Dashboard') }}
                    </x-jet-nav-link>
                </div>
            </div>

            <!-- Settings Dropdown -->
            <div class=" sm:flex sm:items-center sm:ml-6">
                <x-jet-dropdown align="right" width="48">
                    <x-slot name="trigger">
                         @if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
                            <button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out">
                                <img class="h-8 w-8 rounded-full object-cover" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
                            </button>
                         @else
                            <button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
                                <div>{{ Auth::user()->name }}</div>

                                <div class="ml-1">
                                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </button>
                        @endif
                    </x-slot>

                    <x-slot name="content">
                        <!-- Account Management -->
                        <div class="block px-4 py-2 text-xs text-gray-400">
                            {{ __('Manage Account') }}
                        </div>

                        <x-jet-dropdown-link href="{{ route('profile.show') }}">
                            {{ __('Profile') }}
                        </x-jet-dropdown-link>

                        @if (Laravel\Jetstream\Jetstream::hasApiFeatures())
                            <x-jet-dropdown-link href="{{ route('api-tokens.index') }}">
                                {{ __('API Tokens') }}
                            </x-jet-dropdown-link>
                        @endif

                        <div class="border-t border-gray-100"></div>

                        <!-- Team Management -->
                        @if (Laravel\Jetstream\Jetstream::hasTeamFeatures())
                            <div class="block px-4 py-2 text-xs text-gray-400">
                                {{ __('Manage Team') }}
                            </div>

                            <!-- Team Settings -->
                            <x-jet-dropdown-link href="{{ route('teams.show', Auth::user()->currentTeam->id) }}">
                                {{ __('Team Settings') }}
                            </x-jet-dropdown-link>

                            @can('create', Laravel\Jetstream\Jetstream::newTeamModel())
                                <x-jet-dropdown-link href="{{ route('teams.create') }}">
                                    {{ __('Create New Team') }}
                                </x-jet-dropdown-link>
                            @endcan

                            <div class="border-t border-gray-100"></div>

                            <!-- Team Switcher -->
                            <div class="block px-4 py-2 text-xs text-gray-400">
                                {{ __('Switch Teams') }}
                            </div>

                            @foreach (Auth::user()->allTeams() as $team)
                                <x-jet-switchable-team :team="$team" />
                            @endforeach

                            <div class="border-t border-gray-100"></div>
                        @endif

                        <!-- Authentication -->
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-jet-dropdown-link href="{{ route('logout') }}"
                                                onclick="event.preventDefault();
                                                            this.closest('form').submit();">
                                {{ __('Logout') }}
                            </x-jet-dropdown-link>
                        </form>
                    </x-slot>
                </x-jet-dropdown>
            </div>

            <!-- Hamburger -->
            <div class="-mr-2 flex items-center sm:hidden">
                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <x-jet-responsive-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
                {{ __('Dashboard') }}
            </x-jet-responsive-nav-link>
        </div>

        <!-- Responsive Settings Options -->
        <div class="pt-4 pb-1 border-t border-gray-200">
            <div class="flex items-center px-4">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
                </div>

                <div class="ml-3">
                    <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
                    <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
                </div>
            </div>

            <div class="mt-3 space-y-1">
                <!-- Account Management -->
                <x-jet-responsive-nav-link href="{{ route('profile.show') }}" :active="request()->routeIs('profile.show')">
                    {{ __('Profile') }}
                </x-jet-responsive-nav-link>

                @if (Laravel\Jetstream\Jetstream::hasApiFeatures())
                    <x-jet-responsive-nav-link href="{{ route('api-tokens.index') }}" :active="request()->routeIs('api-tokens.index')">
                        {{ __('API Tokens') }}
                    </x-jet-responsive-nav-link>
                @endif

                <!-- Authentication -->
                <form method="POST" action="{{ route('logout') }}">
                    @csrf

                    <x-jet-responsive-nav-link href="{{ route('logout') }}"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();">
                        {{ __('Logout') }}
                    </x-jet-responsive-nav-link>
                </form>

                <!-- Team Management -->
                @if (Laravel\Jetstream\Jetstream::hasTeamFeatures())
                    <div class="border-t border-gray-200"></div>

                    <div class="block px-4 py-2 text-xs text-gray-400">
                        {{ __('Manage Team') }}
                    </div>

                    <!-- Team Settings -->
                    <x-jet-responsive-nav-link href="{{ route('teams.show', Auth::user()->currentTeam->id) }}" :active="request()->routeIs('teams.show')">
                        {{ __('Team Settings') }}
                    </x-jet-responsive-nav-link>

                    <x-jet-responsive-nav-link href="{{ route('teams.create') }}" :active="request()->routeIs('teams.create')">
                        {{ __('Create New Team') }}
                    </x-jet-responsive-nav-link>

                    <div class="border-t border-gray-200"></div>

                    <!-- Team Switcher -->
                    <div class="block px-4 py-2 text-xs text-gray-400">
                        {{ __('Switch Teams') }}
                    </div>

                    @foreach (Auth::user()->allTeams() as $team)
                        <x-jet-switchable-team :team="$team" component="jet-responsive-nav-link" />
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</nav>
onsubmit="return false;"