Snippets Collections
.gelatine {
  animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}
export function TailwindIndicator() {
  if (process.env.NODE_ENV === "production") return null

  return (
    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
      <div className="block sm:hidden">xs</div>
      <div className="hidden sm:block md:hidden">sm</div>
      <div className="hidden md:block lg:hidden">md</div>
      <div className="hidden lg:block xl:hidden">lg</div>
      <div className="hidden xl:block 2xl:hidden">xl</div>
      <div className="hidden 2xl:block">2xl</div>
    </div>
  )
}
@media (max-width: 1024px) {
	.mobile-nav.wd-right {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: max-content !important;
		transform: translateY(-150%);
		pointer-events: none;
	}
	.mobile-nav.wd-opened {
		transform: translatey(70px);
		pointer-events: auto;
	}
	.wd-close-side.wd-fill.wd-close-side-opened {
		background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 54%), rgb(0 0 0 / 85%));
	}
	.site-mobile-menu li a {
		line-height: 1;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		min-height: 40px;
	}
	.icon-sub-menu {
		height: 40px;
		width: 40px;
		line-height: 40px;
	}
}
<link rel="stylesheet" href="//cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

<style>
	label {
		margin: 2.5% !important;
		/* margin-left: 2.5% !important; */
		justify-content: end;
	
	}
</style>


<div class="page-wrapper">
			<!--page-content-wrapper-->
			<div class="page-content-wrapper">
				<div class="page-content">

					<div class="card radius-15">
						<div class="card-body">
							<div class="card-title">
								<div class=" align-items-center">
								<div class="col-6"><h4 class="mb-0">Feedback Details</h4></div>
								<!-- <div class="col-6" align="right">
									 <a href="<?php echo base_url('admin/notice/create'); ?>" class="btn btn-primary">Create</a> -->
								<!-- </div> --> 
								</div>
							</div>
							<hr/>
							<div class="table-responsive ">
								<table id="gallerytable" class="table mb-0 table-bordered table-striped ">
									<thead class="bg-primary text-white text-center ">
										<tr class="text-white">
											<th scope="col" class="text-white">Reason for visit</th>
											<th scope="col" class="text-white">FIR registered</th>
											<th scope="col" class="text-white">Issue addressed</th>
											<th scope="col" class="text-white">Police officer name </th>
											<th scope="col" class="text-white">Served you better</th>
											<th scope="col" class="text-white">Rate Bandra Police Station</th>
											<th scope="col" class="text-white">Victim of crime</th>
											<th scope="col" class="text-white">Safe Bandra West area</th>
											<th scope="col" class="text-white">Rate overall performance</th>
											<th scope="col" class="text-white">We contact you</th>
											<!-- <th scope="col" class="text-white">12</th>
											<th scope="col" class="text-white">13</th>
											<th scope="col" class="text-white">14</th>
											<th scope="col" class="text-white">15</th>
											<th scope="col" class="text-white">16</th>  -->
											<!-- <th scope="col" class="text-white">17</th> -->
										</tr>
									</thead>
									<tbody>
										<?php 
										
										if(!empty($feedbacklist)) { foreach($feedbacklist as $feedback) {?>
										<tr class="text-center">
											<td><?php echo $feedback->f_reason_for_visit_police_station;?></td>
											<td><?php echo $feedback->f_fir_registered;?></td>
											<td><?php echo $feedback->f_issue_addressed;?></td>
											<td><?php echo $feedback->f_police_officer_name;?></td>
											<td><?php echo $feedback->f_served_you_better;?></td>
											<td><?php echo $feedback->f_rate_bandra_police_station;?></td>
											<td><?php echo $feedback->f_victim_of_a_crime;?></td>
											<td><?php echo $feedback->f_feel_safe_in_the_bandra_west;?></td>
											<td><?php echo $feedback->f_rate_of_overall_performance;?></td>
											<td><?php echo $feedback->f_contact;?></td>
										</tr>
										<?php }} ?>
									</tbody>
								</table>
							</div>
						</div>
					</div>

			</div>
		</div>
	</div>

	<!--Datatable-->
<script src="//cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>


<script type="text/javascript">
    $('#gallerytable').DataTable();
</script>

<script type="text/javascript">

   function delete_now(n_id){

   	//console.log(b_id);
   	   var url= "<?php echo base_url('admin/notice/delete?id=') ?>" + n_id;
       var r=confirm("Do you want to delete this?")
        if (r==true){
        	//console.log(url);
         window.location.href = url;
        }
        else{
        	return false;
        }
        
          
        
   }
</script>
html {
  font-size: 100%;
  line-height: 1.5;
}

main {
  padding: 1rlh; /* 🫶 */
}
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
:root {
  --main-bg-color: #f3f4f6;
  --title-color: #262626;
  --text-color: #525252;
  --font-family: "Arial", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--main-bg-color);
  font-family: var(--font-family);
}

.blog-header,
.blog-footer {
  text-align: center;
  padding: 1rem;
  background-color: var(--title-color);
  color: white;
}

.blog-post {
  container-type: inline-size;
  margin: 1rem;
  padding: 1rem;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  & .post-title {
    color: var(--title-color);
    margin: 0 0 1rem 0;
    text-wrap: balance;
    font-size: 1em;
  }

  & .post-content {
    color: var(--text-color);
  }
}

@container (min-inline-size: 500px) {
  .blog-post {
    padding: 1.5rem;

    & .post-title {
      font-size: 1.25em;
    }
  }
}
.swiper-container {

    width: 0%;

    height: 100vh;

}

​

.swiper-slide {

    background-color: #5e42ff;

    display: flex;

    align-items: center;
10
    justify-content: center;

}

​

.swiper-hero-progress {

    position: absolute;

    left: 0;

    bottom: px;

    width: 0;

    height: 3px;

    background: #FFF;
20
    z-index: 5;
#cursor {

  position: fixed;

  z-index: 9;

  left: 0;

  top: 0;

  pointer-events: none;

/*   will-change: transform; */

/*   mix-blend-mode: difference; */
9
}

​

@media (hover: hover) and (pointer: fine) {

  .cursor__circle {

    width: 64px;

    height: 64px;

    margin-top: -50%;

    margin-left: -50%;

    border-radius: 50%;

    border: solid 1px rgba(227, 222, 3, 0.64);
19
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),

      background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
/*=========

scrollbar

=========*/

​

.scroll__inner {

  background-color: #ffffff;

  padding: 0 0 px 0;

  overflow-x: scroll;

  -ms-overflow-style: none;

  /* IE, Edge 対応 */

  scrollbar-width: none;

  /* Firefox 対応 */

}

.scroll__inner::-webkit-scrollbar {

  /* Chrome, Safari 対応 */

  display: none;

}

.simplebar-scrollbar::before {

  background: #ffffff;
20
  border-radius: 0;

  height: 5px !important;

  margin-left: 2px;

  margin-top: 3px;

}
// Featured Thumbnail
function featured_thumbnail() { 
	ob_start(); ?>
	<div class="thumbnail-block">
		<?php $featured_img_url = get_the_post_thumbnail_url( get_the_ID(),'full'); ?>
		<div class="page-thumbnail" style="background-image: url('<?php echo $featured_img_url; ?>');"></div>
	</div>
	<?php return ob_get_clean();
}
add_shortcode ('featured_thumbnail','featured_thumbnail');
@media (max-width: 767px) {
    #socket .container {
        text-align: center;
    }

    #socket .social_bookmarks li,
    #socket .social_bookmarks,
    #socket .sub_menu_socket li,
    #socket .sub_menu_socket,
    #socket .copyright {
        float: none !important;
    }

    #socket .sub_menu_socket li,
    #socket .social_bookmarks li {
        display: inline-block;
    }

    #socket .social_bookmarks {
        margin: 0 0 5px 0;
    }

    #socket .sub_menu_socket {
        margin: 0 !important;
        height: 30px;
    }

    #footer .flex_column, .widget {
        margin-bottom: 0 !important;
    }
}
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'>
<style> 
  INPUT:checked + label {color: #00F;} 
</style>

<input id="theId" type="checkbox"><label for="theId"> The cat is here</label> 
<fieldset style="width:fit-content"><legend>Where is the Cat?</legend>
	<input id="cat_garden" name="cat_where" type="radio"><label for="cat_garden"> Garden</label> 
	<input id="cat_bed" name="cat_where" type="radio"><label for="cat_bed"> Bed</label> 
	<input id="cat_cushion" name="cat_where" type="radio"><label for="cat_cushion"> Cushion</label> 
</fieldset>
 //HTML





<div class="custom-mouse"></div>





//CSS


.custom-mouse{
    border: none;
    background-color: #fff;
    transform: translate(-50%, -100%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 0;
}



//JS


let customMouse = document.querySelector(".custom-mouse");
window.addEventListener("mousemove", function(details) {
   let xValue = details.clientX;
   let yValue = details.clientY;

   setTimeout(() => {
       customMouse.style.top = `${yValue}px`;
       customMouse.style.left = `${xValue}px`;
         
   }, 100);


});
.div{
left: calc(-50vw - -50%);
position: relative;
width: 100vw;
}
.expanding-div {
    width: 200px;
    overflow: hidden;
    max-height: 0; /* Initial max height */
    transition: max-height 0.5s ease; /* Animation transition property */
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.expanding-div:hover {
    max-height: 500px; /* Adjust the max height as needed */
}
 
HTML

 <nav>
      <ul>
          <li class="item">Home</li>
          <li class="item">Content</li>
          <li class="item">About</li>
          <li class="item">Contact Us</li>

      </ul>
  </nav>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="script.js"></script>


CSS


body{
    background-color: #fff;
    overflow: hidden;
}
.container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.item{
    color: grey;
    font-size: large;
    font-weight: bolder;
    cursor: pointer;
}


JS


let itemList = document.querySelectorAll(".item");


itemList.forEach(function (item, index) {

    let animation = gsap.to(item, {color: "black",x:3,y: -3, ease: "", duration:0.3, paused:true  })
    
    item.addEventListener("mouseenter", function() {
        animation.play()
    })
    item.addEventListener("mouseleave", function() {
        animation.reverse()
    })
})

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        p {
            color: black;
            font-family: Arial, sans-serif;
            font-style: normal;
            font-weight: normal;
            text-decoration: none;
        }
        h1 {
            padding-bottom: 1em;
        }
        h2 {
            padding-top: .75em;
            padding-bottom: .5em;
        }
        h3 {
            padding-top: .75em;
            padding-bottom: .5em;
        }
        table,
        tbody {
            vertical-align: top;
            overflow: visible;
        }
        html,
        body {
            /* this allows the children to inherit this style */
            line-height: 1.5rem;
            letter-spacing: 0.12rem;
            word-spacing: 0.16rem;
        }
        table,
        th,
        td {
            width: 100%;
            table-layout: fixed;
            white-space: pre-wrap;
            overflow-x: auto;
            scrollbar-color: #343B40;
            text-align: left;
            vertical-align: middle;
            border-bottom: 1px solid #DEE2E6;
            border-collapse: collapse;
            padding-top: 20px;
            padding-bottom: 15px;
            padding-left: 30px;
            padding-right: 30px;
        }
        table {
            table-layout: fixed;
        }
        th {
            height: 50px;
            background-color: #343B40;
            color: white;
            border: none;
            border-collapse: collapse;
        }
        tr:hover {
            background-color: #DEE2E6;
        }
        a {
            font-weight: bold;
        }

        hr {
            padding-bottom: 1em;
        }

        img {
            padding-bottom: 1.5em;
        }
    </style>
var number;
Console.WriteLine("Enter a number:");
number = Convert.ToInt32(Console.ReadLine());
if (IsPrime(number))
{
    Console.WriteLine("**" + number + " is a prime number**");
}
else
{
    Console.WriteLine("**" + number + " is not a prime number**");
}

public static bool IsPrime(int number)
{
    if (number <= 1) return false;
    if (number == 2) return true;
    if (number % 2 == 0) return false;
    var boundary = (int)Math.Floor(Math.Sqrt(number));
    for (int i = 3; i <= boundary; i += 2)
        if (number % i == 0)
            return false;
    return true;
}
Here's a guide on how to start developing poker software, outlining key steps and code structure:

1. Define the Scope of Your Project:

    Game Variants: Choose which poker variants you'll include (e.g., Texas Hold'em, Omaha, 5-Card Draw).
    Features: Decide on essential features like player accounts, gameplay, betting, tournaments, chat, and multi-platform compatibility.
    Target Platforms: Determine if you're developing for web, desktop, mobile, or a combination.

2. Choose Your Programming Language and Development Environment:

    Common Languages: Python, Java, C++, C#, and JavaScript are popular choices for game development.
    Development Environments: Select an IDE (Integrated Development Environment) like Visual Studio Code, PyCharm, or Eclipse for efficient coding.

3. Structure Your Code:

    Classes: Create classes for representing cards, decks, hands, players, game tables, and the game logic itself.
    Functions: Write functions to handle shuffling, dealing, betting, evaluating hands, and managing game flow.

4. Implement Core Functionalities:

    Card Deck: Create a class to represent a deck of cards, with methods for shuffling and dealing cards.
    Player Hand: Implement a class to hold a player's hand, with methods for evaluating hand strength.
    Game Logic: Write the core game logic, including betting rounds, hand comparisons, and pot management.

5. Design the User Interface (UI):

    Visual Design: Create visually appealing UI elements using graphics libraries or frameworks.
    User Interaction: Implement intuitive controls for players to interact with the game.

6. Test Thoroughly:

    Unit Testing: Test individual code units to ensure they function as intended.
    Integration Testing: Verify that different parts of the code work together seamlessly.
    User Testing: Gather feedback from real users to identify bugs and areas for improvement.

7. Deploy and Maintain:

    Deployment: Make your poker software available to users on your chosen platforms.
    Maintenance: Address any bugs or issues, and update the software with new features or improvements over time.
<div>
<style>

.field__item {
background-color: #ffffff;
}

.field__item {
padding: 2.5em;
}

.field__item {
margin: 3em;
}

.field__item {
 border-radius: 15px;
}

.field__item {
box-shadow: 5px;
}

</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi enim nunc faucibus a. Tortor id aliquet lectus proin nibh nisl condimentum. Vel turpis nunc eget lorem dolor sed viverra. At urna condimentum mattis pellentesque id nibh. Nec dui nunc mattis enim ut tellus elementum. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Ut tellus elementum sagittis vitae. Maecenas accumsan lacus vel facilisis volutpat est velit. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi.</p>

<center><img class="img-fluid rounded" src="/system/files/2023-11/danielle-get-baked.png" alt="Danielle standing next to a holiday display" height="500"/></center><figcaption><center><i>Danielle McInnis in the field with a holiday display and a big thumbs up.</i></center></figure>

<p>Non sodales neque sodales ut. Est velit egestas dui id ornare arcu odio ut sem. Ac ut consequat semper viverra nam. Fusce ut placerat orci nulla pellentesque dignissim enim sit. Posuere urna nec tincidunt praesent semper. Vivamus arcu felis bibendum ut tristique et. Donec massa sapien faucibus et molestie ac feugiat sed. Amet commodo nulla facilisi nullam. Orci sagittis eu volutpat odio facilisis mauris sit amet. Blandit aliquam etiam erat velit. Consequat interdum varius sit amet. Donec enim diam vulputate ut. Sagittis id consectetur purus ut. Velit dignissim sodales ut eu. Ac odio tempor orci dapibus ultrices in iaculis nunc.</p>

</div>
#container {
  --n:7;   /* number of item */
  --d:12s; /* duration */

  width: 200px;
  height: 200px;
  margin: 40px auto;
  border: 1px solid #000;
  display:grid;
  grid-template-columns:30px;
  grid-template-rows:30px;
  place-content: center;
  border-radius: 50%;
}
.item {
  grid-area:1/1;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background: #f00;
  animation: spin var(--d) linear infinite; 
  transform:rotate(0) translate(100px) rotate(0);
}
@keyframes spin {
  100% {
    transform:rotate(1turn) translate(100px) rotate(-1turn);
  }
}

.item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))}
.item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))}
.item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))}
.item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))}
.item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))}
.item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))}
.item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))}
.item:nth-child(8) {animation-delay:calc(-7*var(--d)/var(--n))}
.item:nth-child(9) {animation-delay:calc(-8*var(--d)/var(--n))}
/*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/
#container {
  --n:7;   /* number of item */
  --d:12s; /* duration */

  width: 200px;
  height: 200px;
  margin: 40px auto;
  border: 1px solid #000;
  display:grid;
  grid-template-columns:30px;
  grid-template-rows:30px;
  place-content: center;
  border-radius: 50%;
}
.item {
  grid-area:1/1;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background: #f00;
  animation: spin var(--d) linear infinite; 
  transform:rotate(0) translate(100px) rotate(0);
}
@keyframes spin {
  100% {
    transform:rotate(1turn) translate(100px) rotate(-1turn);
  }
}

.item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))}
.item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))}
.item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))}
.item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))}
.item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))}
.item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))}
.item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))}
.item:nth-child(8) {animation-delay:calc(-7*var(--d)/var(--n))}
.item:nth-child(9) {animation-delay:calc(-8*var(--d)/var(--n))}
/*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
:root {
    --theme--page_preview-padding: 0;
}
.notion-table-view{
    padding-left:0;
    padding-right:0;
}
.fullWidth .notion-frame .notion-scroller.vertical .notion-page-content>.notion-collection_view-block .notion-scroller div.notion-table-view, .fullWidth .notion-frame .notion-scroller.vertical .notion-page-content>.notion-collection_view-block>div[style*="padding-left"],
.fullWidth .notion-frame .notion-scroller.vertical .notion-page-content>.notion-collection_view-block .notion-scroller div.notion-gallery-view{
  padding-left:0!important;
  padding-right:0!important;
}
.enhancer--tweak-normalise_table_scroll .notion-collection-view-body .notion-table-view {
  width: 100% !important;
  padding-left: 0!important;
  padding-right: 0!important;
}
.layout.layout-wide{
  --margin-width: 30px!important;
}
.fullWidth .notion-frame .notion-scroller.vertical .notion-page-content>.notion-collection_view-block div[style*=left][style*="position: sticky"]{
  left: 0px !important;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Nunito+Sans:opsz@6..12&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    color: var(--text-color);
    font-family: 'Nunito Sans', sans-serif;
    user-select: none;
}

:root{
    /* --primary-color: #3498db; */
    --primary-color: #1e90ff;
    --secondary-color: #f5f5f5;
    --white:#fefefe;
    --dark:#303030;
    --text-color:#4a4a4a;
    --border:#eee;
    --border-focus:#bbb;
}

*::selection {
    background-color: var(--primary-color);
    color: var(--white);
}

*::-webkit-scrollbar {
    height: .5rem;
    width: 4px;
}

*::-webkit-scrollbar-track {
    /* background-color: var(--secondary-color); */
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 0;
}

html {
    /* font-size: 62.5%; */
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 10rem;
}
Certainly! The animation property in CSS is used to apply animations to elements on a webpage. Here is a basic example of how to use it:




.element {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}




In the above example, we define an animation called slide-in using the @keyframes rule. We then apply this animation to the .element class using the animation-name property. The animation-duration property specifies how long the animation should take, the animation-delay property adds a delay before the animation starts, the animation-iteration-count property specifies how many times the animation should repeat, and the animation-direction property specifies the direction of the animation.

Within the @keyframes rule, we define the different stages of the animation using percentage values. In this example, we start with the element translated to the left by 100% (transform: translateX(-100%)) and end with the element at its original position (transform: translateX(0)).

You can customize the animation by adjusting these properties and the @keyframes rule to achieve different effects.


//HTML

<div id="progress-bar"></div>



//CSS

#progress-bar {
  height: 5px;
  background-color: grey;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}




//JS

const progressBar = document.getElementById('progress-bar');

window.addEventListener('scroll', function() {
  const scrollTop = window.scrollY;
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  const progress = scrollTop / (documentHeight - windowHeight);
  progressBar.style.width = `${progress * 100}%`;
});

// ParentComponent.js:


import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [parameterFromChild, setParameterFromChild] = useState('');

  // Callback function to receive the parameter from the child
  const handleChildParameter = (parameter) => {
    setParameterFromChild(parameter);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      
      {/* Render ChildComponent and pass the callback function as a prop */}
      <ChildComponent onParameterChange={handleChildParameter} />

      {/* Display the parameter received from the child */}
      {parameterFromChild && (
        <p>Parameter received from child: {parameterFromChild}</p>
      )}
    </div>
  );
};

export default ParentComponent;




//ChildComponent.js:
import React, { useState } from 'react';

const ChildComponent = ({ onParameterChange }) => {
  const [childParameter, setChildParameter] = useState('');

  const handleButtonClick = () => {
    // Update the childParameter state
    setChildParameter('Hello from ChildComponent!');
    
    // Invoke the callback function in the parent with the parameter
    onParameterChange('Hello from ChildComponent!');
  };

  return (
    <div>
      <h2>Child Component</h2>

      <button onClick={handleButtonClick} className="bg-blue-500 text-white px-4 py-2">
        Click me
      </button>
    </div>
  );
};

export default ChildComponent;
.test {
    width: 200px; 
    height: 200px;
    background-color:skyblue;
    overflow-y: scroll;

    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}

.test::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 오페라, 엣지 */
}
.center-five-columns,
.center-seven-columns {
    display: flex;
    column-gap: 30px;
    row-gap: 50px;
    justify-content: center;
    flex-wrap: wrap;
}

.center-five-columns .flex_column,
.center-seven-columns .flex_column {
    width: 100% !important;
}

@media (min-width: 641px) {
    .center-seven-columns .flex_column,
    .center-five-columns .flex_column {
        width: calc(50% - 15px) !important;
    }
}

@media (min-width: 800px) {
    .center-seven-columns .flex_column,
    .center-five-columns .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}

@media (min-width: 1251px) {
    .center-seven-columns .flex_column {
        width: calc(14.28% - 25.72px) !important;
    }

    .center-five-columns .flex_column {
        width: calc(20% - 24px) !important;
    }
}

@media (max-width: 640px) {
    .center-seven-columns .flex_column,
    .center-five-columns .flex_column {
        width: 380px !important;
    }
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>flex yapı</title>
	<style type="text/css">
		.container{
			margin: auto;
			display: flex;
			width: 80%;
			flex-direction: column;
			height: 80%;
			position: relative;

		}
		.header{
			text-align: center;
			background-color: pink;
			width: 100%;
			border: 1px solid black;
			height: 25vh;
			margin-bottom: 5px;
		}
		.middleContainer{
			display:flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-evenly;
			flex-wrap: wrap;
		}
		.box{
			width: 30%;
			height: 25vh;
			background-image: url(https://r.resimlink.com/fe0sC.png);
			margin-bottom: 2px;
		}
		.footer{
			text-align: center;
			background-color: whitesmoke;
			width: 100%;
			border: 1px solid black;
			height: 15vh;
			margin-bottom: 5px;
			background-image: url(https://r.resimlink.com/KIZis6lGL.png);
		}
		
        .metin2 {
           position: absolute;
           top: 85%;
           left: 32%;
        }
        .deneme{
        	background-image: url(https://r.resimlink.com/WfpQin-wy4Y.png);
        }
        .başlık{
        	background-image: url(https://r.resimlink.com/KIZis6lGL.png);
        }
        .metin3 {
           position: absolute;
           top: 92%;
           left: 32%;  
        }
        .metin4 {
           position: absolute;
           top: 92%;
           left: 53%;  
        }
        .font{
        	position: absolute;
            top: 10%;
            left: 26%;
        	font-size:70px;
        	font-weight: bolder;
        	font-style: Math Sans Bold;
        }
	</style>
 
</head>
<body background="https://r.resimlink.com/rfYMb.png">

    <div class="container">
    	<div class="header">
    		  <div class="başlık" style="height: 100%; width: 100%;">
        <div class="font"><a>KAMP MALZEMELERİ</a></div>
        <a href="https://r.resimlink.com/sGwEMYp9.png">→ site logosu ←</a>
        </div>
    	</div>
    	<div class="middleContainer">
    		<div class="box"><img src="çadır.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="lamba.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="sandalye.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="bıçak.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="ocak.png" style="height: 100%; width: 100%;"></div>
    		<div class="box"><img src="masa.png" style="height: 100%; width: 100%;"></div>
        </div>
        <div class="footer"><img src="çerçeve.png" style="height: 100%; width: 100%;"></div>
        <div class="metin2"><a style="font-size:32px" href="https://www.youtube.com/@efeturda6627">→ YOUTUBE ←</a></div>
        <div class="metin3"><a style="font-size:32px" href="mailto:omerfaruksevci1726@gmail.com">→ GMAİL İÇİN ←</a></div>
        <div class="metin4"><a style="font-size:32px" href="https://www.instagram.com/umraniye75cmtal/">→ İNSTAGRAM  ←</a></div>
    </div>
</body>
</html>
const header = document.querySelector('header');
let lastScroll = 0;
const scrollThreshold = 10; 

window.addEventListener('scroll', () => {
    const currentScroll = window.scrollY;

    if (currentScroll > lastScroll && currentScroll > scrollThreshold) {
        header.classList.add('small');
    } else if (currentScroll === 0) {
        header.classList.remove('small');
    }

    lastScroll = currentScroll;
});

const hamburger = document.querySelector(".hamburger");
const navmenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    navmenu.classList.toggle("active");
});

document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navmenu.classList.remove("active");
}));
<!-- This tells you if your device is dark mode enabled or not. -->
<meta name=”color-scheme” content=”light dark”>
<meta name=”supported-color-schemes” content=”light dark”>
<style type=”text/css”>
:root {
Color-scheme: light dark;
supported-color-schemes:light dark;
}
</style>

/* Here you can adjust the colors of your brand’s preferred dark mode theme. */
@media (prefers-color-scheme: dark ) {
.body {
      background-color: #CCCCCC !important;
}
h1, h2, h3, td {
      color: #9ea1f9 !important;
      padding: 0px 0px 0px 0px !important;
}
}
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
.c-hero__title {
  max-width: 36rem;
  text-wrap: balance;
}
/* General Styles */
body {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

/* Carousel */
#carousel-container {
    width: 100%;
    overflow-x: hidden;
    background-color: rgba(255, 255, 255, 0);
    z-index: 920;
}

#carousel {
    white-space: nowrap;
    animation: scroll 40s linear infinite;
    margin-bottom: 20px;
    z-index: 921;
}

#carousel img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin-right: -5px;
}

/* Home Services */
.home-services {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: #515151;
    text-align: center;
    padding: 0;
}

.home-services a h2 {
    font-size: 15px;
    color: #ffffff;
    background-color: #515151;
    transition: color .5s ease, background-color .5s ease;
    padding: 20px 30px;
    border-radius: 200px;
    margin: 10px;
    border: 0;
}

.home-services a h2:hover {
    color: #ffffff;
    background-color: #4A1621;
}

/* Home Content */
.home-content {
    line-height: 25px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.home-item {
    display: flex;
    justify-content: space-between;
    background-color: #000000;
    align-items: center;
    transition: background-color 1s ease;
    border-radius: 200px;
    margin: 20px;
    cursor: pointer;
}

.home-item:hover {
    background-color: #515151;
}

.home-text {
    margin: 0 4vw 0 4vw;
    font-size: 16px;
}

.home-img img {
    width: 20vw;
    height: 100%;
}

.home-item ul {
    font-family: nunito;
    text-indent: 10px;
    color: white;
    line-height: 2vw;
    display: none;
}

.arrow img {
    width: 4vw;
    margin: 0 10vw;
    transform: translateX(0);
    transition: 2s ease;
}

.home-item:hover .arrow img {
    transform: translateX(30px);
}

.home-content h1,
.home-content h2 {
    color: white;
    white-space: nowrap;
}

/* Hero */
.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    z-index: 2;
    opacity: .4;
    transition: opacity 1s ease-in-out;
}

/* Hero Mobile */
@media (max-width: 900px) {
    .home-title h1 {
        display: none;
    }

    .hero-buttons {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 10px 0;
    }

    .hero-image {
        position: relative;
        width: 100%;
        height: auto;
    }

    .hero-image img {
        width: 100%;
        height: 500px;
        display: block;
        object-fit: cover;
    }

    .hero-content {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 20vh;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
        z-index: 1;
        width: 100%;
        justify-content: center;
    }

    .hero-content button {
        border-radius: 200px;
        border: none;
        padding: 15px;
        font-family: Montserrat;
        cursor: pointer;
        margin: 5px;
        background-color: #fff;
        transition: .5s ease;
        width: 60vw;
        font-size: 15px;
        line-height: 14px;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .hero-content button:hover {
        background-color: black;
        color: white;
    }
}
<body>
    <div class="hero-image slider">
        <img id="heroBackground" src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Background-scaled.jpg" alt="Hero Image">
    </div>

    <div class="hero-content">
        <div class="home-title">
            <h1>Danny Holman Media</h1>
        </div>

        <div class="hero-menu">
            <div class="hero-buttons">
                <a href="#web">
                    <button>Web Design & Development</button>
                </a>
                <a href="https://dannyholmanmedia.com/portfolio/">
                    <h2>View Portfolio >>></h2>
                </a>
            </div>

            <div class="hero-buttons">
                <a href="https://dannyholmanmedia.com/photo-portfolio/">
                    <button>Landscape & Travel Photography</button>
                </a>
                <a href="https://dannyholmanmedia.com/order-prints/">
                    <h2>Order Prints >>></h2>
                </a>
            </div>
        </div>
    </div>

    <div id="carousel-container">
        <div id="carousel">
            <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/DGH_Carousel.png" alt="Digital Media Service Icon">
        </div>
    </div>

    <div class="home-services" id="web">
        <a href="https://dannyholmanmedia.com/ux-portfolio/">
            <h2>UX / UI Design</h2>
        </a>
        <a href="https://dannyholmanmedia.com/webdev-portfolio/">
            <h2>Web Development</h2>
        </a>
        <a href="https://dannyholmanmedia.com/media-portfolio/#media">
            <h2>Media</h2>
        </a>
        <a href="https://dannyholmanmedia.com/photo-portfolio/">
            <h2>Photography</h2>
        </a>
    </div>

    <div class="home-content">
        <a href="https://dannyholmanmedia.com/ux-portfolio">
            <div class="home-item">
                <div class="home-text">
                    <h1>UX / UI Design</h1>
                    <h2>Concept to Design</h2>
                    <ul>
                        <li>• Case Studies</li>
                        <li>• Design Approach</li>
                        <li>• User Research</li>
                        <li>• Information Architecture</li>
                    </ul>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/1.png" alt="Description of the image">
                </div>
            </div>
        </a>

        <a href="https://dannyholmanmedia.com/webdev-portfolio">
            <div class="home-item">
                <div class="home-text">
                    <h1>Web Development</h1>
                    <h2>Design to Function</h2>
                    <ul>
                        <li>• HTML</li>
                        <li>• CSS</li>
                        <li>• JavaScript</li>
                        <li>• PHP</li>
                    </ul>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/2.png" alt="Description of the image">
                </div>
            </div>
        </a>

        <a href="https://dannyholmanmedia.com/media-portfolio">
            <div class="home-item">
                <div class="home-text">
                    <h1>Media</h1>
                    <h2>Digital Assets</h2>
                    <ul>
                        <li>• Video Production</li>
                        <li>• Graphic Design</li>
                        <li>• Document Design</li>
                        <li>• Data Visualization</li>
                    </ul>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/3.png" alt="Description of the image">
                </div>
            </div>
        </a>

        <a href="https://dannyholmanmedia.com/photo-portfolio/">
            <div class="home-item">
                <div class="home-text">
                    <h1>Photography</h1>
                    <h2>Landscape & Travel</h2>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/home-photo.png" alt="Description of the image">
                </div>
            </div>
        </a>
    </div>
</body>
*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
}
nav{
  background: #9600ff;
  height: 80px;
  width: 100%;
}
label.logo{
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}
nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
a.active,a:hover{
  background: #1b9bff;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
@media (max-width: 952px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #20124d;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #fff100;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(bg.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}
color: hsl(50deg, 100%, 50%);

/* Same */
color: hsla(50deg, 100%, 50% / 1)

color: hsl(50deg 100% 50% / .5);
.parent {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .child {
    align-self: center;
  }
}
<span class="counter-value active" data-count="100">100</span>+
if(SDB.App.exists('.sg-counter-ready')){
					$(document).ready(startCounterReady);
					flag = 1;

					function startCounterReady() {
						if ($('.sg-counter-ready').length > 0) {
							$('.sg-counter-ready').each(function () {
								var _current = $(this);
								var countDuration = 0;
								var toTop = _current.offset().top - window.innerHeight;
								if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) {
									_current.find('.counter-value').each(function () {
										var $this = $(this),
											countTo = $this.attr('data-count');
											countNum: $this.text();
										$({
										}).animate({
											countNum: countTo
										}, {
											duration: 1500,
											easing: 'swing',
											step: function (now) {
												$this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
											},
											complete: function () {
												$this.stop();
											}
										});

										$this.removeClass('active');
									});
									countDuration = 1;
								}
							});
						}
					}
				}
				if(SDB.App.exists('.sg-counter')){
					$(window).scroll(startCounter);
					flag = 1;

					function startCounter() {
						if ($('.sg-counter').length > 0) {
							$('.sg-counter').each(function () {
								var _current = $(this);
								var countDuration = 0;
								var toTop = _current.offset().top - window.innerHeight;
								if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) {
									_current.find('.counter-value').each(function () {
										var $this = $(this),
											countTo = $this.attr('data-count');
											countNum: $this.text();
										$({
										}).animate({
											countNum: countTo
										}, {
											duration: 3000,
											easing: 'swing',
											step: function (now) {
												$this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
											},
											complete: function () {
												$this.stop();
											}
										});

										$this.removeClass('active');
									});
									countDuration = 1;
								}
							});
						}
					}
				}
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function helloworld(){
            document.write("hello world");
        }
    </script>
    <form>
        <input type="submit" onclick = helloworld()>
    </form>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function validateform(){
            var name=document.getElementById("name").value;
            var roll=document.getElementById("roll").value;
            if(name==="" || roll===""){
                alert("name and roll required");
                return false
            }
            return true;
            
        }
    </script>

</head>
<body>
    <form >
        <label for ="name">Name</label>
        <input type="txt" id="name">
        <label for ="roll" >roll</label>
        <input type="number" id ="roll">
        <input type="submit"onclick=validateform());
    </form>
    
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
  <style>
    body {
      background-color: #b0ca9e;
      font-size: 16px;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    form {
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-bottom: 16px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      background-color: #4caf50;
      color: #fff;
      cursor: pointer;
    }
  </style>
  <script>
    function validateForm() {
      var name = document.forms["registrationForm"]["name"].value;
      var username = document.forms["registrationForm"]["username"].value;
      var password = document.forms["registrationForm"]["password"].value;
      var confirmPassword = document.forms["registrationForm"]["confirmPassword"].value;

      if (name === "" || username === "" || password === "" || confirmPassword === "") {
        alert("All fields must be filled out");
        return false;
      }

      if (username.length < 6) {
        alert("Username should be at least 6 characters");
        return false;
      }

      if (password !== confirmPassword) {
        alert("Passwords do not match");
        return false;
      }

      return true;
    }
  </script>
</head>
<body>
  <form name="registrationForm" onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" required>

    <input type="submit" value="Register">
  </form>
</body>
</html>
const photos = document.querySelectorAll('.photo');

function enlargeImg(element) {
    const imgElement = element.querySelector('img');
    const portfolioText = element.querySelector('.portfolio-text');

    imgElement.classList.add('enlarged');
    portfolioText.style.display = 'none';
}

function resetImg(element) {
    const imgElement = element.querySelector('img');
    const portfolioText = element.querySelector('.portfolio-text');

    imgElement.classList.remove('enlarged');
    portfolioText.style.display = 'block';
}

photos.forEach(photo => {
    photo.addEventListener('click', () => {
        enlargeImg(photo);
    });

    document.addEventListener('click', event => {
        if (!photo.contains(event.target)) {
            resetImg(photo);
        }
    });
});
* {
    padding: 0;
    margin: 0;
}

.portfolio-grid-container {
    max-width: 90vw;
    width: 95%;
    margin: auto;
    padding: 30px;
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.photo {
    position: relative;
    cursor: pointer;
}

.photo img {
    width: 100%;
    height: 100%;
    border-radius: 1px;
    filter: brightness(100%);
    border: none;
    animation: fadeIn 1s;
    transition: filter 0.5s ease, border 1s ease, width 0.5s ease, height 0.5s ease, animation 0.8s ease-in-out;
}

.photo img.enlarged {
    max-width: 90vw;
    max-height: 700px;
    margin-top: 60px !important;
    margin-bottom: 90px;
    width: auto;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 995;
    filter: brightness(100%) !important;
    background-color: rgba(255, 255, 255, 0.482);
    border: 30px solid rgba(255, 255, 255, 0.363);
    animation: fadeIn 1s;
}

.photo.enlarged:hover .portfolio-text {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.photo:hover .portfolio-text {
    opacity: 1;
    cursor: pointer;
}

.photo:hover img {
    filter: brightness(80%);
}

.portfolio-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 994 !important;
}

.portfolio-text h2 {
    font-family: 'Julius Sans One';
    color: white;
    font-size: 30px;
    font-weight: 700;
}

.portfolio-text h3 {
    font-family: 'Nunito';
    color: white;
    font-weight: light;
    font-size: 15px;
}

@media (max-width: 1380px) {
    .photo-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 965px) {
    .photo-gallery {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
    }
}
<?php get_header(); ?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/portfolio.css">
    <?php wp_head(); ?>
</head>

<body>
    <div class="overlay"></div>
    <h1 class="page-title">Photography Portfolio</h1>
    <div class="portfolio-grid-container">
        <div class="photo-gallery">
            <?php
            $portfolio_query = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => -1));

            if ($portfolio_query->have_posts()) :
                $count = 0;

                while ($portfolio_query->have_posts()) : $portfolio_query->the_post();
                    $image_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
                    $location = get_the_content();

                    if ($count % 7 === 0) {
                        echo '<div class="column">';
                    }
                    ?>
                    <div class="photo">
                        <img src="<?php echo esc_url($image_url); ?>" onclick="enlargeImg(this)" alt="">
                        <div class="portfolio-text">
                            <?php echo wp_kses_post($location); ?>
                        </div>
                    </div>
                    <?php
                    $count++;

                    if ($count % 7 === 0) {
                        echo '</div>';
                    }
                endwhile;

                if ($count % 7 !== 0) {
                    echo '</div>';
                }

                wp_reset_postdata();
            else :
                echo 'No portfolio items found.';
            endif;
            ?>
        </div>
    </div>
</body>

<?php
/*
Template Name: Photography Portfolio
*/
$portfolio_query = new WP_Query(array(
    'post_type' => 'portfolio',
    'posts_per_page' => -1,
));

if ($portfolio_query->have_posts()) :
    while ($portfolio_query->have_posts()) :
        $portfolio_query->the_post();
    endwhile;
    wp_reset_postdata();
else :
    echo 'No portfolio items found.';
endif;

get_footer(); ?>
    const images = [
        "https://dannyholmanmedia.com/wp-content/uploads/2023/11/DGH_Carousel.png",
    
    ];

    const carousel = document.getElementById("carousel");

    images.forEach((imageUrl) => {
        const img = document.createElement("img");
        img.src = imageUrl;
        carousel.appendChild(img.cloneNode(true));
    });


 const slideshowImages = [
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-8.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio_2023-5.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-12.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-5.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio_2023-2.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-21.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-16.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Background-scaled.jpg",


];

const heroBackground = document.getElementById("heroBackground");
let currentImageIndex = 0;

function updateHeroBackground() {
    heroBackground.style.opacity = .0;

    // After a short delay, update the image source and fade in
    setTimeout(() => {
        heroBackground.src = slideshowImages[currentImageIndex];
        heroBackground.style.opacity = .4;
    }, 1000);

    currentImageIndex = (currentImageIndex + 1) % slideshowImages.length;
}

setInterval(updateHeroBackground, 5000);
body {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.nav-menu .cart-icon {
    display: inline-block;
    background: url('https://dannyholmanmedia.com/wp-content/uploads/2023/11/Icons-1.png') no-repeat;
    width: 30px;
    height: 30px;
    background-size: contain;
    text-indent: 35px;
    font-family: 'montserrat';
    font-weight: 700;
}

header {
    position: fixed;
    height: 140px;
    transition: 0.5s ease;
    width: 100%;
    top: 0px;
    background-color: black;
    padding-top: 0px;
    z-index: 999;
    padding-bottom: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    align-items: center;
}

header #site-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

header #header-logo {
    max-width: 100%;
    width: 150px;
    height: auto;
    padding-left: 0px;
    transition: width 0.5s ease;
    padding-top: 10px;
}

header.small {
    height: 50px;
    background-color: #515151;
}

header.small img {
    width: 10vw;
}

header.small #site-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

header.small #header-logo {
    max-width: 100%;
    width: 60px;
    height: auto;
    padding-left: 0px;
}

@media (max-width: 900px) {
    header {
        position: fixed;
        top: 0px;
        height: 130px;
        transition: 0.5s ease;
    }

    header.small {
        position: fixed;
        top: 0px;
        height: 90px;
    }

    header.small #site-logo {
        display: flex;
        align-items: center;
        height: 100%;
    }

    header.small #header-logo {
        max-width: 100%;
        width: 90px;
        height: auto;
        padding-left: 0px;
    }
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    color: white;
    text-decoration: none;
    position: center;
}

.navbar {
    text-align: center;
    font-family: 'Julius Sans One', sans-serif;
}

#site-menu {
    justify-content: center;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    font-family: 'Julius Sans One', sans-serif;
    white-space: nowrap;
    align-items: center;
}

.nav-menu li {
    position: relative;
    margin: 5px 3vw;
    font-size: 15px;
}

.nav-menu a::before {
    content: "";
    position: absolute;
    width: 0;
    height: 4px;
    background-color: transparent;
    bottom: -6px;
    left: 0;
    transform-origin: left;
    transition: width 0.6s ease;
}

.nav-menu a:hover::before {
    width: 100%;
    transform: translateX(0);
    background-color: #4A1521;
}

.nav-link {
    transition: 0.3s ease;
}

.nav-link.hover {
    text-decoration: underline;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: absolute;
    z-index: 999;
    align-items: center;
    padding-bottom: 30px;
}

.bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px;
    transition: all 0.3s ease-in-out;
    background-color: white;
    border-radius: 300px;
}

@media (max-width: 900px) {
    .hamburger {
        display: block;
        right: 20px;
        top: 20px;
    }
}

.bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px;
    transition: all 0.3s ease-in-out;
    background-color: white;
    border-radius: 300px;
}

.page-title {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    animation: fadeIn 4s ease-out;
    display: flex;
    justify-content: center;
    font-size: 60px;
    padding-bottom: 60px;
}

.contact-content {
    padding-left: 300px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    #header-logo {
        position: sticky;
        margin: 0;
        align-items: center;
        display: flex;
        flex-direction: row;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        position: relative;
        z-index: 999;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(315deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-315deg);
    }

    .nav-menu a {
        position: relative;
        padding: 20px;
        text-decoration: none !important;
        transition: color 0.3s ease;
        font-size: 35px;
    }

    .nav-menu a::before {
        content: "";
        position: absolute;
        width: 0;
        height: 4px;
        background-color: transparent;
        bottom: -6px;
        transform: translateX(-50%) translateY(50%);
        transform-origin: left;
        transition: width 0.3s ease;
    }

    .nav-menu a:hover {
        color: #000000 !important;
    }

    .nav-menu a:hover::before {
        width: 100%;
        transform: translateX(-50%) translateY(50%);
        background-color: transparent;
    }

    .nav-menu {
        position: fixed;
        right: -200%;
        top: 0;
        gap: 0;
        flex-direction: column;
        width: 100%;
        height: 100%;
        text-align: center;
        color: black;
        transition: right 0.5s ease-in-out;
        background: #4a1521
<header>
    <div id="site-logo">
        <a href="<?php echo esc_url(home_url('/')); ?>">
            <img id="header-logo" src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/DGH-Media-Logo_2024.png" alt="Turn this into a logo">
        </a>
    </div>

    <div id="site-menu">
        <nav class="navbar">
            <ul class="nav-menu">
                <li class="nav-item"><a href="https://dannyholmanmedia.com/about" class="nav-link">About</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/portfolio" class="nav-link">Portfolio</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/photo-portfolio" class="nav-link">Photography</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/order-prints" class="nav-link">Order Prints</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/contact" class="nav-link">Contact</a></li>

                <li class="nav-item">
                    <a href="<?php echo esc_url(wc_get_cart_url()); ?>" class="nav-link cart-icon">
                        <?php
                        $cart_count = WC()->cart->get_cart_contents_count();
                        if ($cart_count > 0) {
                            echo '(' . esc_html($cart_count) . ')';
                        }
                        ?>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
    </div>
</header>
<!DOCTYPE html>
<html>
<head>
    <title>Table with Flip Cards</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="cards">
        <table id="SDGtop">
            <tr>
                <td>
                    <a href="#SDG3">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG3-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-3.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG7">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG7-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-7.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG8">
                        <div id="flipcard" class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG8-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-8.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG10">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG10-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-10.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#SDG11">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG11-ICON.svg" width="300" height="300">
                                </div>
                                <div class "flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-11.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG12">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG12-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-12.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG13">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG13-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-13.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG14">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG14-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-14.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>SDG 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="SDG3">
        <img class="img3" src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG3-ICON.svg" width="2000" height="2000" alt="SDG 3">
        <div class="text3" style="text-align: left;">
            <h2><strong>SDG 3: Good Health and Well-being</strong></h2>
            <p style="color: black;"><strong>Ensure healthy lives and promote well-being for all at all ages</strong></p>
            <p style="color: black; font-size: 8vw;">
                Phasing out mercury-ladened fluorescent lamps will help to achieve
                <a href="https://sdgs.un.org/goals/goal3">objective 3.9</a>
                which seeks to substantially reduce the number of deaths and illnesses from hazardous chemicals and air, water and soil pollution and contamination.
            </p>
        </div>
    </div>
</body>
</html>
.cards {
    align-items: center;
    max-width: none;
    padding-left: 30px;
}

table {
    border-collapse: collapse;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    align-items: center;
}

td {
    border: 20px solid white;
    padding: 0;
    margin: auto;
}

.flip-card {
    background-color: white !important;
    border: 1px solid white;
    height: 300px;
    perspective: 1000px;
    width: auto;
    max-width: 20vw !important;
}

.flip-card-inner {
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    width: 100%;
    max-width: 20vw;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    transform-origin: center !important;
}

.flip-card-front,
.flip-card-back {
    backface-visibility: hidden;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.flip-card-front {
    background-color: white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.flip-card-back {
    color: #000000;
    transform: rotateY(180deg);
    display: auto;
    align-items: center;
    justify-content: auto;
}

h5,
p {
    margin: 20px;
    color: #FFFFFF;
}

@media (min-width: 1541px) {
    .flip-card {
        width: 15vw;
    }
    .cards {
        padding-left: 100px;
    }
}

.img3 {
    max-width: 300px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-50px);
    transition: all 1.5s ease-out;
    opacity: 0;
    margin-left: 200px;
    margin-right: 20px;
}

.text3 {
    color: black;
    opacity: 0;
    transition: all 1.5s ease-out;
    transform: translateX(50px);
    text-align: left;
    font-size: 18px;
    margin-left: 20px;
    margin-right: 20px;
}

.animate {
    opacity: 1;
    transform: translateX(0);
}

#SDG3 {
    display: flex;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media (min-width: 1593px) {
    #SDG3 {
        max-width: 80vw;
        padding-left: 200px;
    }
}

@media (max-width: 1050px) {
    .text3 {
        padding-top: 30px;
        transform: translateX(0);
        max-width: 70%;
        text-align: center;
        display: block;
        margin-left: 50px;
        margin-right: 50px;
    }
    .img3 {
        transform: translateX(0);
        max-width: 300px;
        height: auto;
        display: block;
        margin-left: 50px;
        margin-right: 50px;
    }

    #SDG3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
.floor-fade {

background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);

}
.text-box {

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

display: inline;

padding: 10px;

}
.darken {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(YOUR IMAGE HERE);

}
<html>

<body>
    <div class="dark relative min-h-screen transition-all ease-out" id="parent">
        <label for="check" class="mx-auto mt-4 block w-fit border px-4 py-2">
            <span>dark</span>
            <input type="checkbox" class="hidden" id="check" onclick="document.getElementById('parent').classList.toggle('dark')" />
        </label>
        <div class="absolute left-1/2 top-1/2 mx-auto max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border p-4 shadow-xl">
            <h1 class="mb-2 border-b-2 border-indigo-400 pb-1 text-center text-xl">Lorem ipsum dolor sit amet.</h1>
            <div>
                <p class="text-emerald-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, illum rem.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam molestias laborum odio.</p>
            </div>
        </div>
    </div>
</body>

</html>
table {
    border-collapse: separate;
    border-spacing: 0 1em;
}
/* Mobile */
@media (max-width: 480px) { // styles
}
/* Extra small devices */
@media (min-width: 481px) and (max-width: 767px) { // styles
}
/* Small tablets */
@media (min-width: 768px) and (max-width: 991px) { // styles
}
/* Large tablets/laptops */
@media (min-width: 992px) and (max-width: 1199px) { // styles
}
/* Desktops */
@media (min-width: 1200px) and (max-width: 1919px) { // styles
}
/* Extra large screens */
@media (min-width: 1920px) {
// styles
}
1.To check which Git credentials are configured in your system, you can use the following command in the terminal:

```bash
git config --list
```

2. To permanently remove the user.email and user.name settings from your Git configuration, you can use the following commands in the terminal:

```bash
git config --global --unset user.email
git config --global --unset user.name
```

3. Then run the git config --list command to check your Git configuration, the output will not include the user.email and user.name settings.

export enum ThemeOptions {
  Red = 'red',
}
  
export enum ThemeModes {
  Light = 'light-theme',
  Dark = 'dark-theme',
}
  
themeOptions: ThemeOption[] = [
    {
      text: 'Red',
      value: ThemeOptions.Red,
    },
];
  
themeChanged() { // Theme color changed
    document.body.className = '';
    const className = this.activeTheme.value + '-' + this.themeMode;
    this.themeService.switchTheme(className);
}

themeModeToggled() { // Theme mode changed: Light / Dark
    document.body.className = '';
    if (this.themeMode === ThemeModes.Light) {
      this.themeMode = ThemeModes.Dark;
    } else {
      this.themeMode = ThemeModes.Light;
    }

    const className = this.activeTheme.value + '-' + this.themeMode;
    this.themeService.switchTheme(className);
}
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  switchTheme(theme: string) {
    let themeLink = this.document.getElementById(
      'app-theme'
    ) as HTMLLinkElement;

    if (themeLink) {
      themeLink.href = theme + '.css';
    }
  }
}
<link id="app-theme" rel="stylesheet" type="text/css" href="red-light.css"/>
{
  "input": "src/assets/primeng-theme/themes/mytheme/custom-themes/_red-light-theme.scss",
  "bundleName": "red-light-theme",
  "inject": false
},
{
  "input": "src/assets/primeng-theme/themes/mytheme/custom-themes/_red-dark-theme.scss",
  "bundleName": "red-dark-theme",
  "inject": false
},
.text{
    color: var(--black);
}
:root{
    --black: #000;
    --white: #fff;
}

@media (prefers-color-scheme: dark){
    :root{
        --black: #fff;
        --white: #000;
    }
}
<style>
    .parent>*{
    grid-area:1/1;
    }
</style>
<div class="parent grid max-w-[350px] rounded-md outline">
    <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" />
    <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div>
    <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1>
</div>
<style>
    .parent>*{
    grid-area:1/1;
    }
</style>
<div class="parent grid max-w-[350px] rounded-md outline">
    <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" />
    <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div>
    <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1>
</div>
/*!
 *  replaceme.js - text rotating component in vanilla JavaScript
 *  @version 1.1.0
 *  @author Adrian Klimek
 *  @link https://adrianklimek.github.io/replaceme/
 *  @copyright Addrian Klimek 2016
 *  @license MIT
 */
!function(a,b){"use strict";function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function d(){"function"==typeof b&&b.fn.extend({ReplaceMe:function(a){return this.each(function(){new e(this,a)})}})}function e(a,b){var d={animation:"animated fadeIn",speed:2e3,separator:",",hoverStop:!1,clickChange:!1,loopCount:"infinite",autoRun:!0,onInit:!1,onChange:!1,onComplete:!1};if("object"==typeof b?this.options=c(d,b):this.options=d,"undefined"==typeof a)throw new Error('ReplaceMe [constructor]: "element" parameter is required');if("object"==typeof a)this.element=a;else{if("string"!=typeof a)throw new Error('ReplaceMe [constructor]: wrong "element" parameter');this.element=document.querySelector(a)}this.init()}e.prototype.init=function(){"function"==typeof this.options.onInit&&this.options.onInit(),this.words=this.escapeHTML(this.element.innerHTML).split(this.options.separator),this.count=this.words.length,this.position=this.loopCount=0,this.running=!1,this.bindAll(),this.options.autoRun===!0&&this.start()},e.prototype.bindAll=function(){this.options.hoverStop===!0&&(this.element.addEventListener("mouseover",this.pause.bind(this)),this.element.addEventListener("mouseout",this.start.bind(this))),this.options.clickChange===!0&&this.element.addEventListener("click",this.change.bind(this))},e.prototype.changeAnimation=function(){this.change(),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.start=function(){this.running!==!0&&(this.running=!0,this.changeWord(this.words[this.position]),this.position++),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.change=function(){return this.position>this.count-1&&(this.position=0,this.loopCount++,this.loopCount>=this.options.loopCount)?void this.stop():(this.changeWord(this.words[this.position]),this.position++,void("function"==typeof this.options.onChange&&this.options.onChange()))},e.prototype.stop=function(){this.running=!1,this.position=this.loopCount=0,this.pause(),"function"==typeof this.options.onComplete&&this.options.onComplete()},e.prototype.pause=function(){clearTimeout(this.loop)},e.prototype.changeWord=function(a){this.element.innerHTML='<span class="'+this.options.animation+'" style="display:inline-block;">'+a+"</span>"},e.prototype.escapeHTML=function(a){var b=/<\/?\w+\s*[^>]*>/g;return b.test(a)===!0?a.replace(b,""):a},a.ReplaceMe=e,d()}(window,window.jQuery);
<div>
    <div class="sticky top-0 flex h-12 w-full items-center bg-black">
        <input type="checkbox" class="peer hidden" id="a" />
        <label for="a" class="select-none border px-4 py-2 text-white"> ☰ </label>

        <!-- Sidebar -->
        <div class="fixed inset-y-0 left-0 mt-12 w-64 -translate-x-full transform bg-gray-800 px-4 transition-transform duration-300 ease-in-out peer-checked:translate-x-0">
            <div class="flex h-full flex-col justify-between gap-4">
                <div class="border border-emerald-500">
                    <h1 class="text-2xl leading-loose text-white">Logo</h1>
                </div>
                <div class="overflow-y-auto border border-orange-500">
                    <!-- Links -->
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 1</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 2</a>
                    <div class="group">
                        <div class="relative">
                            <a href="#" class="group block py-2 text-white hover:bg-gray-700">
                                Link 3
                                <span class="absolute right-4 top-1/2 -translate-y-1/2 transform text-white transition-transform group-hover:rotate-180">▼</span>
                            </a>
                        </div>
                        <div class="mt-2 hidden space-y-2 pl-4 group-hover:flex group-hover:flex-col">
                            <a href="#" class="text-white">Link 3.1</a>
                            <a href="#" class="text-white">Link 3.2</a>
                        </div>
                    </div>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                </div>
                <!-- Settings -->
                <div class="border border-lime-500"><button class="block py-2 text-white hover:bg-gray-700">Settings</button></div>
            </div>
        </div>
    </div>
    <!-- Main Content -->
    <div class="flex-grow bg-gray-100 p-4">
        <!-- Your Main Content Goes Here -->
        <p>....</p>
    </div>
</div>
function incrementStats() {
    const counters = document.querySelectorAll('.counter');

    counters.forEach((counter) => {
        counter.innerText = 0;

        const updateCounter = () => {
            const target = +counter.getAttribute('data-target'); // the "+" here casts the returned text to a number
            const c = +counter.innerText;
            const increment = target / 200;

            if (c < target) {
                counter.innerText = Math.ceil(c + increment);
                setTimeout(updateCounter, 1);
                // here the function is calling itself until "c"
                // reaches the "data-target", making it recursive
            } else {
                counter.innerText = target;
            }
        };

        updateCounter();
    });
}

document.addEventListener('DOMContentLoaded', incrementStats);
// copy paste react
return (
<>
<style>
{`
.animated-text {
            position: relative;
            display: inline-block;
            text-decoration: none;}

.animated-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: white;
            transform-origin: 0% 50%;
            transform: scaleX(0);
            transition: transform 0.3s ease;}

.wrapper:hover .animated-text::after, .wrapper:hover .animated-text {
            transform: scaleX(1);}

//or (removing redundant, see if it works)
.wrapper:hover .animated-text1::after{
            transform: scaleX(1);}
 `}
<style>
<button className="wrapper">
<p className="animated-text">click</p>
</button>
</>
)
// copy paste for react 
return (
<>
    <style>{`
        .animated-text {
            position: relative;
            display: inline-block;
            text-decoration: none;
        }

        .animated-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: blue;
            transform-origin: 0% 50%;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .animated-text:hover::after {
            transform: scaleX(1);
        }
    `}
</style>

    <p class="animated-text">Hover over this text to animate the underline.</p>

</>
)
selector input.jet-search-filter__input{
  
    background-image: url("https://desenvolvimento.pinaculodigital.com.br/andav/wp-content/uploads/2023/10/Vector.svg");
    background-repeat: no-repeat;
    background-position: 24px;
    padding-left: 52px !important;
    
}
selector input.jet-search-filter__input:focus-visible {
    outline: 1px solid #F47E54!important;
}
<body>
   <h2>About</h2>
   <p>
     <!-- Just add text decoration style:None -->
      Our <a href="" style="text-decoration: none;">Team</a>
   </p>
</body>
const [formErrors, setFormErrors] = useState<Partial<UserRegistrationFormAddressInfoDetails>>({
  address: '',
  countryName: '',
  nationalityName: '',
  cityName: '',
  passportNo: '',
  passportExpiryDate: '',
  // nationality: '',
  resident: '',
  companyAdd: '',
});


handleEmptyField('passportNo', userData.passportNumber || passportNo, 'Passport No is required');


useEffect(() => {
  if (passportNo) {
    setFormErrors((prevErrors) => ({ ...prevErrors, passportNo: '' }));
  }
}, [passportNo]);

<input
      type="text"
      className={`form-control passport-number-input ${formErrors.passportNo ? 'input-error' : ''}`}
      id="passportNumber"
      placeholder="Enter Your Passport Number"
      defaultValue={userData.passportNumber}
      maxLength={12}
      onChange={(e) => {
        setPassportNo(e.target.value);
        if (e.target.value) {
        setFormErrors((prevErrors) => ({ ...prevErrors, passportNo: '' }));
        }
        }}
      onInput={(e) => {
        const input = e.target as HTMLInputElement;
        input.value = input.value.replace(/[^a-zA-Z0-9 ]/g, '');
        setPassportNo(input.value);
        }}
      {...register('passportNo', {
      required: true,
      })}
/>





$md-primary: (
  50: #f2e7fe,
  100: #dbb2ff,
  200: #bb86fc,
  300: #985eff,
  400: #7f39fb,
  500: #6200ee,
  600: #5600e8,
  700: #3700b3,
  800: #30009c,
  900: #23036a,
  A100: #ea80fc,
  A200: #e040fb,
  A400: #d500f9,
  A700: #aa00ff,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: white,
    A400: white,
    A700: white,
  ),
);

$md-accent: (
  50: #c8fff4,
  100: #70efde,
  200: #03dac5,
  300: #00c4b4,
  400: #00b3a6,
  500: #01a299,
  600: #019592,
  700: #018786,
  800: #017374,
  900: #005457,
  A100: #a7ffeb,
  A200: #64ffda,
  A400: #1de9b6,
  A700: #00bfa5,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: rgba(black, 0.87),
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: rgba(black, 0.87),
    A700: rgba(black, 0.87),
  ),
);

$md-warn: (
  50: #ffebef,
  100: #cf6679,
  200: #ff7597,
  300: #e77179,
  400: #f24e58,
  500: #f83a40,
  600: #e9313e,
  700: #d72638,
  800: #ff0266,
  900: #bb0d24,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
  ),
);
.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}
// Shortcode [king_events]

function king_events ( $atts, $content = null) {
    $today = date('Ymd');
	$atts = shortcode_atts(
        array(
            'type' => '',
            'number' => '-1',
        ),
        $atts,
        'king_events'
    );
    $args = array(
        'post_type' => 'tkc-event',
		'posts_per_page' => -1,
        'post_status' => 'publish',
        'orderby' => 'event_date',
        'order' => 'ASC',
        'meta_query' => array(
            array(
                'key' => 'event_date',
                'compare' => '>',
                'value' => $today,
                'type' => 'DATE'
            )
        ),
    );

	if( !empty( $atts['type'] ) ) {
		$args['tax_query'] = array(
			array(
				'taxonomy' => 'event_type',
				'field' => 'slug',
				'terms' => $atts['type'],
            )
		);
	}

    $events_query = new WP_Query($args);

    ob_start();
    if($events_query->have_posts()) { ?>

    <div class="events-wrap">

    <?php

    while ($events_query->have_posts()) {
    $events_query->the_post(); ?>

    <div class="belove-event-inner">
        <div class="belove-event-img">
            <a href="<?php echo get_the_post_thumbnail_url(get_the_ID(),'full'); ?>">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail('big-square'); } ?>
            </a>
        </div>
        <div class="belove-event-content">
            <h3><?php echo the_title(); ?></h3>
            <div class="event-details">
                <?php echo the_content(); ?>
            </div>
			<?php if (get_field('event_link')) { ?>
            <div class="belove-event-link">
                <?php if(get_field('button_label')) { ?>
                    <a href="<?php echo get_field('event_link'); ?>" target="_blank"><?php echo get_field('button_label'); ?></a>
                <?php }else { ?>
                    <a href="<?php echo get_field('event_link'); ?>" target="_blank">Registration</a>
                <?php }?>
            </div>
			<?php } ?>
        </div>
    </div>

    <?php }
    wp_reset_postdata();
    ?>
    </div>

    <?php
    } else { ?>
        <div>No Events found</div>
    <?php }
    return ob_get_clean();
}

add_shortcode('king_events', 'king_events');
  props,
  ref,
) => <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />);

export default function PhoneOTPVerification() {
  const [inputValue, setInputValue] = useState(['', '', '', '', '', '']);
  const [isVerified, setIsVerified] = useState(false);
  const [showInvalidOTPModal, setShowInvalidOTPModal] = useState(false);
  const [open, setOpen] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [snackbarSeverity, setSnackbarSeverity] = React.useState('success');
  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
  const [snackbarMessage, setSnackbarMessage] = React.useState('');

  const navigate = useNavigate();

  const handleClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
    // Only allow digit characters
    const value = e.target.value.replace(/\D/g, '');
    // Create a new array with the updated value
    const newValue = [...inputValue];
    newValue[index] = value;
    setInputValue(newValue);
  };

  const handleKeyDown = (e: { key: string; }) => {
    if (e.key === 'Backspace') {
      setInputValue(inputValue.slice(0, -1)); // Remove the last character from the input value
    }
  };
  const { userGuid } = useParams();
  const verifyPhoneNumber = async () => {
    // Join the inputValue array into a single string
    const userOtp = inputValue.join('');
    // Check if the length is 6 (since we have 6 input fields)
    if (userOtp.length === 6) {
      const response = await trackPromise(api.verifyOtp(userOtp, userGuid));
      if (response?.data?.Output?.phoneVerified) {
        setIsVerified(true);
        navigate(`/accounts/signup/identity-verification/${userGuid}`);
      } else {
        setOpen(true);
        setErrorMessage('Invalid OTP');
      }
    } else {
      setIsVerified(false);
    }
  };

  const resentOtp = async () => {
    const response = await trackPromise(api.resendOtp(userGuid));
    console.log('otp resend response:', response);
    // show success sbackbart nessga if otp resend successfully
    if (response?.data?.Output?.phoneNumber) {
      setPhoneNumber(response?.data?.Output?.phoneNumber);
      setSnackbarSeverity('success');
      setSnackbarMessage('OTP resend successfully');
      setSnackbarOpen(true);
    } else {
      setSnackbarSeverity('error');
      setSnackbarMessage('OTP resend failed. Try again.');
      setSnackbarOpen(true);
    }
  };

  // useEffect(() => {
  //   resentOtp();
  // }, []);

  return (
    <>
      <main className="otp-verify-container">
        <header className="header">
          <img src={Headericon} alt="Header Image" />
        </header>
        <section className="verification-section">
          <h1 className="verification-title">Phone Number Verification</h1>
          <article className="verification-content">
            <div className="verification-icon">
              <img src={SMSIcon} alt="SMS Icon" />
            </div>
            <div className="verification-subtitle">Enter 6 Digit OTP</div>
            <div className="verification-message">
              <span className="verification-message-text">
                We have sent an OTP on
                {' '}
                <span className="verification-message-phone">{phoneNumber}</span>
              </span>
              <button
                onClick={resentOtp}
                className="resend-link"
              >
                Resend OTP
              </button>
            </div>
            <div className="verification-input mb-5">
              {[...Array(6)].map((_, index) => (
                <input
                  key={index}
                  type="text"
                  maxLength={1}
                  className="otp-input"
                  value={inputValue[index] || ''}
                  onChange={(e) => handleChange(e, index)}
                />
              ))}
              <button type="button" onClick={verifyPhoneNumber}>
                Verify
              </button>
            </div>
          </article>
        </section>
        <InvalidOTPModal
          show={showInvalidOTPModal}
          handleClose={() => setShowInvalidOTPModal(false)}
        />

      </main>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <Alert onClose={handleClose} severity="error" sx={{ width: '100%', backgroundColor: '#C13254' }}>
          {/* Oops! Something went wrong. Please try again later. */}
          {errorMessage}
        </Alert>
      </Snackbar>

      {/* snacbar for otp resend */}
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={3000}
        onClose={() => setSnackbarOpen(false)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <MuiAlert
          onClose={() => setSnackbarOpen(false)}
          variant="filled"
          elevation={6}
          severity={snackbarSeverity as MuiAlertProps['severity']}
          sx={{ width: '100%' }}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>

    </>
  );
}
.container {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar; 
 }
.item {
  flex: 0 0 auto; 
}
#cssDisplay {
  background-color: #FFFFFF;
  color: #000000;
  border: 3px solid #1D2ECC;
  padding: 3px;
  margin: 3px;
  font-family: arial;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  font-variant: normal;
  line-height: 20px;
  background-image: url(img2.png);
  background-repeat: repeat;
  background-position: 50% 50%;
  background-attachment: scroll;
  position: static;
  border-radius: 8px;
  box-shadow: -1px 1px 1px #4A4A48;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Your Website Title</title>
    <link rel="stylesheet" type="text/css" href="code-1.css">
</head>
<body>
    <header>
        <h1>Welcome to Your Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>About Us</h2>
            <p>This is the about us section.</p>
        </section>

        <section>
            <h2>Contact Us</h2>
            <p>You can reach us at <a href="mailto:info@example.com">info@example.com</a>.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 Your Website. All rights reserved.</p>
    </footer>
</body>
</html>
.pv-inline-form{
	.gform_body{
		padding-top: 80px;
		@media(max-width: 860px){
			padding-top: 25px;
		}
		.gform_fields{
			.gfield{
				.ginput_container{
					flex-grow: 1;
					select {
						appearance: none;
						-webkit-appearance: none;
						-moz-appearance: none;
						background-image: url('/wp-content/uploads/2023/06/arrow-down.svg');
						background-repeat: no-repeat;
						background-size: 16px;
						background-position: right center;
						padding-right: 30px;
						/* padding-left: 0; */
					}
					@media(min-width: 861px){
						select{
							text-align: center !important;
							text-align: -webkit-center !important;
							text-align-last: center;
							-webkit-text-alig-last: center;
							-moz-text-align-last: center;
							direction: ltr;
							background-position: 70% center;
						}
						input{
							text-align: center !important;
						}
					}
				}
				@media(min-width: 861px){
					label, .gfield_description{
						flex: 0 0 auto;
					}
					.gfield_description{
						font-size: 20px;
					}
					&.scta-top{
						display: inline-flex;
						//width: 33.333% !important;
						justify-content: flex-start;
						align-items: center;
						vertical-align: middle;
						gap: 10px;
						&.scta-name{
							width: 38%;
						}
						&.scta-company{
							width: 31%;
						}
						&.scta-job{
							width: 31%;
						}
					}
					&.scta-center{
						display: inline-flex;
						justify-content: flex-start;
						align-items: center;
						vertical-align: middle;
						gap: 10px;
						padding-top: 25px;
					}
					&.scta-center.scta-subject{
						width: 33.3333%;
					}
					&.scta-center.scta-message{
						width: 66.6666%;
					}
					&.scta-bottom{
						display: inline-flex;
						width: 100%;
						justify-content: flex-start;
						align-items: center;
						gap: 10px;
						vertical-align: middle;
						padding-top: 25px;
					}
					&.scta-top:not(:first-child),
					&.scta-message{
						padding-left: 10px;
					}
				}
				@media(max-width: 860px){
					display: block !important;
					width: 100% !important;
					label{
						margin-bottom: 0 !important;
					}
					.gfield_description{
						padding-top: 15px;
						font-size: 16px;
					}
					.ginput_container{
						input, select{
							padding: 15px 0 !important;
						}
					}
					&:not(:first-child){
						margin-top: 20px;
					}
				}
				&.gfield_error{
					.ginput_container{
						input, select{
							border-color: red !important;
							border: unset !important;
							border-bottom: 1px solid red !important;
						}
					}
					.gfield_validation_message{
						display: none !important;
					}
				}
			}
		}
	}
	.gform_footer{
		padding-top: 45px;
		span.fas.fa-arrow-right{
			&::before{
				@include arrow-white;
				margin-left: 10px;
			}
		}
		@media(max-width: 860px){
			padding-top: 0 !important;
		}
	}
} 
// Bx Slider 
 
function custom_scripts()
{
    wp_register_script('bxslider', 'https://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js', array(), false, true);
    wp_enqueue_script('bxslider');
}
 
add_action('wp_enqueue_scripts', 'custom_scripts');
 
function bxslider_init() { ?>
    <script>
    (function($){
        $(document).ready(function() {
                $(".image-ticker").show();
                $('.image-ticker').bxSlider({
                    minSlides: 1,
                    maxSlides: 8,
                    slideWidth: 189,
                    slideMargin: 0,
                    ticker: true,
                    speed: 50000
                });
            });
        })(jQuery)   
    </script>
<?php }
 
add_action ('wp_footer', 'bxslider_init');

<!-- MARKUP - Put Codeblock Class as 'slider-logos' -->

<div class="image-ticker" style="display:none">
    <span class="logo-item"><img src="#"></span>

</div>

<!-- STYLE -->

<style>
.bx-wrapper {
    max-width: 100% !important;
}

.logo-item {
    text-align: center;
    display: flex !important;
    align-items: center;
    margin: 0;
    padding: 0 25px;
    height: 80px;
    width: auto !important;
}

.logo-item img {
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 80px;
}

.bx-viewport {
    height: auto !important;
}
</style>
<!DOCTYPE html>
<html>
​
<body>
The content of the body element is displayed in your browser.
</body>
​
</html>
​
/*__Responsive Media Queries __*/

/* Mobile & Small devices */
@media only screen and (max-width: 480px) {...}

/* Portrait Tablets and Ipads devices) */
@media only screen and (max-width: 768px) {...}

/* Laptops and Small screens  */
@media only screen and (max-width: 1024px) {...}

/* Laptops, Desktops Large devices */
@media only screen and (max-width: 1280px) {...}

/* Extra large devices (large laptops and desktops) */
@media only screen and (min-width: 1281px) {...}
.grid-container{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
import { useRef, useState } from "react";

const Modal = () => {
  const contentRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleClickOutside = (event) => {
    if (contentRef.current && !contentRef.current.contains(event.target)) {
      console.log(`object`);
      setIsOpen(false);
    }
  };

  const toggleModal = () => {
    setIsOpen(!isOpen);
  };
  

  return (
    <div>
      <style>
        {`
/* Modal container */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal content */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  text-align: center;
}
	`}
      </style>
      <button
        className="px-2 bg-blue-300 py-1 rounded-lg"
        onClick={toggleModal}
      >
        Toggle Modal
      </button>
      {isOpen && (
        <div
          className="modal-container border border-pink-600 select-none"
          onClick={handleClickOutside}
        >
          <div className="modal-content" ref={contentRef}>
            <h2>Click outside to close</h2>
            <p>This is a modal. Click outside to close.</p>
            <button
              className="px-3 py-1 mt-3 rounded-md bg-teal-300"
              onClick={() => setIsOpen(false)}
            >
              ok
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default Modal;
import {userRef,UseEffect} from "react"
function App()=>{
  const refOne = useRef(null);
  
  useEffect(() => {
    document.addEventListener("click", handleClickOutside, true);
  }, []);
  
  const handleClickOutside = (e) => {
    if (refOne.current && !refOne.current.contains(e.target)) {
      console.log("clicked outside");
    } else {
      console.log(`clicked inside div`);
    }
  };
 return(
 <div style={{width:"10rem",height:"10rem", backGround:"red"}}>
 </div>) 
}
 <div className="row form-row mb-5">
            {/* Country Col */}
            <div className="col-md-6">
              <label
                htmlFor="country"
                className="form-label w-100 country-label"
              >
                Country*
              </label>
              <Autocomplete
                disablePortal
                id="country"
                defaultValue={userData?.countryName ?? ''}
                options={countriesList}
                isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    {...register('countryName', {
                      required: true,
                    })}
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                    className="country-input"
                    placeholder="Select Country"
                  />
                )}
                // onchange event handler to set the countryName state
                onChange={(e: any, newVal: any) => {
                  setCountryID(newVal.countryID);
                  setCountrySelected(true);
                  setCityID(0); // Clear the city ID
                  // Also clear any other city-related states if you have them
                }}
              />
            </div>

            {/* City Col */}
            {countrySelected && (
            <div className="col-md-6">
              <label
                htmlFor="city"
                className="form-label w-100 city-label"
              >
                City*
              </label>
              <Autocomplete
                disablePortal
                id="city"
                value={cityID ? citiesListBycountry.find((city: { cityID: number; }) => city.cityID === cityID) : null} // Use the cityID state to control the value
                options={citiesListBycountry}
                isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    {...register('cityName', {
                      required: true,
                    })}
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                    className="city-input"
                    placeholder="Choose City*"
                  />
                )}
                onChange={(e, value: any) => setCityID(
                  value?.cityID,
                )}
              />
              {/* handle errors */}
              {/* {formErrors.cityName && (
              <span className="error-message">{formErrors.cityName}</span>
              )} */}
            </div>
            )}
          </div>
<DatePicker
                onChange={handleDatePicker}
                value={userData.passportExpiryDate || null || passportExpiryDate}
                minDate={new Date().toISOString().split('T')[0].split('-').join('/')}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      // readonly
                      readOnly: true,
                      placeholder: 'Select Date of Expiry',
                    }}
                    {...register('passportExpiryDate', {
                      required: true,
                    })}
                    // className="date-picker date-picker-input"
                    error={
                      (errors?.passportExpiryDate?.type === 'required' && passportExpiryDate === '')
                    }
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                  />
                )}
              />
  const handleFileDrop = (acceptedFiles: any) => {
    console.log('Accepted Files:', acceptedFiles);
    checkFileValidity(acceptedFiles, documentTypeID);

    // Accept same file again
    if (dropzoneInputRef.current) {
      dropzoneInputRef.current.value = '';
    }
  };
@media (min-width: 768px) {
    .inner-five-col {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    
    .inner-five-col .flex_column {
        margin: 0 !important;
        width: calc(50% - 15px) !important;
    }
}

@media (min-width: 990px) {
    .inner-five-col .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}

@media (min-width: 1251px) {
    .inner-five-col .flex_column {
        width: calc(20% - 24px) !important;
    }
}
.my-class.special {
  background: royalblue;
}
<?php
// error_reporting(E_ALL);
// ini_set('display_errors', 1);
error_reporting(0);
date_default_timezone_set('Asia/Kolkata');
function get($url)
{
  // Initialize a CURL session.
  $ch = curl_init();

  // Return Page contents.
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

  //grab URL and pass it to the variable.
  curl_setopt($ch, CURLOPT_URL, $url);

  $result = curl_exec($ch);

  return $result;
}

$user = $_POST['user'];
$offer = $_POST['offer'];
$cname = $_POST['cname'];
$event = $_POST['event'];

$rp = get('https://nextpower.cashinmedia.in/api/v1/checkRefer/0a51d09c-f329-4436-89d5-bdbb52bea07c/' . $offer . '?number=' . $user . '');

// JSON response from the URL
$response = $rp;

// Decode the JSON response
$response_data = json_decode($response, true);

$totalClicks = $response_data['clicks'];

$count = $response_data['count'];

// Extract the 'data' section from the response
$data = $response_data['data'];

// Check if there's any data to display
if (count($data) > 0) {
  // Echo the table header
//     echo '<table border="1">
//         <tr>
//             <th>Click</th>
//             <th>User Amount</th>
//             <th>Refer Amount</th>
//             <th>User</th>
//             <th>Refer</th>
//             <th>Event</th>
//             <th>Status</th>
//             <th>Payment Status</th>
//             <th>Payment Message</th>
//             <th>Created At</th>
//         </tr>';

  //     // Loop through each data entry and display in table rows
//     foreach ($data as $entry) {
//     $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);

  //     echo '<tr>';
//     echo '<td>' . $entry['click'] . '</td>';
//     echo '<td>' . $entry['userAmount'] . '</td>';
//     echo '<td>' . $entry['referAmount'] . '</td>';
//     echo '<td>' . $userEncoded . '</td>'; // Display encoded user
//     echo '<td>' . $entry['refer'] . '</td>';
//     echo '<td>' . $entry['event'] . '</td>';
//     echo '<td>' . $entry['status'] . '</td>';
//     echo '<td>' . $entry['referPaymentStatus'] . '</td>';
//     echo '<td>' . $entry['payMessage'] . '</td>';
//     echo '<td>' . $entry['createdAt'] . '</td>';
//     echo '</tr>';
// }

  //     // Close the table
//     echo '</table>';
// } else {
//     // If there's no data, show a JavaScript alert
//     echo '<script>alert("No data found.");</script>';
// }
  ?>
  <html lang="en" dir="ltr">


  <head>
    <meta charset="utf-8">
    <title>FokatCash</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
    <link rel="stylesheet" href="report.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width">
  </head>
  <style>
    .data-table td,
    .data-table th {
      font-size: 17px;
      /* Adjust the value as needed */
    }

    .credited {
      color: #FFA500;
      /* Orange color */
    }
  </style>

  <body>
    <center>
      <div class="login-form">
        <h1>
          <font color='#0f0f0f'>REPORT
        </h1>
        <center>

  </body>

  </html>

  <div class="statics">
    <center><br>
      <fieldset>Refferer:
        <?php echo $user; ?>
        <hr>Camp:
        <?php echo $cname; ?>
        <hr>Total Clicks:
        <?php echo $totalClicks; ?>
        <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
        <hr>
        <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
        <!-- Placeholder for total refer amount -->
        <hr>
        <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
        <hr>
      </fieldset><br><br>
      <table class="data-table">
        <tr>

          <th>Camp Name</th>
          <th>Refer Amount</th>
          <!--<th>Refer Status</th>-->
          <th>Cashback Status</th>
          <th>Time</th>
        </tr>
        <?php
        foreach ($data as $entry) {
          $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);
          $dateTime = new DateTime($entry['createdAt']);

          // Convert to IST timezone
          $dateTime->setTimezone(new DateTimeZone('Asia/Kolkata'));

          // Format the time in desired format
          $istTimeFormatted = $dateTime->format('Y-m-d H:i:s');

          if ($entry['referPaymentStatus'] === 'REJECTED' || $entry['referPaymentStatus'] === 'BLOCKED') {
            continue;
          }

          if ($entry['referPaymentStatus'] == 'ACCEPTED' || $entry['referPaymentStatus'] == 'UNKNOWN' || $entry['referPaymentStatus'] == 'FAILURE') {
            $cashbackStatus = '<b><span style="color: #198754;">Credited</span></b>';
          } elseif ($entry['referPaymentStatus'] == 'PENDING') {
            $cashbackStatus = '<b><span style="color: #FFA500;">Processing</span></b>';
          } else {
            // Handle other cases or set a default value for $cashbackStatus
            // For example: $cashbackStatus = 'Unknown Status';
            $cashbackStatus = $entry['referPaymentStatus'];
          }


          if ($entry['referAmount'] > 0) {
            echo '<tr>';
            // echo '<td>' . $entry['click'] . '</td>';
            // echo '<td>' . $entry['userAmount'] . '</td>';
            echo '<td>' . $cname . '</td>';
            echo '<td>' . $entry['referAmount'] . '</td>';
            // echo '<td>' . $userEncoded . '</td>'; // Display encoded user
            // echo '<td>' . $entry['refer'] . '</td>';
            // echo '<td>' . $entry['event'] . '</td>';
            // echo '<td>' . $entry['status'] . '</td>';
            echo '<td>' . $cashbackStatus . '</td>';
            // echo '<td>' . $entry['payMessage'] . '</td>';
            echo '<td>' . $istTimeFormatted . '</td>';
            echo '</tr>';
          }
        }
        // Close the table
        echo '</table>';
} else {
  // If there's no data, show a JavaScript alert
  ?>
        <html lang="en" dir="ltr">


        <head>
          <meta charset="utf-8">
          <title>FokatCash</title>
          <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
          <link rel="stylesheet" href="report.css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
          <meta name="viewport" content="width=device-width">
        </head>
        <style>
          .data-table td,
          .data-table th {
            font-size: 17px;
            /* Adjust the value as needed */
          }

          .credited {
            color: #FFA500;
            /* Orange color */
          }
        </style>

        <body>
          <center>
            <div class="login-form">
              <h1>
                <font color='#0f0f0f'>REPORT
              </h1>
              <center>

        </body>

        </html>

        <div class="statics">
          <center><br>
            <fieldset>Refferer:
              <?php echo $user; ?>
              <hr>Camp:
              <?php echo $cname; ?>
              <hr>Total Clicks:
              <?php echo $totalClicks; ?>
              <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
              <hr>
              <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
              <!-- Placeholder for total refer amount -->
              <hr>
              <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
              <hr>
            </fieldset><br><br>

            <h5>No data Found</h5>
            <?php


}
?>
    </table>
    <!-- ... Your existing code ... -->
    <script>
  // JavaScript to calculate and display the total leads count and total refer amounts
  document.addEventListener("DOMContentLoaded", function () {
    // Calculate the total leads count and total refer amounts based on the payment statuses and refer amount conditions
    var totalLeads = 0;
    var totalAcceptedReferAmount = 0;
    var totalPendingReferAmount = 0;
    var totalFailedReferAmount = 0;
    var totalUnknownReferAmount = 0;
    var event = "<?php echo $event; ?>";

    <?php foreach ($data as $entry): ?>
      <?php if ($entry['referPaymentStatus'] !== 'REJECTED' && $entry['referPaymentStatus'] !== 'BLOCKED' && $entry['referAmount'] > 0): ?>
        totalLeads++;
        <?php if ($entry['referPaymentStatus'] === 'ACCEPTED'): ?>
          totalAcceptedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'PENDING'): ?>
          totalPendingReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'FAILURE'): ?>
          totalFailedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'UNKNOWN'): ?>
          totalUnknownReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php endif; ?>
      <?php endif; ?>
    <?php endforeach; ?>

    // Update the HTML content to display the calculated totals
    var totalLeadsElement = document.getElementById("totalLeads");
    totalLeadsElement.textContent = totalLeads;

    var totalAcceptedReferAmountElement = document.getElementById("totalAcceptedReferAmount");
    totalAcceptedReferAmountElement.textContent = totalAcceptedReferAmount.toFixed(2);

    var totalPendingReferAmountElement = document.getElementById("totalPendingReferAmount");
    totalPendingReferAmountElement.textContent = totalPendingReferAmount.toFixed(2);

    var totalFailedReferAmountElement = document.getElementById("totalFailedReferAmount");
    totalFailedReferAmountElement.textContent = totalFailedReferAmount.toFixed(2);

    var totalUnknownReferAmountElement = document.getElementById("totalUnknownReferAmount");
    totalUnknownReferAmountElement.textContent = totalUnknownReferAmount.toFixed(2);
  });
</script>



    <br><br><br>
    <footer id="footer">
      <div class="copyright">
        &copy; Copyright <strong><span>FokatCash</span></strong>
      </div>
    </footer><!-- End Footer -->
</div><!-- End statics div -->
</center><!-- End center div -->
</body><!-- End body tag -->

</html><!-- End HTML document -->
.center-three-columns .flex_column {
    width: 100% !important;
    margin: 0 !important;
}

.center-three-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

@media (min-width: 768px) {
    .center-three-columns .flex_column {
        width: calc(50% - 15px) !important;
    }
}


@media (min-width: 1251px) {
    .center-three-columns .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}
<Autocomplete
  id="google-map-demo"
  defaultValue={userData.addressLine1 || ''}
  freeSolo // <-- Add this line
  clearOnEscape={false}
  clearIcon={null}
  // ...rest of your props
/>

onChange={(event: any, newValue: PlaceType | string | null) => {
  if (typeof newValue === 'string') {
    // The user entered a new address manually
    setAddress(newValue);
    console.log('Manual input:', newValue);
  } else if (newValue) {
    // The user selected an address from the dropdown
    setAddress(newValue.description);
    console.log('Selected Value:', newValue.description);
  }
}}

    
    
    // Check if primaryEmail and secondaryEmail are same
    if (primaryEmail === secondaryEmail && primaryEmail !== '' && secondaryEmail !== '') {
      errors.primaryEmail = 'Primary and Secondary email cannot be the same';
      errors.secondaryEmail = 'Primary and Secondary email cannot be the same';
    }

  // Check if primaryMobileNumber and secondaryMobileNumber are same
    if (primaryMobileNumber === secondaryMobileNumber && primaryMobileNumber !== '' && secondaryMobileNumber !== '') {
      errors.primaryMobileNumber = 'Primary and Secondary mobile number cannot be the same';
      errors.secondaryMobileNumber = 'Primary and Secondary mobile number cannot be the same';
    }

<div className="col-md-6">
              <label htmlFor="email" className="form-label w-100 email-label">
                Primary Email*
              </label>
              
// primary email

<input
                type="email"
                className={`form-control email-input ${formErrors.primaryEmail ? 'input-error' : ''}`}
                id="email"
                placeholder="abc@babc.com"
                defaultValue={userData.primaryEmail}
                onChange={(e) => setPrimaryEmail(e.target.value)}
                {...register('primaryEmail', {
                  required: true,
                })}
              />
              {
                primaryEmail === secondaryEmail
                && primaryEmail !== ''
                && secondaryEmail !== ''
                  && (
                  <div className="error-message">
                    {formErrors.primaryEmail}
                  </div>
                  )
              }
            </div>

 // secondary email

<input
                    type="email"
                    className={`form-control secondary-email-input ${formErrors.secondaryEmail ? 'input-error' : ''}`}
                    id="secondary-email"
                    placeholder="secondary@abc.com"
                    defaultValue={userData.secondaryEmail}
                    // onchange
                    onChange={(e) => setSecondaryEmail(e.target.value)}
                    // register
                    {...register('secondaryEmail', {
                      required: true,
                    })}
                  />
                  {formErrors.secondaryEmail && <div className="error-message mt-1">{formErrors.secondaryEmail}</div>}


// primary mobile number

<input
                  type="text"
                  className={`form-control mobile-input ${formErrors.primaryMobileNumber ? 'input-error' : ''}`}
                  id="mobile"
                  placeholder="XXXXXXXXXXXXXX"
                  defaultValue={userData.primaryMobileNumber}
                  onInput={(e) => {
                    const input = e.target as HTMLInputElement;
                    input.value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                    setPrimaryMobileNumber(input.value);
                  }}
                  {...register('primaryMobileNumber', {
                    required: true,
                  })}
                />


// secondary mobile number

                    <input
                      type="text"
                      className={`form-control secondary-mobile-input ${formErrors.secondaryMobileNumber ? 'input-error' : ''}`}
                      id="secondary-mobile"
                      placeholder="XXXXXXXXXXX"
                      defaultValue={userData.secondaryMobileNumber}
                      onInput={(e) => {
                        const input = e.target as HTMLInputElement;
                        const value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                        input.value = value;
                        setSecondaryMobileNumber(value);
                      }}
                      {...register('secondaryMobileNumber', {
                        required: true,
                      })}
                    />
                    {/* {
                      primaryMobileNumber === secondaryMobileNumber
                      && primaryMobileNumber !== ''
                      && secondaryMobileNumber !== ''
                        && (
                        <div className="error-message mt-1">
                          {formErrors.primaryMobileNumber}
                        </div>
                        )
                    } */}
                  </div>
                  {
                      formErrors.secondaryMobileNumber
                      && (
                      <div
                        className="error-message mt-1"
                      >
                        {formErrors.secondaryMobileNumber}
                      </div>
                      )
                    }


  // Scroll to top of page on component mount
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
As of Bootstrap 4.6.0, the default breakpoints for responsive classes are as follows:

Extra small devices (less than 576px): .col-
Small devices (576px and up): .col-sm-
Medium devices (768px and up): .col-md-
Large devices (992px and up): .col-lg-
Extra large devices (1200px and up): .col-xl-
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
/* eslint-disable no-restricted-syntax */
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState, useEffect, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { AiOutlineClose } from 'react-icons/ai';
import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileListIcon from '@assets/FileListIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';
import Box from '@mui/material/Box/Box';
import Button from '@mui/material/Button/Button';
import { useForm } from 'react-hook-form';
import {
  fetchDocumentTypeList,
  fetchDocumentsList,
  deleteDocument,
  willDocumentUploadSelector,
  saveDocument,
} from '@redux/slices/will-documents-upload';
import { useSelector, useDispatch } from 'react-redux';
import { DocumentTypeList } from '@api/models';
import axios from 'axios';
import { willPersonalInformationSelector } from '@redux/slices/will-personal-information';
import { willsValidatorSelector } from '@redux/slices/willsValidator';
import MirrorWillSwitcher from '@components/MirrorWillSwitcher';
// import custom hook useDocumentsList
import useDocumentsList from '@utils/hooks/useDocumentsList';
import DeleteConfirmationModal from '@components/DeleteConfirmationModal';
import { useLocation } from 'react-router';
import DocumentManagerModal from '@components/DocumentManagerModal';
import { fetchAppointmentDetail } from '@redux/slices/wills-book-appointment';
import { Alert, AlertColor, Snackbar } from '@mui/material';
import MuiAlert from '@mui/material/Alert';

import { trackPromise } from 'react-promise-tracker';
import { getAppointmentDetail } from '../../redux/slices/wills-book-appointment';
import api from '../../api';

interface Props {
  handleNext: (step: number, stepName?: string) => void;
  currentBtnStep: number;
  handleBack: () => void;
  willTypeID: number;
}

function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);
  // State for managing snackbar
  const [snackbarOpen, setSnackbarOpen] = useState(false);
  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertColor>('error'); // You can change 'error' to 'warning' or other values if needed

  // Snackbar message to display
  const snackbarMessage = 'Please upload all required documents before proceeding to the next step.';

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(false);

  // check document is required or not and
  useEffect(() => {
    const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    setDocumentIsRequired(isRequiredDocumentsExist);
  }, [documentTypeArray]);

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
  };

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
  };
  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Updates the document type array by setting the 'isRequired' property to false for the document type
   * with the specified 'documentTypeID'. Returns the updated document type array.
   *
   * @param {any} documentTypeID - The ID of the document type to update
   * @return {void}
   */
  const updateDocumentTypeArray = (documentTypeID: any): void => {
    const updatedDocumentTypeArray = documentTypeArray.map((doc) => (doc.documentTypeID === documentTypeID ? { ...doc, isRequired: false } : doc));
    setDocumentTypeArray(updatedDocumentTypeArray);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any[]) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: { name: string; size: number; }) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: { name: any; }) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      const updatedUploadedFiles = [...uploadedFiles, ...validFiles];
      setUploadedFiles(updatedUploadedFiles);

      // Update the document type array with the document type ID.
      updateDocumentTypeArray(documentTypeID);

      const formData = new FormData();
      for (let i = 0; i < validFiles.length; i++) {
        const file = validFiles[i];
        formData.append('FileDoc', file, file.name);
      }

      dispatch<any>(
        saveDocument(
          isSpouseSelected ? spouseGuid : profileGuid,
          documentTypeID,
          witnessProfileGUID,
          formData,
        ),
      );
    }
  };

  const handleNextStepClick = () => {
    if (!documentIsRequired) {
      // Handle Next Step click logic here
      handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload');
    } else {
      // Show the snackbar with an error message
      setSnackbarSeverity('error'); // You can change 'error' to 'warning' or other values if needed
      setSnackbarOpen(true);
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      {/* log documentIsRequired on template */}
      {/* {documentIsRequired && <div>Document is required</div>} */}
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        <button
          type="button"
          className="next-btn"
          onClick={handleNextStepClick}
        >
          Next Step
        </button>
      </Box>
      {/* Snackbar */}
      <Snackbar open={snackbarOpen} autoHideDuration={3000} onClose={() => setSnackbarOpen(false)}>
        <MuiAlert
          elevation={6}
          variant="filled"
          severity={snackbarSeverity}
          onClose={() => setSnackbarOpen(false)}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

export default DocumentManager;
import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertProps as MuiAlertProps } from '@mui/material/Alert';


// snackbar states
  const [snackbarSeverity, setSnackbarSeverity] = React.useState('success');
  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
  const [snackbarMessage, setSnackbarMessage] = React.useState('');



  const handleSnackbarClose = () => {
    // Handle the closing here
    setSnackbarOpen(false);
  };


 	try {
        const response = await trackPromise(api.saveUserRegistrationInformation(formData));
        // console.log('user reg response:', response?.data?.itemGUID);
        if (response?.data?.Output?.isAlreadyExists) {
          setSnackbarMessage('User already exists');
          setSnackbarSeverity('error');
          setSnackbarOpen(true);
        } else {
          dispatch(setUserInfo(response?.data?.Output?.itemGUID));
          setSnackbarMessage('User registered successfully');
          setSnackbarSeverity('success');
          setSnackbarOpen(true);
          setShowModal(true);
        }
      } catch (error) {
        setSnackbarMessage('An error occurred while submitting user registration');
        setSnackbarSeverity('error');
        setSnackbarOpen(true);
      }

// place snackbar at end of root jsx element. for example if parent jsx element is <main>,
 // place snackbar at the end of <main> element.
 
	  <Snackbar
        open={snackbarOpen}
        autoHideDuration={2000}
        onClose={handleSnackbarClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <MuiAlert
          onClose={handleSnackbarClose}
          variant="filled"
          elevation={6}
          severity={snackbarSeverity as MuiAlertProps['severity']}
          sx={{ width: '100%' }}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>
yes it is working, our client needs further upadates here.

when user uploads all the required files and then moves to other component and return back to DocumentManager component. isRequired property is true in which userhas to upload the requried files again. 

i want to keep documentTypeArray in redux or any state management technique. so when user returns back it should be available. or you can try any other methods. 

ie once reuiqred docs are updated and when we move to documentmanager component, next step button should be disabled. 

below attaching code for your reference:

"""
function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(false);

  // check document is required or not and
  useEffect(() => {
    const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    setDocumentIsRequired(isRequiredDocumentsExist);
  }, [documentTypeArray]);

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
  };

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
  };
  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Updates the document type array by setting the 'isRequired' property to false for the document type
   * with the specified 'documentTypeID'. Returns the updated document type array.
   *
   * @param {any} documentTypeID - The ID of the document type to update
   * @return {void}
   */
  const updateDocumentTypeArray = (documentTypeID: any): void => {
    const updatedDocumentTypeArray = documentTypeArray.map((doc) => (doc.documentTypeID === documentTypeID ? { ...doc, isRequired: false } : doc));
    setDocumentTypeArray(updatedDocumentTypeArray);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any[]) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: { name: string; size: number; }) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: { name: any; }) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      const updatedUploadedFiles = [...uploadedFiles, ...validFiles];
      setUploadedFiles(updatedUploadedFiles);

      // Update the document type array with the document type ID.
      updateDocumentTypeArray(documentTypeID);

      const formData = new FormData();
      for (let i = 0; i < validFiles.length; i++) {
        const file = validFiles[i];
        formData.append('FileDoc', file, file.name);
      }

      dispatch<any>(
        saveDocument(
          isSpouseSelected ? spouseGuid : profileGuid,
          documentTypeID,
          witnessProfileGUID,
          formData,
        ),
      );
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      {/* log documentIsRequired on template */}
      {/* {documentIsRequired && <div>Document is required</div>} */}
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        <button
          type="button"
          className="next-btn"
          onClick={() => handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload')}
          disabled={documentIsRequired}
        >
          Next Step
        </button>
      </Box>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

"""
.details-container::before {
  content: "";
  position: absolute;
  top: 0; /* can delete top/left etc if sizes are 100% */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: -1; /* must be lower number than objects needing to be in front */
}
/* For Mobile Devices (320px - 480px) */
@media screen and (min-width: 320px) and (max-width: 480px) {
  /* Your CSS styles for mobile devices here */
}

/* For iPads and Tablets (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* Your CSS styles for iPads and Tablets here */
}

/* For Laptops and Small Screens (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Your CSS styles for laptops and small screens here */
}

/* For Large Screens and Desktops (1025px - 1200px) */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  /* Your CSS styles for large screens and desktops here */
}

/* For TV and Extra Large Screens (1201px and more) */
@media screen and (min-width: 1201px) {
  /* Your CSS styles for TV and extra large screens here */
}
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState, useEffect } from 'react';
import { useDropzone } from 'react-dropzone';
import { AiOutlineClose } from 'react-icons/ai';
import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileListIcon from '@assets/FileListIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';
import Box from '@mui/material/Box/Box';
import Button from '@mui/material/Button/Button';
import { useForm } from 'react-hook-form';
import {
  fetchDocumentTypeList,
  fetchDocumentsList,
  deleteDocument,
  willDocumentUploadSelector,
  saveDocument,
} from '@redux/slices/will-documents-upload';
import { useSelector, useDispatch } from 'react-redux';
import { DocumentTypeList } from '@api/models';
import axios from 'axios';
import { willPersonalInformationSelector } from '@redux/slices/will-personal-information';
import { willsValidatorSelector } from '@redux/slices/willsValidator';
import MirrorWillSwitcher from '@components/MirrorWillSwitcher';
// import custom hook useDocumentsList
import useDocumentsList from '@utils/hooks/useDocumentsList';
import DeleteConfirmationModal from '@components/DeleteConfirmationModal';
import { useLocation } from 'react-router';
import DocumentManagerModal from '@components/DocumentManagerModal';
import { fetchAppointmentDetail } from '@redux/slices/wills-book-appointment';

import { trackPromise } from 'react-promise-tracker';
import { getAppointmentDetail } from '../../redux/slices/wills-book-appointment';
import api from '../../api';

interface Props {
  handleNext: (step: number, stepName?: string) => void;
  currentBtnStep: number;
  handleBack: () => void;
  willTypeID: number;
}

function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);
  // state for documentIsRequired with boolean type

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  // Show a modal on load
  // useEffect(() => {
  //   dispatch<any>(fetchAppointmentDetail(profileGuid))
  //     .then((response: any) => {
  //       console.log('fetchAppointmentDetailResult', response);
  //       // log the response status
  //       if (!response) {
  //         handleBookAppointmentModalOpen();
  //       }
  //     });
  // }, []);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
    // log the document type array with a message
    console.log('Document types array:', documentTypeArray);
  };

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(
    documentTypeArray.some((d) => d.isRequired),
  );

  // Check for Document Required or not
  // if (documentTypeArray.some((d) => d.isRequired)) {
  //   // list reuiqred documents
  //   const requiredDocuments = documentTypeArray.filter((d) => d.isRequired);
  //   console.log('Required documents:', requiredDocuments);
  // }

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
    console.log(witnessProfileGUID, uniqueDocumentId);
  };

  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */
  const [documentTypeArrayCopy, setDocumentTypeArrayCopy] = useState([...documentTypeArray]);

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    documentTypeArrayCopy.forEach((d) => {
      if (d.isRequired) {
        setDocumentIsRequired(true);
        // update the documentTypeArrayCopy with the new value of documentIsRequired
        documentTypeArrayCopy.push({ ...d, isRequired: false });
        // log the updated documentTypeArrayCopy
        console.log('documentTypeArrayCopy:', documentTypeArrayCopy);
        setDocumentTypeArrayCopy(documentTypeArrayCopy);
      }
      setDocumentIsRequired(false);
    });
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
    // store documentTypeArray to a new array
    // check if any of the documents is required, if yes, set documentIsRequired to true

    // const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    // // log the result of the check
    // console.log('isRequiredDocumentsExist:', isRequiredDocumentsExist);
    // setDocumentIsRequired(isRequiredDocumentsExist);
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: any) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: any) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      setUploadedFiles((prevFiles) => [...prevFiles, ...validFiles]);
      if (uploadedFiles) {
        const formData = new FormData();
        for (let i = 0; i < validFiles.length; i++) {
          const file = validFiles[i];
          formData.append('FileDoc', file, file.name);
        }

        dispatch<any>(saveDocument(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID, formData));
      }
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        {documentIsRequired}
        <button
          type="button"
          className="next-btn"
          onClick={() => handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload')}
          disabled={documentIsRequired}
        >
          Next Step
        </button>
      </Box>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {/* render DocumentManagerModal */}
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

export default DocumentManager;
<DesktopDatePicker 
    value={dateOfBirth} 
    disableFuture 
    onChange={(e:any, newVal:any)=> handleDate(e, newVal)}
    renderInput={(params:any) =>
        <TextField {...params} error={false} />}
    />
 
HandleChange Function
    const handleDate = (e: any, newVal: any) => {
      console.log('formatted date', moment(e?._d).format());
      const formattedDate = moment(e?._d).format();
      setDateOfBirth(formattedDate);
    };
 
State variable and datatype
    const [dateOfBirth, setDateOfBirth] = useState<string>(null);
 
Repopulating value
    setDateOfBirth(selectedBeneficiary?.dateOfBirth?.slice(0, 10));
<button onclick="copyCouponCode()">
  <i class="fas fa-link"></i> קוד קופון: POLRAM17
</button>

<script>
  function copyCouponCode() {
    var couponCode = "POLRAM17";
    navigator.clipboard.writeText(couponCode).then(function() {
      alert("הקוד הועתק בהצלחה!");
    }, function() {
      alert("שגיאה בעת העתקת הקוד.");
    });
  }
</script>
"""
function ChooseMethodModal({ showModal, handleModalClose, handleContinue }: ChooseMethodModalProps) {
  const [activeCard, setActiveCard] = useState('draftWill');
  const [selectedWillCard, setSelectedWillCard] = React.useState({
    willTypeName: 'Templated Full Will',
    willTypeID: '6',
  });
  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    // dispatch<any>(fetchWillsList());
  }, []);

  /**
 * Handles the click event on the card and sets the active card name.
 *
 * @param {string} cardName - The name of the card that was clicked.
 * @return {void} This function does not return anything.
 */
  const handleCardClick = (cardName: string) => {
    setActiveCard(cardName);
    const { willTypeName, willTypeID } = results.find((will: any) => {
      if (cardName === 'draftWill') return will.willTypeName === 'Templated Full Will';
      if (cardName === 'willCopyUpload') return will.willTypeName === 'Full Will';
      return false;
    }) || { willTypeName: '', willTypeID: '' };
    setSelectedWillCard({ willTypeName, willTypeID });
  };

  const isAnyWillCardSelected = selectedWillCard.willTypeName !== '' && selectedWillCard.willTypeID !== '';

  return (
    <Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Draft Will Using the System
            </div>
            <div
              className="text-center choose-method-draft-will-desc"
              style={{ marginTop: '10px', marginBottom: '10px' }}
            >
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div
              className="choose-method-will-upload-icon-container"
              style={{ marginBottom: '20px', marginTop: '20px' }}
            >
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
  );
}
"""

You are react developer expert.
when i click on card-container-draft-will div element, to attribute of Link component is not changing.
it should be `/wills/Templated-Full-Will/6`.
right now it is `/wills//`.
pleasde make neccessary change ans return the correct code.


your solution is appreciated gpt.
but when i click on card-container-draft-will div element second time, route is not updating. initially when component loads, route is correct, route navigated to `/wills/Templated-Full-Will/6`.
but when user clicks on second time or more it is set to  `/wills//` as route.
somethnig is wrong. please check code thouroghly and find a solution to resolve this bug.

It is still not working.
when component loads initially, route is /wills/Templated-Full-Will/6, then i click on card-container-will-copy-upload, route again updated to wills/Full-Will/1, but when i again click on 
card-container-draft-will div element, route is not set to /wills/Templated-Full-Will/6. i want the route to set to /wills/Templated-Full-Will/6. there are some bugs in handleCardClick function.
please update the code.\


  const handleContinueButtonClick = () => {
    const formattedWillTypeName = selectedWillCard.willTypeName.split(' ').join('-');
    const toPath = `/wills/${formattedWillTypeName}/${selectedWillCard.willTypeID}`;
    console.log('Path: ', toPath);
    navigate(toPath, { state: selectedWillCard.willTypeName });
  };

Path:  /wills//

i am getting the path as above when i again click on card-container-draft-will div element.

 i want path to be: /wills/Templated-Full-Will/6
"""
function ChooseMethodModal({ showModal, handleModalClose, handleContinue }: ChooseMethodModalProps) {
  const [activeCard, setActiveCard] = useState('draftWill');
  const [selectedWillCard, setSelectedWillCard] = React.useState({
    willTypeName: 'Templated Full Will',
    willTypeID: '6',
  });
  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    // dispatch<any>(fetchWillsList());
  }, []);

  /**
 * Handles the click event on the card and sets the active card name.
 *
 * @param {string} cardName - The name of the card that was clicked.
 * @return {void} This function does not return anything.
 */
  const handleCardClick = (cardName: string) => {
    setActiveCard(cardName);
    // log the card name
    console.log(cardName);
    // log active card
    console.log(activeCard);
    const { willTypeName, willTypeID } = results.find((will: any) => {
      if (cardName === 'draftWill') return will.willTypeName === 'Templated Full Will';
      if (cardName === 'willCopyUpload') return will.willTypeName === 'Full Will';
      return false;
    }) || { willTypeName: '', willTypeID: '' };
    setSelectedWillCard({ willTypeName, willTypeID });
  };

  const isAnyWillCardSelected = selectedWillCard.willTypeName !== '' && selectedWillCard.willTypeID !== '';

  return (
    <Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Draft Will Using the System
            </div>
            <div
              className="text-center choose-method-draft-will-desc"
              style={{ marginTop: '10px', marginBottom: '10px' }}
            >
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div
              className="choose-method-will-upload-icon-container"
              style={{ marginBottom: '20px', marginTop: '20px' }}
            >
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
  );
}
"""

when component loads, card-container-draft-will is selected by default. when user clicks on card-container-will-copy-upload, that element is selected. But when user clicks on card-container-draft-will again after clickin will-copy-upload, problem is when clicking continue button, Link is not naviating to the indented component/page. it is not moving to indented page.
please update the code. and make it correct.
but now when i click on card-container-draft-will element, COnitnue button not showing. please fix this bug.
<input enterkeyhint="enter">
<input enterkeyhint="done">
<input enterkeyhint="go">
<input enterkeyhint="next">
<input enterkeyhint="previous">
<input enterkeyhint="search">
<input enterkeyhint="send">
"""
<div className="col-md-6">
              <label
                htmlFor="companyContactNumber"
                className="form-label w-100 company-contact-number-label"
              >
                Company Contact Number*
              </label>
              <div className="d-flex">
                {/* autocomlete field for isdcodelist */}
                <Autocomplete
                  ref={autocompleteRef}
                  disablePortal
                  id="isdcodelist"
                  options={isdCodesList}
                  isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      {...register('isdCode', {
                        required: true,
                      })}
                      className="isd-code-input"
                      placeholder="+971"
                    />
                  )}
                  renderOption={(props, option) => (
                    <span
                      className="phone-number-option"
                      {...props}
                    >
                      {option.countryName}
                    </span>
                  )}
                            // onchange event handler to set the isdCode state
                  onChange={(e, value: any) => setIsdCode(
                    value?.label,
                  )}
                />
                {/* handle errors */}
                {formErrors.isdCode && (
                <span className="error-message">{formErrors.isdCode}</span>
                )}
                {/* company contact input */}
                <input
                  type="text"
                  className="form-control company-contact-number-input"
                  id="companyContactNumber"
                  placeholder="XXXXXXXXXXXXXX"
                  onInput={(e) => {
                    const input = e.target as HTMLInputElement;
                    input.value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                    setCompanyContactNumber(input.value);
                  }}
                  {...register('companyContactNumber', {
                    required: true,
                  })}
                />
                {/* handle errors */}
                {formErrors.companyContactNumber && (
                <span className="error-message">{formErrors.companyContactNumber}</span>
                )}
              </div>
</div>
"""

consider you are react developer.
client wants to achieve below changes in the form.

1. You have to display isdCode error below that particular autocomplete field. currently it is shown right to the field. Show it under field.

2. You have to display company contact number error below that particular field. currently it is shown right to the field. Show it under field.

3. make appropriate changes in the code and return the code.



""" 
<div className="row form-row mb-4 align-items-center">
            <div className="col-md-6">
              <label
                htmlFor="resident"
                className="form-label w-100 resident-label"
              >
                Are you a Resident of the UAE?
              </label>
            </div>
            <div className="col-md-6 d-flex justify-content-between align-items-center">
              <OptionButtons
                options={residentOrNotOptions}
                selectedOption={resident}
                onOptionSelected={handleResidentOptionSelect}
              />
            </div>
          </div>

          {/* row with columns for emirates id */}
          <div className="row form-row mb-5">
            {/* Emirates ID Col */}
            <div className="col-md-6">
              <label
                htmlFor="emiratesId"
                className="form-label w-100 emirates-id-label"
              >
                Emirates ID*
              </label>
              <input
                type="text"
                className="form-control emirates-id-input"
                id="emiratesId"
                placeholder="XXXX XXXX XXXX"
                defaultValue={userData.emiratesID}
                maxLength={15}
                onChange={(e) => setEmiratesID(e.target.value)}
                onInput={(e) => {
                  const input = e.target as HTMLInputElement;
                  input.value = input.value.replace(/\D/g, '');
                  setEmiratesID(input.value);
                }}
                {...register('emiratesID', {
                  required: true,
                })}
              />

              {/* handle errors */}
              {/* {formErrors.emiratesID && (
              <span className="error-message">{formErrors.emiratesID}</span>
              )} */}
            </div>
            {/* passport expiry date col */}
            <div className="col-md-6">
              <label
                htmlFor="emiratesIdExpiryDate"
                className="form-label w-100 emiratesId-expiry-date-label"
              >
                Emirates ID Expiry Date*
              </label>
              {/* Date Picker to handle emirates id expiry */}
              <DatePicker
                onChange={handleEmiratesExpiryDatePicker}
                value={emiratesIDExpiryDate}
                minDate={new Date().toISOString().split('T')[0].split('-').join('/')}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      // readonly
                      readOnly: true,
                      placeholder: 'Choose Date',
                    }}
                    {...register('emiratesIDExpiryDate', {
                      required: true,
                    })}
                    className="date-picker date-picker-input"
                  />
                )}
                className="date-picker-field"
              />
              {/* handle errors */}
              {formErrors.emiratesIDExpiryDate && (
              <span className="error-message">{formErrors.emiratesIDExpiryDate}</span>
              )}
            </div>
          </div>

"""

You are an experienced react developer.
Client want some changes in form. Details were given in below bullet points:

1. When the value of resident props of OptionButtons is No, emiratesid and emirates expiry date datepicker should be disabled.
Ie user should  not be able to input or select any data in both fields.
2. if the value is Yes, both emiratesid and emirates expiry date datepicker are enabled. 
3. Initialy when component is loaded, both were enabled.
4. It is disable only when user choose resident as No, else both the inputs were enabled.

please update the code as per my above requirements.


/* small cart and burger menu*/

/*cart*/

.header .header-actions-action--cart .icon {
    width: 17px;
    stroke-width: 1.5;
}

.header .header-actions-action--cart .icon {
  	 left: unset !important;
    right: -2.5px !important;
}

/* burger */
.burger-inner>div {
    width: 70% !important;
    height: 1px !Important;
}

.burger-inner>div {
    left: unset !important;
    right: 10 !important;
}
To populate the form fields of the previous step when the "Back" button is clicked, you can store the form data in the parent component and pass it as props to the child components. Here's an updated example:

UserOnBoardingMain component:

```jsx
import React, { useState } from 'react';
import UserRegistrationForm from './UserRegistrationForm';
import UserRegistrationFormAddressInfo from './UserRegistrationFormAddressInfo';
import UserRegistrationFormCompanyInfo from './UserRegistrationFormCompanyInfo';

const UserOnBoardingMain = () => {
  const [step, setStep] = useState(1);
  const [userData, setUserData] = useState({});

  const handleNextStep = (data) => {
    setUserData((prevData) => ({ ...prevData, ...data }));
    setStep((prevStep) => prevStep + 1);
  };

  const handleBackStep = () => {
    setStep((prevStep) => prevStep - 1);
  };

  return (
    <>
      {step === 1 && (
        <UserRegistrationForm onNextStep={handleNextStep} userData={userData} />
      )}
      {step === 2 && (
        <UserRegistrationFormAddressInfo
          onNextStep={handleNextStep}
          onBackStep={handleBackStep}
          userData={userData}
        />
      )}
      {step === 3 && (
        <UserRegistrationFormCompanyInfo
          onNextStep={handleNextStep}
          onBackStep={handleBackStep}
          userData={userData}
        />
      )}
    </>
  );
};

export default UserOnBoardingMain;
```

UserRegistrationForm component:

```jsx
import React from 'react';
import { useForm } from 'react-hook-form';

const UserRegistrationForm = ({ onNextStep, userData }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    onNextStep(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Form fields */}
      <input {...register('fieldName')} defaultValue={userData.fieldName} />
      {/* Other form fields */}
      <button type="submit">Next</button>
    </form>
  );
};

export default UserRegistrationForm;
```

UserRegistrationFormAddressInfo and UserRegistrationFormCompanyInfo components would have similar implementations.

In the above code, the `userData` state is updated whenever the `handleNextStep` function is called, which is triggered when the "Next" button is clicked in each form step. The `userData` is then passed as props to the child components. When the "Back" button is clicked, the `handleBackStep` function is called, which reduces the `step` value by 1, allowing you to navigate back to the previous step.

By providing the `defaultValue` prop to each form field in the `UserRegistrationForm` component, the fields will be populated with the corresponding values from the `userData` object. This way, when you navigate back to the previous step, the form fields will be prepopulated with the previously entered values.

Make sure to adjust the form field names and structure according to your specific requirements.
To create a Google Maps API, follow these steps:

1. Go to the Google Cloud Console: https://console.cloud.google.com.
2. Sign in with your Google account or create a new account if you don't have one.
3. Create a new project by clicking on the project dropdown at the top of the page and selecting "New Project." Enter a name for your project and click "Create."
4. Once your project is created, you will be redirected to the project dashboard.
5. Enable the Google Maps JavaScript API:
   - Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
   - In the sidebar, click on "APIs & Services" > "Library."
   - Search for "Google Maps JavaScript API" and select it from the results.
   - Click on the "Enable" button.
6. Set up API credentials:
   - Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
   - In the sidebar, click on "APIs & Services" > "Credentials."
   - Click on the "Create credentials" button and select "API key."
   - Copy the generated API key.
7. Restrict your API key (optional, but recommended for security):
   - On the credentials page, click on the API key you created.
   - Under "Key restriction," select the option that best fits your use case (e.g., HTTP referrers, IP addresses).
   - Configure the allowed referrers or IP addresses as needed.
8. Use your API key in your code:
   - Replace `YOUR_API_KEY` in your code with the API key obtained in the previous step.

Make sure to follow any additional usage limits and terms of service specified by Google. It's also important to secure and protect your API key to prevent unauthorized usage.

Please note that creating and using the Google Maps API may involve costs depending on your usage and the services used. Refer to the Google Cloud Console for pricing information and billing details.
Error:
Google Maps JavaScript API error: ApiNotActivatedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error

https://www.youtube.com/watch?v=n1UorU1PALk&t=47s

The "ApiNotActivatedMapError" error typically occurs when the Google Maps JavaScript API is not activated or enabled for your project. Here are some steps you can follow to resolve this error:

1. Go to the Google Cloud Console (https://console.cloud.google.com).
2. Select your project or create a new project if needed.
3. Make sure you have a billing account associated with your project. The Google Maps JavaScript API requires a billing account to be set up.
4. Enable the Google Maps JavaScript API for your project. You can do this by following these steps:
   - Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
   - In the sidebar, click on "APIs & Services" > "Library".
   - Search for "Google Maps JavaScript API" and select it from the results.
   - Click on the "Enable" button.
5. Set up the required API credentials. You need to create an API key and configure it to be used in your code.
   - Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
   - In the sidebar, click on "APIs & Services" > "Credentials".
   - Click on the "Create credentials" button and select "API key".
   - Copy the generated API key.
6. Update your code with the API key.
   - Replace `GOOGLE_MAPS_API_KEY` in your code with the API key obtained in the previous step.

After completing these steps, the Google Maps JavaScript API should be activated and the "ApiNotActivatedMapError" should no longer occur.
Sure, here is an email you can send to your HR:

Subject: Sick Leave Request

Dear Sony R,

I am writing to request a sick leave for today, June 28, 2023, due to fever and cold. I woke up this morning with a fever of 102 degrees Fahrenheit and a sore throat. I have also been feeling congested and have a runny nose.

I have already made an appointment with my doctor and will be going to see them later today. I will keep you updated on my condition and let you know when I expect to be back in the office.

In the meantime, I have already informed my team of my absence and have asked [colleague's name] to cover my workload.

I apologize for any inconvenience this may cause.

Thank you for your understanding.

Sincerely,

Jissmon Jose
Software Developer
8921762662
  const handleMobileNumberValidation = (phone: string) => {
    // const mobileNumberRegex = /^[+0-9\s]*$/;
    // const mobileNumberRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
    const mobileNumberRegex = /^(?:[0-9] ?){6,14}[0-9]$/;
    return mobileNumberRegex.test(phone);
  };


    if (primaryMobileNumber.trim() !== '') {
      if (!handleMobileNumberValidation(primaryMobileNumber)) {
        errors.primaryMobileNumber = 'Invalid mobile number';
      }
    }


    <div className="col-md-6">
              <label htmlFor="mobile" className="form-label w-100 mobile-label">
                Primary Mobile Number*
              </label>
              <div className="d-flex">
                {/* autocomlete field for isdcodelist */}
                <Autocomplete
                  disablePortal
                  id="isdcodelist"
                  options={isdCodesList}
                  isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      {...register('isdCode', {
                        required: true,
                      })}
                      className="isd-code-input"
                      placeholder="+971"
                    />
                  )}
                  renderOption={(props, option) => (
                    <span
                      className="phone-number-option"
                      {...props}
                    >
                      {option.countryName}
                    </span>
                  )}
                            // onchange event handler to set the isdCode state
                  onChange={(e, value: any) => setIsdCode(
                    value?.label,
                  )}
                />
                <input
                  type="text"
                  className="form-control mobile-input"
                  id="mobile"
                  placeholder="XXX XXX XXXX"
                // onchange
                  onChange={(e) => setPrimaryMobileNumber(e.target.value)}
                  {...register('primaryMobileNumber', {
                    required: true,
                  })}
                />
              </div>
              {/* handle errors */}
              {formErrors.primaryMobileNumber && (
              <span className="error-message">{formErrors.primaryMobileNumber}</span>
              )}
            </div>

const [formErrors, setFormErrors] = useState<UserRegistrationDetails>({
    firstName: '',
    lastName: '',
    gender: '',
    dateOfBirth: '',
    primaryEmail: '',
    secondaryEmail: '',
    primaryMobileNumber: '',
    secondaryMobileNumber: '',
    service: '',
  });

  const validateEmail = (email: string) => {
    const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
    return emailRegex.test(email);
  };

 const handleUserRegistrationForm = () => {
   
  const handleEmptyField = (fieldName: string, fieldValue: string, errorMessage: string) => {
      if (!fieldValue) {
        errors[fieldName] = errorMessage;
      }
    };

    handleEmptyField('firstName', firstName, 'First name is required');
    handleEmptyField('lastName', lastName, 'Last name is required');
    handleEmptyField('primaryEmail', primaryEmail, 'Primary email is required');
    handleEmptyField('primaryMobileNumber', primaryMobileNumber, 'Primary mobile number is required');
    handleEmptyField('dateOfBirth', dateOfBirth, 'Date of birth is required');

    if (primaryEmail.trim() !== '') {
      if (!validateEmail(primaryEmail)) {
        errors.primaryEmail = 'Invalid email';
      }
    }

    setFormErrors(errors);

 }
 
<input
                type="email"
                className="form-control email-input"
                id="email"
                placeholder="abc@babc.com"
                // onchange
                onChange={(e) => setPrimaryEmail(e.target.value)}
                {...register('primaryEmail', {
                  required: true,
                })}
              />




<DatePicker
                onChange={handleDatePicker}
                value={dateOfBirth}
                disableFuture
                maxDate={subYears(new Date(), 21)}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      readOnly: true,
                      placeholder: 'Select Date of Birth',
                    }}
                    {...register('dateOfBirth', {
                      required: true,
                      validate: {
                        ageVerification: (dateString) => {
                          const date = new Date(dateString);
                          return isAfter(subYears(new Date(), 21), date);
                        },
                      },
                    })}
                    className="date-picker date-picker-input"
                  />
                )}
                className="date-picker-field"
              />
<input
  type="text"
  className="form-control firstname-input"
  id="firstname"
  placeholder="John"
  onInput={(e) => {
    const input = e.target as HTMLInputElement;
    input.value = input.value.replace(/[^a-zA-Z ]/g, '');
    setFirstName(input.value);
  }}
  {...register('firstName', {
    required: true,
  })}
/>
<input
  type="text"
  className="form-control firstname-input"
  id="firstname"
  placeholder="John"
  onInput={(e) => {
    const input = e.target as HTMLInputElement;
    input.value = input.value.replace(/[^a-zA-Z ]/g, '');
    setFirstName(input.value);
  }}
  {...register('firstName', {
    required: true,
  })}
/>
<!doctype html>

  <head>
    <!-- CSS CODE -->
   <style>
    #pdf_renderer {
      display: block;
      margin: 0 auto;
    }
    </style>
  
  </head>
<body>
     <div id="my_pdf_viewer">
        <div id="canvas_container">
            <canvas id="pdf_renderer"></canvas>
        </div>

        <center>
            <div id="navigation_controls">
                <button id="go_previous">Previous</button>
                <input id="current_page" value="1" type="number"/>
                <button id="go_next">Next</button>
            </div>

            <a href="Resume_14.docx.pdf" download="Resume_14.docx.pdf">
            Download PDF</a>
        </center>
    </div>
    <script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }
     
        pdfjsLib.getDocument('./Resume_14.docx.pdf').then((pdf) => {
            myState.pdf = pdf;
            render();
        });

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
         
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');
     
                var viewport = page.getViewport(myState.zoom);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
         
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }

        document.getElementById('go_previous').addEventListener('click', (e) =>
        {
          if(myState.pdf == null || myState.currentPage == 1) 
            return;
          myState.currentPage -= 1;
          document.getElementById("current_page").value = myState.currentPage;
          render();
        });
        document.getElementById('go_next').addEventListener('click', (e) => {
          if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages) 
             return;
          myState.currentPage += 1;
          document.getElementById("current_page").value = myState.currentPage;
          render();
        });
        document.getElementById('current_page').addEventListener('keypress', (e) => {
          if(myState.pdf == null) return;
         
          // Get key code 
          var code = (e.keyCode ? e.keyCode : e.which);
         
          // If key code matches that of the Enter key 
          if(code == 13) {
            var desiredPage = document.getElementById('current_page').valueAsNumber;
                                 
            if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
                myState.currentPage = desiredPage;
                document.getElementById("current_page").value = desiredPage;
                render();
            }
           }
        });

    </script>
  </body>
</html>
HTML, XML
#fecha {
    font-family: 'frijole';
    color: navy;
    background-image: linear-gradient(orange,
            fuchsia,
            springgreen,
            fuchsia,
            dodgerblue,
            springgreen,
            fuchsia,
            orange,
            orange,
            fuchsia,
            springgreen);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
[selector] {
    font-family: 'frijole';
    color: navy;
    background-image: linear-gradient(rgb(44, 42, 42),
            rgba(240, 255, 255, 0.767),
            rgb(44, 42, 42),
            rgba(245, 245, 220, 0.747),
            rgb(44, 42, 42),
            rgba(255, 166, 0, 0.89),
            rgb(44, 42, 42),
            rgba(220, 20, 60, 0.822),
            rgb(44, 42, 42));
    background-repeat: no-repeat;
    background-size: cover;
    background-size: cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
<link href="https://fonts.cdnfonts.com/css/ds-digital" rel="stylesheet">
                
function digital() {
    let laHora = new Date();

    let horas = laHora.getHours();

    if (horas < 10) {
        horas = "0" + horas;
    }


    let minutos = laHora.getMinutes();

    if (minutos < 10) {
        minutos = "0" + minutos;
    }


    let segundos = laHora.getSeconds();

    if (segundos < 10) {
        segundos = "0" + segundos;
    }


    const reloj = `<aside id="relojillo"><h1>${horas} : </h1> <h2>${minutos}</h2><sup><h3> : ${segundos}</h3></sup></aside>`;

    const salida = document.getElementById("elReloj").innerHTML = reloj;

    setTimeout(digital, 1000);


    return salida;
}
digital();
<body>
    <aside id="elReloj"></aside>
    <script src="js/digital02.js"></script>
</body>
  <style>
      * {
          box-sizing: border-box;
      }
      
      @font-face {
          font-family: 'ds-digital';
          src: url('./ds_digital/DS-DIGII.TTF');
      }
      body {
          
      }
      #relojillo {
          width: fit-content;
          height: auto;
          position: relative;
          background-image: linear-gradient(232deg, #888, #888, #888);
          margin: auto auto;
          text-align: center;
          background-color: transparent;
          padding: 10% 10%;
      }
      
      #relojillo h1,
      #relojillo h2,
      #relojillo h3 {
          display: inline-block;
          font-family: 'ds-digital';
          font-size: 43pt;
          text-shadow: 0vw -3vw .1vw #999, -.3vw 4vw .1vw #f0f8ff;
          color: khaki;
          padding: 0vw .2vw;
      }
      #relojillo h3 {
          font-size: 21pt !important;
          text-shadow: 0vw -3vw .1vw orange, -.3vw 4vw .1vw orange;
      }
  </style>
"""
Problem Description
Given a number N, you have to find the largest Fibonacci number which is less than N.

Input Format
First line contains an integer T - Number of test cases.

Next T lines each have a given number N

Output Format
Print the answer for each test case in a separate line.

Sample Input 1
2

6

13

Sample Output 1
5

8

Explanation 1
In the first test case the largest Fibonacci number less than 6 is 5.

In the second test case the largest Fibonacci number less than 13 is 8 (the next Fibonacci number after 8 is 13 which is equal to the number N i.e. 13)

Constraints
T <= 10^4

0 < N <= 10^9
"""

Please help me to debug the below code based on details given above and return the updated full version of code.

"""
'use strict';

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', inputStdin => {
    inputString += inputStdin;
});

process.stdin.on('end', _ => {
    inputString = inputString.trim().split('\n').map(string => {
        return string.replace(/\s+/g, " ").trim();
    });
    main();
});

function readLine() {
    return inputString[currentLine++];
}

function readIntArr() {
    let str = readLine();
    str = str.split(" ");
    let arr = [];
    for ( let i = 0; i < str.length; i++ ) {
        arr.push(parseInt(str[i], 10));
    }
    return arr;
}

function print(x) {
    process.stdout.write(x + "");
}

function largestFibonacciNumber(n) {
    let a = 0;
    let b = 1;
    while (b <= n)
    {
        a = b;
        b = a + b;
    }
    return a;
}

function main() {
    let t=parseInt(readLine(),10);
    while(t--){
    let n=parseInt(readLine(),10)

    let result=largestFibonacciNumber(n);
    console.log(result);
    }
}
"""

"""
<main className="main-container">
      <section className="image-section">
        <div className="image-container">
          <img
            src={WelcomeImageUserOnBoarding}
            alt="Welcome User On Boarding Image"
            sizes=""
          />
          <div className="image-overlay">
            <h2 className="image-title">Welcome</h2>
            <p className="image-content">The DIFC Courts is an independent common law judiciary based in the Dubai International Financial Centre (DIFC) with jurisdiction governing civil and commercial disputes.</p>
          </div>
        </div>
      </section>
      <section className="registration-section">
        <Typography className="question" sx={{ mt: 2, mb: 1 }}>
          Register Now
        </Typography>
        <Typography className="question-helper">
          Enter Below Details to Continue
        </Typography>
        <div className="button-wrapper">
          <button
            type="button"
          >
            <img
              src={FingerPrintIcon}
              className="finger-print-icon"
              alt="Finger Print Icon"
              sizes=""
            />
            Signup with UAE Pass

          </button>
        </div>
        <Typography
          className="question-helper sub-text"
          sx={{ mt: 3 }}
        >
          Or Enter Details Below
        </Typography>
        <form className="form mt-3">
          <div className="row form-row mb-4">
            {/* FirstName Col */}
            <div className="col-md-6">
              <label
                htmlFor="firstname"
                className="form-label w-100 firstname-label"
              >
                FirstName*
              </label>
              <input
                type="text"
                className="form-control firstname-input"
                id="firstname"
                placeholder="John"
              />
            </div>
            {/* LastName Col */}
            <div className="col-md-6">
              <label
                htmlFor="lastname"
                className="form-label w-100 lastname-label"
              >
                LastName*
              </label>
              <input
                type="text"
                className="form-control lastname-input"
                id="lastname"
                placeholder="Doe"
              />
            </div>
          </div>
          <div className="row form-row mb-4">
            {/* gender selection buttons */}
            <div className="col-md-6">
              <label
                htmlFor="gender"
                className="form-label w-100 gender-label"
              >
                Gender
              </label>
              <OptionButtons />
            </div>
            {/* Date of Birth Col */}
            <div className="col-md-6">
              <label
                htmlFor="dob"
                className="form-label w-100 dob-label"
              >
                Date of Birth*
              </label>
              <DatePicker
                onChange={handleDatePicker}
                value={dateOfBirth}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      placeholder: 'Select Date of Birth',
                    }}
                    // {...register('dateOfBirth', {
                    //   required: true,
                    // })}
                    className="date-picker date-picker-input"
                  />
                )}
                className="date-picker-field"
              />
            </div>
          </div>
          <div className="row form-row mb-2">
            {/* Email Col */}
            <div className="col-md-6">
              <label
                htmlFor="email"
                className="form-label w-100 email-label"
              >
                Primary Email*
              </label>
              <input
                type="email"
                className="form-control email-input"
                id="email"
                placeholder="abc@babc.com"
              />
            </div>
            {/* Mobile Number Col */}
            <div className="col-md-6">
              <label
                htmlFor="mobile"
                className="form-label w-100 mobile-label"
              >
                Primary Mobile Number*
              </label>
              <input
                type="text"
                className="form-control mobile-input"
                id="mobile"
                placeholder="+971 50 123 4567"
              />
            </div>
          </div>
          <div className="row form-row mb-4">
            {/* Secondary Email Col */}
            <div className="col-md-6">
              <div className="secondary-email">
                <span>
                  Add Secondary Email
                </span>
                {/* increase the size of below AiOutlinePlusCircle icon */}
                <AiOutlinePlusCircle
                  className="secondary-email-icon"
                  // increase the size
                  size={30}
                />
              </div>
            </div>
            {/* Secondary Mobile Number Col */}
            <div className="col-md-6">
              <div className="secondary-mobile">
                <span>
                  Add Secondary Mobile
                </span>
                <AiOutlinePlusCircle
                  className="secondary-mobile-icon"
                  // increase the size
                  size={30}
                />
              </div>
            </div>
          </div>

          {/* Select Services from dropdown list */}
          <div className="row form-row mb-4">
            <div className="col-md-12">
              <label
                htmlFor="services"
                className="form-label w-100 services-label"
              >
                How did you know about this service?
              </label>
              {/* add autocomplete to select */}
              <Autocomplete
                disablePortal
                id="combo-box-demo"
                options={services}
                isOptionEqualToValue={(option, value) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    placeholder="Social Media - LinkedIn / Twitter / Instagram"
                    className="services-input"
                  />
                )}
              />
            </div>
          </div>

          {/* add new row */}
          <div className="row form-row mb-4">
            <div className="col-md-4">
              {/* add a next step button that follows default styles */}
              <button
                type="button"
                className="next-step-button"
              >
                Next
              </button>
            </div>
          </div>

          {/* add new row below */}
          <div className="row form-row mb-4">
            <div className="col-md-6">
              {/* add a text 'Already have an account? Login ' */}
              <span className="already-have-account">
                Already have an account?
              </span>
              {/* wrap login by Link component */}
              <Link
                to="/accounts/login"
                className="login-link"
              >
                Login
              </Link>

            </div>
          </div>

        </form>
      </section>
    </main>
"""

SASS
--------
"""
/* stylelint-disable */ 
.main-container {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 112px;
    background: #FFFFFF;
    border-radius: 20px;
}

.image-section {
    position: relative;
    flex: 1;
  }
  
  .image-section img {
    width: 100%; /* Set the desired width */
    height: auto; /* Maintain aspect ratio */
  }

  .registration-section {
    flex: 1;
    padding: 20px;
    margin: 30px;
    box-sizing: border-box; 
    overflow: hidden; 
  }
  
  .image-container {
    position: relative;
    display: inline-block;
  }
  
  .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    margin-bottom: 130px;
  }
  
  .image-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 70px;
    line-height: 64px;
    letter-spacing: -0.04em;
    text-transform: capitalize;
    color: #FFFFFF;
  }
  
  .image-content {
    color: #FFFFFF;
    text-align: left;
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
  }
  
  .question {
    font-family: "Basis Grotesque Arabic Pro" !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 40px !important;
    line-height: 45px !important;
    letter-spacing: -0.04em !important;
    color: #1b202d !important;
  }
  
.question-helper {
    font-family: "Basis Grotesque Arabic Pro" !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    color: #1b202d !important;
}

.button-wrapper {
    margin-top: 40px;
  }
  
  .button-wrapper button {
    width: 100%;
    background: #000000;
    border-radius: 5px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #F5F5F5;
    padding: 16px 50px;
  }

  .finger-print-icon {
    margin-right: 14px;
  }
  
  .firstname-label,
  .lastname-label,
  .gender-label,
  .email-label,
  .mobile-label,
  .services-label
  {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: 'normal';
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 18px;
    color: #1b202d;
    margin-top: 0px !important;
  }

  .firstname-input,
  .lastname-input,
  .email-input,
  .mobile-input,
  .services-input
    {
    font-family: 'Basis Grotesque Arabic Pro' !important;
    font-style: 'normal' !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    line-height: 18px !important;
    color: #1b202d !important;
    height: 2.5rem !important;
  }

  .date-picker-field .date-picker-input {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 18px;
  }

  // right align secondary-email and secondary-mobile
  .secondary-email,
  .secondary-mobile {
    text-align: right;
  }

  // add left spacing between secondary-email and secondary-email-icon
  .secondary-email-icon {
    margin-left: 10px;
  }

  // add left spacing between secondary-mobile and secondary-mobile-icon
  .secondary-mobile-icon {
    margin-left: 10px;
  }

  // add background: #023979;
// border-radius: 10px; to next-step-button
.next-step-button {
  background: #023979;
  border-radius: 10px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #F5F5F5;
  padding: 16px 50px;
  border: none;
}

// add below style to already-have-account
.already-have-account {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #494A53;
}

// add below style to login-text
.login-link {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #1B202D;
  margin-left: 5px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

"""


You are a CSS expert.

Client wanrs to Auto Update the WelcomeImageUserOnBoarding image height when main container height increments. image height should be in sync
with the height change of main container div element.
So when main container height updates image height also auto update with same. Thus it wont leave any spacing at bottom.
I have given the jsx and sass file for your reference.
If you have any questions you can ask.


Solutions:

To achieve the desired effect of the `WelcomeImageUserOnBoarding` image height being in sync with the height change of the `main-container` div element, you can use CSS to make the image responsive and adjust its height accordingly.

Here's an updated version of the SASS code with modifications to make the image height responsive:

```sass
.main-container {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 112px;
  background: #FFFFFF;
  border-radius: 20px;
  position: relative; /* Add position relative to main-container */
}

.image-section {
  position: relative;
  flex: 1;
}

.image-section img {
  width: 100%;
  height: 100%; /* Set the image height to 100% of the parent container */
  object-fit: cover; /* Maintain aspect ratio and cover the entire container */
}

.registration-section {
  flex: 1;
  padding: 20px;
  margin: 30px;
  box-sizing: border-box;
  overflow: hidden;
}

.image-container {
  position: relative;
  display: inline-block;
  width: 100%; /* Set the image container width to 100% */
  height: 100%; /* Set the image container height to 100% */
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  margin-bottom: 130px;
}

/* Rest of the styles remain the same */
```

In this code, I've added `position: relative` to the `main-container` to establish a positioning context for its child elements. Then, I've modified the styles for the `image-section`, `image-container`, and `image-section img` to make the image responsive. By setting the image height to `100%` of the parent container and using `object-fit: cover`, the image will automatically adjust its height to match the height of the `main-container`.

Please ensure you include this updated SASS code in your project and recompile it to generate the CSS styles.
  <Link
                to="/accounts/login"
                className="login-link"
              >
                Login
              </Link>


.login-link {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  /* identical to box height */
  color: #1B202D;
  // assign left margin to login-text
  margin-left: 5px;
  // add an underline to login-link
  text-decoration: underline;
}

You are a front end developer
I have applied underline to login link. but letter 'g'  of login text has no underline. i dont how to resolve this. You can apply any styling to put the underline for whole text.

Solution:

It sounds like the g in the word "login" is not being underlined along with the rest of the text, which can happen if the text is not aligned properly with the underline.

To fix this issue, you can try adding the text-underline-offset property to the .login-link class, with a value of 3px or 4px. This property will adjust the position of the underline so that it lines up correctly with the text.



.login-link {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #1B202D;
  margin-left: 5px;
  text-decoration: underline;
  text-underline-offset: 3px; /* Adjust value as needed */
}


With this change, the underline should now cover the entire text, including the g. You can adjust the value of text-underline-offset as needed to ensure that the underline lines up properly with the text.
JSX
"""
<Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px' }}>
              Draft Will Using the System
            </div>
            <div className="text-center choose-method-draft-will-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-will-upload-icon-container">
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && isAnyWillCardSelected && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeGUID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
    
   """
   
   css
   ------
   """
   /* stylelint-disable */ 

.card-container-draft-will.active, .card-container-will-copy-upload.active  {
    background-color: #E4FDFF;
    border-radius: 20px;
    padding: 28px;
}
.card-container-draft-will {
    width: 50%;
    margin-right: 10px;
    position: relative;
}
.modal-choose-method-subtitle {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 18px;
    color: #1B202D;
}

.modal-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 45px;
    letter-spacing: -0.04em;
    color: #1B202D;
}

.btn-close {
    color: #494A53 !important;
    font-size: 10px !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
}

.btn-close:before {
    background-color: #f1f1f1 !important;
    border-radius: 50px !important;
  }

  .check-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 10px;
  }
  
  .choose-method-draft-will-icon-container {
    margin-bottom: 20px;
    margin-top: 20px;
  }
  
  .choose-method-will-upload-title {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
  }
  """
  
  You are expert in css to sass conversion.
  Client want the above css to be converted in to sass format.
  it should follow sass styling conventions.
  you have to convert it as per the requirement of client.
  for your reference, i have given the respective JSX content for the above styles.
  you can check the css selectors and make sure current styles wont break.
  Return the converted sass 
import { useDispatch, useSelector } from 'react-redux';
import fetchWillsList, { willsListSelector } from '@redux/slices/wills-list';


  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch<any>(fetchWillsList());
  }, []);


  const handleCardClick = (cardName: string) => {
    let willTypeName: string = '';
    let willTypeGUID: string = '';
    setActiveCard(cardName);
    results.forEach((will: any) => {
      if (cardName === 'draftWill' && will.willTypeName === 'Templated Full Will') {
        willTypeName = will.willTypeName;
        willTypeGUID = will.willTypeGUID;
      } else if (cardName === 'willCopyUpload' && will.willTypeName === 'Full Will') {
        willTypeName = will.willTypeName;
        willTypeGUID = will.willTypeGUID;
      }
    });

    setSelectedWillCard({ willTypeName, willTypeGUID });
  };
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
}

h1 {
    color: #333333;
}

p {
    color: #666666;
}

ul {
    color: #777777;
}
In react-router-dom v6 useHistory() is replaced by useNavigate()

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');


"""
 <Link to="/wills/quick-booking">
                    <span className="box-title">
                      Book Quick Appointment
                    </span>
                  </Link>
  """                
                  
You are a experienced react developer.
  
currently when user clicks on above link, moves to `/wills/quick-booking` route. 
what you need to do is to first show a bootstrap modal popup before moving to that route. 
so you have to show a modal popup before moving to above quick booking page.
you have to also create a modal pop using boostrap. 

modal contents were given below:

Heading or title
-------------------
Confirm


Content or Subcontent 
--------------------
Testators may enter minimum information to secure an appointment. 
Full details must be completed 72 hours prior to the booking date to avoid appointment cancellation. 
Registered Will Draftsmen are requested to refrain from using the quick booking option

Two Buttons
---------
Continue Button - When user clicks on this button, it moves to /wills/quick-booking to open quick booing page.
Cancel Button - Close the modal popup and not redirected to above route.


No need to apply any styling as of now. We can do it later on. You have to use boostrap modal.
Sure! I can help you with that. Here's an example of how you can create a Bootstrap modal in React and use it to show a confirmation popup before redirecting to the `/wills/quick-booking` route:

First, make sure you have the Bootstrap CSS and JS files included in your project.

Next, create a new React component called `ConfirmationModal`:

```jsx
import React from 'react';
import { Modal, Button } from 'react-bootstrap';

const ConfirmationModal = ({ show, handleClose, handleContinue }) => {
  return (
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Confirm</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <p>Testators may enter minimum information to secure an appointment.</p>
        <p>
          Full details must be completed 72 hours prior to the booking date to avoid appointment cancellation.
        </p>
        <p>Registered Will Draftsmen are requested to refrain from using the quick booking option.</p>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={handleClose}>
          Cancel
        </Button>
        <Button variant="primary" onClick={handleContinue}>
          Continue
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default ConfirmationModal;
```

In your main component where the link is located, you can use the `ConfirmationModal` component and handle its state:

```jsx
import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import ConfirmationModal from './ConfirmationModal';

const MainComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const history = useHistory();

  const handleShowModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleContinue = () => {
    handleCloseModal();
    history.push('/wills/quick-booking');
  };

  return (
    <div>
      <Link to="/wills/quick-booking" onClick={handleShowModal}>
        <span className="box-title">Book Quick Appointment</span>
      </Link>
      <ConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={handleContinue}
      />
    </div>
  );
};

export default MainComponent;
```

In the above example, the `MainComponent` renders a link with the class name `box-title`, and when clicked, it calls the `handleShowModal` function to show the modal popup. The modal is conditionally rendered based on the `showModal` state.

The `ConfirmationModal` component receives three props: `show` (to determine whether the modal should be displayed), `handleClose` (to close the modal), and `handleContinue` (to handle the continue button click and redirect to the desired route).

When the user clicks "Continue" in the modal, the `handleContinue` function is called, which first closes the modal and then uses the `useHistory` hook from React Router to navigate to the `/wills/quick-booking` route.

Remember to adjust the code and import the necessary dependencies based on your project structure and setup.

I hope this helps! Let me know if you have any further questions.
you have to suggest me a branch name in which i implement UI of confirm modal pop up. branch name should follow convention.


  <Link to="/wills/quick-booking">
                    <span className="box-title">
                      Book Quick Appointment
                    </span>
                  </Link>
                  
                  
                  you are an expert in react development.
                  i have added a link component and set the route. 
                  but when i clikc "Book Quick Appointment". it throws error message like  
                  "No route matches URL \"/wills/quick-booking\""
                  its status is 404 not found.
                  Help me to find and fix solution for the problem.
                  
                  

                  Solutions:
                  
                  1. Make sure that you have a Route component in your app that matches the /wills/quick-booking path. You can do this by adding the following code to your app:

<Route exact path="/wills/quick-booking">
  {/* Insert the component for the quick booking page here */}
</Route>

check routes file in projct directory and update the path.







                  
"""
Problem Description
Given a non-empty array of digits representing a non-negative integer, plus one to the integer and return the same list.

The digits are stored such that the most significant digit is at the head of the list, and each element in the array contain a single digit.

You may assume the integer does not contain any leading zero, except the number 0 itself.

Input format
You will be given a list of integers.

Output format
Return a list of integer +1.

Sample Input 1
1 2 3

Sample Output 1
1 2 4

Explanation 1
The array represents the integer 123.

Sample Input 2
4 3 2 1

Sample Output 2
4 3 2 2
"""

Consider you are an experienced python developer.
Help me to solve the above problem and integrate the code into below code.
Code should follow python naming conventions
Return the updated code.

```py
def plusOne(digits):
if __name__ == '__main__':
    digits = input().split()
    digits = [int(i) for i in digits]
    result = plusOne(digits)
    for i in result:
        print(i,end=' ')
```
.text-ellipsis--2{
  text-overflow:ellipsis;
  overflow:hidden;
  // Addition lines for 2 line or multiline ellipsis
  display: -webkit-box !important;
  -webkit-line-clamp: 2; /*here number of lines*/
  -webkit-box-orient: vertical;
  white-space: normal;
}
Code 1:
"""
# TODO: Implement this method
from typing import List


def findElement(n: int, arr: List[int], x: int) -> int:

# NOTE: Please do not modify this function
def main():
    n = int(input().strip())
    arr = list(map(int, input().strip().split(' ')))
    x = int(input().strip())

    xIndex = findElement(n, arr, x)
    print(xIndex)

if __name__=="__main__":
    main()
"""

Code 2:
"""
def find_index(n,arr,x):
    for i in range(n):
        if arr[i]==x:
            return i
    return -1
"""


Consider you are a python devekoper.
Help me to integrate the Code 2 into Code 1.
Return the updated version of code. 
"""
 <Typography

              >
                {moment(dateOfBirth).format('DD/MM/YYYY')}

              </Typography>
"""

Consider you are a jaavscript developer.

I want the dateofBirth to shown as `17 May 1998` format . currenlty it is shown as `17/05/1998`.

I want you to change format i wish to. Here i used moment package you can use the same package.

Please update rhe code and return the udpated one


"""
import React, { useState } from "react";
import "./style.scss";
import Typography from "@mui/material/Typography";
import WitnessTable from "@components/WitnessTable";
import { useForm } from "react-hook-form";
import Autocomplete from "@mui/material/Autocomplete";
import AutocompleteOption from "@mui/joy/AutocompleteOption";
import { DatePicker } from "@mui/x-date-pickers";
import { TextField } from "@mui/material";

// import custom hooks
import useNationalityList from "@utils/hooks/useNationalityList";
import useCountryList from "@utils/hooks/useCountryList";
import useCityList from "@utils/hooks/useCityList";
import useIsdCodesList from "@utils/hooks/useIsdCodesList";
import { useDispatch, useSelector } from "react-redux";

// selectors
import {
  dropDownSelector,
  fetchCityList,
  fetchCountryList,
  fetchNationalityList,
} from "@redux/slices/dropDowns";
import { willsValidatorSelector } from "@redux/slices/willsValidator";
import getGuid from "@utils/Wills/getGuid";
import axios from "axios";
import {
  submitWitnessDetails,
  willWitnessDetailsSelector,
  fetchWitnessList,
  fetchWitnessDetailsByGuid,
} from "@redux/slices/wills-witness-details";

import moment from "moment";

"""
I have the given the imports above. what you have to do is to import them in correct order and it should be easilty readable. organize the imports. please dont change any package name or change into default or named import. just reorder the imports for user readablity.



payload for posting data:

"""
{
  "address": "binto",
  "bookedForProfileGUID": "05fa50b0-a450-437f-ade3-19bb128192a5",
  "city": "Wadi Zinati",
  "countryGUID": "07217663-f131-46b7-876b-8402f7a8312d",
  "dateOfBirth": "2023-06-06T18:30:00.000Z",
  "email": "gfdd@gmail.com",
  "emiratesId": "987978",
  "foreName": "test",
  "isdCode": "+81",
  "isdCodeGUID": "8841f91d-73b4-494c-b794-d8341faf80ab",
  "nationality": "33a784eb-6e88-43d6-8bf7-f41785851f25",
  "passportNo": "7456546",
  "phoneNumber": "76575675",
  "state": "rtfytrytr",
  "surName": "user",
  "zipCode": "654654"
}
"""

Data got while calling fetching:

"""
{
    "Output": {
        "profileguid": "34b4dd38-4c9c-42ee-9391-added811e2ad",
        "surName": "user",
        "foreName": "test",
        "address": "binto",
        "city": "Wadi Zinati",
        "countryName": null,
        "dateOfBirth": "2023-06-06T00:00:00",
        "passportNo": "7456546",
        "emiratesId": "",
        "phoneNumber": "76575675",
        "email": "gfdd@gmail.com",
        "nationality": "83",
        "isdCode": 106,
        "isdCodeGUID": "8841f91d-73b4-494c-b794-d8341faf80ab",
        "zipCode": "654654",
        "countryGUID": "07217663-f131-46b7-876b-8402f7a8312d",
        "state": "rtfytrytr",
        "dob": "2023-6-6",
        "emiratesIdNo": null,
        "serviceGUID": null,
        "bookedForProfileGUID": null
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "08/Jun/2023 16:24:06",
    "version": "V1"
}

"""

Consider you are API expert.

emiratesId field is posting but when we call get method emiratesId is returned as empty string.
Post api is working. get api is also working i think but emiratedId field is retunred empty string even i inserted the same.

I had given the payload while posting data, also the response i got while fetching below it. 

I want to know what is the reason behind this issue.

Please help me to find is this a problem in the api side.
{
    "Output": {
        "saveStatus": false,
        "editStatus": true,
        "deleteStatus": false,
        "itemGUID": null,
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "08/Jun/2023 12:02:32",
    "version": "V1"
}
{
  "address": "dfdfg dgdf",
  "bookedForProfileGUID": "05fa50b0-a450-437f-ade3-19bb128192a5",
  "city": "San Ignacio",
  "countryGUID": "b71f3fa5-a42b-4a0b-a6c3-8d956bb57757",
  "dateOfBirth": "2023-06-06T18:30:00.000Z",
  "email": "jgh@gmail.com",
  "emiratesId": "9897897",
  "foreName": "fgsdfsdf",
  "isdCode": "+591",
  "isdCodeGUID": "4d07418d-1d45-4500-ab49-0682eaae51b7",
  "nationality": "44d7c4c3-9690-4fe8-a733-bb9b1c1240e8",
  "passportNo": "67856876",
  "phoneNumber": "8567567567",
  "profileguid": "9294c7f8-8fb0-4e61-8f02-49db54ba7254",
  "state": "jmjhmh",
  "surName": "sdfsdfs",
  "zipCode": "6756765"
}
{
    "Output": {
        "saveStatus": true,
        "editStatus": false,
        "deleteStatus": false,
        "itemGUID": "bff9b460-cae9-4b1f-8e9b-61b6dc991abc",
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 12:31:09",
    "version": "V1"
}
{
    "Output": {
        "profileguid": "4320abce-c414-4c9b-967d-20323748f427",
        "surName": "dfgdf",
        "foreName": "hdf",
        "address": "gdfgdf gdfgdf",
        "city": "Ruyigi",
        "countryName": null,
        "dateOfBirth": "2023-06-06T00:00:00",
        "passportNo": "76575645",
        "emiratesId": "",
        "phoneNumber": "69573498",
        "email": "ckvh@gmail.com",
        "nationality": "9",
        "isdCode": 18,
        "isdCodeGUID": "8c7f202f-1f30-4ab9-bb6a-026f272c3c30",
        "zipCode": "76654654",
        "countryGUID": "8d68d0b0-7292-4262-a0b1-076014fcbb9d",
        "state": "kerala",
        "dob": "2023-6-6",
        "emiratesIdNo": null,
        "serviceGUID": null,
        "bookedForProfileGUID": null
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 12:11:17",
    "version": "V1"
}
{
    "Output": {
        "profileguid": "4320abce-c414-4c9b-967d-20323748f427",
        "surName": "dfgdf",
        "foreName": "hdf",
        "address": "gdfgdf gdfgdf",
        "city": "Ruyigi",
        "countryName": null,
        "dateOfBirth": "2023-06-06T00:00:00",
        "passportNo": "76575645",
        "emiratesId": "",
        "phoneNumber": "69573498",
        "email": "ckvh@gmail.com",
        "nationality": "9",
        "isdCode": 18,
        "isdCodeGUID": "8c7f202f-1f30-4ab9-bb6a-026f272c3c30",
        "zipCode": "76654654",
        "countryGUID": "8d68d0b0-7292-4262-a0b1-076014fcbb9d",
        "state": "kerala",
        "dob": "2023-6-6",
        "emiratesIdNo": null,
        "serviceGUID": null,
        "bookedForProfileGUID": null
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 11:15:19",
    "version": "V1"
}
{
    "Output": {
        "saveStatus": true,
        "editStatus": false,
        "deleteStatus": false,
        "itemGUID": "d68afb9e-8bd8-4e66-9bfa-c7666901a8ee",
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 11:04:21",
    "version": "V1"
}
{
  "address": "gdfgdf gdfgdf",
  "bookedForProfileGUID": "05fa50b0-a450-437f-ade3-19bb128192a5",
  "city": "Ruyigi",
  "countryGUID": "8d68d0b0-7292-4262-a0b1-076014fcbb9d",
  "dateOfBirth": "2023-06-06T18:30:00.000Z",
  "email": "ckvh@gmail.com",
  "emiratesId": "856345346",
  "foreName": "hdf",
  "isdCode": "+880",
  "isdCodeGUID": "8c7f202f-1f30-4ab9-bb6a-026f272c3c30",
  "nationality": "5f17dd01-c266-4da2-95c9-fedde4c60e73",
  "passportNo": "76575645",
  "phoneNumber": "69573498",
  "state": "kerala",
  "surName": "dfgdf",
  "zipCode": "76654654"
}
{
    "Output": {
        "saveStatus": true,
        "editStatus": false,
        "deleteStatus": false,
        "itemGUID": "4320abce-c414-4c9b-967d-20323748f427",
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 10:49:27",
    "version": "V1"
}
"""
<Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    placeholder="+971"
                    options={isdCodesList}
                    isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        {...register('isdCode', {
                          required: true,
                        })}
                      />
                    )}
                    onChange={(e, newVal: any) => {
                      console.log('newVal', newVal);
                      setPhoneNumber(newVal?.label);
                    }}
                  />

"""

Sugeest you are a react developer expert.

I want to show country name instead of country code.
you can make the changes you need.
please update the code and return.
"""
<div className="row email-phone-main-wrapper">
            <div className="col-md-6 phone-col-wrapper">
              <div className="mb-3">
                <label htmlFor="phoneNumber" className="form-label phone-number-label w-100">
                  Phone Number*
                </label>
                <div className="d-flex">
                  <Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    placeholder="+971"
                    options={isdCodesList}
                    isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        {...register('isdCode', {
                          required: true,
                        })}
                      />
                    )}
                    onChange={(e, newVal: any) => {
                      console.log('newVal', newVal);
                      setPhoneNumber(newVal?.label);
                    }}
                  />
                  <input
                    type="text"
                    className="form-control-phonenumber"
                    id="phoneNumber"
                    aria-describedby="phoneNumberHelp"
                    placeholder="xxx xxxx xxxxxx"
                    {...register('phoneNumber', {
                      required: true,
                    })}
                    onChange={(e) => setPhoneNumber(e.target.value)}
                  />
                </div>
                {
                  errors?.phoneNumber?.type === 'required' && (
                    <span className="error">
                      please enter your phone number
                    </span>
                  )
                }
              </div>
            </div>
            <div className="col-md-4 email-col-wrapper">
              <div className="mb-3">
                <label htmlFor="email" className="form-label w-100">
                  Email Address
                </label>
                <input
                  type="text"
                  className="form-control"
                  id="email"
                  aria-describedby="emailHelp"
                  placeholder="eg:abc@mail.com"
                  {...register('email')}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>
            </div>
          </div>
"""


You aree CSS expert. You have to do following design changes written inbullet points:

parent element - email-phone-main-wrapper
child elements - phone-col-wrapper, email-col-wrapper 
1. childs of email-phone-main-wrapper div element should appear in row format ie top and bottom style when screem with is equal or below 768px and height 1024 px. 
2. Both the child element should have same width when responsive. code for your reference is above.
3. YOu can media queries to achieve this result.
4. Return the updated sass code having media queries.
row {
  
  display: flex;
    flex-direction: column;
}


@media (min-width: 768px)
.phone-number-wrapper {
    flex: 0 0 auto;
    width: 100%;
}

.form .email-col-wrapper {
    margin-left: 0px;
    width: 75%;
}

"""
<form className="form">
          <div className="row form-row">
            <div
              className="col-md-4"
            >
              <div className="mb-3">
                <label
                  htmlFor="forename"
                  className="form-label w-100 forename-label"
                >
                  Forename(s) - All First and Middle Names(as per passport)
                </label>
                <input
                  type="text"
                  className="form-control forename-input"
                  id="forename"
                  placeholder="Aron Mathew"
                  onChange={(e) => setForeName(e.target.value)}
                  {...register('foreName', {
                    required: true,
                  })}
                />
                {
                errors?.foreName?.type === 'required' && (
                  <span className="error">
                    please enter your forename
                  </span>
                )
              }
              </div>
            </div>
            <div className="col" />
            <div className="row">
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="surname" className="form-label w-100">
                    Surname*
                  </label>
                  <input
                    type="text"
                    className="form-control surname-input"
                    id="surname"
                    aria-describedby="surnameHelp"
                    placeholder="Eg: Philip"
                    onChange={(e) => setSurName(e.target.value)}
                    {...register('surName', {
                      required: true,
                    })}
                  />
                  {
                  errors?.surName?.type === 'required' && (
                    <span className="error">
                      please enter your surname
                    </span>
                  )
                }
                </div>
              </div>
            </div>
            {/* date of birth and  nationality */}
            <div className="row">
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="dateOfBirth" className="form-label date-of-birth-label w-100">
                    Date of Birth*
                  </label>
                  <DatePicker
                    onChange={(e: any) => {
                      handleDatePicker(e);
                    }}
                    value={dateOfBirth}
                    renderInput={(params: any) => (
                      <TextField
                        {...params}
                        inputProps={{
                          ...params.inputProps,
                          placeholder: 'Select Date of Birth',
                        }}
                        {
                            ...register('dateOfBirth', {
                              required: true,
                            })
                          }
                        className="date-picker date-picker-input"
                      />
                    )}
                    className="date-picker-field"
                  />
                  {
                    errors?.surName?.type === 'required' && (
                      <span className="error">
                        please enter your date of birth
                      </span>
                    )
                  }
                </div>
              </div>
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="nationality" className="form-label nationality-label w-100">
                    Nationality*
                  </label>
                  <Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    options={nationalitiesList}
                    isOptionEqualToValue={(option: any, value: any) => option.nationalityGuid === value.nationalityGuid}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        {...register('nationality', {
                          required: true,
                        })}
                      />
                    )}
                    onChange={(e, newVal: any) => {
                      console.log('newVal', newVal);
                      setNationalityGuid(newVal?.nationalityGuid);
                    }}
                  />
                </div>
              </div>
            </div>

            {/* passport number and emirates ID */}
            <div className="row">
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="passportNo" className="form-label passport-number-label w-100">
                    Passport Number*
                  </label>
                  <input
                    type="text"
                    className="form-control passport-number-input"
                    id="passportNo"
                    placeholder="xx xxxx xxxx"
                    onChange={(e) => setPassportNo(e.target.value)}
                    {...register('passportNo', {
                      required: true,
                    })}
                  />
                  {
                    errors?.passportNo?.type === 'required' && (
                      <span className="error">
                        please enter your passport number
                      </span>
                    )
                  }
                </div>
              </div>

              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="emiratesId" className="form-label emirates-id-label w-100">
                    Emirates ID*
                  </label>
                  <input
                    type="text"
                    className="form-control emirates-id-input"
                    id="emiratesId"
                    placeholder="Eg: 123456789"
                    onChange={(e) => setEmiratesID(e.target.value)}
                    {...register('emiratesID', {
                      required: true,
                    })}
                  />
                  {
                    errors?.emiratesID?.type === 'required' && (
                      <span className="error">
                        please enter your emirates id
                      </span>
                    )
                  }
                </div>
              </div>
            </div>
            <h4 className="form-sub-head">
              Current Residential Address (Not PO Box)
              <hr />
            </h4>
"""

You are scss expert.
you have to nest form-sub-head element of form class. You have to follow sass conventions.
Return the converted styling.
*,
body {
    box-sizing: border-box;
}

body {
    width: 96%;
    margin: auto;
    margin-top: 5%;
    text-align: center;
}

fieldset {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    padding: 5vw;
    height: 6vw;
    display: flex;
    flex-direction: column;
    justify-content:center;
    
}


#formContent {
    width: 25%;
    background-color: lightslategray;
}

::placeholder {
    text-align: center;
}

"""
import styled from '@emotion/styled';
import React from 'react';
import { useDispatch } from 'react-redux';
 
const WillsTable = styled('div')(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
  }));
"""
 
Property 'palette' does not exist on type 'Theme'.


Solution:

https://stackoverflow.com/a/72594201

Styled should be import from @mui/material/styles, as you can see here. So, the code will be like:

import { styled } from "@mui/material/styles";
"""
import styled from '@emotion/styled';
import React from 'react';
import { useDispatch } from 'react-redux';

const WillsTable = styled('div')(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
  }));
"""

Property 'palette' does not exist on type 'Theme'.

Suggest a solution for the abover error. and update the current code with newer.



"""
<div className="file-list-item" key={index}>

  			<div className="file-info">
                <div
                  className="file-icon"
                >
                  <img src={FileListIcon} alt="File List Icon" />
                </div>
                <div className="file-name">
                  {file.name}
                </div>
              </div>

              <div className="close-icon" onClick={() => removeFile(file)}>
                <span>Remove</span>
              </div>
            </div>
"""

Suggest you are a experienced react developer.

`file-list-item` div element contains two child div elements `file-info` element and `close-icon` div element. These two chilf elements should have space between them. You can apply flex properties if needed. Write the styling from scratch. background color and border radius of parent element is 
#E4FDFF and 30px. Also please explain the change you make. file-icon and file-name should have margin of 10px in between. equal padding around file-list-item div element.  Return the updated version of code ans styles.



You are CSS expert.
help me to resolve this design issue.
currently width of file-list-item is changing based on length of file name. I want the width to stay consistent irrespective of file we attach. It should of same width. return the updated styles


jsx
----------
<div className="file-list">
  <div className="file-list-header">
    {uploadedFiles.map((file: any, index) => (
      <div className="file-list-item" key={index}>
        <div className="file-info">
          {file.name}
          <div className="close-icon" onClick={() => removeFile(file)}>
            Remove
          </div>
        </div>
        <div className="close-icon" onClick={() => removeFile(file)}>
          &#10006;
        </div>
      </div>
    ))}
  </div>
</div>

css
-----
.file-list {
  background: #E4FDFF;
  border-radius: 30px;
}

.file-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-transform: capitalize;
  color: #1B202D;
}

.file-info {
  display: flex;
  align-items: center;
}

.close-icon {
  cursor: pointer;
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  text-decoration-line: underline;
  color: #1B202D;
  margin-left: 8px;
}

.close-icon:last-child {
  margin-left: 0;
}

"""
<div className="col-sm-6">
        <div className="edit-remove-sustitute">
          <div className="avatar-container">
            <div className="initials-avatar">S</div>
          </div>
          <div className="profile-card">
            <div className="profile-card__name">Shayne Anto</div>
            <div className="profile-card__role">Substitute</div>
          </div>
          <div className="action-buttons-container">
            <div
              className="edit-button"
              onClick={editSubstitute}
            >
              Edit
            </div>
            <div
              className="remove-button"
              onClick={removeSubstitute}
            >
              Remove
            </div>
          </div>
        </div>
      </div>

      <div className="col-sm-6">
        <div className="add-substitute-control">
          <div className="add-substitute-icon-wrapper">
            <img
              src={addSubstituteIcon}
              alt="Add Substitute Icon"
              onClick={handleOpenModal}
            />
          </div>
          <div
            className="add-substitute-text-wrapper"
          >
            <div className="add-substitute-title">Add Substitute</div>
            <div className="add-substitute-subtitle">Click here to add substitute</div>
          </div>
        </div>
      </div>
"""

Suggest you are CSS expert.

1. I want to change the classname from of both the divs `col-sm-6` to `col-sm-12` when media quey size is width 768px and height is 1024px.

2. Return the updated changes.


code for your reference is given below.

```
@media (max-width: 768px) and (max-height: 1024px) {
  .substitute-manager {
    flex-direction: column;
  }

  .edit-remove-sustitute,
  .add-substitute-control {
    margin-bottom: 1rem;
  }

  .add-substitute-control {
    margin-left: 0;
  }
}
```
<Autocomplete
              id="beneficiaryType"
              placeholder="individual"
              disableClearable
              options={beneficiaryTypeListArray}
              getOptionLabel={(option: any) => option.label}
              style={{
                fontFamily: "Basis Grotesque Arabic Pro",
                fontStyle: "normal",
                fontWeight: 500,
                fontSize: "0.75rem",
                lineHeight: "18px",
                color: "#9799A6",
              }}
              renderOption={(props: any, option: { label: any }) => (
                <AutocompleteOption {...props}>
                  <ListItemContent
                    sx={{
                      fontFamily: "Basis Grotesque Arabic Pro",
                      fontStyle: "normal",
                      fontWeight: 500,
                      fontSize: "0.75rem",
                      lineHeight: "18px",
                      color: "#9799A6",
                    }}
                  >
                    hello world
                  </ListItemContent>
                </AutocompleteOption>
              )}
              {...register("beneficiaryTypeGuid", {
                required: true,
              })}
              onChange={(e: any, newVal: any) => {
                console.log(newVal);
                setBeneficiaryTypeGUID(newVal.beneficiaryTypeGUID);
              }}
            />

Consider you are a react developer.

help me to solve this problem.

- No values are populating in this Beneficiary type field
- api side is working.
- I want to populate the beneficiary types label on dropdown of beneficiary type fied.
- Make appropriate changes and return the updated version of code.
→ The "smallest viewport height" (svh) will fit the smallest amount of space
→ The "largest viewport height" (lvh) will always take up the largest amount of space
→ The "dynamic viewport height" (dvh) will resize to fit the currently available space, adapting as the browser UI gets shown or retracts
selector h2 {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}
/* fadeIn */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.u--fadeIn {
  -webkit-animation: fadeIn 1s ease-in;
  -moz-animation: fadeIn 1s ease-in;
  -o-animation: fadeIn 1s ease-in;
  animation: fadeIn 1s ease-in; }

/* fadeInLeft */
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none; } }
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 1;
    -moz-transform: none; } }
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 1;
    -o-transform: none; } }
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.u--fadeInLeft {
  -webkit-animation: fadeInLeft 1s ease-in;
  -moz-animation: fadeInLeft 1s ease-in;
  -o-animation: fadeInLeft 1s ease-in;
  animation: fadeInLeft 1s ease-in; }

/* fadeInRight */
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none; } }
@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    -moz-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 1;
    -moz-transform: none; } }
@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    -o-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 1;
    -o-transform: none; } }
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.u--fadeInRight {
  -webkit-animation: fadeInRight 1s ease-in;
  -moz-animation: fadeInRight 1s ease-in;
  -o-animation: fadeInRight 1s ease-in;
  animation: fadeInRight 1s ease-in; }

/* fadeInUp */
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none; } }
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    -moz-transform: none; } }
@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    -o-transform: none; } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.u--fadeInUp {
  -webkit-animation: fadeInUp 1s ease-in;
  -moz-animation: fadeInUp 1s ease-in;
  -o-animation: fadeInUp 1s ease-in;
  animation: fadeInUp 1s ease-in; }

/* fadeInDown */
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none; } }
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    -moz-transform: none; } }
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    -o-transform: none; } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.u--fadeInDown {
  -webkit-animation: fadeInDown 1s ease-in;
  -moz-animation: fadeInDown 1s ease-in;
  -o-animation: fadeInDown 1s ease-in;
  animation: fadeInDown 1s ease-in; }

/* fadeOut */
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-moz-keyframes fadeIn {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-o-keyframes fadeIn {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fadeIn {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.u--fadeOut {
  -webkit-animation: fadeOut 1s ease-out;
  -moz-animation: fadeOut 1s ease-out;
  -o-animation: fadeOut 1s ease-out;
  animation: fadeOut 1s ease-out; }

/* fadeOutLeft */
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: none; } }
@-moz-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -moz-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 0;
    -moz-transform: none; } }
@-o-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -o-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 0;
    -o-transform: none; } }
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 0;
    transform: none; } }

.u--fadeOutLeft {
  -webkit-animation: fadeOutLeft 1s ease-out;
  -moz-animation: fadeOutLeft 1s ease-out;
  -o-animation: fadeOutLeft 1s ease-out;
  animation: fadeOutLeft 1s ease-out; }

/* fadeOutRight */
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: none; } }
@-moz-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -moz-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 0;
    -moz-transform: none; } }
@-o-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -o-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 0;
    -o-transform: none; } }
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 0;
    transform: none; } }

.u--fadeOutRight {
  -webkit-animation: fadeOutRight 1s ease-out;
  -moz-animation: fadeOutRight 1s ease-out;
  -o-animation: fadeOutRight 1s ease-out;
  animation: fadeOutRight 1s ease-out; }

/* fadeOutUp */
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 0;
    -webkit-transform: none; } }
@-moz-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -moz-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 0;
    -moz-transform: none; } }
@-o-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -o-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 0;
    -o-transform: none; } }
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 0;
    transform: none; } }

.u--fadeOutUp {
  -webkit-animation: fadeOutUp 1s ease-out;
  -moz-animation: fadeOutUp 1s ease-out;
  -o-animation: fadeOutUp 1s ease-out;
  animation: fadeOutUp 1s ease-out; }

/* fadeOutDown */
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 0;
    -webkit-transform: none; } }
@-moz-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -moz-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 0;
    -moz-transform: none; } }
@-o-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -o-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 0;
    -o-transform: none; } }
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 0;
    transform: none; } }

.u--fadeOutDown {
  -webkit-animation: fadeOutDown 1s ease-out;
  -moz-animation: fadeOutDown 1s ease-out;
  -o-animation: fadeOutDown 1s ease-out;
  animation: fadeOutDown 1s ease-out; }
.container {
  display: flex; /* or inline-flex */
}
.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 3 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}
/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
//row (default): left to right in ltr; right to left in rtl
//row-reverse: right to left in ltr; left to right in rtl
//column: same as row but top to bottom
//column-reverse: same as row-reverse but bottom to top

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
//nowrap (default): all flex items will be on one line
//wrap: flex items will wrap onto multiple lines, from top to bottom.
//wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

.container {
  flex-flow: column wrap;
}

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
//flex-start (default): items are packed toward the start of the flex-direction.
//flex-end: items are packed toward the end of the flex-direction.
//start: items are packed toward the start of the writing-mode direction.
//end: items are packed toward the end of the writing-mode direction.
//left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
//right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like end.
//center: items are centered along the line
//space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
//space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
//space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
label:not(#foo) > input[type="checkbox"],
label input[type="checkbox"]{
    display:none;
}
label:not(#foo) > input[type="checkbox"] + span:after {
    content:'\2713';
    visibility:hidden;
}
label:not(#foo) > input[type="checkbox"]:checked + span:after {
    visibility:visible;
}
label:not(#foo) > input[type="radio"] + span:after {
    content:'\25CB';
}
label:not(#foo) > input[type="radio"]:checked + span:after {
    content:'\25CF';
}
body {
  background-image: url('https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=1600');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}
<!DOCTYPE html>

<html>

​

<head>

    <style>

        <title>404 - Page Not Found</title><link rel="stylesheet"type="text/css"href="styles.css"/>CSS: body,

        html {

            height: 0%;

            margin: 0;
10
            padding: 0;

        }

​

        .container {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.25);

        }

​

        img {

            max-width: 100%;
const handlePersonalInfo = (data: any, e: any) => {
    e.preventDefault();
    console.log('entered info::', data);
    let hasEmiratesId: boolean;
    if (selectedOption === 'Yes') hasEmiratesId = true;
    else hasEmiratesId = false;
    let isMirrorWill: boolean;
    if (singleWillCheck) isMirrorWill = false;
    else isMirrorWill = true;
    const allData = {
      ...data,
      maritalStatusGUID,
      dateOfBirth,
      referralQuestionGUID,
      hasEmiratesId,
      isMirrorWill,
      isdCodeGUID1: countryGUID,
      isdCodeGUID2: countryGUID,
      nationalityGuid,
      countryGUID,
    };
    console.log('allData test', allData);
    axios.post(personalInformationAPI, allData).then((res) => {
      console.log('res post', res);
    });
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> <button type="submit" className="next-btn"> Next Step </button> {/* {singleWillCheck ? ( <button type="submit" className="next-btn"> Next Step </button> ) : ( <button type="button" className="next-btn" onClick={handleMirrorWill}> Enter Spouse Information </button> )} */}
    <Box sx={{ flex: '1 1 auto' }} /> <Button color="inherit">Skip</Button> <Button color="inherit" onClick={handleBack}> Back </Button>
</Box>
{!(activeStep === 7) && (
if we set active step to 7, then we can view Upload Documents page.
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

import { AiOutlineClose } from 'react-icons/ai';

import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';

function DocumentManager() {
  const [activeElement, setActiveElement] = useState('top');
  const [uploadedFiles, setUploadedFiles] = useState([]);

  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (element: string) => {
    setActiveElement(element);
  };

  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: string) => ({
    backgroundColor: activeElement === element ? '#023979' : '#FFFFFF',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: string) => ({
    color: activeElement === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: string) => (activeElement === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: string) => (activeElement === element ? TickMarkIconGreen : TickMarkIconGrey);

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
 * Handles the file input change event.
 *
 * @param {any} e - the event object
 * @return {void}
 */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */
  const checkFileValidity = (files: any) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    const validFiles = files.filter((file: any) => {
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    const invalidFiles = files.filter((file: any) => !validFiles.includes(file));
    if (invalidFiles.length > 0) {
      const invalidFileNames = invalidFiles.map((file: any) => file.name).join(', ');
      alert(`Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`);
    } else {
      setUploadedFiles((prevFiles) => [...prevFiles, ...validFiles]);
      alert('Files uploaded successfully');
    }
  };

  /**
   * Removes a file from the uploaded files list.
   *
   * @param {any} file - The file to be removed.
   */
  const removeFile = (file: any) => {
    setUploadedFiles((prevFiles) => prevFiles.filter((f) => f !== file));
  };

  const {
    getRootProps,
    getInputProps,
  } = useDropzone({
    onDrop: handleFileDrop,
  });

  return (
    <main>
      <section>
        <header className="header">Upload Documents</header>
        <p className="description">Upload the documents in PDF or JPEG format. Click on next to save the files once all the documents have been uploaded</p>
      </section>
      <div className="row document-upload-container">

        <div className="col-lg-6 container">
          <div
            className={`top${activeElement === 'top' ? ' active' : ''}`}
            style={getBackgroundStyle('top')}
            onClick={() => handleElementClick('top')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('top')} alt="File Uploader Icon" />
              </div>
              <div
                className="document-title"
                style={getTitleStyle('top')}
              >
                Testator Passport

              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('top')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`middle${activeElement === 'middle' ? ' active' : ''}`}
            style={getBackgroundStyle('middle')}
            onClick={() => handleElementClick('middle')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('middle')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('middle')}
              >
                Additional Document
              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('middle')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`bottom${activeElement === 'bottom' ? ' active' : ''}`}
            style={getBackgroundStyle('bottom')}
            onClick={() => handleElementClick('bottom')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('bottom')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('bottom')}
              >
                Executor Passport
              </div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={getTickMarkicon('bottom')} alt="Tick Mark" />
            </div>
            <div />
          </div>
        </div>

        <div className="col-lg-6 row-item" {...getRootProps()} onClick={handleRowItemClick}>
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={handleAddFileClick}>Add File</button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedFiles.length > 0 && (
          <div className="file-list">
            <ul>
              {uploadedFiles.map((file: any, index) => (
                <li key={index}>
                  {file.name}
                  <AiOutlineClose
                    className="close-icon"
                    onClick={() => removeFile(file)}
                  />
                </li>
              ))}
            </ul>
          </div>
          )}
        </div>
      </div>
    </main>
  );
}

export default DocumentManager;
const handleRowItemClick = (e) => {
  e.stopPropagation();
};

// ...

<div className="col-lg-6 row-item" {...getRootProps()} onClick={handleRowItemClick}>
  {/* Remaining code */}
</div>
You are a React and frontend expert.

I want to achieve below changes to my current version of code.

Constraints:

1. Add a AiOutlineClose react icon on right side of each file which is listed.
2. On Clicking this icon, that uploaded file is removed from list and from UI as well.
3. Attached current code for reference.


```
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';

function DocumentManager() {
  const [activeElement, setActiveElement] = useState('top');
  const [uploadedFiles, setUploadedFiles] = useState([]);

  const handleElementClick = (element: string) => {
    setActiveElement(element);
    console.log(activeElement);
  };

  const getBackgroundStyle = (element: string) => ({
    backgroundColor: activeElement === element ? '#023979' : '#FFFFFF',
  });

  const getTitleStyle = (element: string) => ({
    color: activeElement === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: string) => (activeElement === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: string) => (activeElement === element ? TickMarkIconGreen : TickMarkIconGrey);

  const handleAddFileClick = () => {
    document.getElementById('file-upload-input')?.click();
  };

  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    console.log(newFiles);
    checkFileValidity(newFiles);
    setUploadedFiles((prevFiles) => [...prevFiles, ...newFiles]);
  };

  const handleFileDrop = (acceptedFiles: any) => {
    console.log(acceptedFiles);
    checkFileValidity(acceptedFiles);
    setUploadedFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
  };

  const checkFileValidity = (files: any) => {
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const validExtensions = ['.pdf', 'jpeg', 'jpg', '.bmp', '.doc', '.docx'];
      const maxFileSize = 20 * 1024 * 1024;

      if (!validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext))) {
        alert(`Invalid File: ${file.name}. Please use A4-size PDF, JPEG, BMP, DOC or DOCX files`);
      } else if (file.size > maxFileSize) {
        alert(`File size exceeds the limit: ${file.name}. Maximum file size is 20MB.`);
      } else {
        alert('File uploaded successfully');
      }
    }
  };

  const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragAccept,
    isDragReject,
  } = useDropzone({
    onDrop: handleFileDrop,
  });

  return (
    <main>
      <section>
        <header className="header">Upload Documents</header>
        <p className="description">Upload the documents in PDF or JPEG format. Click on next to save the files once all the documents have been uploaded</p>
      </section>
      <div className="row">

        <div className="col-lg-6 container">
          <div
            className={`top${activeElement === 'top' ? ' active' : ''}`}
            style={getBackgroundStyle('top')}
            onClick={() => handleElementClick('top')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('top')} alt="File Uploader Icon" />
              </div>
              <div
                className="document-title"
                style={getTitleStyle('top')}
              >
                Testator Passport

              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('top')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`middle${activeElement === 'middle' ? ' active' : ''}`}
            style={getBackgroundStyle('middle')}
            onClick={() => handleElementClick('middle')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('middle')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('middle')}
              >
                Additional Document
              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('middle')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`bottom${activeElement === 'bottom' ? ' active' : ''}`}
            style={getBackgroundStyle('bottom')}
            onClick={() => handleElementClick('bottom')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('bottom')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('bottom')}
              >
                Executor Passport
              </div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={getTickMarkicon('bottom')} alt="Tick Mark" />
            </div>
            <div />
          </div>
        </div>

        <div className="col-lg-6 row-item" {...getRootProps()}>
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={handleAddFileClick}>Add File</button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
        </div>
        {uploadedFiles.length > 0 && (
          <div className="file-list">
            <ul>
              {uploadedFiles.map((file: any, index) => (
                <li key={index}>{file.name}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </main>
  );
}

export default DocumentManager;

```

''' 
 <div className="col-lg-6 row-item">
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={addFileHandler}>Add File</button>
          </div>
        </div>
   '''
 
 Your are a senior react developer.
 
 I want you to implement a functionality to upload files on button click event and drag and drop.
 
 Contrainst:
 
1. function should be implemented on `addFileHandler` event given above.
2. File can also be uploaded by drag and drop into row-item div element.
3. instructions for file upload is given `file-attach-instructions` div element.
4. You can use packages like `react-uploader` to implement this.
5. Finally return the updated version of code. Current code is above for reference.


 
 
 
<div className="col-lg-6 row-item">
   <div className="file-upload-arrow">
     <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
   </div>
   <div className="file-upload-text">
     Drag and drop document here to upload
   </div>
   <div className="file-attach-instructions">
     Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
   </div>
   <div className="file-add-button">
     <button>Add File</button>
   </div>
 </div>
 
 
 Consider you are a CSS expert. Above is the code you have to update and make neccessary styling based on below constraints
 
 Constraints:
 
 1. Center the child elements of row-item div element horizonatally & vertically.
 2. Each child element is aligned center.
 3. Update backgournd of Add File button to #023979.
 4. Set border radious of button to 5px and font color to #FFFFFF.
 5. Fibnally return the updated version of code with change in styles.
"""
<div className="top">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIcon} alt="File Uploader Icon" />
              </div>
              <div className="document-title">Testator Passport</div>
            </div>
            <div className="tick-icon">
              <img src={TickMarkIconGreen} alt="Tick Mark" />
            </div>
          </div>

          <div className="middle">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
              </div>
              <div className="document-title text-black">Additional Document</div>
            </div>
            <div className="tick-icon">
              <img src={TickMarkIconGrey} alt="Tick Mark" />
            </div>
          </div>

          <div className="bottom">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
              </div>
              <div className="document-title text-black">Executor Passport</div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={TickMarkIconGrey} alt="Tick Mark" />
            </div>
            <div />
         </div>
"""


You are an experienced React Developer.

I want to implement a UI change.

On clicking top, middle or bottom div elements, 
  1. its backgound should be changed to #023979. 
  2. Its document-title element color should be changed to #FFFFFF.
For example. middle div element is clicked, it is active and the backgound changes to #023979.
While background of Inactive elements changes to default color #f4f4f4.
Initially when component loads, top element background is #023979, and bottom 2 element background is #f4f4f4.
you can use react hooks and state if needed. 
Help me to achieve this change by modiyfinh current version of code

I will give styles for reference below.

.container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top, .middle, .bottom {
    display: flex;
    justify-content: space-between;
    background-color: #f4f4f4;
    border-radius: 5px 0px 0px 5px;
}

.top {
    display: flex;
    align-items: center;
    background-color: #023979;
}

.container div {
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.document-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 14px;
    color: #FFFFFF;
}

.left-container {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.file-upload-icon,
.document-title {
    margin-right: 12px;
}

.tick-icon {
    margin-left: auto;
    margin-right: 12px;
}

.document-title {
    flex-grow: 1;
}

.tick-icon-last {
    margin-right: 2px !important;
}










.elementor-form .elementor-field-label {
    position: absolute;
    right: 18px;
    transition-duration: .2s;
}

.elementor-field-label.active-field-label{
    transform: translateY(-20px);
    font-size: 16px !important;
}

.elementor-field{
    box-shadow: none !important;
}
<ColorlibStepIcon
                            currentIndex={label.stepID - 1}
                            icon={label.stepID}
                            stepNumber={stepNumber}
                            completed={checkCompletedSteps.includes(
                              label.stepID,
                            )}
                            active={activeStep + 1 === label.stepID}
                            data={[]}
                          />

Help me to solve below error:

1. The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362)
(parameter) label: StepData.


Solution:

The error is occurring because the icon prop of the ColorlibStepIcon component is expecting a number, but the label.stepID value is not being converted to a number before being passed as the icon prop.

To fix this error, you can convert the label.stepID value to a number before passing it as the icon prop. Here's an example of how you can do this:


Resolved Code:

<ColorlibStepIcon
  currentIndex={label.stepID - 1}
  icon={Number(label.stepID)}
  stepNumber={stepNumber}
  completed={checkCompletedSteps.includes(label.stepID)}
  active={activeStep + 1 === label.stepID}
  data={[]}
/>


-webkit-print-color-adjust: exact
.t-foot {height: 50px;}
@media print {
  tfoot {display: table-footer-group;}
}
.modal-close-button {
    border-radius: 50%;
    background-color: #f1f1f1;
    border: none;
    outline: none;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    top: 8px;
    position: absolute;
    right: 16px;
}
<Modal show={showModal}>
  <Modal.Header>
    <div className="modal-header-content">
      <div className="modal-header-left">
        <div className="modal-header-title mt-4">Add Substitute</div>
        <div className="modal-header-subtitle">
          List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
        </div>
      </div>
    </div>
    <button
      className="modal-close-button"
      onClick={handleCloseModal}
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </Modal.Header>
  <Modal.Body>
    <AddSubstituteForm onSubmit={handleSubmit} />
  </Modal.Body>
  <Modal.Footer>
    <Button
      variant="primary"
      onClick={handleCloseModal}
    >
      Add Substitute
    </Button>
  </Modal.Footer>
</Modal>




You are a CSS expert.

Constraints:
1. I want to show this modal center of our screen
2. Help me to add styles for element to achieve this.
3. Modal should be at center of whole window.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
}

.top_left {
    width: 50%;
}

.top_left p {
    font-size: 2rem;
    font-weight: 600;
    color: #0094FF;
}

a {
    font-size: 14px;
    color: #0094FF;
    height: 40px;
    border: 1px solid #0094FF;
    border-radius: 8px;

    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

    text-decoration: none;
}

.scan_icon {
    fill: currentColor;
    width: 24px;
    height: 24px;
}

.exit {
    font-size: 16px;
    float: right;
    color: #0094FF;
    height: 40px;
    border-radius: 8px;
    margin-top: 10px;
    pointer-events: auto;
    width: 50%;
}

.exit a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5px;
}

.exit a:link,
.exit a:visited {
    color: #0094FF;
    text-decoration: none;
}

.exit a:hover,
.exit a:active {
    color: #0094FF;
}

.exit a:active .link-text {
    color: #0094FF
}


.exit img {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-right: 1px;
}

.objekt {
    height: 200px;
    width: 35.625rem;
    font-size: 16px;
}

.objekt th,
.objekt td {
    border: 2px solid #0094ff;
    padding: 6px 0px 0px 10px;
    text-align: left;
}

.objekt th {
    background-color: #0094ff;
    border-radius: 8px 0 0 8px;
    color: #ffffff;

    width: 11.25rem;
    font-weight: normal;
}

.objekt td {
    font-weight: normal;
    width: 18.125rem;
    border-radius: 0 8px 8px 0;
}


.meldung {
    height: 100px;
    width: 35.625rem;
    font-size: 16px;
}

.meldung th,
.meldung td {
    font-size: 16px;
    border: 2px solid #0094ff;
    text-align: left;
    padding: 8px;

}

.meldung th {
    background-color: #0094ff;
    color: #ffffff;
    width: 11.25rem;
    font-weight: normal;
    border-radius: 8px 0 0 8px;
}

.meldung td {
    width: 18.125rem;
    font-weight: normal;
    border-radius: 0 8px 8px 0;
}

.fertigmeldungen {
    width: 35.375rem;
    margin-top: 1vw;
    height: 100px;
    border-radius: 0 0 8px 8px;
}

.fertigmeldungen caption {
    font-weight: normal;
    font-size: 16px;
    border-radius: 8px 8px 0 0;
    height: 48px;
    text-align: left;
    background-color: #0094ff;
    color: #ffffff;
    padding-left: 16px;
    padding-top: 12px;
    margin-bottom: 2px;
}

.fertigmeldungen td {
    width: 200px;
    padding: 5px;
    text-align: left;
    color: #222222;
    font-size: 14px;

}

.fertigungsgange {
    float: right;
    height: 420px;
    width: 16.875rem;
    border: 2px solid #0094ff;
    border-radius: 0 0 8px 8px;
}

.fertigungsgange caption {
    font-weight: normal;
    font-size: 16px;
    text-align: left;
    background-color: #0094ff;
    color: #ffffff;
    padding: 10px;
    margin-bottom: 2px;

    border-radius: 8px 8px 0 0;
}

.container {
    padding: 20px 35px
}

.header {
    display: flex;
    width: 100%;
    margin-bottom: 20px
}

.qr_scan {
    width: 16.75rem;
}

#exit-button {
    width: 7.5rem;
    float: right;
}

.container-table {
    width: 100%;
    display: flex;
}
.table-left{
    width: 70%;
}
.table-right{
    width: 30%
}

@media only screen and (max-width: 930px) {
    .container-table{
        display: block;
    }
    .fertigungsgange{
        margin-top: 20px;
        float: none;
    }
}
 
<button
   className="modal-close-button"
   onClick={handleCloseModal}
 >
   <span aria-hidden="true">&times;</span>
 </button>
 
 You are a CSS expert
 
 I want you to do following changes in styling.
 
 1. Rounded shape. Apply border radius to 50pc.
 2. Background to "#f1f1f1".
 3. No outer border color.
 3. border of child element span should be 2px solid #494A53.
.initials-avatar {
    background-color: #023979;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    width: 38px;
    height: 38px;
}
.box {
  border: 10px solid;
  border-image: linear-gradient(45deg,red,blue) 10;
}
// WP_Query arguments
$args = array(
	'post_type'              => array( 'post' ),
	'post_status'            => array( 'pubblic' ),
 	 'post_per_page' => 6,
	'order'                  => 'DESC',
	'orderby'                => 'date',
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
	while ( $query->have_posts() ) {
		$query->the_post();
		// do something
	}
} else {
	// no posts found
}

// Restore original Post Data
wp_reset_postdata();
© Copyright [year] All Rights Reserved - <a href="/privacy-policy/">Privacy Policy</a> - <a href="/mappa-sito/">Mappa del sito</a> - <a href="https://scintille.net/" target="_blank" rel="noopener">Scintille web agency</a>
Changing the Value of a Custom Property Using JavaScript
I’ve been mentioning throughout this whole article that variables can be updated using JavaScript, so let’s get into that.

Say you have a light theme and want to switch it to a dark theme, assuming you have some CSS like the following:

```css
:root {
  --text-color: black;
  --background-color: white;
}

body {
  color: var(--text-color);
  background: var(--background-color);
}
```

You can update the `--text-color` and `--background-color` custom properties by doing the following:

```js
var bodyStyles = document.body.style;
bodyStyles.setProperty('--text-color', 'white');
bodyStyles.setProperty('--background-color', 'black');
```
<span class="leuchtstift">
- aspect-ratio (to make squares evenly.)

- position: fixed;   inset: 0 0 0 20%; (top,right,bottom,left)

- background: hsl( var(--clr-white) / 0.05);  backdrop-filter: blur(1.5rem); (make frosted glass look)

- margin-block

- aria-hidden=“true” for screen readers

Aria-selected styles

HTML
          <div style="margin-bottom: 50vh">
                        <!-- Tabs -->
                        <div class="tab-list underline-indicators flex">
                            <button aria-selected="true" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Moon</button>
                            <button aria-selected="false" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Mars</button>
                            <button aria-selected="false" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Europa</button>
                        </div>
                        
CSS
.underline-indicators > .active,
.underline-indicators > [aria-selected="true"] {
    color: hsl( var(--clr-white) / 1);
    border-color: hsl( var(--clr-white) / 1);
}

GRID
Responsive(?) Grid columns:

    .grid-container {
        text-align: left;
        column-gap: var(--container-gap, 2rem);
        grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(2rem, 1fr);
    }

- .grid-container * {  max-width: 45ch;}

- place-items/place-content (grid property)
.item {
  order: 5; /* default is 0 */
}
//Once React project is made with TypeScript do the following:

//install main dependency of jest
npm i jest --save-dev

//Install react-testing-library packages:

npm i @testing-library/jest-dom @testing-library/react @testing-library/user-event --save-dev

//If using CSS Modules
npm i jest-css-modules-transform

// If using Jest 28 or higher
npm i jest-environment-jsdom

//You will then need: 
//1. jest.config.cjs
module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": ["@swc/jest"],
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.css$": "jest-css-modules-transform",
  },
  testEnvironment: "jest-environment-jsdom",
  setupFilesAfterEnv: ["./jest.setup.tsx"],
  preset: "ts-jest",
  testMatch: ["<rootDir>/src/**/*.test.(ts|tsx)"],
  // If SVG needs to be mocked
  moduleNameMapper: {
    "\\.svg$": "<rootDir>/svgMock.tsx",
  },
};

//2. jest.setup.tsx
import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';

declare global {
  namespace NodeJS {
    interface Global {
      fetch: jest.Mock;
    }
  }
}

//3. (OPTIONAL) for svg mock; svgMock.tsx:
module.exports = '';

//Excerpt from Bing search:
//It seems like you are trying to import an SVG file as a React component in your test file. This causes Jest to throw an error because it cannot parse the SVG file as JavaScript. You need to mock the SVG file so that Jest can ignore it during testing. You can do this by using the moduleNameMapper option in your Jest configuration and mapping the SVG files to a mock file that returns an empty string or a dummy component

//Therefore, ideally package.json should look like:
{
  "name": "vite-react-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "jest --watch"
  },
  "dependencies": {
    "@swc/jest": "^0.2.26",
    "firebase": "^9.17.2",
    "jest-css-modules-transform": "^4.4.2",
    "jest-environment-jsdom": "^29.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.1",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.0.1",
    "jest": "^29.5.0",
    "ts-jest": "^29.1.0",
    "typescript": "^4.9.5",
    "vite": "^4.0.4"
  }
}
module.exports = {
  content: ['./src/**/*.{html,js,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primaryColor: '#E17446',
        primaryColorHover: '#db5b24',
        primaryText: '#111130',
        primaryBlue: '#2b5a9c',
        textLight: '#9e9ebc',
        Gray: '#8f9bad',
        f6f9fd: '#f6f9fd',
        dddddd: '#dddddd',
        inputborder: '#e8e8e8',
        borderColor: '#ebebeb',
        green: '#008f02',
        lightGreen: '#e2f2e2',
        orange: '#f05c00',
        orangeLight: '#fcede4',
        redLight: '#fde5e5',
        red: '#f00000',
        border1: '#ebebeb',

        themecolor: '#E17446',
        hoverthemecolor: '#db5b24',
      },
      backgroundImage: {
        close: 'url(/public/images/colse.png)',
        trendBG1: 'url(../../public/images/blog-img.jpg)',
      },
      boxShadow: {
        inputFocus:
          'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px',
        headerFix: 'rgba(0, 0, 0, 0.1) 0px 10px 50px',
        sibarToggle: '-4px 5px 5px #0000000d',
        sibarToggleRTL: '5px -4px 6px #0000000d',
      },
      spacing: {
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '18px': '18px',
        '20px': '20px',
        '25px': '25px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        '106px': '106px',
        '120px': '120px',
        unset: 'unset',
      },
      fontFamily: {
        charter: 'var(--charterFont)',
        sohne: 'var(--sohneFont)',
        poppins: 'var(--poppins)',
        gloock: 'var(--gloock)',
      },
      fontSize: {
        0: '0',
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '16px': '16px',
        '17px': '17px',
        '20px': '20px',
        '22px': '22px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
      },
      lineHeight: {
        1: '1',
        '5px': '5px',
        '10x': '10px',
        '15px': '15px',
        '19px': '19px',
        '22px': '22px',
        '20px': '20px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '32px': '32px',
        '35px': '35px',
        '36px': '36px',
        '40px': '40px',
        '42px': '42px',
        '46px': '46px',
        '45px': '45px',
        '50px': '50px',
        '52px': '52px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
        Normal: 'normal',
      },
      zIndex: {
        1: '9',
        2: '99',
        3: '999',
        4: '9999',
        5: '99999',
        6: '999999',
      },
      borderRadius: {
        '5px': '5px',
        '10px': '10px',
        '15px': '15px',
      },
      screens: {
        768: '768px',
        992: '992px',
        1200: '1200px',
        1300: '1300px',
        1400: '1400px',
        1500: '1500px',
        1600: '1600px',
        1700: '1700px',
      },
      animation: {
        slow: 'wiggle 2s linear',
      },
      keyframes: {
        wiggle: {
          '0%': { transform: 'transform(164.25px)' },
          '100%': { transform: 'rotate(0px)' },
        },
      },
    },
  },
}
import { useState } from "react";
import Image from "next/image";
import logo from "";

import Hamburger from "./Hamburger";
import NavItem from "./NavItem";

export default function NavBar() {
  const [toggle, setToggle] = useState(false);

  function toggleHamburgerMenu() {
    setToggle((prevToggle) => !prevToggle);
  }

  const navItems = ["", "", "", ""];

  return (
    <header className="header">
      <nav className="nav">
        //<Image className="logo" alt="personal logo" src={logo} />
        //<h4 className="logo-title"></h4>
        <ul className="links">
          {navItems.map((item, index) => (
            <NavItem
              key={index}
              onClick={() => setToggle(false)}
              href={item}
              className="link"
            >
              {item}
            </NavItem>
          ))}
        </ul>
        <Hamburger toggleHamburgerMenu={toggleHamburgerMenu} toggle={toggle} />
      </nav>

      {toggle && (
        <ul className="mobile-links">
          {navItems.map((item, index) => (
            <NavItem
              key={index}
              onClick={() => setToggle(false)}
              href={item}
              className="mobile-link"
            >
              {item}
            </NavItem>
          ))}
        </ul>
      )}
    </header>
  );
}

//Hamburger

function Hamburger({ toggleHamburgerMenu, toggle }) {
  return (
    <button
      id="hamburger-button"
      aria-label="Mobile Menu Button"
      onClick={toggleHamburgerMenu}
      className="hamburger-menu"
    >
      <span className={`${toggle && "open"} hamburger-top`}></span>
      <span className={`${toggle && "open"} hamburger-middle`}></span>
      <span className={`${toggle && "open"} hamburger-bottom`}></span>
    </button>
  );
}

export default Hamburger;

//NavItem component

function NavItem({ onClick, href, className, children }) {
  return (
    <li>
      <a onClick={onClick} href={`#${href}`} className={className} aria-label="menu links">
        {children}
      </a>
    </li>
  );
}
export default NavItem;

.modern-gradient {
  background-image: 
    linear-gradient(
      360deg in oklab, 
      oklch(92% 0.05 340) 27% 27%, oklch(90% 0.03 300) 100%
    )
  ;
}

.classic-gradient {
  background-image: 
    linear-gradient(360deg, #fdd8ef 27% 27%, #e1daf0 100%)
  ;
}
.modern-gradient {
  background-image: 
    linear-gradient(
      326deg in oklab, 
      oklch(70% 0.20 340) 27% 27%, oklch(90% 0.03 300) 100%
    )
  ;
}

.classic-gradient {
  background-image: 
    linear-gradient(326deg, #eb63c5 27% 27%, #e1daf0 100%)
  ;
}
// E.g. Colours living in the variables.scss file:
// color palette
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "error": $error,
  "info": $info,
  "blue": #1919e6,
  "red": #e61919,
  "yellow": #e6e619,
  "green": #19e635,
  "orange": #ffa600,
  "purple": #9900ff,
  "gray": #808080,
  "black": black,
  "white": white,
);

//colors being looped in _colors.scss:
@each $key, $val in $colors {
  .text-#{$key} {
    color: $val;
  }
  .bg-#{$key} {
    background-color: $val;
  }

  // light variations
  @for $i from 1 through 9 {
    .text-#{$key}-light-#{$i} {
      color: mix(white, $val, $i * 10);
    }
    .bg-#{$key}-light-#{$i} {
      background-color: mix(white, $val, $i * 10);
    }
  }

  // dark variations
  @for $i from 1 through 9 {
    .text-#{$key}-dark-#{$i} {
      color: mix(black, $val, $i * 10);
    }
    .bg-#{$key}-dark-#{$i} {
      background-color: mix(black, $val, $i * 10);
    }
  }
}
.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
a {
  text-decoration-color: #EA215A;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}
<!--This is html code. Plz. use it as html file. -->
 
<!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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600;900&display=swap" rel="stylesheet"> -->
    <title>Upgrader Boy</title>
    <link rel="stylesheet" href="web.css">
</head>
 
<body>
    <header>
        <section class="navsection">
            <div class="logo">
                <h1>Upgrader Boy</h1>
            </div>
            <nav>
                <a href="https://upgraderboy.blogspot.com/" target="_blank">Home</a>
                <a href="https://www.youtube.com/channel/UCEJnv8TaSl0i1nUMm-fGBnA?sub_confirmation=1" target="_blank">Youtube</a>
                <a href="#" target="_blank">Social Media</a>
                <a href="#" target="_blank">Services</a>
                <a href="https://upgraderboy.blogspot.com/p/about-us.html" target="_blank">About us</a>
                <a href="https://upgraderboy.blogspot.com/p/contact-us.html" target="_blank">Contact us</a>
            </nav>
        </section>
        <main>
            <div class="leftside">
                <h3>Hello</h3>
                <h1>I am Upgrader</h1>
                <h2>Web developer, Youtuber and CEO of Upgrader Boy</h2>
                <a href="#" class="button1">Website</a>
                <a href="#" class="button2">Youtube</a>
            </div>
            <div class="rightside">
                <img src="/Image/ezgif.com-gif-maker.gif" alt="Svg image by Upgrader Boy">
            </div>
        </main>
 
    </header>
</body>
 
</html>
 
<!-- This is css code. Plz. use it as css file. -->
  
*{
    margin: 0px;
    padding: 0px;
    /* @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap'); */
    /* font-family: 'Roboto Slab', serif; */
}
 
header{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left,#ffff 85%, #c3f5ff 20%);
}
 
.navsection{
    width: 100%;
    height: 20vh;
    display: flex;
    justify-content: space-around;
    background-image: linear-gradient(to top, #fff 80%, #c3f5ff 20%);
    align-items: center;
}
 
.logo{
    width: 40%;
    color: #fff;
    background-image: linear-gradient(#8d98e3 40%, #854fee 60%);
    padding-left: 100px;
    box-sizing: border-box;
}
 
.logo h1{
    text-transform: uppercase;
    font-size: 1.6rem;
    animation: aagepiche 1s linear infinite;
    animation-direction: alternate;
}
 
@keyframes aagepiche{
    from{padding-left: 40px;}
    to {padding-right: 40px;}
}
 
nav{
    width: 60%;
    display: flex;
    justify-content: space-around;
}
 
nav a{
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    font-weight: 900;
    font-size: 17px;
    position: relative;
}
 
nav a:first-child{
    color: #4458dc;
}
 
nav a:before{
    content: "";
    position: absolute;
    top: 110%;
    left: 0;
    height: 2px;
    width: 0;
    border-bottom: 5px solid #4458dc;
    transition: 0.5s;
}
 
nav a:hover:before{
    width: 100%;
}
 
main{
    height: 80vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
.rightside{
    border-radius: 30% 70% 53% 47% / 30% 30% 70% 70%;
    background-color: #c8fbff;
}
 
.rightside img{
    max-width: 500px;
    height: 80%;
}
 
.leftside{
    color: #000;
    text-transform: uppercase;
}
 
.leftside h3{
    font-size: 40px;
    margin-bottom: 20px;
    position: relative;
}
 
.leftside h3:after{
    content: "";
    width: 450px;
    height: 3px;
    position: absolute;
    top: 43%;
    left: 23.4%;
    background-color: #000;
}
 
.leftside h1{
    margin-top: 20px;
    font-size: 70px;
    margin-bottom: 25px;
}
 
.leftside h2{
    margin-bottom: 35px;
    font-weight: 500;
    word-spacing: 4px;
}
 
.leftside .button1{
    color: #fff;
    letter-spacing: 0;
    background-image: linear-gradient(to right, #4458dc 0%, #854fee 100%);
    border: double 2px transparent;
    box-shadow: 0 10px 30px rgba(118, 85, 225, 3);
    /* radial-gradient(circle at top left,#4458dc,#854fee); */
}
 
.leftside .button2{
    border: 2px solid #4458dc;
    color: #222;
    background-color: #fff;
    box-shadow: none;
}
 
.leftside .button1 , .button2{
    display: inline-block;
    margin-right: 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 14px;
    text-align: center;
    padding: 12px 25px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 5px;
}
 
.leftside .button1:hover{
    border: 2px solid #4458dc;
    color: #222;
    box-shadow: none;
    background-color: #fff;
    background-image: none;
}
a[data-tooltip]:link, a[data-tooltip]:visited {
  position: relative;
  text-decoration: none;
  border-bottom: solid 1px;
}

a[data-tooltip]:before {
  content: "";
  position: absolute;
  border-top: 1em solid #0090ff;
  border-left: 1.5em solid transparent;
  border-right: 1.5em solid transparent;
  display: none;
  top: -1em;
}

a[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  color: white;
  top: -2.5em;
  left: -1em;
  background: #0090ff;
  padding: .25em .75em;
  border-radius: .5em;
  white-space: nowrap;
  display: none;
}

a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
  display: inline;
}

Code language: CSS (css)
.scale {
    transition: all 0.3s ease-in-out;
}

.scale:hover {
    transform: scale(1.1);
}

@media only screen and (max-width: 767px) {
    .scale:hover {
        transform: none;
    }
}


/ rotate /

.rotate {
    transition: all 0.3s ease-in-out;
}

.rotate:hover {
    transform: rotate(-5deg);
}

@media only screen and (max-width: 767px) {
    .rotate:hover {
        transform: none;
    }
}


/ position /

.position {
    transition: all 0.3s ease-in-out;
}

.position:hover {
    transform: translate(0, -100px);
}

@media only screen and (max-width: 767px) {
    .position:hover {
        transform: none;
    }
}


/ opacity /

.opacity {
    transition: all 0.3s ease-in-out;
    opacity: 0.5;
}

.opacity:hover {
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    .opacity:hover {
        transform: none;
    }
}


/ jiggle /

.jiggle {
    transition: all 0.3s cubic-bezier(0.475, 0.985, 0.12, 1.975);
}

.jiggle:hover {
    transform: scale(1.1);
}

@media only screen and (max-width: 767px) {
    .jiggle:hover {
        transform: none;
    }
}
<div id="header"></div>
<style>
    #header {
    	height: 200px;
        background-image: url('https://i.postimg.cc/BbRm96cn/daniel-mirlea-u5-Qzs-Kvu7-YA-unsplash.jpg');
    }
</style>

<script>
    document.addEventListener('mousemove', function (event) {
      if (window.event) { // IE fix
          event = window.event;
      }
    
      // Grab the mouse's X-position.
      var mousex = event.clientX;
      var mousey = event.clientY;
      var header = document.getElementById('header');
      header.style.backgroundPosition = '-' + mousex/3 + 'px -' + mousey/2 + 'px';
    }, false);
    
</script>
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
p::selection {
  color : #000;
  background-color : #2CD9FF;
}
 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
// If you look at [this great answer](https://stackoverflow.com/a/29733127/1548895) you'll notice that the only cross-browser way (without 2 line break limit) is inserting `100%`\-width empty blocks ("line-breaks"). So for similar markup this will look like

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.line-break {
  width: 100%;
}
// Margins - For centering elements with margins IF NOT INSIDE A DEV ESP WITH BG STYLING
// Vertically center elements via margins
.vcenter-margin {
   display: block;
   margin-top: auto;
   margin-bottom: auto;
}


// Horizontally center elements via margins
// NOTE: if using Foundation Sites, use "float-center".  This is should be used for @mixin only
.hcenter-margin {
   display: block;
   margin-left: auto;
   margin-right: auto;
}



// Padding - For centering elements with paddings IF INSIDE A DIV
// Vertically center elements with paddings IF INSIDE A DIV
$value: 1em;    // example value
.vcenter-padding {
   height: $value;
   padding-top: calc($value/2);
   padding-bottom: calc($value/2);

   // .clearfix hack to keep elements inside div or else they will float
   content: "";
   clear: both;
   display: table;
}


// Horizontally coming soon

// Horizontally center group of elements
$gap-value: 1.5em;
.hcenter-group {
  display: flex;
  justify-content: center;
  gap: $gap-value;
}
.round {
    object-fit: cover;          // prevent image from stretching
    object-position: 0% 25%;    // move the crop around, [left/right] [up/down]
    aspect-ratio: 1/1;          // crops to a square
    border-radius: 50%;         // round corners
    width: 17em;                // size of image
}
/* General Type CSS - Starts*/

#footer .menu a {
    font-size: 16px;
}

.single .standard-content strong,
.avia_textblock b,
.avia_textblock strong {
    color: #333;
}

span.post-meta-infos,
.error404 .title_container,
.search .title_container,
.archive .title_container,
.single .title_container {
    display: none !important;
}

/* General Type CSS - Ends*/
[aria-label="Continue Shopping"] {
  color: transparent !important;
  position: relative;
}

[aria-label="Continue Shopping"]:after {
  color: #000;
  content: 'Shop';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  padding-left: 0%;
}
The solution I found is to add this to your settings.json file to tell VS Code to use the default HTML formatter instead of Prettier:

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
}
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: auto;
   }
</style>
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: scroll;
   }
</style>
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: hidden;
   }
</style>
<div class="container">
   <p>Some long text goes here. Some long text goes here. Some long text goes here.</p>
</div>

<style>
   .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
   }
</style>
<div id="hs_cos_wrapper_widget_1606345913489" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><div class="b-columns b-columns--columns-left b-columns--no-spacing">
    <div class="b-columns__container scheme--darkv2">
        
        <div class="b-columns__columns" data-cols="3">
            
                <div class="b-columns__column">
                    <div class="h-wysiwyg-html">
                        <h6>It's out now</h6>
<h1 style="margin-top: 0;">All new Qt 6</h1>
<a href="/download?hsLang=en" class="c-btn" rel="noopener" target="_blank"><span>Download now</span></a> &nbsp; &nbsp; <a href="https://www.youtube.com/watch?v=TodEc77i4t4" class="c-btn--small" rel="noopener" target="_blank">Watch video</a>
                    </div>
                </div>
            
        </div>
    </div>
</div></div>
/* Use */ 
visibility: hidden 
/* when you want to hide an element from view but still want it to occupy space on the page. This can be useful when you want to reveal the element later or when you want to maintain the layout of the page. */

/* Use */
display: none 
/* when you want to completely remove an element from the page and don’t want it to occupy any space. This can be useful when you want to completely hide an element and don’t plan to reveal it later. */
@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }

@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }

@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }

@media (min-width:1281px) { /* hi-res laptops and desktops */ }
#container {
    position: relative;
}
#inner_item {
    position: absolute;
    bottom: 0;
}
SELECT Id, Name, CreatedById, CreatedDate, CEC_Created_By__c, LastModifiedDate, LastModifiedById, cg__Case__c, cg__Content_Type__c, cg__Description__c, cg__File_Name__c, cg__File_Size__c, cg__File_Size_in_Bytes__c, CEC_SendNotification__c, cg__Sync_Id__c, cg__Private__c, cg__WIP__c, cg__Version_Id__c, CEC_Upload_Complete_Timestamp__c, CEC_Event_Notification_Record__c FROM cg__CaseFile__c ORDER BY SystemModStamp DESC LIMIT 10
​/*=========VARIABLES DE COLOR============= - frios - calidos - escala de gris */

$aqua: #7fdbff;
$blue: #0074d9;
$navy: #001f3f;
$teal: #39cccc;
$green: #2ecc40;
$olive: #3d9970;
$lime: #01ff70;

$yellow: #ffdc00;
$orange: #ff851b;
$red: #ff4136;
$fuchsia: #f012be;
$purple: #b10dc9;
$maroon: #85144b;

$white: #ffffff;
$silver: #dddddd;
$gray: #aaaaaa;
$black: #111111;
/*=========FIN VARIABLES DE COLOR============= - frios - calidos - escala de gris */
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
	box-sizing: border-box;
}

/**
Use a more readable tab size (opinionated).
*/

html {
	-moz-tab-size: 4;
	tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
	font-family:
		system-ui,
		-apple-system, /* Firefox supports this but not yet `system-ui` */
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
	height: 0; /* 1 */
	color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
	text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	text-indent: 0; /* 1 */
	border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
	text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
	box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}
​

​

// variables

    $active-brightness: 0.;
5
    $border-radius: 5px;

    $box-shadow: 2px 2px px;

    $color: #C40861;
8
    $color-accent: #8bee;

    $color-accent-hover: darken($color-accent, 10%);
10
    $color-bg: #fff;
11
    $color-bg-secondary: #e9e9e9; // border color

    $color-link: $color;

    $color-secondary: #663399;

    $color-secondary-accent: #9de90b;

    $color-shadow: #f4f4f4;

    $color-table: $color;

    $color-text: #67737a;

    $color-text-secondary: #353b3f;

​
20
.demo{padding: 1rem;}
$breakpoints: (

  xs: 0,

  sm: px,

  md: 76px,
5
  lg: 92px,
6
  xl: 00px
7
) !default;
8
​
9
// Viewports

$viewports: (

  // 'null' disable the viewport on a breakpoint
12
  sm: 510px,

  md: 700px,

  lg: 9px,

  xl: 1130px

) !default;

​

$color-blossom: #1d7484;

$color-fade: #982c61;
20
​

$color-bg: #f9f9f9;
// sizes

$columns:  !default;

$maxWidth: 1rem !default;

$gutter: 1rem !default;

​

*,

*::after,

*::before {

  box-sizing: box;

}

​
12
.demo {

  box-sizing: border-box;

  background-color: rgba(red, %);
15
  outline: 1px solid crimson;

  padding: 1rem;

  display: grid;

  place-content: center;

  color: red;
20
}

​

.container {
// solve css min problem ...

​

$breakpoints: (

  xs: 0,

  sm: 40px,
6
  md: 24px,

  lg: 00px,

  xl: 40px

);
10
​

$gap: (
12
  xs: 0,

  sm: 8px,
14
  md: px,

  lg: 24px,
16
  xl: 28px

) !default;

​

.wrapper {

  width: min(100% - 2rem, 1280px);

  margin-inline: auto;

}
// Breakpoints

// 'null' disable the breakpoint

$breakpoints: (

  xs: 0,

  sm: 5px,
6
  md: 76px,
7
  lg: 92px,
8
  xl: 00px
9
) !default;

​

$space-s-l: clamp(1rem, calc(-0.rem + 3.vw), 2.25rem);
12
$space-xl-2xl: clamp(3rem, calc(1.62rem + 3.85vw), 4.5rem);

​

$grid-max-width: 69.75rem;
15
$grid-gutter: var($space-s-l, clamp(1rem, calc(-0.33rem + 3.7vw), 2.25rem));

$grid-columns: 12;

​

$grid-12: repeat(12, minmax(0, 1fr));

$grid-page-width: map-get($breakpoints, "xl");

$grid-page-gutter: 5vw;
21
$grid-page-main: 2 / 3;
/* Media Queries */

$small: screen and (min-width: 0em);

$medium: screen and (min-width: 40em) and (max-width: 4em);
4
$large: screen and (min-width: em);
5
​
6
@mixin for-size($size) {
7
  @if $size == small {

    @media screen and (min-width: 40rem) { @content; }

  } @else if $size == medium {

    @media screen and (min-width: 64em) { @content; }

  } @else if $size == large {

    @media screen and (min-width: 75em) { @content; }

  }  

}

​

/*

// usage

.my-box {

  padding: 10px;
/* Import font */

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

​

/* General styles */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  font-family: "Poppins", sans-serif;

  background-color: #090909;

  padding: 50px;

}

/* General styles end */

.container {

  max-width: 1280px;

  margin: 0 auto;

  padding: 15px;

}
<!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>
        body {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;
            background-color: aqua;
            justify-content: center;
            /* text-align: center; */
            height: 100vh;
            background: url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1748&q=80);
            background-position: center;
            background-size: cover;
        
        }
        
        h1 {
            text-align: center;
        }
        
        #form {
            background-color: #c7ab9d;
            border: 2px solid rgb(4, 0, 255);
            border-radius: 10px;
            width: 400px;
            height: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        
        }
        
        
        
        h2 {
            font-size: 30px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 5px;
        }
        
        input {
            height: 30px;
            width: 250px;
            border-radius: 5px;
            padding: 10px;
            margin: 5px;
            /* padding: 10px; */
        }
        
        input[type='submit'] {
            background-color: purple;
            text-align: center;
            align-content: center;
            color: white;
            height: 50px;
            font-size: 30px;
            width: 200px;
            padding-bottom: 20px;
            border: 0px;
        }
        
        .error {
            margin: 10px;
            color: blue;
        }
    </style>
</head>

<body>
    <h1>Form Validation</h1>
    <div id="form">
        <h2>Login Form</h2>
        <form action="" onsubmit="return validateform()">
            <input type="text" class="form" name="" id="username" placeholder="Enter Username">
            <br>
            <span id="usererror" class="error"></span>
            <br>
            <input type="password" class="form" id="password" placeholder="Enter Password">
            <br>
            <span class="error" id="passerror"></span>
            <br>
            <!-- <input type="submit" value="Pls Submit"> -->
            <button type="submit">Pls Submit</button>
        </form>
    </div>
    <script>
        let user = document.getElementById('username');
        let pass = document.getElementById('password');
        let condition1 = 0;
        let condition2 = 0;
        
        flag
        function validateform() {
        
            if (user.value == '') {
                document.getElementById('usererror').innerHTML = "User Name Blank";
                condition1 = 0;
            } else if (user.value.length < 5) {
                document.getElementById('usererror').innerHTML = "Pls Enter more than 4 Charactre"
                condition1 = 0;
        
            } else {
                document.getElementById('usererror').innerHTML = ""
                document.getElementById('usererror').style.color = "Green";
                condition1 = 1;
        
            }
            if (pass.value == '') {
                document.getElementById('passerror').innerHTML = "Password Cannot Blank";
                condition2 = 0;
        
            }
            else if (pass.value.length < 5) {
                document.getElementById('passerror').innerHTML = "Pls Enter more than 4 Charactre";
                condition2 = 0;
        
            } else {
                document.getElementById('passerror').innerHTML = "";
                document.getElementById('passerror').style.color = "Green";
                condition2 = 1;
        
            }
            if (condition1 == 1 & condition2 == 1) {
                return true;
            } else {
                return false;
            }
        }
        
    </script>
</body>

</html>
/* Belief Section */

.beliefCardsContainer{
  display: flex;
  justify-content: space-between;
  overflow: auto;
  height: auto;
  margin-top: 12px;
}

.beliefCard{
  display: flex;
  flex-direction: column;
  cursor: pointer;
  width: 377.5px;
  /* height: 396px; */
  gap: 12px;
}

.beliefCard img{
  height: 280px !important;
  object-fit: cover;
}

.beliefCard img:hover{
  transform: scale(1.02); 
}

.beliefCard h1{
  color: #000;
  font-size: 24px;
}

.beliefCard p{
  font-size: 16px;
  color: rgb(73, 76, 77);
}
<!DOCTYPE html>
<html>
  <head>
	<title>Video Picker</title>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>
	<h1>Video Picker</h1>
	<form>
	  <input type="text" id="videoUrl" placeholder="Enter video URL...">
	  <button type="button" id="addVideoBtn">Add Video</button>
	</form>
	<hr>
	
	<h3 id="videoCount"></h3>

	
	<div id="videoList"></div>
	
	<script src="script.js">
	alert("If you want you can modify the UI of this project, to adapt on your needs\n" + "\nhave a great and blessed day 🤝🏼😊");

alert("Enter as many YouTube video links as you want to, and see the magic")


window.onload = function() {
const videoList = document.getElementById('videoList');
const addVideoBtn = document.getElementById('addVideoBtn');

// Load videos from LocalStorage on page load
loadVideos();

addVideoBtn.addEventListener('click', addVideo);

function addVideo() {
  const videoUrl = document.getElementById('videoUrl').value;
  const videoId = getVideoId(videoUrl);

  if (videoId) {
	const videoItem = createVideoItem(videoId);
	videoList.appendChild(videoItem);
	
	// Save video to LocalStorage
	saveVideo(videoId);
  }

  document.getElementById('videoUrl').value = '';
}

function getVideoId(url) {
  const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/;
  const match = url.match(regex);

  if (match && match[1]) {
	return match[1];
  } else {
	alert('Invalid video URL');
	return null;
  }
}

function createVideoItem(videoId) {
  const videoItem = document.createElement('div');
  videoItem.className = 'video-item';
  const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
  const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;
  videoItem.innerHTML = `
	<a href="${videoUrl}" target="_blank">
	  <img src="${thumbnailUrl}" alt="Video thumbnail">
	  <h2>${videoId}</h2>
	</a>
	<button class="remove-video-btn">Remove</button>
  `;

  // Add event listener to the 'Remove' button
  const removeBtn = videoItem.querySelector('.remove-video-btn');

  removeBtn.addEventListener('click', () => {
	removeVideo(videoId);
	videoItem.remove();
  });

  return videoItem;
}

function removeVideo(videoId) {
  let videos = [];
  if (localStorage.getItem('videos')) {
	videos = JSON.parse(localStorage.getItem('videos'));
  }
  const index = videos.indexOf(videoId);
  if (index !== -1) {
	// Display confirmation dialog box
	const confirmed = confirm("Are you sure you want to remove this video? 😥");
	if (confirmed) {
	  // Remove video from list
	  videos.splice(index, 1);
	  localStorage.setItem('videos', JSON.stringify(videos));
	  const videoItem = document.getElementById(videoId);
	  videoList.removeChild(videoItem);
	}
  }
}


function saveVideo(videoId) {
  let videos = [];
  if (localStorage.getItem('videos')) {
	videos = JSON.parse(localStorage.getItem('videos'));
  }
  if (!videos.includes(videoId)) {
	videos.push(videoId);
	localStorage.setItem('videos', JSON.stringify(videos));
  }
}

function loadVideos() {
  if (localStorage.getItem('videos')) {
	const videos = JSON.parse(localStorage.getItem('videos'));
	const videoCount = document.getElementById('videoCount');
	videoCount.textContent = `You have ${videos.length} videos in the list.`;
	videos.forEach(videoId => {
	  const videoItem = createVideoItem(videoId);
	  videoList.appendChild(videoItem);
	});
  }
}

}
/*
The saveVideo() function takes the video ID and saves it to an array in LocalStorage. The loadVideos() function is called on page load and loads the videos from LocalStorage, creating a videoItem for each one and appending it to the videoList. This way, the user's added videos will persist even if they close and reopen the page.*/
	
	</script>
  </body>
</html>
/* inline buttons -> add class at row */
.pa-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}
<header>
  <nav id="navbar">
      <h1 class="logo">
          <span class="text-primary">
              <i class="fas fa-book-open"></i>Edge
          </span>Ledger
      </h1>
      <ul>
          <li><a href="#home">Home</li>
          <li><a href="#about">About</li>
      </ul>
  <nav>
<header>
<style> 
.w3rcontainer{
   border: 1px solid 
#cccfdb;
   border-radius: 2px;
} 
.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: 
#0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: 
#0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    // Small tablets and large smartphones (landscape view)
    $screen-sm-min: 576px;
     
    // Small tablets (portrait view)
    $screen-md-min: 768px;
     
    // Tablets and small desktops
    $screen-lg-min: 992px;
     
    // Large tablets and desktops
    $screen-xl-min: 1200px;
     
     
    // Small devices
    @mixin sm {
       @media (min-width: #{$screen-sm-min}) {
           @content;
       }
    }
     
    // Medium devices
    @mixin md {
       @media (min-width: #{$screen-md-min}) {
           @content;
       }
    }
     
    // Large devices
    @mixin lg {
       @media (min-width: #{$screen-lg-min}) {
           @content;
       }
    }
     
    // Extra large devices
    @mixin xl {
       @media (min-width: #{$screen-xl-min}) {
           @content;
       }
    }

.bg-col-1{background-color: var(--color_1);}
.bg-col-2{background-color: var(--color_2);}
.bg-col-3{background-color: var(--color_3);}
.bg-col-4{background-color: var(--color_4);}
.txt-col-1{color: var(--color_1);}
.txt-col-2{color: var(--color_2);}
.txt-col-3{color: var(--color_3);}
.txt-col-4{color: var(--color_4);}
.font-1{font-size: 0.8rem;}
.font-2{font-size: 1.2rem;}
.font-3{font-size: 1.6rem;}
.font-4{font-size: 2rem;}
.font-5{font-size: 3rem;}
.thin{font-weight: 300;}
.normal{font-weight: 500;}
.bold {font-weight: 700;}
.bolder{font-weight: 900;}
.flex {display: flex;}
.row{flex-direction:row;}
.column{flex-direction:column;}
.center{align-items: center;}
.middle{justify-content: center;}
.between {justify-content: space-between;}
.around{justify-content: space-around;}
.gap-1{gap: 1rem;}
.gap-2{gap: 2rem;}
.gap-3{gap: 3rem;}
.block{display: block;}
.grid{display: grid;
      place-items: center;}
.absolute{position: absolute;}
.fixed{position: fixed;}
.relative{position: relative;}
.sticky {position: sticky;}
.top-0 {top: 0;}
.top-50 {top: 50%;}
.left-0{left: 0;}
.left-50{left: 50%;}
.right-0{right: 0;}
.bottom-0{bottom: 0;}
.translate {transform: translate(-50%,-50%);}
.translateX{transform: translateX(-50%);}
.translateY{transform: translateY(-50%);}
.paddingX{padding-inline:var(--padX)}
.paddingY{padding-block:var(--padY)}
.width-100{width: 100%;}
.width-50{width: 50%;}
.width-25{width: 25%;}
.txt-left{text-align: left;}
.txt-center{text-align: center;}
.txt-right{text-align: right;}
.txt-justify{text-align: justify;}
.border{border: none;}
.display{display: none;}
.outline{outline: none;}
.overflow{overflow: hidden;}
.contain{object-fit: contain;}
.cover{object-fit: cover;}
.pointer{cursor: pointer;}
.ratio{aspect-ratio: 1;}
.rounded-5{border-radius:5px;}
.rounded-10{border-radius:10px;}
.rounded-30{border-radius:30px;}
.circle{border-radius:50%;}
.inner-submenu {
    left: auto;
    max-width: 1920px;
}

@media (max-width: 768px) {
    .inner-submenu li a {
        border: none !important;
        padding: 0 !important;
    }
    
    .inner-submenu li .avia-menu-text {
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        display: inline-block;
        padding: 6px 15px;
    }
    
    .inner-submenu li {
        padding: 0 !important;
    }
    
    .inner-submenu ul {
        margin: 15px 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }
}
<link rel="stylesheet" href="https://webkit-ui.netlify.app/style.css">
 
   /* head */ 
   <head>
    <link rel="stylesheet" href="https://webkit-ui.netlify.app/style.css">
  </head>

/* left snack bar */
<div class="flex justify-around items-center pd-3 position-fixed bottom-5 left-5  rounded-s bg-green-8 text-color-grey-0 gap-1">
      <span>Can't send photo.Retry in 5 second.</span>
     <button class="bg-none text-color-grey-0 text-s" id="toast_left">
             <i class="fas fa-times-circle"></i>
     </button>
</div>

/* center sanckbar*/  
<div class="flex justify-around items-center pd-3 gap-1 position-fixed bottom-5 left-40  rounded-s bg-green-8 text-color-grey-0 ">
      <span>Can't send photo.Retry in 5 second</span>
      <button class="bg-none text-color-grey-0 text-s" id="toast_center">
              <i class="fas fa-times-circle"></i>
      </button>
</div>
/* right snackbar*/
<div class="flex justify-around items-center pd-3 position-fixed rounded-s  bottom-5 right-5 bg-green-8 text-color-grey-0 gap-1">
       <span>Can't send photo.Retry in 5 second</span>
       <button class="bg-none text-color-grey-0 text-s" id="right_center">
             <i class="fas fa-times-circle"></i>
       </button>
</div>
table { 
    border-collapse: collapse; 
}
/*
*	Menu Icons and Description
*	Please change the variable value below to update 
*	icon and description on the submenu	
*/
// Icons
$analytics:					'/wp-content/uploads/2022/11/solutions-analytics-reporting.svg';
$consumer: 					'/wp-content/uploads/2022/11/solutions-consumer-generated-content.svg';
$content: 					'/wp-content/uploads/2022/11/solutions-content-management.svg';
$segmenting: 				'/wp-content/uploads/2022/11/solutions-segmenting-personalization.svg';
$relationship: 				'/wp-content/uploads/2022/11/solutions-relationship-management.svg';  
$rewards: 					'/wp-content/uploads/2022/11/solutions-reward.svg';
$referral: 					'/wp-content/uploads/2022/11/solutions-referral-tracking.svg';
$payments: 					'/wp-content/uploads/2022/11/solutions-payments.svg';

$affiliate:					'/wp-content/uploads/2022/11/platform-affiliate-program.svg';
$ambassador: 				'/wp-content/uploads/2022/11/platform-ambassador-program.svg';
$creator: 					'/wp-content/uploads/2022/11/platform-creator-management.svg';
$customer: 					'/wp-content/uploads/2022/11/platform-customer-advocacy.svg';
$influencer: 				'/wp-content/uploads/2022/11/platform-influencer-marketing.svg';  
$refprograms: 				'/wp-content/uploads/2022/11/platform-referral-program.svg';
$loyalty: 					'/wp-content/uploads/2022/11/platform-loyalty-program.svg';

$blog:						'/wp-content/uploads/2022/11/resources-blog.svg';
$success: 					'/wp-content/uploads/2022/11/resources-success-stories.svg';
$guides: 					'/wp-content/uploads/2022/11/resources-guides-ebook.svg';
$videos: 					'/wp-content/uploads/2022/11/resources-videos.svg';
$webinars: 					'/wp-content/uploads/2022/11/resources-webinars.svg';  
$comparison: 				'/wp-content/uploads/2022/11/resources-comparison.svg';

// Description
$analytics-desc:			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$consumer-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$content-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';
$segmenting-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$relationship-desc: 		'Lorem ipsum dolor sit amet consetetur sadipscing.';  
$rewards-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';
$referral-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$payments-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';

$affiliate-desc:			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$ambassador-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$creator-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';
$customer-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$influencer-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';  
$refprograms-desc: 			'Lorem ipsum dolor sit amet consetetur sadipscing.';
$loyalty-desc: 				'Lorem ipsum dolor sit amet consetetur sadipscing.';

$blog-desc:					'Discover practice by our blog.';
$success-desc: 				'Get inspired by our success stories.';
$guides-desc: 				'Enrich knowledge with our guides & e-books.';
$videos-desc: 				'Quality courses from our videos.';
$webinars-desc: 			'Get in touch with our webinars.';  
$comparison-desc: 			'Turn into high-performance sales funnel.';


// Declare Sub-menu Icons
$menu-image: (
	"analytics": 				$analytics, 
	"consumer": 				$consumer, 
	"content": 					$content, 
	"segmenting": 				$segmenting, 
	"relationship": 			$relationship,  
	"rewards": 					$rewards,
	"referral": 				$referral,
	"payments": 				$payments,
	"affiliate":				$affiliate,					
	"ambassador":				$ambassador, 				
	"creator":					$creator, 					
	"customer":					$customer, 					
	"influencer":				$influencer, 				 
	"refprograms":				$refprograms, 				
	"loyalty":					$loyalty,
	"blog":						$blog,	
	"success":					$success, 	
	"guides":					$guides, 	
	"videos":					$videos, 	
	"webinars":					$webinars, 	
	"comparison":				$comparison 
);

// Declare Sub-menu Description
$menu-description: (
	"analytics": 				$analytics-desc, 
	"consumer": 				$consumer-desc, 
	"content": 					$content-desc, 
	"segmenting": 				$segmenting-desc, 
	"relationship": 			$relationship-desc,  
	"rewards": 					$rewards-desc,
	"referral": 				$referral-desc,
	"payments": 				$payments-desc,
	"affiliate":				$affiliate-desc,					
	"ambassador":				$ambassador-desc, 				
	"creator":					$creator-desc, 					
	"customer":					$customer-desc, 					
	"influencer":				$influencer-desc, 				 
	"refprograms":				$refprograms-desc, 				
	"loyalty":					$loyalty-desc,
	"blog":						$blog-desc,	
	"success":					$success-desc, 	
	"guides":					$guides-desc, 	
	"videos":					$videos-desc, 	
	"webinars":					$webinars-desc, 	
	"comparison":				$comparison-desc 
);
// Mixins
@mixin bc-transition{
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
}
// Media Queries
$desktop: 1440px;
$tablet: 1115px;
$mobile: 860px;
$min-tablet: 1116px;
$min-mobile: 861px;
/* General */ 
body:not(.fl-builder-edit){
	a, .fl-button, .fl-button-text, .pp-button, button, input[type="submit"]{
		@include bc-transition;
	}
	@media(min-width: $min-mobile){
		.sticky-sidebar{
			 position: sticky;
			 top: 5rem;
			 align-self: start;
		}
	}
}
.fl-button-has-icon{
	i.fa-long-arrow-right::before{
		content: "";
		width: 13px;
		height: 13px;
		display: block;
		background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat;
		background-size: contain;
	}
} 
.fl-module-pp-logos-grid.fl-visible-desktop{
	.pp-logos-content{
		.pp-logo{
			margin-bottom: 0 !important;
		}
	} 
}
.pp-dual-button-inner{
	a.pp-button{
		transition: all .3s ease-in-out !important;
		border-radius: 24px;
		width: fit-content !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		.fa-long-arrow-right::before{
			content: "";
			width: 13px;
			height: 13px;
			display: block;
			background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat;
			background-size: contain;
		}
	}
	@media(max-width: $mobile){
		width: 100%;
		.pp-dual-button{
			a{
				width: 100% !important;
			}
			&.pp-dual-button-2{
				padding-top: 15px;
			}
		}
	}
} 
.bc-green-arrow{
	.pp-dual-button-inner{
		.pp-dual-button-2{
			a.pp-button{
				.fa-long-arrow-right::before{
					background: url('https://bchampiodev.wpengine.com/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
					background-size: contain !important;
				}
			}
		}
	}
}    
.fl-rich-text{
	p{
		margin-bottom: 0 !important;
		&:not(:first-child){
			margin-top: 22px;
		}
	}
	ul{
		margin-top: 30px;
		& >{
			li{
				&:not(:first-child){
					margin-top: 12px;
				}
			}
		}
	}
}
.gform_wrapper{
	.gform_heading{
		.gform_required_legend{
			display: none !important;
		}
	}
	form{
		.gform_body{
			.gform_fields{
				.gfield{
					&.gfield_error{
						.ginput_container{
							input{
								border-color: #E63946 !important;
							}
						}
						.ginput_container_checkbox + .validation_message{
							margin-top: 10px !important;
						}
						.validation_message{
							font-size: 14px;
							&::before{
								content: "\f06a";
								font-family: "Font Awesome 5 Pro";
								font-weight: 700;
								font-size: 14px;
								margin-right: 5px;
								vertical-align: middle;
							}
						}
					}
				}
			}
		}
	}
}
.bc-footer-form {
	form {
		.gform_body {
			.gform_fields {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: nowrap;
				background-color: #fff;
				border-radius: 25px;
				padding: 2px 4px;
				border: 1px solid #EDEDED;
				.gfield {
					&:first-child {
						flex: 0 0 60%;
					}
					&:last-child {
						flex: 0 0 40%;
						text-align: right;
					}
					label {
						display: none !important;
					}
					.ginput_container {
						input {
							background-color: transparent !important;
							padding: 15px !important;
						}
					}
					.validation_message {
						position: absolute;
						font-size: 14px;
						bottom: -30px;
						left: 24px;
					}
				}
			}
		}
	}
}
.pp-icon-list-items{
	.pp-icon-list-item{
		span.pp-list-item-icon{
			padding-top: 6px !important;
		}
	}
}  
.bc-arrow-button{
	a.fl-button{
		i::before{
			background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
			background-size: contain !important;
			transition: all .3s ease-in-out;
			width: 15px;
		}
	}
}  
/* Header */ 
.bc-white-header{
	background-color: #FFF !important;	
}
.bc-header{
	.fl-row-content-wrap{
		.fl-row-content{
			position: unset !important;
		}
	}
}  
header{
	&.fl-theme-builder-header-scrolled{
		background: linear-gradient(90deg, #E5F6FF 0%, #F3FBFF 100%);
		box-shadow: 0 1px 25px rgb(57 63 72 / 10%);
	}
	&.fl-theme-builder-header-shrink{
		.pp-advanced-menu{
			nav{
				ul.menu >{
					li{
						padding: 25px 0 !important;
					} 
				}
			}
		}
	}
}

@media(min-width: $min-mobile){
	.pp-advanced-menu{
		nav{
			ul.menu >{
				li{
					padding: 38px 0;
					&.menu-hide-desktop{
						@media(min-width: 861px){
							display: none;
						}
					}
					&.pp-has-submenu{
						border-bottom: 2px solid transparent;
						@include bc-transition;
						position: unset !important;
						>{
							.pp-has-submenu-container{
								a{
									.menu-item-text{
										padding-right: 20px;
										.pp-menu-toggle{
											transition: all .3s ease-in-out;
											right: 0;
										}
									}
								}
							}
						}
						&:hover{
							.pp-has-submenu-container{
								a{
									.menu-item-text{
										.pp-menu-toggle{
											transform: rotate(-180deg);
											-webkit-transform: rotate(-180deg);
											-moz-transform: rotate(-180deg);
										}
									}
								}
							}
						}
						&.bc-submenu-open{
							border-bottom-color: #53B7E2 !important;
						}
					} 
					&.pp-has-submenu.bc-submenu-open >{
						position: unset !important;
						ul.sub-menu{
							display: grid !important;
							padding: 0;
							border-top: 1px solid #dedede;
							box-shadow: 0 10px 40px rgb(0 0 0 / 5%);
							width: 100% !important;
							left: 0 !important;
							display: grid !important;
							visibility: visible !important;
							opacity: 1 !important;
							grid-template-columns: 2fr 1fr !important;
							li{
								&.submenu-main{
									padding: 40px 60px 40px 80px;
									.pp-has-submenu-container{
										a{
											padding: 0;
											font-size: 20px;
											font-weight: 600;
											cursor: default !important;
											&:hover{
												  color: #121212 !important; 
											}
										}
									}
									ul.sub-menu{
										padding-top: 5px;
										width: 100%;
										display: grid !important;
										grid-template-columns: 1fr 1fr !important;
										column-gap: 40px;
										li{
											margin-top: 25px;
											&.submenu-child{
												a{
													 padding: 0;
													 display: grid;
													 grid-template-columns: 28px auto;
													 grid-template-rows: auto;
													 column-gap: 15px;
													 grid-template-areas: 
														"icon menu"
														"icon description";  
													 transition: all .3s ease-in-out;
													.menu-item-text{
														grid-area: menu;
														line-height: 1.25;
													}
													.menu-desc{
														font-size: 14px;
														font-weight: 400;
														grid-area: description;
														margin-bottom: 0;
														margin-top: 5px;
														color: #7E7E7E !important;
													}
													.menu-image{
														background-repeat: no-repeat;
														background-size: contain;
														width: 28px;
														height: auto;
														grid-area: icon;
													}
												}
											}
											&.submenu-button{
												width: fit-content;
												padding-top: 40px;
												a{
													padding: 0;
													color: #24B75C;
													font-weight: 600 !important;
													transition: all .3s ease-in-out;
													&::after{
														content: "";
														width: 14px;
														height: 12px;
														display: inline-block;
														background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
														background-size: cover;
														margin-left: 10px;
														transition: all .3s ease-in-out;
													}
													&:hover{
														color: #25A756;
														text-decoration: underline;
														&:after{
															margin-left: 15px;
														}
													}
												}
											}
											@each $name, $glyph in $menu-image {
												&.submenu-child-#{$name}{
													.menu-image{
														background-image: url($glyph);
													}
												}
											}
											@each $name, $glyph in $menu-description {
												&.submenu-child-#{$name}{
													.menu-desc{
														&::before{
														   content: $glyph;
														}
													}
												}
											}
										}
									}
									&.submenu-main-platform{
										ul.sub-menu{
											li{
												&.submenu-button{
													position: absolute !important;
													left: 80px;
													bottom: 40px;
												}
											}
										}
									}
								}
								&.submenu-side{
									background: linear-gradient(180deg, #E5F6FF 0%, #FFFFFF 100%);
									padding: 40px 80px 40px 60px!important;
									.pp-has-submenu-container{
										a{
											font-size: 20px;
											font-weight: 600;
											padding: 0 !important;
											cursor: default !important;
											&:hover{
												  color: #121212 !important; 
											}
										}
									}
									ul.sub-menu{
										background: transparent !important;
										padding-top: 30px !important;
										width: 100%;
										display: block !important;
										li{
											&:not(:first-child){
												margin-top: 25px;
											}
											>{
												a{
													padding: 0 !important;
													transition: all .3s ease-in-out;
													display: flex;
													flex-direction: row;
													align-items: center;
													justify-content: space-between;
													&:hover{
														color: #24B75C !important;
														&:after{
															background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
															background-size: cover;
														}
													}
													&::after{
														content: "";
														display: block;
														width: 14px;
														height: 12px;
														background: url('/wp-content/uploads/2022/11/arrow-black.svg') no-repeat;
														background-size: cover;
														transition: background .3s ease-in-out;
													}
												}
											}
											&.current-menu-item{
												a{
													color: #24B75C !important;
													&::after{
														background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
    													background-size: cover !important;
													}
												}
											}
										}
									}
									&.submenu-side-blank{
										ul.sub-menu{
											padding-top: 0 !important;
											height: 0 !important;
											> {
												li{
													min-height: 110px !important;
													> {
														.fl-builder-content{
															padding: 0 !important;
														}
														a{
															display: none !important;
														}
													}
												}
											}
										}
										.pp-has-submenu-container{
											display: none !important;
										}
									}
								}
								.pp-menu-toggle{
									display: none !important;
								}
								ul.sub-menu{
									visibility: visible !important;
									opacity: 1 !important;
									position: unset !important;
								}
							}
						}	
					}
					&.menu-parent-resources.pp-has-submenu.bc-submenu-open{
						>{
							ul.sub-menu{
								grid-template-columns: 1.5fr 1fr !important;
							}
						}
					}
					&.current-page-parent, &.current-page-ancestor, &.current-menu-ancestor{
						>{
							.pp-has-submenu-container{
								a{
									color: #53B7E2;
									.pp-menu-toggle{
										&::before{
											border-color: #53B7E2;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
 
/* Homepage */
body:not(.fl-builder-edit){
	.bc-custom-accordion-wrapper{
		position: relative;
		.bc-custom-accordion{
			width: 40%;
			padding-right: 20px;
			.pp-accordion{
				.pp-accordion-item{
					&.pp-accordion-item-active{
						.pp-accordion-button{
							border-bottom: unset !important;
							padding-bottom: 12px !important;
							span.pp-accordion-button-label{
								@media(min-width: $min-mobile){
									font-weight: 600 !important;
								}
							}
						}
					}
					.pp-accordion-button{
						span.pp-accordion-icon{
							font-size: 0 !important;
    						width: 24px !important;
							margin-right: 12px !important;
							padding-right: 0 !important;
						}
					}
					&:first-child{
						.pp-accordion-button{
							@media(min-width: $min-mobile){
								padding-top: 0 !important;
							}
						}
					}
					.pp-accordion-content{
						p{
							a{
								font-weight: 600;
								display: block;
								margin-top: 25px;
								&::after{
									content: "";
									display: inline-block;
									width: 15px;
									height: 15px;
									background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
									background-size: contain;
									margin-left: 12px;
									vertical-align: middle;
									transition: all .3s ease-in-out;
								}
								&:hover{
									&:after{
										margin-left: 16px;
									}
								}
							}
						}
						img.alignnone{
							position: absolute;
							top: 0;
							right: 0;
							margin: 0 !important;
							width: 50%; 
						}
					}
				}
			}
			&.bc-custom-accordion--right{
				float: right;
				padding-right: 0 !important;
				padding-left: 20px;
				img.alignnone{
					right: unset !important;
					left: 0;
				}
			}
		}
	}
}
.bc-objective-infobox{
	.pp-infobox-wrap{
		.pp-infobox{
			cursor: pointer;
			.pp-infobox-description{
				.pp-infobox-button{
					text-align: right !important;
					.pp-button{
						font-size: 0 !important;
						i{
							margin-left: 0 !important;
						}
					}
				}
			}
			&:hover{
				.pp-infobox-title{
					text-decoration: underline;
				}
				.pp-infobox-description{
					.pp-infobox-button{
						.pp-button{
							background-color: rgb(37, 167, 86);
						}
					}
				}
			}
		}	
	}
	&.bc-objective-infobox--unlink{
		.pp-infobox-wrap{
			.pp-infobox{
				cursor: default;
				&:hover{
					.pp-infobox-title{
						text-decoration: none;
					}
				}
			}
		}
	}
}  
.bc-testimonial-carousel{
	.pp-testimonials{
		.owl-carousel{
			.owl-stage-outer {
				width: calc(100% + 20px) !important;
				padding: 25px 0;
				.owl-item {
					margin-right: 18px !important;
					margin-left: 16px;
					.pp-content-wrapper{
						margin-bottom: 35px !important;
					}
					.pp-vertical-align{
						display: flex;
						flex-direction: row-reverse;
						justify-content: space-between;
						align-items: center;
						gap: 30px;
						width: 100%;
						.pp-title-wrapper{
							h6{
								margin-top: 0;
							}
							p{
								margin-bottom: 0;
							}
						}
						.pp-testimonials-image{
							margin-right: 0 !important;
							img{
								max-height: 45px !important;
								max-width: 100px !important;
							}
						}
					}
				}
			}
		}
	}
	&.partner-testimonial{
		.owl-carousel{
			.owl-stage-outer {
				.owl-item {
					.pp-vertical-align{
						flex-direction: row !important;
						justify-content: flex-start !important;
						gap: 15px;
					}
				}
			}
		}
	}
}   
/* Solutions */
.bc-clickable-box{
	.fl-col-content{
		cursor: pointer;
		.fl-photo{
			.fl-photo-content{
				border-radius: 16px;
				-webkit-border-radius: 16px;
				-moz-border-radius: 16px;
				-khtml-border-radius: 16px;
				overflow: hidden;
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-webkit-transform: translate3d(0,0,0);
				-moz-transform: translate3d(0,0,0);
				img{
					transition: all .3s ease-in-out;
				}
			}
		}
		.bc-arrow-button{
			a.fl-button i{
				transition: all .3s ease-in-out;
			}
		}
		&:hover{
			.fl-photo-content{
				img{
					transform: scale(1.1);
				}
			}
			.fl-heading{
				text-decoration: underline;
			}
			.bc-arrow-button{
				a.fl-button i{
					margin-left: 12px;
				}
			}
		}
	}
} 
/* Footer */
footer{
	.fl-rich-text{
		a{
			text-decoration: none !important;
		}
	} 
	.pp-social-icons{
		.pp-social-icon{
			i.fa-trello::before{
				content: "";
				width: 20px;
				height: 18px;
				display: block;
				background: url('/wp-content/uploads/2022/11/social-e1669106874120.png') no-repeat;
				background-size: contain;
			}
			i.fa-linux::before{
				content: "";
				width: 20px;
				height: 18px;
				display: block;
				background: url('/wp-content/uploads/2022/11/social-1-e1669106913834.png') no-repeat;
				background-size: contain;
			}
		}
	}
	.fl-rich-text{
		p:not(:first-child){
			margin-top: 15px;
		}
		p:last-child strong{
			font-size: 9px;
			padding: 2px 8px;
			background: #F9C344;
			border-radius: 8px;
			margin-left: 5px;
			display: inline-block;
			vertical-align: middle;
			color: #121212 !important;
		}
	} 
}  
/* Accordion Basic */ 
.bc-accordion-basic{
	.pp-accordion{
		.pp-accordion-item{
			&.pp-accordion-item-active{
				.pp-accordion-button{
					border-bottom: unset !important;
					padding-bottom: 15px;
					.pp-accordion-button-icon{
						color: #53B7E2;
					}
				}
			}
		}
	}
}   
/* Resources */
.bc-resources-filter{
	.fl-rich-text{
		ul{
			padding-left: 0;
			list-style: none;
			margin: 0 !important;
			li{
				display: inline-block;
				padding: 8px 20px;
				border-radius: 24px;
				transition: all .3s ease-in-out;
				background: transparent;
				&:not(:first-child){
					margin-left: 5px;
				}
				a{
					text-decoration: none;
					transition: all .3s ease-in-out;
				}
				&:hover, &.active{
					background: #24B75C;
					a{
						color: #FFFFFF !important;
					}
				}
			}
		}
	}
	@media(max-width: $mobile){
		.fl-rich-text{
			width: 100%;
    		overflow-x: scroll;
			ul{
				width: max-content;
			}
		}
	}
}  
.bc-trans-button{
	.fl-button-has-icon{
		a.fl-button{
			i.fa-long-arrow-right::before{
				background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important;
				background-size: contain !important;
				transition: all .3s ease-in-out;
			}
			&:hover{
				i.fa-long-arrow-right::before{
					background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat !important;
					background-size: contain !important;
				}
			}
		}
	}
}   
/* Contact */ 
.contact-social{
	.pp-social-icons{
		.pp-social-icon{
			i.fa-rss::before {
				content: "";
				width: 24px;
				height: 18px;
				display: block;
				background: url(/wp-content/uploads/2022/11/social-e1669106874120.png) no-repeat;
				background-size:contain;
			}
		}
	}
}   
.pp-gf-content{
	.gform_wrapper{
		form.contact-form{
			.gform_body{
				.gform_fields{
					.gfield{
						@media(min-width: 861px){
							&.gf_half{
								width: 50% !important;
								display: inline-block !important;
								vertical-align: top !important;
								&.gf_left{
									padding-right: 10px;
								}
								&.gf_right{
									padding-left: 10px;
								}
							}
						}
						&:not(:last-child){
							margin-bottom: 20px;
						}
						label{
							margin-bottom: 12px !important;
						}
						.ginput_container{
							select{
								width: 100%;
								border-radius: 8px;
								appearance: none;
								-webkit-appearance: none;
								-moz-appearance: none;
								background: url('/wp-content/uploads/2022/11/arrow-nav.svg') no-repeat;
								background-size: 16px;
								background-position: 98% center;
								padding: 0 20px !important;
							}
						}
						&.hidden_label{
							legend{
								display: none !important;    
							}
						}
						.gchoice{
							label{
								font-size: 16px;
								font-weight: 400;
								margin-left: 10px;
								margin-bottom: 0 !important;
    							vertical-align: top;
							}
							input{
								margin-top: 0 !important;
								&::before{
									clip-path: polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);
								}
								&:checked{
									background: #53b7e2 !important;
								}
							}
							@media(max-width: $mobile){
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-items: flex-start;
							}
						}
						textarea{
							height: 100px;
						}
					}
				}
			}
			.gform_footer{
				padding-top: 25px;
			}
			.gform_page_footer{
				padding-top: 25px;
				text-align: right;
			}
		}
	}
}  
/* Login */
#modal-peycrqm2s81h{
	.pp-modal-header{
		.pp-modal-title {
			padding-top: 23px;
			padding-bottom: 23px;
		}
	}
	@media(max-width: $mobile){
		.pp-modal-content{
			padding: 0 !important;
			border-bottom-left-radius: 16px;
    		border-bottom-right-radius: 16px;
		}
	}
}  
.login-form-module{
	.form-title{
		font-weight: 700 !important;
	}
}
.login-form{
	.gfield--width-half{
		width: 50% !important;
		display: inline-block !important;
	}
	.bc-link{
		text-align: right;
		a{
			font-size: 14px;
			color: #0A1931;
			font-weight: 400;
		}
	}
	.bcf-account{
		.ginput_container{
			position: relative;
			&::after {
				content: "brandchamp.io";
				padding: 7px 20px;
				background: #F2F8FD;
				border-radius: 34px;
				display: inline-block;
				font-size: 16px;
				position: absolute;
				top: 5px;
				right: 5px;
			}
			input{
				padding: 5px 160px 5px 20px !important;
			}
		}
	}
	input[type="text"]{
		&::placeholder {
			font-weight: 400;
			color: #0A1931;
		}
	}
	div.hidden_label {
		label{
			display: none !important;
		}
	}
	.gchoice{
		label{
			margin-left: 5px !important;
			font-size: 14px !important;
		}
	}
	.gform_footer{
		padding-top: 15px !important;
		input[type="submit"]{
			color: #fff;
			background-color: #24b75c;
			font-family: "Archivo",sans-serif;
			font-weight: 600;
			font-size: 18px;
			line-height: 1.45;
			text-transform: none;
			border-style: none;
			border-width: 1px;
			border-color: #121212;
			border-radius: 24px;
			transition: all .3s ease-in-out;
			&:hover{
				background-color: #25a756;
			}
		}
	}
}

/* Pricing */
.bc-pricing-tabs{
	.pp-tabs{
		.pp-tabs-labels{
			width: max-content !important;
			background: #ffffff;
			padding: 5px;
			border-radius: 25px;
			box-shadow: #00000012 0 0 20px;
			.pp-tabs-label{
				border-radius: 24px;
				padding: 6px 16px;
				&:not(:last-child){
					margin-right: 5px;
				}
				&.pp-tab-active{
					.pp-tab-title{
						font-weight: 600 !important;
					}
				}
			}
		}
	}
	@media(max-width: $mobile){
		.pp-tabs{
			.pp-tabs-labels{
				width: 100% !important;
				display: flex !important;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				flex-wrap: nowrap;
				.pp-tabs-label{
					&:not(:last-child){
						margin-right: 3px;
					}
					padding: 9px 20px;
					flex: 1 1 auto;
					.pp-tab-label-flex{
						justify-content: center;
						.pp-tab-title{
							font-size: 14px !important;
						}
					}
				}
			}
			.pp-tabs-panels{
				.pp-tabs-panel{
					.pp-tabs-label {
						display: none !important;
					}
				}
			}  
		}
	}
}  
.bc-pricing-table{
	.pp-pricing-table{
		.pp-pricing-table-colset{
			display: flex !important;
			flex-direction: row;
			align-items: flex-end;
			justify-content: center;
			.pp-pricing-table-col{
				width: 30% !important;
				&.pp-pricing-table-highlight{
					width: 40% !important;
					.pp-pricing-featured-title{
						@media(min-width: 861px){
							font-size: 35px !important;
						}
						&::after{
							content: "Popular plan";
							font-size: 12px;
							color: #121212;
							padding: 7px 15px;
							background: #F9C344;
							border-radius: 24px;
							float: right;
							margin-top: 10px;
						}
					}
					.pp-pricing-table-inner-wrap{
						@media(min-width: 861px){
							.pp-pricing-table-header{
								.pp-pricing-table-title{
									font-size: 20px !important;
								}
							}
							.pp-pricing-table-features{
								padding: 20px 0;
								margin: 30px 0;
								font-size: 20px;
							}
							.pp-pricing-table-price{
								font-size: 35px !important;
								.pp-pricing-table-duration{
									opacity: 1;
									font-size: 20px !important;
									text-transform: lowercase !important;
								}
							}
						}
					}
				}
				.pp-pricing-featured-title{
					position: unset !important;
					text-align: left !important;
					h2{
						padding: 0 !important;
						font-size: inherit;
						color: inherit;
						display: inline-block;
					}
				}
				.pp-pricing-table-duration{
					text-transform: lowercase !important;
				}
				.pp-pricing-table-inner-wrap{
					padding-top: 10px;
					.pp-pricing-table-header{
						.pp-pricing-table-title{
							height: 28px !important;
						}
					}
					.pp-pricing-table-features{
						padding: 15px 0;
						border-top: 1px solid #dedede;
						border-bottom: 1px solid #dedede;
						margin: 25px 0;
					}
					.fl-button-wrap{
						margin-top: 20px;
					}
				}
			}
		}
		@media(max-width: $mobile){
			width: 100%;
    		overflow-x: scroll;
			.pp-pricing-table-colset{
				width: max-content;
				.pp-pricing-table-col{
					margin-top: 35px !important;
					width: 30% !important;
					min-width: 340px;
					&.pp-pricing-table-highlight{
						min-width: 440px;
					}
				}
			}
		}
	}
}   
.bc-pricing-enterprise{
	ul.pp-icon-list-items{
		li.pp-icon-list-item{
			display: inline-block !important;
			span.pp-list-item-icon{
				padding-top: 3px !important;
			}
			&:not(:first-child){
				margin-left: 20px;
			}
			@media(max-width: $mobile){
				display: flex !important;
				flex-direction: row;
				flex-wrap: nowrap;
				width: 100%;
				span.pp-list-item-icon{
					float: unset !important;
				}
				&:not(:first-child){
					margin-left: 0;
					margin-top: 10px;
				}
			}
		}
	}
}
/* Career Detail */
.career-share{
	.pp-social-share-inner{
		grid-template-columns: repeat(3,auto) !important;
		.pp-share-button{
			&:hover{
				filter: unset !important;
				.pp-share-button-link{
					border-color: #6EB5DE !important;
				}
			}
			.pp-share-button-link{
				width: max-content;
				padding: 10px 16px;
				gap: 8px;
				background: #FFF !important;
				border-color: #fff;
				transition: all .3s ease-in-out;
				.pp-share-button-icon{
					width: auto;
				}
				.pp-share-button-text{
					span{
						color: #121212;
					}
				}
			}
		}
	}
} 
.career-content{
	h2{
		&:first-child{
			margin-top: 0;
		}
		&:not(:first-child){
			margin-top: 60px;
			@media(max-width: $mobile){
				margin-top: 30px;
			}
		}
		margin-bottom: 30px;
		font-size: 35px;
		color: #0A1931;
		@media(max-width: $mobile){
			font-size: 30px;
		}
	}
	ul{
		padding-left: 22px;
	}
} 
.career-form{
	.ginput_container.ginput_container_fileupload{
		 border: 1px solid #dedede;
		 padding: 6px 6px !important;
		 border-radius: 8px;
		 text-align: left;
		 height: 50px;
		 background-color: #fff !important;
		 cursor: pointer;
		 overflow: hidden;
		 .validation_message {
			 display: none !important;
		 }
		input[type=file]::-webkit-file-upload-button {
			 appearance: none !important;
			 -webkit-appearance: none !important;
			 -moz-appearance: none !important;
			 margin-right: 10px;
			 background: #F2F8FD;
			 border: unset;
			 color: #121212;
			 padding: 10px 12px;
			 font-family: "general-sans" !important;
			 font-weight: 500;
			 font-size: 14px;
			 border-radius: 6px;
			 cursor: pointer;
		}
		.gform_fileupload_rules {
			 display: none;
		}
	}
	.form-title{
		font-size: 25px;
		margin: 0;
	}
	.form-description{
		font-size: 16px;
		margin-top: 8px;
		margin-bottom: 30px;
	}
	.gform_footer{
		position: relative;
		&::before{
			content: "";
			width: 13px;
			height: 13px;
			display: block;
			background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat;
			background-size: contain;
			position: absolute;
			top: 50%;
			right: 34%;
			transform: translateY(50%);
			@media(max-width: $mobile){
				right: 31%;
			}
		}
	}
	&.story-form{
		.gform_footer::before{
			right: 33% !important;
		}
	}
	&.webinar-form{
		.gform_footer::before{
			right: 28% !important;
		}
	}
}
.gfield_error .ginput_container.ginput_container_fileupload {
	 border-color: #e63946 !important;
}
/* Comparison */
.bc-vertical-list{
	ul{
		li{
			display: block !important;
			width: 100% !important;
			text-align: center !important;
			float: unset !important;
			&:last-child{
				padding-bottom: 0 !important;
			}
			.pp-infolist-icon-inner{
				margin: 0 auto;
			}
		}
	}
} 
.bc-comparison-wrapper{
	@media(max-width: $mobile){
		.fl-row-content{
			width: 100%;
    		overflow-x: scroll;
			>{
				.fl-col-group{
					width: max-content !important;
				}
			}
		}
	}
}
/* Single Post */
.single-terms{
	ul{
		list-style: none;
		padding-left: 0;
		margin: 0;
		li{
			display: inline-block;
			margin-right: 8px;
			a{
				padding: 8px 14px;
				border: 1px solid #53B7E2;
				border-radius: 24px;
				color: #53B7E2;
				transition: all .3s ease-in-out;
				text-decoration: none;
				&:hover{
					background: #53B7E2;
					color: #FFF;
				}
			}
		}
	}
} 
.single-top-author{
	.pp-infobox{
		.pp-infobox-title{
			margin: 0;
			@media(max-width: $mobile){
				padding-top: 10px;
			}
		}
		.pp-description-wrap{
			display: flex;
			flex-direction: row;
			align-items: center;
			column-gap: 8px;
			padding-top: 5px;
			@media(max-width: $mobile){
				justify-content: center;
			}
			p{
				margin-bottom: 0;
			}
		}
	}
} 
.bc-toc{
	.pp-toc-container{
		.pp-toc-header {
			 padding: 0 0 0 0 !important;
		}
		.pp-toc-body {
			 overflow-y: unset !important;
			ul{
				list-style: none !important;
				li{
					 border-left: 2px solid transparent;
					 padding-left: 15px;
					 line-height: 1;
					&::before{
						display: none;
					}
					&:not(:first-child){
						margin-top: 15px;
					}
					a{
						text-decoration: none !important;
					}
					&.active {
						 border-color: #24B75C !important;
						 text-align: left !important;
						 display: block !important;
						a{
							 color: #24B75C !important;
						}
					}
					@media(max-width: $mobile){
						border-color: #212121 !important;
		 				color: #212121 !important;
					}
				}
			}
		}
	}
} 
.single-share{
	.pp-share-button{
		.pp-share-button-link {
			 border-width: 0 !important;
			&:hover {
				 background: linear-gradient(180deg, #E5F6FF 30%, #FFFFFF 100%);
			}
		}
		&:hover {
			 filter: unset !important;
		}
	}
}  
.single-author{
	.pp-infobox-description{
		.pp-description-wrap{
			p{
				margin-bottom: 15px;
			}
			.author-social{
				display: inline-block;
    			margin-right: 10px;
				@media(max-width: $mobile){
					margin-right: 0;
					margin-bottom: 10px;
				}
				a{
					padding: 6px 15px;
					background-color: transparent;
					color: #121212;
					border-radius: 17px;
					border: 1px solid #DEDEDE;
					font-size: 14px;
					font-weight: 500;
					text-decoration: none;
					transition: all 0.3s ease-in-out;
					display: inline-block;
					&:hover{
						background-color: #324059;
						color: #FFF;
						border-color: #324059;
					}
				}
				& + p{
					display: none!important;
				}
				&.social-twitter{
					a::before{
						content: "\f099";
						font-family: "Font Awesome 5 Brands";
						margin-right: 8px;
						color: #1DA1F2;
						vertical-align: middle;
					}
				}
				&.social-linkedin{
					a::before{
						content: "\f08c";
						font-family: "Font Awesome 5 Brands";
						margin-right: 8px;
						color: #0077b5;
						vertical-align: middle;
					}
				}
			}
		}
	}
	@media(max-width: $mobile){
		.pp-heading-wrapper{
			padding-top: 20px;
		}
	}
} 
.single-readstory{
	.fl-button-has-icon{
		.fl-button{
			&:hover{
				i.fa-long-arrow-right{
					margin-left: 15px;
				}
			}
			i.fa-long-arrow-right{
				transition: all .3s ease-in-out;
				&::before {
					content: "";
					width: 13px;
					height: 13px;
					display: block;
					background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat;
					background-size: contain;
				}
			}
		}
	}
}  
.single-subscribe-form{
	.gform_footer{
		padding-top: 12px;
		position: relative;
		@media(min-width: 861px){
			&::before{
				content: "";
				width: 13px;
				height: 13px;
				display: block;
				background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat;
				background-size: contain;
				position: absolute;
				top: 40%;
				right: 27%;
				transform: translateY(40%);
			}
		}
	}
	.gform_confirmation_message{
		text-align: center;
		i{
			font-size: 40px;
			color: #24B75C !important;
		}
		h2{
			font-size: 35px;
			margin-top: 20px;
			margin-bottom: 0;
		}
		p{
			margin: 15px 0 0 0;
			font-size: 16px;
		}
	}
}

.single-content{
	h2{
		font-size: 35px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 20px;
		}
	}
	h3{
		font-size: 25px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 20px;
		}
	}
	h4{
		font-size: 22px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 20px;
		}
	}
	ul, ol{
		margin-top: 40px;
    	margin-bottom: 30px;
    	padding-left: 20px;
		li{
			margin-bottom: 15px;
		}
	}
	figure{
		margin-top: 40px;
		margin-bottom: 40px;
		img{
			border-radius: 16px;
		}
		figcaption{
			font-size: 16px;
			font-style: italic;
			margin-top: 20px;
		}
	}
	blockquote{
		margin-top: 40px;
		border-left-color: #53B7E2;
		padding-left: 30px;
		padding-top: 0;
		padding-bottom: 0;
		p{
			font-size: 22px;
			font-style: italic;
		}
		cite{
			margin-top: 20px !important;
			display: block;
		}
	}
} 
/* Privacy Policy, Cookie & Terms */

.legal-content{
	h2{
		font-size: 30px;
		&:not(:first-child){
			margin-top: 60px;
    		margin-bottom: 30px;
		}
	}
	ul, ol{
		margin-top: 30px;
    	margin-bottom: 30px;
    	padding-left: 20px;
		li{
			margin-bottom: 15px;
		}
	}
	&.legal-content--inside{
		ul,ol{
			padding-left: 50px;
		}
	}
} 
/* Book a Demo */
.gf_progressbar_title{
    margin-bottom: 0;
    text-align: right;
    font-size: 15px;
	@media(max-width: $mobile){
		text-align: left;
	}
}
.partial_entry_warning {
	display: none !important;
}
.book-demo-form{
	.gf_progressbar_title{
		display: none;
	}
	.gf_progressbar{
		background-color: #F3F5F7;
		.gf_progressbar_percentage{
			background: #53B7E2;
			height: 5px;
			span{
				display: none;
			}
		}
	}
	.gform_body{
		@media(min-width: 861px){
			padding-left: 90px;
			padding-right: 90px;
			padding-top: 80px;
		}
		@media(max-width: $mobile){
			padding: 30px 20px 20px 20px;
		}
		.ginput_container_checkbox{
			padding-top: 10px;
			.gfield_checkbox{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				gap: 10px 15px;
			}
		}
		.demo-title{
			margin-bottom: 40px !important;
			h1, h2{
				font-size: 50px;
			}
			p{
				font-weight: 400;
				color: #121212;
			}
		}
	}
	.gform_page_footer{
		.gform_previous_button{
			background-color: #F3F5F8 !important;
			color: #121212 !important;
			margin-right: 10px;
			transition: all .3s ease-in-out;
			&:hover{
				background-color: #24b75c !important;
				color: #FFF !important;
			}
		}
		.gform_next_button{
			background: url('https://bchampiodev.wpengine.com/wp-content/uploads/2022/11/arrow-button.svg') no-repeat !important; 
			background-size: 15px !important;
			background-position: 82% center !important;
			background-color: #24B75C !important;
			padding-right: 50px !important;
			transition: all .3s ease-in-out;
			&:hover{
				background-color: #25a756 !important;
			}
		}
	}
}
/* Partner Program */
.partner-infobox{
	@media(max-width: $mobile){
		.pp-infobox-image{
			text-align: left;
			padding-bottom: 15px;
		}
	}
}
/* Responsive */
@media(max-width: $mobile){
	.pp-hamburger-inner{
		&::before{
			display: none !important;
		}
		&::after{
			bottom: -10px !important;
		}
	}
	.pp-advanced-menu{
		nav{
			ul.pp-advanced-menu-horizontal {
				width: 100% !important;
				top: 0 !important;
				transform: translatey(0) !important;
				padding: 0 20px !important;
				> {
					li.menu-item{
						padding: 20px 0;
						border-bottom: 1px solid #dedede;
						&.menu-parent{
							.pp-has-submenu-container{
								a{
									transition: all .3s ease-in-out;
								}
							}
							&.pp-active{
								padding-bottom: 30px;
								.pp-has-submenu-container{
									a{
										span.pp-menu-toggle{
											&::before{
												border-color: #121212 !important;
											}
										}
									}
									&:hover{
										a{
											span.pp-menu-toggle{
												&::before{
													border-color: #121212 !important;
												}
											}
										}
									}
								}
							}
						}
						>{
							ul.sub-menu{
								padding-left: 15px;
								padding-top: 20px;
								li{
									padding: 0 !important;
									.pp-has-submenu-container{
										a{
											font-size: 16px;
											font-weight: 600;
											span.pp-menu-toggle{
												display: none;
											}
										}
									}
									ul.sub-menu{
										display: block !important;
										padding-top: 0;
										li{
											margin-top: 20px;
											&.submenu-button{
												display: none !important;
											}
											
										}
									}
									&.submenu-main{
										ul.sub-menu{
											li{
												&.submenu-child{
													a{
														 padding: 0;
														 display: grid;
														 grid-template-columns: 24px auto;
														 grid-template-rows: auto;
														 column-gap: 14px;
														 grid-template-areas: 
															"icon menu"
															"icon description";  
														 transition: all .3s ease-in-out;
														.menu-item-text{
															grid-area: menu;
															line-height: 1.25;
														}
														.menu-desc{
															font-size: 14px;
															font-weight: 400;
															grid-area: description;
															margin-bottom: 0;
															margin-top: 5px;
															color: #7E7E7E !important;
														}
														.menu-image{
															background-repeat: no-repeat;
															background-size: contain;
															width: 24px;
															height: auto;
															grid-area: icon;
														}
													}
												}
												@each $name, $glyph in $menu-image {
													&.submenu-child-#{$name}{
														.menu-image{
															background-image: url($glyph);
														}
													}
												}
												@each $name, $glyph in $menu-description {
													&.submenu-child-#{$name}{
														.menu-desc{
															&::before{
															   content: $glyph;
															}
														}
													}
												}
											}
										}
									}
									&.submenu-side{
										display: none !important;
										background: transparent !important;
									}
								}
							}
						}
						&.menu-login{
							border-bottom: unset !important;
							text-align: center;
							padding: 30px 0;
							font-weight: 500;
						}
						&.menu-book{
							border-bottom: unset !important;
							text-align: center;
    						padding: 0;
							a{
								width: fit-content;
								margin: 0 auto;
								padding: 9px 20px;
								background-color: #24B75C;
								color: #FFF;
								font-weight: 600;
								border-radius: 24px;
								font-size: 16px;
								&::after{
									content: "";
									width: 13px;
									height: 13px;
									display: inline-block;
									background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat;
									background-size: contain;
									margin-left: 8px;
    								vertical-align: middle;
								}
							}
						}
					}
				}
			}
		}
		&.menu-open{
			.pp-menu-nav{
				.mobile-upper{
					display: block;
					position: relative;
					width: 100%;
					background-color: #FFFFFF;
					height: 75px;  
					border-bottom: 1px solid #DEDEDE;
					&::before {
							content: "";
							width: 170px;
    						height: 29px;
							background-image: url('/wp-content/uploads/2022/11/brandchamp-logo.png');
							background-size: contain;
							background-repeat: no-repeat;
							background-position: center center;
							display: block;
							position: absolute;
							z-index: 999999;
							top: 20px;
							left: 15px;
					}
					.pp-menu-close-btn{
						right: 20px !important;
						top: 25px !important;
						width: 30px !important;
						height: 30px !important;
						&::before{
							height: 25px !important;
						}
						&::after{
							height: 25px !important;
						}
					}
				}
				ul.menu{
					width: 100%!important;
					top: 0!important;
					transform: translatey(0)!important;
					padding: 0 20px!important;
					position: relative;
				}
			}
		}
	}
	.bc-brand-logo{
		.pp-logos-wrapper{
			justify-content: center;
			.pp-logo{
				img{
					object-fit: contain;
				}
				&:last-child{
					margin-right: 0 !important;
				}
			}
		}
	}
	.pp-content-post-carousel{
		.owl-theme .owl-dots {
			margin-top: 30px !important;
		}	
	} 
	.pp-infobox-wrap{
		.pp-infobox.layout-5{
			.pp-icon-wrapper{
				.pp-infobox-image{
					img{
						width: 40px;
					}
				} 
			}
			.pp-infobox-title-wrapper{
				.pp-infobox-title {
					margin-top: 15px;
				}
			}
			.pp-infobox-description{
				margin-top: 10px;
			}
		}
	}
	.pp-advanced-menu-mobile-toggle.hamburger {
		padding: 0;
	}
	body:not(.fl-builder-edit){
		.bc-custom-accordion-wrapper{
			.bc-custom-accordion{
				width: 100% !important;
				overflow-x: scroll;
				min-height: 550px;
				padding-left: 0 !important;
				padding-right: 0 !important;
				.pp-accordion{
					width: fit-content;
					display: flex;
					flex-direction: row;
					.pp-accordion-item {
						flex: 0 0 auto;
						border-bottom: none !important;
						margin-right: 15px;
						.pp-accordion-button{
							padding: 9px 20px !important;
							border: 1px solid #EDEDED !important;
							background-color: #FFFFFF;
							border-radius: 26px;
							span.pp-accordion-button-label{
								font-size: 16px;
							}
						}
						.pp-accordion-content{
							position: absolute;
							top: 15%;
							left: 0;
							border-bottom: none !important;
							img.alignnone{
								position: unset !important;
								width: 400px !important;
								margin-top: 20px !important;
							}
						}
						&:first-child{
							.pp-accordion-button{
								padding-top: 9px !important;
							}
						}
						&.pp-accordion-item-active{
							.pp-accordion-button{
								padding-top: 9px !important;
								border: 1px solid #EAF8FF !important;
								background-color: #EAF8FF;
								span.pp-accordion-button-label{
									font-weight: 500 !important;
								}
							}
						}
					}
				}
			}
		}
		.bc-objective-infobox{
			overflow-x: scroll;
    		padding-bottom: 50px;
			.objective-wrapper{
				width: fit-content;
				display: flex;
				flex-direction: row;
				.fl-col {
					flex: 1 0 250px;
					&:not(:first-child){
						margin-left: 15px;
					}
					.pp-infobox{
						padding: 16px !important;
						h4.pp-infobox-title{
							font-size: 16px !important;
						}
						.pp-description-wrap{
							p{
								font-size: 14px !important;
							}
						}
					}
				}
			}
		}
		.bc-mobile-scrollable{
			overflow-x: scroll;
    		padding-bottom: 50px;
			.objective-wrapper{
				width: fit-content;
				display: flex;
				flex-direction: row;
				.fl-col {
					flex: 1 0 250px;
					&:not(:first-child){
						margin-left: 15px;
					}
				}
			}
		}
	}
	.bc-privacy-mobile{
		ul{
			list-style: none !important;
			padding-left: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 0 !important;
			margin-bottom: 0 !important;
			li{
				margin-top: 0 !important;
			}
		}
	} 
	.bc-footer-accordion{
		.pp-accordion{
			.pp-accordion-item{
				.pp-accordion-button{
					.pp-accordion-button-label{
						font-weight: 600 !important;
					}
				}
				.pp-accordion-content{
					p:not(:first-child){
						margin-top: 15px;
					}
					p{
						strong{
							font-size: 9px;
							padding: 2px 8px;
							background: #F9C344;
							border-radius: 8px;
							margin-left: 5px;
							display: inline-block;
							vertical-align: middle;
							color: #121212 !important;
						}
					}
				}
				&.pp-accordion-item-active{
					.pp-accordion-button{
						border-bottom: none !important;
					}
				}
			}
		}
	} 
	
} // Media close
@import url("https://imaginative-tiramisu-08cf25.netlify.app");

<style>
div {
  font-size: 55px; 
  line-height: 55px; 
  text-decoration-skip-ink: none;
}
.ulsingle {
  text-decoration: underline;
}
.uldouble {
  text-decoration: double underline;
}
.ulwavy {
  text-decoration: wavy underline;
}  
</style>

<div>
  це - <span class="ulsingle">підмет</span>, 
  це - <span class="uldouble">присудок</span>,
  це - <span class="ulwavy">означення</span>
</div>
  <div class="wt-max-100">
       <input type="range" min="0" max="100" class="input-green-800 width-scaled4-8"> 
  </div>   
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="fa fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="far fa-star"></i></span>
 <span class="text-m text-color-brown-5"><i class="far fa-star"></i></span>
 <span class="text-m  text-color-grey-9"> (3/5 review)</span>
<p class="text-lg">1. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, mollitia!. </p>
<p class=" text-m">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, quis?</p>
<p class="text-xm ">3. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, ipsam.</p>
<p class="text-s">4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic!</p>
<p class="text-xs ">5. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, reprehenderit.</p>
     <div class="text-s text-start pd-x-4 ">Text Start</div>
     <div class="text-s text-center pd-x-4 ">Text-Center</div>
     <div class="text-s text-end pd-x-4 ">Text-Left</div>
  <h1 class="text-xl">H1.Heading</h1>
  <h2 class="text-lg">H2.Heading</h2>
  <h3 class="text-m">H3.Heading</h3>
  <h4 class="text-xm">H4.Heading</h4>
  <h5 class="text-s">H5.Heading</h5>
  <h6 class="text-xs">H6.Heading</h6>
<ul class="style-none box-shadow-2 width-scaled4-8 pd-y-2"> 
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
    <li class="flex gap-1 pd-y-4 pd-x-5 hover-grey-200"> 
            <i class="fa-solid fa-envelope"></i>
            <Span>List Item</Span>
    </li>
</ul>
<ul class="style-none box-shadow-2 width-scaled4-8 pd-y-2">
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
   <li class="pd-y-4 pd-x-5 hover-grey-200">List item</li>
</ul>
 <a href="#" class="text-dec text-color-grey-9  cursor border-bottom-solid border-1 border-black-700">Link</a>
     <button class="bg-green-8 rounded-s cursor  text-color-grey-0 pd-x-5 pd-y-4 text-xm">Primary
                    </button>
    
      <button class="bg-black-5 rounded-s  cursor text-color-grey-0 pd-x-5 pd-y-4 text-xm">Secondary</button>
    
       <button class=" bg-black-0 rounded-s cursor border-green-700 border-solid border-1  text-color-green-7 pd-x-5 pd-y-4 text-xm"> Outline</button>
<div class=" m-y-8 flex flex-column">
      <label class="m-y-4 ">Email:</label>
      <input type="email" class="width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9 " placeholder="Email Id">
</div>
<div class="m-y-8 flex flex-column">
     <label class="m-y-4">Email:</label>
     <input type="email" class=" width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9" placeholder="Email Id">
     <span class="text-color-red-5 m-y-3">*Invalid Input </span>
</div>
<div class="m-y-8 flex flex-column">
     <label class="m-y-4">Email:</label>
     <input type="email" class=" width-scaled4-8 pd-4 border-1 border-solid border-black-700  text-s rounded-s text-color-grey-9" placeholder="Email Id">
     <span class="text-color-green-6 m-y-3">*Valid Input </span>
</div>
<div class="  width-scaled4-6  wt-max-100 m-auto">
      <div class=" flex flex-column justify-center rounded-s pd-y-3 pd-x-3 bg-black-0 box-shadow-2">
            <div class="flex flex-column m-y-6">
                  <span class="text-xm">Dialog header</span>
                  <small>Lorem ipsum dolor sit amet.</small>
            </div>
            <div class="flex justify-end items-center gap-1 m-t-2">
                 <button  class="pd-y-3 pd-x-3 text-color-grey-0 bg-red-8 cursor">close</button>
                 <button  class="pd-y-3 pd-x-3 text-color-grey-0 bg-green-7">continue</button>
            </div>
     </div>     
</div>
p {
    color: red;
}

a {
    color: blue;
}
<img src="/utilities-css/image/alex.jpg" alt="christopher-responsives-image" class="width-scaled4-6 object-content-center ht-auto rounded-L">
<img src="/utilities-css/image/hamed-darzi-Psz62UPYx1E-unsplash.jpg" alt="christopher-responsives-image" class="width-scaled4-6 object-content-center ht-auto">
 <div class="grid grid-cols-auto gap-1">
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 3</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 4</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 5</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 6</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 7</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 8</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 9</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 10</div>
 </div>
<div class="grid grid-cols-3 gap-1">
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
    <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 3</div>
</div>
<div class="grid grid-cols-2 gap-1">
          <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 1</div>
          <div class="bg-green-7 text-color-grey-0  pd-y-8 text-center ">Grid 2</div>
</div>
<div class=" position-rel width-scaled-8  m-auto box-shadow-1 ">
     <figure>
       <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2">
     </figure>
     <div class="position-ab flex justify-center items-center top-0 ht-100 bg-overlay z-index-2 wt-100 text-color-grey-0 text-bold text-m">
          <p>Out of Stock</p>
     </div>
   <div class="pd-x-4">
       <div class="flex flex-column m-y-4">
          <h3> Levis black</h3>
          <small class="text-color-grey-2">T-Shirt</small>
       </div>
       <div class="m-y-4">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
       </div>
       <div class="m-y-4">
           <span class="text-bold">₹399.00</span>
       </div>
       <div class="flex flex-column gap-1 m-y-4">
           <button class="bg-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button>
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
       </div>
  </div>
  <div class="position-ab top-0 right-0 text-color-grey-4">
     <i class="fa-solid fa-square-xmark fa-2x"></i>
  </div>
<div class=" position-rel flex items-center justify-btw width-scaled4-8 box-shadow-1 ">
           <figure class="flex-1">
                   <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center">
           </figure>
     <div class="pd-x-4 flex-1">
          <div class="flex flex-column m-y-4">
               <h3> Levis black</h3>
               <small class="text-color-grey-2">T-Shirt</small>
          </div>
          <div class="m-y-4">
               <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
          </div>
          <div class="m-y-4">
               <span class="text-bold">₹399.00</span>
          </div>
          <div class="flex flex-column gap-1 m-y-4">
               <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
          </div>
     </div>
     <div class="position-ab top-0 right-0 ">
          <button>
                <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i>
          </button> 
     </div>
</div>
<div class=" position-rel flex items-center width-scaled4-8 box-shadow-1 ">
  <figure class="flex-1">
     <img src="/utilities-css/image/Levis-s.png" alt="Vertical-card" srcset="" class=" object-content-center">
  </figure>
  <div class="pd-x-4 flex-1  wt-60 justify-even  ">
      <div class="flex flex-column m-y-4">
           <h3> Levis black</h3>
           <small class="text-color-grey-4">T-Shirt</small>
      </div>
      <div class="m-y-4">
           <span class="text-bold text-m">₹399.00</span>
      </div>
      <div class="flex flex-column gap-1 m-y-4">
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
      </div>
   </div>
  <div class="position-ab top-0 right-0 ">
       <button>
            <i class="fa-solid fa-square-xmark fa-2x text-color-grey-3"></i>
       </button> 
  </div>
</div>
<div class=" position-rel width-scaled-8  m-auto box-shadow-1 ">
     <figure>
       <img src="/utilities-css/image/luis-quintero-3qqiMT2LdR8-unsplash.jpg" alt="" srcset="" class="wt-100 height-auto rounded-top-2 rounded-top-2">
     </figure>
   <div class="pd-x-4">
       <div class="flex flex-column m-y-4">
          <h3> Levis black</h3>
          <small class="text-color-grey-2">T-Shirt</small>
       </div>
       <div class="m-y-4">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est saepe accusamus, autem vitae expedita sunt ab excepturi sint, laudantium culpa quas omnis perspiciatis corrupti eligendi qui placeat. Cupiditate, libero fugiat?</p>
       </div>
       <div class="m-y-4">
           <span class="text-bold">₹399.00</span>
       </div>
       <div class="flex flex-column gap-1 m-y-4">
           <button class="bg-black-6 text-color-grey-0 cursor pd-y-4"> Add To Cart</button>
           <button class=" bg-green-8 text-color-grey-0 cursor pd-y-4">Buy Now</button>
       </div>
  </div>
  <div class="position-ab top-0 right-0 text-color-grey-4">
     <i class="fa-solid fa-square-xmark fa-2x"></i>
  </div>
</div>
<div class="box-shadow-1 m-auto pd-5 flex width-scaled-8 flex-column m-y-8 rounded-s position-rel">
 <div class="flex flex-column">
    <h4>Cards Title</h4>
    <small>Text Secondary</small>
 </div>
 <div class="m-y-5"> 
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel, minus recusandae aut est reiciendis voluptates odit veritatis doloribus delectus beatae culpa fugiat eaque eveniet? Cum, voluptas beatae earum quia similique consequuntur minima optio minus animi aliquam impedit placeat dignissimos quod, dolorem facere iusto! Excepturi natus obcaecati doloribus consectetur eveniet ipsum.</p>
 </div>
  <div class="position-ab top-5 right-5">
     <i class="fas fa-heart text-color-red-5 cursor"></i>
  </div>
</div>
.live-demo-containter {
    background: #004188;
    padding-top: 2.5rem;
    position: relative;
    margin: 0 0 30px 0;
}
.live-demo-containter::after {
    content: "";
    background: #004188;
    position: absolute;
    left: 50%;
    top: 0px;
    width: 100vw;
    transform: translate(-50%,0);
    height: 100%;
    z-index: -1;
}
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-brown-5 width-1 height-1rem rounded-full top-0 right-10">              </span>
</div>
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-green-5 width-1 height-1rem rounded-full top-0 right-10">              </span>
</div>
<div class=" position-rel flex justify-end">
       <img src="/utilities-css/image/norway.jpg" class="width-6 height-6rem object-fit-cover rounded-full" alt="">
       <span class="position-ab  bg-red-5 width-1 height-1rem rounded-full top-0 right-10"></span>
</div>
<div class="  position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x "> </i>
        <span class="flex justify-center items-center text-color-grey-0 pd-4 width-1 height-1rem  position-ab bg-brown-7 rounded-full  text-s top--50 right--50 text-s  ">4</span>
</div>
<div class=" position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x"> </i>
        <span class=" flex justify-center items-center text-color-grey-0  position-ab  width-2 height-2rem bg-brown-7 rounded-full top--50 right--50 text-s">24</span>
</div>
<div class=" position-rel text-color-green-7">
        <i class="fas fa-envelope fa-2x "> </i>
        <span class="flex justify-center items-center text-s bg-brown-7 position-ab rounded-full  width-2 height-2rem top--50 right--50 text-color-grey-0" >124</span>
</div>
 <span class="flex justify-center items-center text-lg width-8 height-8rem bg-green-7 object-fit-cover rounded-full" >M</span>
<span class="flex justify-center items-center text-m width-6 height-6rem bg-green-7 object-fit-cover rounded-full" >G</span>
<span class="flex justify-center items-center text-xm width-4 height-4rem bg-green-7 object-fit-cover rounded-full" >D</span>
<img class="width-8 height-8rem object-fit-cover rounded-full" src="/utilities css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
<img class="width-6 height-6rem object-fit-cover rounded-full" src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
<img class="width-4 height-4rem object-fit-cover rounded-full" src="/utilities-css/image/christopher-campbell-rDEOVtE7vOs-unsplash.jpg" alt="">
.levitation {
  width: 20%;
  transform: rotate(15deg);
  filter: drop-shadow(22px -15px 5px rgba(0, 0, 0, 0.5));
  animation: bouge 8s infinite alternate-reverse;
}

@keyframes bouge {
  /*starting point and angle (same angle as choosen into .levitation)*/
  from {
    transform: translateY(0px) rotate(15deg);
  }
  /* ending point and angle */
  to {
    transform: translateY(50px) rotate(30deg);
  }
}
$(".acc:first-child h6").addClass('active');
  $(".acc:first-child .answer").addClass('active');
  $(".acc:first-child").addClass('active');
  $(".acc h6").click( function () {
      if ($(this).hasClass('active')) {
        $(this).next().slideUp(function () {
          $(this).parent().find(".active").removeClass('active');
          $(this).parent(".acc.active").removeClass('active');
        });     
      } else {
        $(this).parent().siblings().removeClass('active');
        $(this).parent().siblings().find(".active").removeClass('active');
        $(this).parent().siblings().find(".answer").slideUp(300);
        $(this).parent().siblings().find(".answer").removeClass("open");

        $(this).addClass('active');
        $(this).parent(".acc").addClass('active');
        $(this).next().addClass("open").slideDown(300);
      }
    });
.some-class {
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2);
}
p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Team Search CSS -  Starts */

.search-team {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px
}

@media (min-width: 768px) {
    .search-team {
        grid-template-columns: 3fr 1fr;
    }
}

.search-team .facetwp-search,
.search-team .facetwp-dropdown {
    margin: 0 !important;
    border: 1px solid var(--yellow) !important;
    width: 100% !important;
    padding: 15px !important;
    border-radius: 8px !important;
    color: #666 !important;
}

.search-team .facetwp-search::placeholder {
    color: #666 !important;
}

span.facetwp-input-wrap {
    width: 100%;
}

.search-team .facetwp-facet {
    margin-bottom: 0;
}

.search-team .facetwp-icon {
    right: 6px !important;
}

.search-team .facetwp-reset {
    border: none;
    background-color: #222;
    display: inline-block;
    color: #fff;
    border-radius: 5px;
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    min-height: 50px;
}

/* Team Search CSS -  End */
<div class="bg-green-2 text-color-green-9 flex justify-btw items-center rounded-s  pd-x-8 pd-y-5 ">
       <span class=""><i class="fa-solid fa-circle-check pd-r-5"></i>A simple success alert—check it out!</span> 
        <span><i class="fa-solid fa-xmark"></i></span>
 </div>
 <div class="bg-red-2 flex items-center text-color-red-9 justify-btw   rounded-s  pd-x-8 pd-y-5 ">
         <span ><i class="fa-solid fa-triangle-exclamation pd-r-5"></i> A simple danger alert—check it out!</span>   
         <span><i class="fa-solid fa-xmark"></i></span>
 </div>
 <div class="bg-brown-2 flex items-center text-color-brown-9 justify-btw rounded-s pd-x-8 pd-y-5 ">
         <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation pd-r-5"></i>A simple warning alert—check it out!</span> 
         <span><i class="fa-solid fa-xmark"></i></span>
 </div>
pre {white-space: pre-wrap;
     word-wrap: break-word; // für die dahingeschiedenen IE-Versionen
     }
copy
.masked-overflow {
    /* scroll bar width, for use in mask calculations */
    --scrollbar-width: 8px;

    /* mask fade distance, for use in mask calculations */
    --mask-height: 32px;

    /* If content exceeds height of container, overflow! */
    overflow-y: auto;

    /* Our height limit */
    height: 300px;

    /* Need to make sure container has bottom space,
  otherwise content at the bottom is always faded out */
    padding-bottom: var(--mask-height);

    /* Keep some space between content and scrollbar */
    padding-right: 20px;

    /* The CSS mask */

    /* The content mask is a linear gradient from top to bottom */
    --mask-image-content: linear-gradient(
        to bottom,
        transparent,
        black var(--mask-height),
        black calc(100% - var(--mask-height)),
        transparent
    );

    /* Here we scale the content gradient to the width of the container 
  minus the scrollbar width. The height is the full container height */
    --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;

    /* The scrollbar mask is a black pixel */
    --mask-image-scrollbar: linear-gradient(black, black);

    /* The width of our black pixel is the width of the scrollbar.
  The height is the full container height */
    --mask-size-scrollbar: var(--scrollbar-width) 100%;

    /* Apply the mask image and mask size variables */
    mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
    mask-size: var(--mask-size-content), var(--mask-size-scrollbar);

    /* Position the content gradient in the top left, and the 
  scroll gradient in the top right */
    mask-position: 0 0, 100% 0;

    /* We don't repeat our mask images */
    mask-repeat: no-repeat, no-repeat;
}
    <div class="container">
        <div class="inner">test</div>
        <div class="inner">test</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
        <div class="inner">tset</div>
    </div>
.container{
    display: flex;
    justify-content: center;
    gap: 2px;
    border: 2px solid black;
    width: 100%;
    flex-wrap: wrap;
}

.inner{
    background-color: aqua;
    width: 24%;
    border: 2px solid black;
}
<div class="bg-green-2 text-color-green-9 flex items-center rounded-s  pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-circle-check"></i></span>
    A simple success alert—check it out!
</div>

<div class="bg-red-2 flex items-center text-color-red-9  rounded-s  pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-triangle-exclamation"></i></span>
    A simple danger alert—check it out!
</div>

<div class="bg-brown-2 flex items-center text-color-brown-9  rounded-s   pd-x-8 pd-y-5 ">
    <span class="pd-r-5"><i class="fa-solid fa-circle-exclamation"></i></span>
    A simple warning alert—check it out!
</div>
     <div class="bg-green-2 text-color-green-9 rounded-s  pd-x-8 pd-y-5 ">
                    A simple success alert—check it out!
     </div>
      <div class="bg-red-2 text-color-red-9  rounded-s  pd-x-8 pd-y-5 ">
                    A simple danger alert—check it out!
      </div>
      <div class="bg-brown-2 text-color-brown-9  rounded-s   pd-x-8 pd-y-5 ">
                    A simple warning alert—check it out!
      </div>
.selector:not(*:root) {}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid red;
}
/* "The "clip pattern" accomplishes this task for you; hide the content visually, yet provide the content to screen readers." */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* For a, button, and input elements use the following to select on focus */

.visually-hidden:not(:focus):not(:active) {
  /* ... */
}

/* If you need to toggle something with display:none, you can do so with the help of aria-hidden=true */

.my-component[aria-hidden="true"] {
  display: none;
}
body {
  background-image: url('#');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.container {
  width: 50%;
  height: 200px;
  overflow: hidden;
}
 
.container img {
  max-width: 100%;
  height: auto;
  display: block;
}
.pum-container {
    padding: 0px !important;
}

.pum-content.popmake-content img {
    margin-bottom: 0px;
}

@media (max-width: 780px){
        
         body .pum-container {
		width: 90% !important;
		margin: auto !important;
		left: 0 !important;
		right: 0 !important;
		padding: 0px !important;
	}

	.pum-theme-lightbox {
		text-align: center;
	}

}
html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/* hmtl */
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>

    <article class="card">
      <div class="card-body">
       @Antonio Robles
      </div>
    </article>
	</body>
</html>


***
/* CSS */
:root {
  --border-color: linear-gradient(to right, tomato 0%, gold 100%);
  --card-color: #222;
}
.card {
  background: var(--border-color);
  aspect-ratio: 10/16;
  width: 200px;
  padding: 5px;
  border-radius: 16px;
  position: relative;
}

.card-body {
  color: wheat;
  background: var(--card-color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.facetwp-type-pager {
    text-align: center;
}

button.facetwp-load-more {
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
    background-color: var(--maroon);
    color: #fff;
    letter-spacing: 0.5px;
}

button.facetwp-load-more:hover {
    opacity: .9;
    cursor: pointer;
}
ul {
  overflow: hidden;
  background-color: #42cde1;
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}
ul li {
  list-style-type: none;
  display: inline-block;
}
ul li a {
  display: block;
  color: #eeeeee;
  text-align: center;
  padding: 15px 30px 15px 20px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  font-family: arial;
}
.navbar a:hover {
  color: #ffffff;
}
.container {
  padding: 18px;
  margin-top: 35px;
  height: 2000px;
}
border-radius: 50px 0px 50px 0px;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/js/intlTelInput.min.js"></script>

<div class="input-field">
    <input type="tel" id="intl_phone_number" minlength="10" />
</div>

<script>
    const phoneInputField = document.querySelector("#intl_phone_number");
    const phoneInput = window.intlTelInput(phoneInputField, {
        separateDialCode: true,
        hiddenInput: "phoneno",
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/js/utils.js"
    });
</script>
:root { /* Try one of these to start with. */
	--plum: plum; /* HEX: #dc9fdd */
	--purple: #9381ff;
	--plumdm: #ffbcff;
	--blue: royalblue;
	--lightcoral: lightcoral;
}
/* Light Mode */
.rem-reference {
/* To use one of the above color variants, replace --purple in var(--purple) with any of the above.
For example, to use the light coral color → color: var(--lightcoral) */
	color: var(--plum);
/* You can also choose other colors by replacing var(--plum) with the hex code of your chosen color.
For example, to use white → color: #fff */
	padding: 0px!important;
}
/* Dark Mode */
.dark .rem-reference {
	color: var(--plumdm);
	padding: 0px!important;
}
p.content-header {
  height: 80px;
  width: 240px;
  border: solid coral;
}
.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}
color: #FFF   !important;
.main-banner {
  background-image: url('https://www.example.com/image.jpg');
}
:root 

{

    --dark-color: rgb(0,0,0);

    --glossy-red: rgba(23, 1, , 1);

    --hidden-red: rgba(238, 17, 17, 0);

    --light-red: rgba(238, 17, 17, .5);
7
    --paths-theme: var(--very-light-red) var(--glossy-red);
8
    --planets-theme: var(--light-red) var(--light-red) var(--light-red) var(--glossy-red); 

    --very-light-red: rgba(238, 17, 17, .25);

}

*, *::after, *::before

{

    -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

            box-sizing: border-box;

    padding: 0;
17
​

    margin: 0;
@import 'https://fonts.googleapis.com/css?family=Open+Sans:00,00'; 

%reset { margin: 0; padding: 0; }
3
%flex { display: flex; justify-content: center; align-items: center; }
4
​

@mixin dimensions($width: null, $height: null) { width: $width; min-height: $height; }

​

    html{height: 0%;}

    body{

      
10
      @extend %flex;

       font-family: 'Open Sans', sans-serif;

      width: 100%;

      min-height: 100%;

      background:linear-gradient(141deg, #0C5B5F 0%, rgba(0, 212, 3, 0.77) 75%);
15
    }

 

​

    *, *:before, *:after {
html,

body

  min-height: 0%

  

body

  background: radial-gradient(ellipse at center, #ffc0 0%, #e0ad00 100%)

​

.player

  box-shadow: 0 2px 4px -4px rgba(0, 0, 0, .4), 0 50px 45px -20px rgba(0, 0, 0, .2)
10
  border-radius: 30px

  height: 400px

  margin: 50px auto

  overflow: hidden

  position: relative

  width: 400px

  

  &__meta

    box-sizing: border-box

    font-size: 24px
20
    padding: 50px 20px
/* Global Reset */

* {

    font-family: 'Allerta', arial, Tahoma;

    box-sizing: border-box;

}

body {

    background: linear-gradient(to left, #7700aa, #800ff);
8
    text-align:center;

    color:#fff;

}

h3{

    text-shadow:1px 1px 1px #fff;

}

/* Start  styling the page */

.container-audio {

    width: 66%;

    height: auto;

    padding: px;

    border-radius: 5px;
20
    background-color: #eee;

    color: #444;

    margin: 20px auto;
.overlay {
  opacity: 0.5;
}
h1 {
  color: red;
  background-color: blue;
  foreground-color: blue
}
.caption {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 14px;
  font-weight:bold
  margin-left: 20px;
  padding: 10px;
  position: relative;
  top: 80%;
  width: 60%;
}
h1,
h2{
  font-family:Georgia
}
p{
  font-family:Helvetica
}
h1 {
  font-family: Garamond;
}
* {
  border: 1px solid red;
}

p {
  color: green;
}

h1 {
  color: maroon;
}

.title {
  color: teal;
}

.uppercase {
  text-transform: uppercase;
}

#article-title {
  font-family: Tahoma;
}

a[href*='florence'] {
  color: lightgreen;
}

a[href*='beijing'] {
  color: lightblue;
}

a[href*='seoul'] {
  color: lightpink;
}

a:hover {
  color:darkorange;
}

.heading-background {
  background-color: aqua;
}

#publish-time {
  color: lightgray;
}

h5 {
  color: yellow;
}

.author-class {
  color: pink;
}

#author-id {
  color: cornflowerblue;
}

h2.destination {
  font-family: Tahoma;
}

.description h5 {
  color: blueviolet;
}

li h4 {
  color: gold;
}

h4 {
  color: dodgerblue;
}
li,
h5 {
  font-family: monospace;
}
<link href='./style.css' rel='stylesheet'>
 
  
  //this is in css file
 p {
  color: green;
}
$("#file").change(function() {
      filename = this.files[0].name;
      $('.filename').text(filename);
    });
.message {
  background-color: var(--student-background, #fff);
  color: var(--student-color, #000);
  font-family: var(--student-font, "Times New Roman", serif);
  margin-bottom: 10px;
  padding: 10px;
}

[data-student-theme="rachel"] {
  --student-background: rgb(43, 25, 61);
  --student-color: rgb(252, 249, 249);
  --student-font: Arial, sans-serif;
}

[data-student-theme="jen"] {
  --student-background: #d55349;
  --student-color: #000;
  --student-font: Avenir, Helvetica, sans-serif;
}

[data-student-theme="tyler"] {
  --student-background: blue;
  --student-color: yellow;
  --student-font: "Comic Sans MS", "Comic Sans", cursive;
}
.highlighted {
  --highlighted-size: 30px;
}

.default {
  --default-size: 10px;

  /* Use default-size, except when highlighted-size is provided. */
  font-size: var(--highlighted-size, var(--default-size));
}
/* Skeleton */

.bubble-element.skeleton .Text, .bubble-element.skeleton .Image, .bubble-element.skeleton.HTML div {

   background:: -webkit-linear-gradient(-90deg, #edeef1 0%, #fcfcfc 50%, #edeef1 100%);

  background: linear-gradient(-90deg, #edeef1 0%, #fcfcfc 50%, #edeef1 100%);

  background-size: 400% 400%;

  -webkit-animation: SkeletonLTD 1s ease-in-out infinite;

          animation: SkeletonLTD 1s ease-in-out infinite;

}

.bubble-element.skeleton img, .bubble-element.skeleton .Button, .bubble-element.skeleton .timeago, .bubble-element.skeleton svg  {

  display: none !important;

}

.bubble-element.skeleton .Text{ 

  color: transparent  !important; 

}

@-webkit-keyframes SkeletonLTD {

0% {

    background-position: 0% 0%;

  }

  100% {

    background-position: -135% 0%;

  }

}

@keyframes SkeletonLTD {

  0% {

    background-position: 0% 0%;

  }

  100% {

    background-position: -135% 0%;

  }

}
.examples {

  transition-timing-function: linear;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);

  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

  transition-timing-function: ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

  transition-timing-function: ease-in;
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

  transition-timing-function: ease-out;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

}
/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
	outline: 1px solid red;
}

/* At most 3 (3 or less, including 0) children */
ul:not(:has(> :nth-child(3))) {
	outline: 1px solid red;
}

/* Exactly 5 children */
ul:has(> :nth-child(5):last-child) {
	outline: 2px solid blue;
}

/* At least 10 (10 or more) children */
ul:has(> :nth-child(10)) {
	outline: 2px solid green;
}

/* Between 7 and 9 children (boundaries inclusive) */
ul:has(> :nth-child(7)):has(> :nth-child(-n+9):last-child) {
	outline: 2px solid yellow;
}


/* Non-demo styles below */
@layer base {
	@layer layout {
		html {
			max-width: 84ch;
			padding: 3rem 2rem;
			margin: auto;
			line-height: 1.5;
			font-size: 1.25rem;
		}
		body {
			margin: 0;
			padding: 0;
		}
		a,
		a:visited {
			color: blue;
		}
		
		h2 {
			margin-top: 2em;
		}
	}
	
	@layer code {
		pre {
			border: 1px solid #dedede;
			padding: 1em;
			background: #f7f7f7;
			font-family: "Courier 10 Pitch", Courier, monospace;
			overflow-x: auto;
			border-left: 0.4em solid cornflowerblue;
			tab-size: 4;
		}
	}

	@layer support {
		.no-support,
		.has-support {
			margin: 1em 0;
			padding: 1em;
			border: 1px solid #ccc;
		}

		.no-support {
			background-color: #ff00002b;
			display: block;
		}
		.has-support {
			background-color: #00ff002b;
			display: none;
		}
		:is(.has-support, .no-support) > :first-child {
			margin-top: 0;
		}
		:is(.has-support, .no-support) > :last-child {
			margin-bottom: 0;
		}

		@supports(selector(:has(*))) {
			.no-support[data-support="css-has"] {
				display: none;
			}
			.has-support[data-support="css-has"] {
				display: block;
			}
		}
	}
}

@layer reset {
	
}
/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
	outline: 1px solid red;
}
// If the cube is directly inside the container:
#container:hover > #cube { background-color: yellow; }
// If cube is next to (after containers closing tag) the container:
#container:hover + #cube { background-color: yellow; }
// If the cube is somewhere inside the container:
#container:hover #cube { background-color: yellow; }
// If the cube is a sibling of the container:
#container:hover ~ #cube { background-color: yellow; }
[class^="Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:red;
}
/*note the space after the class name---------v*/
[class^="Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:blue;
}
/*       v---note the space before the class name*/
[class*=" Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:green;
}
/*       v------space before and after---------v */
[class*=" Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:purple;
}
div:has(p) {
  background: red;
}
/*
  <div> <!-- selected! -->
     <p></p>
  <div>

  <div></div> <!-- not selected -->
  <div> <!-- not selected -->
    <section></section>
  </div>
*/
Grab up to 30% off on our blockchain fork development Services limited time Offer ends in November 25.

For the development of many business sectors, blockchain forks are essential. However, depending on the position, the process requires the use of technology. This is why we're going to look at some of the ways that cryptocurrencies can be developed, including forking existing blockchains to create new ones.

Hivelance, a leading blockchain fork development company, creates a customizable Blockchain Fork Development on various blockchain networks such as Ethereum, Tron, and Binance Smart Chain (BSC), allowing innovators to launch their businesses faster.

visit our site for know more-

https://www.hivelance.com/blockchain-forking
Black Friday sale : Grab up to 30% off on our NFT Token development Services limited time Offer ends in November 25.

Hivelance is a reputable NFT Token development business that works with clients from all over the world and across many industry sectors. We have developed secure, efficient, and revenue-generating NFT development solutions. Hivelance is a leading NFT token development company that offering a  top-notch innovative NFT token development solutions for various businesses across multiple industries. Being the best token development company we create and launch the different types of tokens according to the client’s requirement. We make engaging non-fungible token with transparency, high-end security, and faster delivery.

visit our website for more info-

https://www.hivelance.com/nft-token-development
Grab up to 30% off on our ERC20 Token development Services limited time Offer ends in November 25.

The ERC20 Token contract is the smart contract code logic that executes the fungible token activity. When a contract is put into practise on Ethereum, it can be exchanged for any tokens with a similar value. The ERC20 token standard is used for crypto staking, voting, and the exchange of digital cash as a result. Anyone can generate ERC20 tokens and import them into Ethereum virtual machines.

Hivelance provides ERC20 token development service.  We offer an alot of options as part of our ERC20 Token development package, such as code generation, logo design, an audit of the ERC token contract, deployment to the EVM, ongoing development, security audits at regular intervals, and more. We have supported various ICO projects and helped them scale up their fundraising efforts.

https://www.hivelance.com/erc20-token-development
/* Universal Selector */

* {
    margin: 0;
    padding: 0;
    background-color: gray;
}

.container {
    margin: 100px;
    line-height: 50px;
    margin-left: 600px;
    font-size: xx-large;
}

div li:nth-child(2) {
    color: dodgerblue;
}

div li:nth-of-type(3) {
    color: red;
}
// By default, browsers will “skip” areas where the “ink” of a character crosses an underline. You can change this behavior to force the underline/overline to go through the character by setting text-decoration-skip-ink to none.

a:not([class]) {
	text-decoration-skip-ink: auto; // || none
}
//if the primary input mechanism system of the device can hover over elements with ease, we use hover
@media (hover: hover) {
    /* ... */
}

//if the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none
@media (hover: none) {
    /* ... */
}
//Pictures
 <picture>
       <source
    media="(max-width:599px) and (prefers-color-scheme: light)"
    srcset="images/bg-mobile-light.jpg"
    />
      <source
    media="(max-width:599px) and (prefers-color-scheme: dark)"
    srcset="images/bg-mobile-dark.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: light)"
    srcset="images/bg-desktop-light.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: dark)"
    srcset="images/bg-desktop-dark.jpg"
    />
      <img
    src="images/bg-mobile-light.jpg"
    aria-hidden="true"
    class="background-img"
    alt=""
    />
</picture>

//CSS
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #25273c;
    --color-primary-text: #e4e5f1;
    --color-secondary-text: #cacde8;
    --color-deleted-text: #4d5067;
    --color-circle: #777a92;
    --color-background: #161722;
    --color-background-hover: #1c1e35;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-white: #ffffff;
    --color-primary: #ffffff;
    --color-primary-text: #494c6b;
    --color-secondary-text: #9394a5;
    --color-light-text: #d4d4d4;
    --color-active: #3a7cfd;
    --color-circle: #d6d6d6;
    --color-background: #fafafa;
    --color-background-hover: #ebebeb;
    --color-background-modal: rgba(73, 76, 107, 0.6);
    --color-error: #cd1237;
  }
}


//JS
let dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
//Show which prefers-color-scheme user has before the page loads
window.matchMedia('(prefers-color-scheme: dark)');
if (dark) {
  //Do something
} else {
  //Do something
}
a[href="your url here"]{
    background:red;
}
[type="file"] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}
[type="file"] + label {
  /* File upload button styles */
}
[type="file"]:focus + label,
[type="file"] + label:hover {
  /* File upload hover state button styles */
}
[type="file"]:focus + label {
  /* File upload focus state button styles */
}
.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
jQuery(".morelink").click(function(){
        if(jQuery(this).hasClass("less")) {
            jQuery(this).removeClass("less");
            jQuery(this).html(moretext);
        } else {
            jQuery(this).addClass("less");
            jQuery(this).html(lesstext);
        }
        jQuery(this).parent().prev().toggle();
        jQuery(this).prev().toggle();
        return false;
    });
jQuery(document).on('click', '#loadMore', function () {
        jQuery('#loading-image').show();
        jQuery(document).find('#load-data').addClass('show-overlay');
        var cat_name = jQuery('.slider-feature-section').find('.current-cat').attr('data-slug');
        data_page = jQuery(this).attr('data_page');
        jQuery(this).parents('.show-more').remove();
        jQuery.ajax({
            type: "post",
            url: TOPNZCASINOPUBLIC.ajaxurl,
            data: {
                action: "load_more",
                page: data_page,
                cat_name: cat_name
            },
            success: function (response) {
                jQuery("#load-data").append(response);
                jQuery('#loading-image').hide();
                jQuery(document).find('#load-data').removeClass('show-overlay');
            }
        });
    });
if (jQuery('.slide-wrapper').find('.slide-wrap').length > 2) {
      $('.slide-wrapper').append('<div><a href="javascript:;" class="showMore"></a></div>');
  }
  
  // If more than 2 Education items, hide the remaining
    $('.slide-wrapper .slide-wrap').slice(0,4).addClass('shown');
    $('.slide-wrapper .slide-wrap').not('.shown').hide();
    $('.load-more-slide').on('click',function(){
        $('.slide-wrapper .slide-wrap').not('.shown').toggle(300);
        $('.slide-wrapper').toggleClass('showLess');
        $('.load-more-slide').toggleClass('slide-down');
    });
@-moz-document url-prefix("https://www.notion.so/") {

.notion-board-view>div:nth-child(1)>div:nth-child(4),
.notion-board-view>div:nth-child(1)>div:nth-child(1)>div:nth-child(3) {
        display: none !important;
}
.notion-board-view > [data-block-id] > div:last-child,
.notion-board-view > [data-block-id] > div:first-child > div:last-child {
  display: none !important;
}
    
}
/**
 * Enable smooth scrolling on the whole document
 */
html {
	scroll-behavior: smooth;
}


/** Animations can cause issues for users who suffer from motion sickness and other conditions.
 * Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
- 👋 Hi, I’m @murufi

- 👀 I’m interested in ...

- 🌱 I’m currently learning ...

- 💞️ I’m looking to collaborate on ...

- 📫 How to reach me ...

​

<!---

murufi/murufi is a ✨ special ✨ repository because its `README.md` (this file) appears on your GitHub profile.

You can click the Preview link to take a look at your changes.

--->

​
<select name="state_name" class="form-control" id="checkout-state" required="">
<option value="">Select State</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Orissa">Orissa</option>
<option value="Pondicherry">Pondicherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="West Bengal">West Bengal</option>



</select>

Andaman and Nicobar Islands
Andhra Pradesh
Arunachal Pradesh
Assam
Bihar
Chandigarh
Chhattisgarh
Dadra and Nagar Haveli
Daman and Diu
Delhi
Goa
Gujarat
Haryana
Himachal Pradesh
Jammu and Kashmir
Jharkhand
Karnataka
Kerala
Lakshadweep
Madhya Pradesh
Maharashtra
Manipur
Meghalaya
Mizoram
Nagaland
Orissa
Pondicherry
Punjab
Rajasthan
Sikkim
Tamil Nadu
Telangana
Tripura
Uttarakhand
Uttar Pradesh
West Bengal
<form method="post" action="/cart/add" class="col-button">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
            <input type="submit" value="Add to cart" class="btn add-to__cart" />
          </form>

.col-button .btn.add-to__cart {  padding: 8px 10px;
font-size: 14px;
text-transform: capitalize;
letter-spacing: 1px;
margin-left:10px;
/*     margin-right:10px; */
/*     margin-top: 15px; */
}
[data-type_product_capitalize="true"] .grid-product__title {
min-height:50px;
}

@media only screen and (max-width:480px){
[data-type_product_capitalize="true"] .grid-product__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}

<form method="post" action="/cart/add" class="col-button">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
            <input type="submit" value="{% if product.variants.first.available%}Add to cart{% else %}Sold Out{% endif%}" class="btn add-to__cart"" {% unless product.variants.first.available %}disabled{% endunless %} />
          </form>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3783.910308083909!2d-97.39088478571517!3d18.487721487428114!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85c5bcd5ee8ba413%3A0x7919bdf4dfd04b6!2sInstituto%20Educares!5e0!3m2!1ses-419!2smx!4v1667271208223!5m2!1ses-419!2smx" width="550" height="1000" style="position:relative; top: -1050px; left: 800px;border-radius: 50px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
/* Se personaliza margenes del mapa */



/* Boton de Enviar
<button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button>

<div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="92"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="16"><button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button><img src="https://educares.edu.mx/wp-content/plugins/wpforms-lite/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Cargando"></div> */

<div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="92"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="16"><button type="submit" name="wpforms[submit]" id="wpforms-submit-92" class="wpforms-submit" data-alt-text="Enviando..." data-submit-text="Enviar" aria-live="assertive" value="wpforms-submit">Enviar</button><img src="https://educares.edu.mx/wp-content/plugins/wpforms-lite/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" padding: 5px 5px alt="Cargando"></div>


.wpforms-form input[type=submit],  .wpforms-form button[type=submit] {    
  color: #fff !important;
  background-color: #FAF243 !important; 
  border-radius: 50px !important;
  max-width: 95% !important;
	height: 55px !important;
	text-align: center !important;
	Font-size: 25px !important;
	border-radius: 50px !important;
    padding: 15px !important;
    border-style: none !important;
    color: #fff !important;    
    margin: 0px 150px !important;
/* Se personaliza el botón de enviar:  1.- El color se estable en  */ }


.wpf-color-fondo-formulario {
border-radius: 50px !important;
 background: #85a441 !IMPORTANT;
padding: 2.5% 2.5% !IMPORTANT;
margin: 20px 650px 20px 0px !important;
}
 

  /* Se personaliza:  1.- SE REDONDEA LAS ESQUINAS DEL FORMULARIO  A 50PX 
  					  2.- SE ESTABLECE EL COLOR DE FONDO A :#85a441
                      3.- EL ESPACIO ENTRE EL CONTENDER Y SU CONTENIDO
                      4.- El MARGEN IZQUIERDO DEL FORMULARIO SE ESTABLECE 650PX*/ 
  
}

  .wpforms-form .wpforms-field-label {

font-size: 35px !IMPORTANT;
line-height: 2 !important;
margin: 5px 0px 5px 0px !IMPORTANT;

  /* Se personaliza:  1.- EL TAMAÑO DE LAS ETIQUETAS SE ESTABLECEN A 35PX  A 50PX 
  					  2.- LA ALTU...
                      3.- LOS MARGENES DE 12 Y 6 PM*/ 
  /*float: none;
padding: 5%;
display: block;
font-weight: 700;*/
}


.wpforms-form .wpforms-field {
padding: 20px 40PX !IMPORTANT;
clear: both;
 /* Se personaliza:  1.- EL TAMAÑO DE LAS ETIQUETAS SE ESTABLECEN A 35PX  A 50PX 
  					  2.- LA ALTU...
                      3.- LOS MARGENES DE 12 Y 6 PM*/
}

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large {

  	max-width: 100% !important;
	height: 55px !important;
	text-align: center !important;
	Font-size: 20px !important;
	border-radius: 50px !important;

/* Se personaliza:  	1.- ...
  					  	2.- ...
                      	3.- ...*/
}


.wpforms-form .choices__inner {
max-width: 100% !important;
height: 55px !important;
text-align: center !important;
Font-size: 20px !important;
border-radius: 50px !important;

/*display: inline-block;
vertical-align: top;
width: 100%;
background-color: #ffffff;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;*/


}

.wpforms-form .wpforms-valid {
max-width: 100% !important;
height: 55px !important;
text-align: center !important;
Font-size: 20px !important;
border-radius: 50px !important;

/*display: inline-block;
vertical-align: top;
width: 100%;
background-color: #ffffff;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;*/
}


/*.wpforms-form .wpforms-valid {
display: inline-block;
vertical-align: top;
width: 100%;
background-color: #2D4E5E !important;
padding: 4px 6px 1px;
border: 1px solid #cccccc;
border-radius: 2px;
min-height: 35px;
overflow: hidden;
border-radius: 50px !important;
}



.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
border-radius: 100%!important;
padding: 10px 0;
clear: both;
}

*/
html {
  font-size: min(max(1rem, 4vw), 22px);
}

/* or */

body {
  font-size: clamp(100%, 1rem + 2vw, 24px);
}

/* with variables */

h1 {
  --minFontSize: 32px;
  --maxFontSize: 200px;
  --scaler: 10vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
body {
  background: rgb(34, 193, 195);
  background: linear-gradient(
    0deg,
    rgba(34, 193, 195, 1) 0%,
    rgba(8, 52, 75, 1) 100%
  );
  background-attachment: fixed;
}
/*
*	Services Menu Properties
*	Please change the variable value below to update 
*	icon and description on the Services menu	
*/
// Icons
$fractional-cto:			'/wp-content/uploads/2022/10/submenu-fractional.svg';
$app-web: 					'/wp-content/uploads/2022/10/submenu-web.svg';
$software-qa: 				'/wp-content/uploads/2022/10/submenu-software.svg';
$fractional-product: 		'/wp-content/uploads/2022/10/submenu-product.svg';
$outsourced-developer: 		'/wp-content/uploads/2022/10/submenu-developer.svg';  
$talent-recruiting: 		'/wp-content/uploads/2022/10/submenu-staffing.svg';
// Description
$fractional-cto-desc: 			"Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations.";
$app-web-desc:  				"Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes."; 
$software-qa-desc: 				"Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services."; 
$fractional-product-desc: 		"Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules."; 
$outsourced-developer-desc: 	"Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks.";  
$talent-recruiting-desc: 		"Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team.";
/* Header */
header{
	&.fl-theme-builder-header-scrolled{
		background-color: #FFF;
		box-shadow: 0 1px 25px rgb(57 63 72 / 10%);
	}
	&.fl-theme-builder-header-shrink{
		ul.menu >{
			li{
				padding: 25px 0;   
			}
		} 
	} 
	ul.menu >{
		li{
			padding-top: 30px;
    		padding-bottom: 30px;
			&.menu-item-has-children{
				.menu-item-text{
					.pp-menu-toggle{
						right: -7px !important;
						transition: all .3s ease-in-out;
					}
				}
				&:hover{
					.menu-item-text{
						.pp-menu-toggle{
							transform: rotate(180deg);
						}
					}
				}
			} 
			& >{
				
				a{
					
				}
				.pp-has-submenu-container >{
					a{
						
					}
				}
				ul.sub-menu{
					padding: 30px !important;
					transform: translateX(-40%);
					display: grid !important;
					grid-template-columns: 1fr 1fr;
					row-gap: 30px;
					column-gap: 40px;
					& >{
						li{
							& > {
								a{
									 display: grid;
									 grid-template-columns: 26px auto;
									 grid-template-rows: auto;
									 column-gap: 20px;
									 grid-template-areas: 
										"icon menu"
										"icon description";  
									 transition: all .3s ease-in-out;
									.menu-item-text{
										grid-area: menu;
    									line-height: 1.25;
									}
									.menu-desc{
										font-size: 14px;
										font-weight: 300;
										grid-area: description;
										margin-bottom: 0;
										margin-top: 5px;
										color: #7E7E7E !important;
									}
									.menu-image{
										background-repeat: no-repeat;
										background-size: contain;
										width: 27px;
										height: auto;
										grid-area: icon;
									}
								}
							}
							&:hover{
								
							}
// 							&:not(:first-child){
// 								margin-top: 25px;
// 							}
							@each $name, $glyph in $menu-image {
								&.submenu-#{$name}{
									.menu-image{
										background-image: url($glyph);
									}
								}
							}
							@each $name, $glyph in $menu-description {
								&.submenu-#{$name}{
									.menu-desc{
										&::before{
										   content: $glyph;
										}
									}
								}
							}
						}
					}
					@media(min-width: $min-mobile){
						&::before{
							position: absolute;
							width: 0;
							height: 0;
							content: "";
							border-style: solid;
							border-width: 15px 0 15px 15px;
							border-color: transparent transparent transparent #FFF;
							right: unset!important;
							top: -20px !important;
							left: 45% !important;
							transform: rotate(270deg)!important;
						}
					}
					@media(max-width: $tablet){
						transform: translateX(-30%);
						&::before{
							left: 33% !important;
						}
					}
				}
			}
			&.current-page-ancestor >{
				a{
					color: $jt-blue !important;
				}
				ul.sub-menu >{
					li.current-menu-item >{
						a{
							
						}
					} 
				}
				.pp-has-submenu-container >{
					a{
						color: $jt-blue !important;
						.pp-menu-toggle::before{
							border-color: $jt-blue;
						}
					}
				} 
			}
			&.jt-active >{
				a{
					color: #1A8CFF !important;
				}
			}
			&.pp-has-submenu.pp-menu-submenu-right{
				.sub-menu {
					right: unset !important;
				}
			} 
			&.menu-company, &.menu-resources{
				ul.sub-menu{
					width: 386px;
				}
			}
		}
	}	
}
nav.pp-menu-nav{
	.pp-social-icons{
		span.pp-social-icon{
			margin-right: 20px;
			a{
				font-size: 20px;
				@each $name, $glyph in $social-icons {
				  i.fa-#{$name}{
					color: $glyph;
				  }
				}
			}
		}
	}
}
$('.green').click(function() {
  $('.timer').css('background', 'green');
});
$('.red').click(function() {
  $('.timer').css('background', 'red');
});
li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}
@supports (background: color(display-p3 1 1 1)) {
  :root {
    --supports-display-p3: ;
  }
}

body {
  --hotterpink: var(--supports-display-p3) color(display-p3 1 0 0.87);
  --hotpink: var(--hotterpink, hotpink);
  background: var(--hotpink);
}
@supports (background: color(display-p3 1 1 1)) {
  :root {
    --supports-display-p3: ;
  }
}

body {
  --hotterpink: var(--supports-display-p3) color(display-p3 1 0 0.87);
  --hotpink: var(--hotterpink, hotpink);
  background: var(--hotpink);
}
@supports(background: color(display-p3 1 1 1)) {
  :root {
    --hotterpink: color(display-p3 1 0 0.87);
  }
}

:root {
  --hotpink: var(--hotterpink, hotpink);
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin: 0.5em 1em 0.5em 0;
}

.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1em;
}
/* News Wrap CSS - Starts */

@media (min-width: 768px) {
    .news-wrap .slide-entry {
        display: flex;
    }
    
    .news-wrap .slide-image {
        width: 30%;
        background-color: transparent !important;
    }
    
    .news-wrap .slide-content {
        width: 70%;
        padding-left: 60px;
    }
    
    .news-wrap .slide-content .entry-title {
        text-align: left !important;
        padding: 0 0 10px;
    }
    
    .news-wrap .more-link {
        margin: 20px 0;
    }
    
    .news-wrap .read-more-link {
        padding: 0 !important;
        display: block;
        overflow: visible;
    }
    
    .news-wrap .av-vertical-delimiter {
        margin: 0;
    }
}

.news-wrap .av-vertical-delimiter {
    border-color: #929292;
    width: 60px;
}

.news-wrap .blog-categories,
.news-wrap .slide-meta {
    display: none !important;
}

.news-wrap .more-link {
    text-transform: capitalize;
    font-size: 17px;
    max-width: 200px;
}

.news-wrap .slide-content .entry-title a {
    text-transform: none;
    letter-spacing: 0.5px;
}

/* News Wrap CSS - Ends */
.error404 .title_container,
.search .title_container,
.archive .title_container,
.single .title_container {
    display: none;
}
/* Custom Quote CSS - Starts */

.custom-quote {
    border-bottom: 3px solid var(--primary) !important;
    border-top: 3px solid var(--primary) !important;
    padding: 10px 0;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    font-weight: bold;
}

.custom-quote:before {
    content: '\e833';
    position: absolute;
    font-family: 'entypo-fontello';
    font-size: 40px;
    background: #fff;
    width: 80px;
    left: calc(50% - 40px);
    top: -19px;
    display: inline-block;
    transform: rotate(180deg);
}

.alternate_color .custom-quote:before {
    background: #f8f8f8;
}

/* Custom Quote CSS - Ends */
/* FLip Area CSS */
.action-card {
    position: relative;
    width: 100%;
    text-align: center;
    padding-bottom: 100%;
}

.action-card .card-front,
.action-card .card-back {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 0.7s;
    border: 1px solid #ebebeb;
    box-shadow: 0 0 5px 0 rgba(239, 239, 239, 0.6);
}

.action-card:hover .card-front {
    transform: rotateY(-180deg);
}

.action-card:hover .card-back {
    transform: rotateY(0);
}

.action-card .card-back {
    overflow: hidden;
    transform: rotateY(-180deg);
    background: #F8F8F8;
}

.flip-icon svg {
    width: auto;
    height: 80px;
}

.flip-icon svg circle,
.flip-icon svg path {
    fill: #ffffff !important;
}

.card-back,
.card-front {
    display: flex;
    flex-wrap: wrap !important;
    padding: 30px;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.card-front {
    background: #fff;
}

.action-content {
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}

.action-button {
    margin-top: 30px;
}

.action-button a {
    padding: 8px 20px;
    color: #fff !important;
    border-radius: 5px;
    transition: .3s;
    border: 2px solid #fff !important;
}

.action-button a:hover {
    background: #ccc !important;
}

.card-front .action-icon {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: var(--purple-color);
}


h3.action-title {
    font-size: 23px;
    width: 100%;
    color: #666 !important;
    margin-bottom: 0;
}

.card-arrow {
    position: absolute;
    right: 30px;
    bottom: 20px;
    border: 1px solid var(--primary-color) !important;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 100%
}

.card-arrow:before {
    content: '\e88d';
    font-family: entypo-fontello;
    color: var(--primary-color);
    position: absolute;
    left: 6px;
    font-size: 16px;
    line-height: 1.8;
    transition: .6s;
}

@media (min-width: 1251px) {
    .action-card {
        padding-bottom: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1250px) {
    .action-card {
        padding-bottom: 150%;
    }
}

@media (max-width: 989px) {
    .flip-icon svg {
        height: 55px;
    }
}

/* Flip Area CSS Ends*/
.single-solid-area .template-page {
    padding: 35px 0;
}

.single-solid-area .flex_column:before,
.single-solid-area .flex_column:after {
    display: none;
}

@media (min-width: 990px) {
    .single-solid-area .flex_column {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }
    
    .single-solid-area .av-special-heading {
        width: auto !important;
        padding-bottom: 0 !important;
    }
    
    .single-solid-area .avia-button-wrap {
        min-width: max-content !important;
    }
}
/* Header CSS Starts Here */

#header_meta {
    border: none !important;
    background: transparent !important;
}

@media (min-width: 1201px) {
    #header_main .container,
    .av-main-nav .menu-item-top-level > a {
      height: 68px !important;
      line-height: 68px !important;
    }

  #header_main {
      border-top: none !important;
  }

  #main {
      padding-top: 97px !important;
  }

  .logo img {
      max-height: 1000% !important;
  }

  span.logo {
      position: absolute;
      top: -15px;
      height: auto;
  }
}

@media (max-width: 1200px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block !important;
    }

    .menu-item-top-level {
        display: none;
    }

    #av-burger-menu-ul li a {
        height: auto !important;
        line-height: 1.5 !important;
    }
}

@media only screen and (max-width: 767px) {
    .logo img {
      width: 250px !important;
    }

    #header_meta {
      background: var(--alt-color) !important;
    }

    #header_meta * {
      color: #fff;
    }
}
/* Header CSS Ends Here */
.section-title .av-special-heading-tag {
    width: auto;
    max-width: max-content;
    padding: 0 30px !important;
    margin: 0 auto !important;
    position: relative;
    font-weight: bold;
}

.section-title {
    text-align: center !important;
}

.section-title .av-special-heading-tag:before {
    content: '';
    position: absolute;
    width: 80px;
    height: 3px;
    top: calc(50% - 1.5px);
    right: -80px;
    background: #0e76bc;
}

.section-title .av-special-heading-tag:after {
    content: '';
    position: absolute;
    width: 80px;
    height: 3px;
    top: calc(50% - 1.5px);
    left: -80px;
    background: #0e76bc;
}
/* Header CSS Starts Here */
#header_meta {
    border: none !important;
    background: transparent !important;
}

#header_meta .sub_menu li a:hover {
    opacity: .8 !important;
}

#header_meta .sub_menu {
  padding-right: 13px;
  top: 0;
}

@media (min-width: 1111px) {
  #header_main .container,
  .av-main-nav .menu-item-top-level > a {
      line-height: 75px !important;
      height: 75px !important;
  }
}

#header_main {
    border-top: none !important;
}

.logo img {
    max-height: 1000% !important;
}

span.logo {
    position: absolute;
    top: -50px;
    height: 180px !important;
}

.menu-item-top-level a:hover {
    color: #4884b7 !important;
}

@media (min-width: 768px) and (max-width: 1110px)  {
  #header_main .container, .main_menu ul:first-child > li a {
      height: 70px !important;
      line-height: 70px !important;
  }
}

@media (max-width: 1110px) {
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block !important;
    }

    .menu-item-top-level {
        display: none;
    }

    #av-burger-menu-ul li a {
        height: auto !important;
        line-height: 1.5 !important;
    }
}

.main_menu {
  border-top: 1px solid #ee3d33 !important;
}

.av_secondary_right .sub_menu li a {
    font-size: 18px !important;
    line-height: 50px !important;
}

#header_meta .container {
    min-height: 50px;
}

#menu-item-search a {
    line-height: 75px;
}

.av_secondary_right .sub_menu li a .contact-icon:before {
  content: '\e805';
  font-family: entypo-fontello;
  padding-right: 8px;
}

.av_secondary_right .sub_menu li a .tel-icon:before {
   content: '\e8ac';
   font-family: entypo-fontello;
   padding-right: 8px;
}

.av_secondary_right .sub_menu li {
  border: none !important;
  padding: 0 0 0 25px !important;
}

/* Header CSS Ends Here */
.faq-content .single_toggle {
  margin-top: 25px;
}
.faq-content .toggler {
  border: none;
  border-bottom: 3px solid #096123 !important;
  background: #f1f1f1;
  padding: 15px 10px 15px 35px;
  font-weight: bold;
  font-size: 18px;
}
.faq-content .toggle_icon {
  border: none;
}
.faq-content .vert_icon, .faq-content .hor_icon {
  border-color: #7bb94c;
}
.faq-content .toggle_content {
  border: none;
}
@media (min-width: 1211px) {
    .home-blog-block .slide-content {
        background-color: #fff;
        padding: 20px 25px;
        position: absolute;
        bottom: -30px;
        right: -30px;
        width: 80%;
    }

    .home-blog-block.avia-content-slider, .avia-content-slider-inner {
        overflow: unset;
    }

    .home-blog-block article:hover .slide-image {
        background: transparent;
        transition: all .2s cubic-bezier(0.4, 0, 1, 1);
    }

    .home-blog-block article .slide-content {
        transition: all .3s ease-in;
    }

    .home-blog-block article:hover .slide-content {
        transform: translate(-10px, -10px);
    }

    .home-blog-block article:hover .slide-image {
        transform: translateY(-10px);
    }
}
ZgmSx7jsHc7zEZxxeVRs5yGLT7OTNa1Y
.appointment-form .gform_wrapper .clear-multi .ginput_container {
    max-width: 33.33% !important;
}

#top .appointment-form .gform_wrapper .clear-multi .ginput_container select {
    max-width: 100% !important;
}

#top .appointment-form .gform_wrapper .clear-multi .ginput_container input {
    width: 100% !important;
}

.appointment-form .gform_wrapper i {
    display: none;
}
/* Center Four Col - Center */
.center-three-columns,
.center-four-columns {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.center-three-columns .flex_column,
.center-four-columns .flex_column {
    margin: 0 !important;
    width: 100% !important;
}
@media (min-width: 768px) {
    .center-three-columns .flex_column,
    .center-four-columns .flex_column {
        width: calc(50% - 15px) !important;
    }
}

@media (min-width: 990px) {    
    .center-four-columns .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}
@media (min-width: 1201px) {
    .center-four-columns .flex_column {
        width: calc(25% - 22.5px) !important;
    }
    
    .center-three-columns .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}
/* Center Four Col - Center - END */
/* Testimonial Area CSS - Starts */
.inner-testimonials .avia-testimonial-meta {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px !important;
}
.inner-testimonials .avia-testimonial-meta-mini {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
}
.avia-testimonial {
    padding: 0 !important;
}
.inner-testimonials .avia-slideshow-arrows.avia-slideshow-controls {
    position: relative;
}
.inner-testimonials .avia-testimonial-subtitle {
    display: block;
    margin-top: 7px;
    font-size: 15px;
}
#top .inner-testimonials.av-large-testimonial-slider .avia-slideshow-arrows a {
    background: var(--alt-color) !important;
    color: #fff !important;
    margin-top: 20px;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    opacity: .7;
}
.inner-testimonials a.prev-slide {
    right: 49%;
}
.inner-testimonials a.next-slide {
    left: 49%;
}
.inner-testimonials .avia-slideshow-arrows a:before {
    line-height: 40px;
    font-weight: bold !important;
}
.inner-testimonials .avia-testimonial-content {
    font-size: 19px !important;
    letter-spacing: 0.3px;
}
@media (min-width: 768px) {
    .inner-testimonials .avia-testimonial_inner {
        box-shadow: 0 0 15px #DDDDDD;
        padding: 40px 40px 50px !important;
        border-radius: 10px !important;
        border: 1px solid #EBEBEB !important;
        max-width: 950px;
        margin: 0 auto !important;
        background-color: #fff;
    }
    .inner-testimonials .avia-testimonial_inner {
        position: relative;
    }
}
.inner-testimonials .avia-testimonial-name {
    position: relative;
    color: #666 !important;
    font-size: 21px !important;
    letter-spacing: 0.5px;
}
.inner-testimonials .avia-testimonial-name:before {
    content: '\e808\e808\e808\e808\e808';
    display: block;
    font-family: 'entypo-fontello';
    letter-spacing: 6px;
    margin-bottom: 10px;
    color: #FF9800;
}
/* Testimonial Area CSS - Ends */
@media (min-width: 990px) {
    .intro-border-col .av_one_fourth {
        border-right: 4px solid var(--primary-color) !important;
        padding-right: 30px;
    }

    .intro-border-col .av_three_fourth {
        padding-left: 50px;
    }
}

@media (max-width: 989px) {
    .intro-border-col .section-heading {
        position: relative;
        padding-bottom: 25px !important;
        margin-bottom: 50px;
        text-align: left !important;
    }

    .intro-border-col .section-heading:after {
        content: '';
        position: absolute;
        width: 120px;
        height: 4px;
        bottom: 0;
        left: 0;
        background-color: var(--primary-color);
    }
}
.inner-submenu .avia-menu-text {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    transition: .5s;
}
.inner-submenu .avia-menu-text:hover {
    color: var(--primary-color) !important;
}
#top .av-subnav-menu > li > a {
    border-color: var(--primary-color);
}
/* Inner Posts CSS - Starts */
.inner-posts .read-more-link a {
    border: 1px solid var(--primary-color);
    display: inline-block;
    padding: 6px 20px;
    min-width: 180px;
    text-align: center;
    font-weight: bold;
    text-transform: capitalize;
    transition: .5s;
}

.inner-posts .slide-meta-del,
.inner-posts .slide-meta-comments {
    display: none !important;
}

.inner-posts .read-more-link a:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.inner-posts .slide-entry-title {
    letter-spacing: 0.3px;
    position: relative;
    padding-bottom: 15px;
    margin: 15px 0;
}

.inner-posts .slide-entry-title:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: var(--primary-color);
}

.inner-posts .slide-image:hover,
.inner-posts .slide-entry-title:hover {
    opacity: .8;
}

.inner-posts .slide-image img,
.img-border {
    border: 1px solid #e8e8e8 !important;
	padding: 0 !important;
}
/* Inner Posts CSS - Ends */
/* Top Overlay CSS Area - Starts */

.top-overlay {
    position: relative;
}

.inner-header-bg, .title_container:after {
    background: transparent !important;
}

.top-overlay {
    display: inline-block;
    background: rgb(109 0 33 / 0.75);
    margin: 120px 0 ;
    padding: 15px 25px 10px;
}

@media (max-width: 767px) {
    .top-overlay {
        margin: 80px 0;
    }
}

.title_container .container {
    padding-bottom: 0 !important;
}

.title_container h1 {
    letter-spacing: 1px;
}

.title_container .main-title {
    padding: 0 0 15px !important;
}

/* Top Overlay CSS Area - Ends */
.non-link .av-flex-placeholder {
    position: relative;
}
.non-link .av-flex-placeholder:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
    background: #D5D5D5;
}
@media (max-width: 767px) {
    .non-link .flex_column {
        border-top: 1px solid #D8D8D8 !important;
        padding-top: 10px !important;
    }
}
@font-face {
  font-family: 'GillSans-Medium';
  src: url('GillSans-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GillSans-SemiBold';
  src: url('GillSans-SemiBold.eot?#iefix') format('embedded-opentype'),  url('GillSans-SemiBold.woff') format('woff'), url('GillSans-SemiBold.ttf')  format('truetype'), url('GillSans-SemiBold.svg#GillSans-SemiBold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GillSans-Light';
  src: url('GillSans-Light.eot?#iefix') format('embedded-opentype'),  url('GillSans-Light.woff') format('woff'), url('GillSans-Light.ttf')  format('truetype'), url('GillSans-Light.svg#GillSans-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GillSans-Medium';
  src: url('GillSans-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
4:05
// Enqueue Custom Fonts
function enqueue_custom_fonts()
{
    wp_register_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts/custom-fonts.css', array(), '1.0', 'all');
    wp_enqueue_style('custom-fonts');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');
@media (min-width: 990px) {
    .ginput_container_address {
        display: flex;
        flex-wrap: wrap;
    }

    #top .ginput_container_address span {
        width: calc(33.33% - 6.66px) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #top .ginput_container_address .address_line_1 {
        width: 100% !important;
    }

    #top .ginput_container_address .address_state {
        margin: 0 10px !important;
    }
}
// CSS
@font-face {
  font-family: 'Browallia New';
  src: url('browa.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Expansiva bold';
  src: url('ExpansivaBold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
// Enqueue Custom Fonts
function enqueue_custom_fonts()
{
    wp_register_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts/custom-fonts.css', array(), '1.0', 'all');
    wp_enqueue_style('custom-fonts'); 
    
    
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');
.gfield_radio label {
    margin-left: 3px !important;
    font-size: 16px !important;
    position: relative;
    top: 2px
}
​
.gfield_radio li:nth-child(n+2) {
    margin-left: 25px !important;
}
@media (max-width: 989px) {
    .inner-img-col .flex_column_table {
        display: flex !important;
        flex-wrap: wrap;
    }

    .inner-img-col .flex_column {
        width: 100% !important;
    }

    .inner-img-col .img-col {
        order: -1;
    }
}
function wpb_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
.faq-content .toggler {
    font-size: 20px;
    border: 1px solid #d8d8d8 !important;
    border-radius: 5px !important;
    font-weight: bold;
    padding: 18px 40px 18px 30px !important;
}

.faq-content .toggle_icon,
.faq-content .vert_icon,
.faq-content .hor_icon {
    border-color: var(--primary-color);
    opacity: 1 !important;
}

.faq-content .av_toggle_section:nth-child(n+2) {
    margin-top: 15px;
}

.faq-content .toggle_content {
    border: none;
    font-size: 16px;
    line-height: 1.7;
}

.faq-content .toggler:focus {
    outline: none;
}
.team-card {
    padding-bottom: 100%;
    position: relative;
    width: 100%;
}

.team-card img {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    
}

.team-card .card-front,
.team-card .card-back {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 0.3s;
}

.team-card:hover .card-front {
    transform: rotateY(-180deg);
}

.team-card:hover .card-back {
    transform: rotateY(0);
}

.team-card .card-back {
    overflow: hidden;
    transform: rotateY(-180deg);
}
.contact-form li {margin: 0 !important;}

.contact-form .gform_body input,
.contact-form .gform_body textarea {
  padding: 10px 20px !important;
}

.contact-form .gform_footer {
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form .gform_footer input[type=submit] {
  width: 100% !important;
  padding: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}
/* <ul class="image-ticker" style="display:none"> */
.slider-logos .bx-wrapper {
    max-width: 100% !important;
}
.slider-logos ul {
    list-style-type: none !important;
    text-align: center;
    margin: 0 !important;
}
.slider-logos ul li {
    text-align: center;
    display: flex !important;
    align-items: center;
    margin: 0;
    padding: 0 20px;
    height: 80px;
    width: auto !important;
}
.slider-logos ul li img {
    height: 80px;
}
.slider-logos {
    height: 80px;
}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 30px;
  width: auto;
  max-width: 750px;
  margin: 20px auto;
}
// Linear Gradient for Text
.text-item {
    background: -webkit-linear-gradient(360deg, #1284ac, #0c009b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}
<details>
  <summary>Example</summary>
  Height needs to be set for this to work. Works on Chrome, haven't tested further.
</details>


//Build in transition smooothly
details {
  transition: height 1s ease;
  overflow: hidden;
}

details:not([open]) {
  height: 1.25em;
}

details[open] {
  height: 2.5em;
}
.slds-modal__content{
    overflow: initial;
}
.animate-underline {
    display: inline-block;
    position: relative;
}

.animate-underline:after {
    content: " ";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #00ffff;
    transform-origin: bottom right;
    transition: transform .25s ease-out
}

.animate-underline:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left
}
background: linear-gradient(274deg, rgba(68,138,193,1) 0%, rgba(128,200,242,1) 25%, rgba(255,179,0,1) 50%, rgba(232,59,205,1) 75%, rgba(74,122,154,1) 100%);
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
<div style="overflow-x: auto;">
            <form action="" method="post">
              {% csrf_token %}
            <table class="table table-hover mt-4" id="childTable">
              <thead class="text-color fs-medium fw-bold " style="background-color:#e2edf5;">
                <tr>
                  <th>No</th>
                  <th class="text-center">PLANNED EXPENSES</th>
                  <th class="text-center">JAN</th>
                  <th class="text-center">FEB</th>
                  <th class="text-center">MAR</th>
                  <th class="text-center">APR</th>
                  <th class="text-center">MAY</th>
                  <th class="text-center">JUN</th>
                  <th class="text-center">JUL</th>
                  <th class="text-center">AUG</th>
                  <th class="text-center">SEP</th>
                  <th class="text-center">OCT</th>
                  <th class="text-center">NOV</th>
                  <th class="text-center">DEC</th>
                  <th class="text-center">Action</th>
                </tr>
              </thead>
              <tbody>
                {% for i in LcaBudget %}
                <tr class="trParent">
                  <th class="fs-medium index" scope="row">{{forloop.counter}}</th>
                  <td>{{i.expenses}}</td>
                  <td>{{i.jan}}</td>
                  <td>{{i.feb}}</td>
                  <td>{{i.mar}}</td>
                  <td>{{i.apr}}</td>
                  <td>{{i.may}}</td>
                  <td>{{i.jun}}</td>
                  <td>{{i.jul}}</td>
                  <td>{{i.aug}}</td>
                  <td>{{i.sep}}</td>
                  <td>{{i.oct}}</td>
                  <td>{{i.nov}}</td>
                  <td>{{i.dec}}</td>
                  <td>
                    <a href="/Qapi_Leadership/LcaBudget/{{i.pk}}/update/"><i class="fa-2x bi bi-pencil"></i></a>
                  </td>
                </tr>
                {% endfor %}
                <tr class="trParent">
                  <th class="fs-medium index" scope="row">1</th>
                  <input type="hidden" name="user" value="{{request.user.pk}}">
                  <td>
                    <input type="number" min="0" step="0.01" name="expenses" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jan" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="feb" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="mar" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="apr" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="may" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jun" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jul" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="aug" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="sep" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="oct" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="nov" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="dec" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <i onclick="myFunction(event)" class="fa-2x bi bi-trash-fill"></i>
                  </td>
                </tr>
              </tbody>
            </table>
            <button onclick="childrenRow()" class="btn btn-primary" type="button" id="addrow">Add new line</button>
            <button class="btn btn-primary" type="submit">Save</button>
          </form>
            <script>
              var i = 1;
              function childrenRow() {
                i++;
                $('#childTable').find('tbody').append('<tr class="trParent"><th class="fs-medium index" scope="row">' + i + '</th><input type="hidden" name="user" value="{{request.user.pk}}"><td><input type="number" min="0" step="0.01" name="expenses" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jan" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="feb" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="mar" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="apr" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="may" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jun" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jul" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="aug" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="sep" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="oct" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="nov" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="dec" class="form-control fs-medium" required /></td><td><i onclick="myFunction(event)" class="fa-2x bi bi-trash-fill"></i></td></tr>');
              }
            </script>
            <script>
              function myFunction(e) {
                // document.getElementById("childTable").deleteRow(0);
                e.currentTarget.closest(".trParent").remove();
              }
            </script>
          </div>
   .btn:before { content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.3s ease;
    background: white;
    z-index: -1;}
//HTML
<section>
  <div>
  	<p>
  		Some Text
    </p>
  </div>
</section>

<button id="toggle-button">Click Me</button>

//CSS
div {
    overflow:hidden;
    transition:height 0.3s ease-out;
    height:auto;
  }

//JS
function collapseSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;
  
  // temporarily disable all css transitions
  var elementTransition = element.style.transition;
  element.style.transition = '';
  
  // on the next frame (as soon as the previous style change has taken effect),
  // explicitly set the element's height to its current pixel height, so we 
  // aren't transitioning out of 'auto'
  requestAnimationFrame(function() {
    element.style.height = sectionHeight + 'px';
    element.style.transition = elementTransition;
    
    // on the next frame (as soon as the previous style change has taken effect),
    // have the element transition to height: 0
    requestAnimationFrame(function() {
      element.style.height = 0 + 'px';
    });
  });
  
  // mark the section as "currently collapsed"
  element.setAttribute('data-collapsed', 'true');
}

function expandSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;
  
  // have the element transition to the height of its inner content
  element.style.height = sectionHeight + 'px';

  // when the next css transition finishes (which should be the one we just triggered)
  element.addEventListener('transitionend', function(e) {
    // remove this event listener so it only gets triggered once
    element.removeEventListener('transitionend', arguments.callee);
    
    // remove "height" from the element's inline styles, so it can return to its initial value
    element.style.height = null;
  });
  
  // mark the section as "currently not collapsed"
  element.setAttribute('data-collapsed', 'false');
}


document.querySelector('#toggle-button').addEventListener('click', function(e) {
  var section = document.querySelector('div');
  var isCollapsed = section.getAttribute('data-collapsed') === 'true';
    
  if(isCollapsed) {
    expandSection(section)
    section.setAttribute('data-collapsed', 'false')
  } else {
    collapseSection(section)
  }
});
h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.fs-7 {
  font-size: 0.875rem !important;
}
.w-100px {
  width: 100px !important;
}
.w-150px {
  width: 150px !important;
}
.w-200px {
  width: 200px !important;
}
.h-100px {
  height: 100px !important;
}
.h-150px {
  height: 150px !important;
}
.h-200px {
  height: 200px !important;
}
@media (min-width: 576px) {
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
.hcf-author-1 .hcf-author-img,
.hcf-author-1 .hcf-author-meta {
  transition: transform 350ms cubic-bezier(0.16, 0.32, 0.21, 0.93);
}
.hcf-author-1:hover .hcf-author-img {
  transform: translateX(48px);
}
.hcf-author-1:hover .hcf-author-meta {
  transform: translateX(-8px);
}
Copy
CSS
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.mb-7 {
  margin-bottom: 6rem !important;
}
.mb-8 {
  margin-bottom: 7.5rem !important;
}
.mb-9 {
  margin-bottom: 9rem !important;
}
.mb-10 {
  margin-bottom: 10.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.py-7 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.py-8 {
  padding-top: 7.5rem !important;
  padding-bottom: 7.5rem !important;
}
.py-9 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}
.py-10 {
  padding-top: 10.5rem !important;
  padding-bottom: 10.5rem !important;
}
.hcf-bp-center {
  background-position: center !important;
}
.hcf-bs-cover {
  background-size: cover !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-sm-7 {
    margin-bottom: 6rem !important;
  }
  .mb-sm-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-sm-9 {
    margin-bottom: 9rem !important;
  }
  .mb-sm-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-sm-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-sm-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-sm-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-sm-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-md-7 {
    margin-bottom: 6rem !important;
  }
  .mb-md-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-md-9 {
    margin-bottom: 9rem !important;
  }
  .mb-md-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-md-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-md-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-md-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-md-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-lg-7 {
    margin-bottom: 6rem !important;
  }
  .mb-lg-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-lg-9 {
    margin-bottom: 9rem !important;
  }
  .mb-lg-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-lg-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-lg-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-lg-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-lg-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-xl-7 {
    margin-bottom: 6rem !important;
  }
  .mb-xl-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-xl-9 {
    margin-bottom: 9rem !important;
  }
  .mb-xl-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-xl-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-xl-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-xl-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-xl-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .mb-xxl-7 {
    margin-bottom: 6rem !important;
  }
  .mb-xxl-8 {
    margin-bottom: 7.5rem !important;
  }
  .mb-xxl-9 {
    margin-bottom: 9rem !important;
  }
  .mb-xxl-10 {
    margin-bottom: 10.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-xxl-7 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-xxl-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
  .py-xxl-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .py-xxl-10 {
    padding-top: 10.5rem !important;
    padding-bottom: 10.5rem !important;
  }
}
.hcf-overlay {
  --hcf-overlay-opacity: 0.5;
  --hcf-overlay-bg-color: var(--bs-black-rgb);
  position: relative;
}
.hcf-overlay::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(
    var(--hcf-overlay-bg-color),
    var(--hcf-overlay-opacity)
  );
  z-index: 0;
}
.hcf-overlay > * {
  position: relative;
  z-index: 1;
}
.hcf-transform {
  transform: scale3d(1, 1, 1);
  transform-style: preserve-3d;
  transition: all 0.5s;
}
.hcf-transform:hover {
  transform: scale3d(1.02, 1.02, 1.02);
}
Copy
CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
@media (min-width: 576px) {
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
.hcf-masonry-card {
  display: block;
  position: relative;
  overflow: hidden;
}
.hcf-masonry-card .card-img {
  object-fit: cover;
  transform: scale(1);
  transition: transform 150ms linear;
}
.hcf-masonry-card .card-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.hcf-masonry-card .card-overlay .card-title {
  display: inline-block;
  transform: translateY(10px);
  opacity: 0;
}
.hcf-masonry-card .card-overlay .card-category {
  transform: translateY(10px);
  opacity: 0;
}
.hcf-masonry-card:hover .card-img {
  transform: scale(1.05);
  transition: transform 150ms linear;
}
.hcf-masonry-card:hover .card-overlay {
  opacity: 1;
  transition: opacity 150ms linear;
}
.hcf-masonry-card:hover .card-overlay .card-title {
  opacity: 1;
  transform: translateY(0);
  transition: transform 150ms linear 0.1s, opacity 150ms linear 0.1s;
}
.hcf-masonry-card:hover .card-overlay .card-category {
  opacity: 1;
  transform: translateY(0);
  transition: transform 150ms linear 0.2s, opacity 150ms linear 0.2s;
}
Copy
CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
Copy
CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.top-5px {
  top: 5px !important;
}
.top-10px {
  top: 10px !important;
}
.bottom-5px {
  bottom: 5px !important;
}
.bottom-10px {
  bottom: 10px !important;
}
.start-5px {
  left: 5px !important;
}
.start-10px {
  left: 10px !important;
}
.end-5px {
  right: 5px !important;
}
.end-10px {
  right: 10px !important;
}
.hcf-of-cover {
  object-fit: cover !important;
}
.hcf-op-center {
  object-position: center !important;
}
.hcf-ih-250 {
  height: 250px !important;
}
.hcf-ih-400 {
  height: 400px !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-sm-250 {
    height: 250px !important;
  }
  .hcf-ih-sm-400 {
    height: 400px !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-md-250 {
    height: 250px !important;
  }
  .hcf-ih-md-400 {
    height: 400px !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-lg-250 {
    height: 250px !important;
  }
  .hcf-ih-lg-400 {
    height: 400px !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-xl-250 {
    height: 250px !important;
  }
  .hcf-ih-xl-400 {
    height: 400px !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .hcf-ih-xxl-250 {
    height: 250px !important;
  }
  .hcf-ih-xxl-400 {
    height: 400px !important;
  }
}
.hcf-transform {
  transform: scale3d(1, 1, 1);
  transform-style: preserve-3d;
  transition: all 0.5s;
}
.hcf-transform:hover {
  transform: scale3d(1.02, 1.02, 1.02);
}
Copy
CSS
.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}
.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}
@media (min-width: 576px) {
  .g-sm-6,
  .gx-sm-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-sm-6,
  .gy-sm-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 768px) {
  .g-md-6,
  .gx-md-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-md-6,
  .gy-md-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 992px) {
  .g-lg-6,
  .gx-lg-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-lg-6,
  .gy-lg-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1200px) {
  .g-xl-6,
  .gx-xl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xl-6,
  .gy-xl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
@media (min-width: 1400px) {
  .g-xxl-6,
  .gx-xxl-6 {
    --bs-gutter-x: 4.5rem;
  }
  .g-xxl-6,
  .gy-xxl-6 {
    --bs-gutter-y: 4.5rem;
  }
}
.mb-6 {
  margin-bottom: 4.5rem !important;
}
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.w-100px {
  width: 100px !important;
}
.h-100px {
  height: 100px !important;
}
@media (min-width: 576px) {
  .mb-sm-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-sm-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-md-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-lg-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
@media (min-width: 1400px) {
  .mb-xxl-6 {
    margin-bottom: 4.5rem !important;
  }
  .py-xxl-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
Copy
.button {
 font-size: 30px;
 background-color:#FFCCD1;
 opacity: 1.8;
 transition: 0.3s;
 border-radius:15px;
 box-shadow: 0 9px #FFF2F3;
 border:none;
}
.button:hover {
  background-color: #ff7d8a;
  opacity: 1
}
.button:active {
  background-color: #00511d;
  box-shadow: 0 5px #d9ffe7;
  transform: translateY(4px);
}
body {
  margin: 0;
  background-attachment: fixed;
  background: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #4e5a66), color-stop(40%, #343b43), color-stop(95%, #22272c), color-stop(100%, #22272c)), #22272c;
  background: -webkit-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  background: -moz-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  background: -o-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  -pie-background: -pie-radial-gradient(unsupported), #22272c;
  background: radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  background: -ms-radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c), #22272c;
  -pie-background: radial-gradient(center top, farthest-side, #4e5a66, #343b43 40%, #22272c 95%, #22272c);
  position: relative;
  background-size: 800px 200px;
  background-position: center -50px;
  background-repeat: no-repeat;
}
<body>
  <h1 title="the message">Hello World</h1>
  <h2 title="the sender">From Nathan</h2>
</body>
const randomInt = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min);
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
    outline: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type=search] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    max-width: 100%;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html,
button,
input,
select,
textarea {
    color: #222;
}


::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
/* .weekday--content {
    border-top: 1px solid var(--lightgray);
    border-left: 2px solid var(--lightgray);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    min-height: 70px;
} */

.weekviews--container {
    display: grid;
}

.weekday--content:hover {
    cursor: pointer;
    border-top: 1px solid rgba(116, 171, 168, 0.8);
    border-left: 2px solid rgba(116, 171, 168, 0.8);
}

.weekday--content:hover  .block--left {
    background-color: rgba(116, 171, 168, 0.8);
}

.weekday--content:active {
    cursor: pointer;
    border-top: 1px solid rgba(116, 171, 168, 1);
    border-left: 2px solid rgba(116, 171, 168, 1);
}

.weekday--content:active  .block--left {
    background-color: rgba(116, 171, 168, 1);
}

.block--left {  
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* .block--left{
    display: flex;
    flex-direction: column-reverse;
    background-color: var(--lightgray);
    height: 100%;
} 

*/

.block--week {
    margin-top: 40px;
    padding: 0px;
    display: inline;
    color: white;
    /* transform: rotate(270deg); */
    white-space: nowrap;
    width: 100%;
}



.block--event {
    margin: 0px;
    padding-top: 5px;
    padding-left: 5px;
}

/* today */
.day--block {
    border-top: 1px solid white;
    border-left: 2px solid white;
}
.day--block:hover{
    border-top: 1px solid white;
    border-left: 2px solid white;
}

.day--block > .weekview--block > .block--left{
    color: black;
    background-color: white;
}

.day--block > .weekview--block > .block--left > p{
    color: black;
}


.day--block:hover{
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
}

.day--block:hover > .weekview--block > .block--left{
    color: white;
    background-color: rgba(255, 255, 255, 0.8);
}

.day--block:hover > .weekview--block > .block--left > p{
    color: black;
}

.day--block:active{
    border-top: 1px solid black;
    border-left: 2px solid black;
}

.day--block:active > .weekview--block > .block--left{
    background-color: black;
}

.day--block:active > .weekview--block > .block--left > p{
    color: white;
}

/* clicked */
.weekday--clicked:not(.day--block) {
    border-top: 1px solid var(--blue);
    border-left: 2px solid var(--blue);
}

.weekday--clicked:not(.day--block) >.weekview--block >  .block--left {
    background-color: var(--blue);
}

.weekday--clicked:hover:not(.day--block) {
    border-top: 1px solid rgba(116, 171, 168, 0.6);
    border-left: 2px solid rgba(116, 171, 168, 0.6);
}

.weekday--clicked:hover:not(.day--block) >.weekview--block >  .block--left {
    background-color: rgba(116, 171, 168, 0.6);
}
<html>
    <head>
        <style>
  
  			/* Sticky - position: sticky is a mix of position: relative and position: fixed. It acts like a relatively positioned element until a certain scroll point and then it acts like a fixed element. Have no fear if you don't understand what this means, the example will help you to understand it better. */
  			.main-element {
                  position: sticky;
                  top: 10px;
                  background-color: yellow;
                  padding: 10px;
              }

              .parent-element {
                  position: relative;
                  height: 800px;
                  padding: 50px 10px;
                  background-color: #81adc8;
              }
  		
        </style>
    </head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>
<html>
  	<head>
  		<style>
  
  			/* Fixed position elements are similar to absolutely positioned elements. They are also removed from the normal flow of the document. But unlike absolutely positioned element, they are always positioned relative to the <html> element.
One thing to note is that fixed elements are not affected by scrolling. They always stay in the same position on the screen. */
  			
  			.main-element {
                position: fixed;
                bottom: 10px;
                left: 10px;
                background-color: yellow;
                padding: 10px;
            }

            html {
                height: 800px;
            }
  		</style>
  	</head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>
<html>
  	<head>
  		<style>
  
  			/* Absolute - Elements with position: absolute are positioned relative to their parent elements. In this case, the element is removed from the normal document flow. The other elements will behave as if that element is not in the document. No space is created for the element in the page layout. The values of left, top, bottom and right determine the final position of the element.

One thing to note is that an element with position: absolute is positioned relative to its closest positioned ancestor. That means that the parent element has to have a position value other than position: static.

If the closest parent element is not positioned, it is positioned relative to the next parent element that is positioned. If there's no positioned ancestor element, it is positioned relative to the <html> element.

Let's get back to our example. In this case, we change the position of the main element to position: absolute. We will also give its parent element a relative position so that it does not get positioned relative to the <html> element. */
  			
            .main-element {
            position: absolute;
            left: 10px;
            bottom: 10px;
            background-color: yellow;
            padding: 10px;
        }

            .parent-element {
              position: relative;
              height: 100px;
              padding: 10px;
              background-color: #81adc8;
            }

            .sibling-element {
                background: #f2f2f2;
                padding: 10px;
                border: 1px solid #81adc8;
            } 
  	    </style>
  	</head>
  
  
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>
<html>
  	<head>
  		<style>
  
  			/* Relative - Elements with position: relative remain in the normal flow of the document. But, unlike static elements, the left, right, top, bottom and z-index properties affect the position of the element. An offset, based on the values of left, right, top and bottom properties, is applied to the element relative to itself. */				
  
  			.main-element {
              position: relative;
              left: 10px;
              bottom: 10px;
              background-color: yellow;
              padding: 10px;
        	}

            .sibling-element {
                padding: 10px;
                background-color: #f2f2f2;
            }
        </style>
    </head>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>
<html>
  <head>
    <style>
  	/* STATIC - This is the default value for elements. The element is positioned according to the normal flow of the document. The left, right, top, bottom and z-index properties do not affect an element with position: static.*/
      .main-element {
        position: static;
        left: 10px;
        bottom: 10px;
        background-color: yellow;
        padding: 10px;
    }

    .sibling-element {
        padding: 10px;
        background-color: #f2f2f2;
    }
    </style>
  </head>
  	
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>
.pp-content-post .pp-content-grid-post-image{
    overflow: hidden;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}
.pp-content-post .pp-content-grid-post-image img{
    transition: all .3s ease-in-out;
}
.pp-content-post:hover .pp-content-grid-post-image img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Increasing and Decreasing Image Size</title>
<script>
    function zoomin(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 500){
            alert("Maximum zoom-in level reached.");
        } else{
            myImg.style.width = (currWidth + 50) + "px";
        } 
    }
    function zoomout(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 50){
            alert("Maximum zoom-out level reached.");
        } else{
            myImg.style.width = (currWidth - 50) + "px";
        }
    }
</script>
</head>
<body>
    <p>
        <button type="button" onclick="zoomin()">Zoom In</button>
        <button type="button" onclick="zoomout()">Zoom Out</button>
    </p>
    <img src="/pngwing.com.png" id="sky" width="250" alt="Cloudy Sky">
</body>
</html>
/* A few media query to set some font sizes at different screen sizes.
 * This helps automate a bit of responsiveness.
 * The trick is to use the rem unit for size values, margin and padding.
 * Because rem is relative to the document font size
 * when we scale up or down the font size on the document
 * it will affect all properties using rem units for the values.
*/

/* I am using the em unit for breakpoints
 * The calculation is the following
 * screen size divided by browser base font size
 * As an example: a breakpoint at 980px
 * 980px / 16px = 61.25em
*/

/* 1200px / 16px = 75em */
@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}
/* A few media query to set some font sizes at different screen sizes.
 * This helps automate a bit of responsiveness.
 * The trick is to use the rem unit for size values, margin and padding.
 * Because rem is relative to the document font size
 * when we scale up or down the font size on the document
 * it will affect all properties using rem units for the values.
*/

/* I am using the em unit for breakpoints
 * The calculation is the following
 * screen size divided by browser base font size
 * As an example: a breakpoint at 980px
 * 980px / 16px = 61.25em
*/

/* 1200px / 16px = 75em */
@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flexbox Tutorial</title>
    <style>
        .container{
            height: 544px; 
            width: 100%;
            border: 2px solid black;
            display: flex; /* Initialize the container as a flex box */
            
            /* Flex properties for a flex container */

            /* flex-direction: row; (Default value of flex-direction is row) */
            /* flex-direction: column;
            flex-direction: row-reverse;
            flex-direction: column-reverse; */
            

            /* flex-wrap: wrap; (Default value of flex-direction is no-wrap) */
            /* flex-wrap: wrap-reverse; */

            /* This is a shorthand for flex-direction: and flex-wrap: ;; */
            /* flex-flow: row-reverse wrap; */ 

            /* justify-content will justify the content in horizontal direction */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-evenly; */
            /* justify-content: space-around; */

            /* justify-content will justify the content in vertical direction */
            /* align-items: center; */
            /* align-items: flex-end; */
            /* align-items: flex-start; */
            /* align-items: stretch; */ 
        }
        .item{
            width: 200px;
            height: 200px;
            background-color: tomato;
            border: 2px solid green;
            margin: 10px;
            padding: 3px;
        }

        #item-1{
            /* Flex properties for a flex item */
            /* Higher the order, later it shows up in the container */
            /* order: 2; */

            /* flex-grow: 2;
            flex-shrink: 2; */

        }
        #item-2{
            /* flex-grow: 3;
            flex-shrink: 3 ; */
            flex-basis: 160px;
            /* when flex-direction is set to row flex-basis: will control width */
            /* when flex-direction is set to column flex-basis: will control height */
        }
        #item-3{
            /* flex: 2 2 230px; */
            align-self: flex-start;
            align-self: flex-end;
            align-self: center;

            }

    </style>
</head>
<body>
    <h1>This is Flexbox Tutorial</h1>
    <div class="container">
        <div class="item" id="item-1">First Box</div>
        <div class="item" id="item-2">Second Box</div>
        <div class="item" id="item-3">Third Box</div>
        <!-- <div class="item" id="item-4">Fourth Box</div>
        <div class="item" id="item-5">Fifth Box</div>
        <div class="item" id="item-6">Sixth Box</div> -->
    </div>
</body>
</html>
/ CSS /
.reveal{position:relative;transform:translateX(200px);opacity:0;transition:1s all ease;}
.reveal.active{transform:translateX(0);opacity:1;}

/ JavaScript /

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);
<div id="slide-out-widget-area" class="slide-out-from-right" style="padding-top: 71.4px; padding-bottom: 71.4px;">
            <div class="inner-wrap">
                <div class="inner">

                    <div class="off-canvas-menu">
                        <?php
                        wp_nav_menu( array (
                            'theme_location' => 'header',
                            'container'      => '',
                            'menu_class'     => 'menu',
                        ) );
                        ?>
                    </div>
                </div>
            </div>
            <div id="slide-out-widget-area-bg" class="slide-out-from-right solid material-open"></div>
            <!-- <div class="close-btn">
                <span class="close-wrap">
                    <span class="close-line close-line1"></span>
                    <span class="close-line close-line2"></span> 
                </span>
            </div> -->
        </div>
        <div class="occu-health-wrapper">
            <div id="top"><a class="menulinks"><i></i></a></div>
		</div>
                                    
       <style>
		@media (max-width:767px){
    header#header {padding: 20px 0 0;background: transparent;}
    .header-top {border-bottom: none;}
    .head-wrapper {height: 98px;}
    .head-wrapper.fixed-header a.menulinks {top: 30px;right: 20px;}
    .head-wrapper.fixed-header ul.mainmenu {top: 98px;left: 0;width: 100%;}
    .logo-col {flex: 0 0 110px;}
    .head-btn-col {flex: 0 0 calc(100% - 150px);justify-content: flex-end;padding-right: 0px;padding-left: 0;}
    .mobile-open div#slide-out-widget-area {min-width: 78vw;width: 78vw;margin: 0 0 0 auto;padding-left: 50px;padding-right: 50px;display: block;}
    .mobile-open .inner-wrap{position:absolute;top:50%;transform:translate(-50%,-50%);left: 70%;display:flex;align-items:center;justify-content:center;}
    .off-canvas-menu .menu{display:flex;flex-direction:column;justify-content:center;align-items:center;width:200px;margin-bottom:10px;}
    .inner-wrap .off-canvas-menu .nav-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;}
    .mobile-open div#slide-out-widget-area-bg{background:var(--primary-color);opacity:1;height:100vh;width:100vw;z-index:-1;position:absolute;top:0;left:0;}
    .mobile-open .occu-health-wrapper{transform:scale(0.84) translateX(-93vw) translateZ(0)!important;position:absolute;top:0;left:40%;height:100vh;overflow:hidden;transition:transform 0.5s;width:100%;}
    div#top .menulinks{display:none;justify-content:end;height:50px;z-index:99;width:100%;}
    .mobile-open div#top .menulinks {display: flex;}
    div#slide-out-widget-area {display: none;}
    .occu-health-wrapper{transition:transform 0.5s;top:auto;height:100vh;}
    .mobile-open .occu-health-wrapper{transform:scale(0.84) translateX(-93vw) translateZ(0)!important;position:absolute;top:0;left:40%;height:100vh;overflow:hidden;transition:transform 0.5s;width:100%;}
    .mobile-open .occu-health-wrapper {left: 25%;}
    .mobile-open div#top{padding:10px 0;background:white;display:flex;justify-content:end;height:inherit;}
    ul#menu-header-menu li > a{color:var(--white);}
    ul#menu-header-menu {list-style: none;padding: 0;}
    .off-canvas-menu{width:200px;}
    .off-canvas-menu .btn-wrapper{display:flex;align-items:center;justify-content:flex-start;margin-top:10px;}
    .off-canvas-menu a.btn{display:inline-flex;padding:10px;width:50px;height:50px;background:var(--white);margin-right:10px;}
    .off-canvas-menu a.btn svg{color:var(--primary-color);width:30px;height:30px;}
    .off-canvas-menu a.btn:last-child{margin:0;}
    .off-canvas-menu ul#menu-header-menu li{margin-bottom:10px;width: 100%;}

/*Nav*/
    .menulinks{display:block;top:30px;right:20px;z-index:999999;}
    .mobile-open a.menulinks {display: none;}
    ul.mainmenu{text-align:left;position:absolute;top:98px;padding:0;right:0;width:100%;background:#000;display:none !important;z-index:9999999;}
    ul.mainmenu>li>a:after{content:none;}
    ul.mainmenu>li>a:hover:after{content:none;}
    ul.mainmenu>li{float:left;width:100%;padding:0px;margin:0;border-top:1px solid rgba(255,255,255,0.2);position:relative;}
    ul.mainmenu>li:first-child{border:none;}
    ul.mainmenu>li>a:link,ul.mainmenu>li>a:visited{padding:10px 15px;font-size:16px;float:left;width:100%;border:none;text-align:left;color:#fff;}
    ul.mainmenu>li>a:hover{background:rgba(255,255,255,0.2);}
    a.menulinks i{display:inline;position:relative;top: 0;right: 0;margin-left:0;-webkit-transition-duration:0s;-webkit-transition-delay:.2s;-moz-transition-duration:0s;-moz-transition-delay:.2s;transition-duration:0s;transition-delay:.2s;}
    a.menulinks i:before,a.menulinks i:after{position:absolute;content:'';left:0;}
    a.menulinks i,a.menulinks i:before,a.menulinks i:after{width:35px;height:4px;background-color:#000;display:inline-block;}
    a.menulinks i:before{transform: translateY(-10px);-webkit-transition-property:margin,-webkit-transform;-webkit-transition-duration:.2s;-webkit-transition-delay:.2s,0;}
    a.menulinks i:after{transform: translateY(10px);-webkit-transition-property:margin,-webkit-transform;-webkit-transition-duration:.2s;-webkit-transition-delay:.2s,0;}
    .mobile-open a.menulinks i{background-color:rgba(0,0,0,0.0);-webkit-transition-delay:.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    .mobile-open a.menulinks i:before{margin-top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0,.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    .mobile-open a.menulinks i:after{margin-top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0,.2s;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0);box-shadow:0px 1px 1px rgba(0,0,0,0);}
    ul.mainmenu>li>a.current:after{display:none;}
    ul.mainmenu ul{position:relative;top:auto;left:auto;float:left;width:100%;}
    ul.mainmenu ul li{position:relative;}
    ul.mainmenu ul li a{padding:8px 15px 8px 25px;color:#fff;}
    a.child-triggerm{display:block!important;cursor:pointer;position:absolute!important;top:0px;right:0px;width:50px!important;min-width:50px!important;height:38px!important;padding:0!important;border-left:1px dotted rgba(255,255,255,.20);}
    a.child-triggerm:hover{text-decoration:none;color:#f00;}
    a.child-triggerm span{position:relative;top:50%;margin:0 auto!important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm span:after{position:absolute;content:'';}
    a.child-triggerm span,a.child-triggerm span:after{width:10px;height:1px;background-color:#fff;display:block;}
    a.child-triggerm span:after{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm.child-open span:after{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm.child-open span{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition-duration:.2s;-moz-transition-duration:.2s;transition-duration:.2s;}
    a.child-triggerm:hover span,a.child-triggerm:hover span:after{background-color:#f00;}
    .logo-col a > img {max-width: 110px;height: 70px;object-fit: contain;}
    .head-btn-col a.btn:last-of-type {margin-right: 0;display: none;}
    .contact-col ul, .keep-col ul {margin: 0 0 0 15px;}
    .footer-logo-col {width: 100%;}
}

@media (max-width: 567px) {
    .head-btn-col {flex: 0 0 calc(100% - 110px);justify-content: end;padding-right: 38px;padding-left: 5px;}
    .head-btn-col .btn {width: 40px;height: 40px;margin-right: 5px;}
    ul.mainmenu {top: 143px;display: none !important;}
    .head-wrapper.fixed-header ul.mainmenu {top: 144px;}
    .services-col {margin-bottom: 15px;margin-top: 15px;}
    .contact-col {margin-bottom: 15px;display: flex;flex-direction: column;align-items: center;width: 100%;}
    .footer .services-col .footer-links ul {text-align: center;margin: 0;}
    .contact-col ul, .keep-col ul {margin: 0 0 0px 0;text-align: center;}
    .keep-col {width: 100%;}
    .footer .services-col span, .footer .contact-col span, .footer .keep-col span {padding-left: 0;padding-bottom: 15px;font-size: 22px;justify-content: center;}
    .footer .row {justify-content: center;}
    .footer-logo-col {width: 100%;text-align: center;}
    .contact-col ul, .keep-col ul {margin: 0 0 0 0;}
    .logo-col a > img {max-width: 90px;}
    .mobile-open .inner-wrap {left: 75%;}
    .head-wrapper.fixed-header a.menulinks{top:30px;right:10px;}
}

@media (max-width: 350px) {
    .logo-col{flex:0 0 90px;}
    .head-btn-col {flex: 0 0 calc(100% - 90px);padding-right: 28px;}
    .menulinks{top:30px;right:20px;}
    .head-wrapper.fixed-header a.menulinks{top:30px;right:5px;}
}
	</style>
                                                      
<script>
      jQuery(document).ready(function (jQuery) {
    jQuery('.mainmenu li:has(ul)').addClass('parent');
    jQuery('.mainmenu').before('<a class="menulinks"><i></i></a>');
    jQuery('a.menulinks').click(function () {
        jQuery(this).next('ul').slideToggle(250);
        jQuery('body').toggleClass('mobile-open');
        jQuery('.mainmenu li.parent ul').slideUp(250);
        jQuery('a.child-triggerm').removeClass('child-open');
        return false;
    });
    jQuery('.mainmenu li.parent > ul').before('<a class="child-triggerm"><span></span></a>');
    jQuery('.mainmenu a.child-triggerm').click(function () {
        jQuery(this).parent().siblings('li').find('a.child-triggerm').removeClass('child-open');
        jQuery(this).parent().siblings('li').find('ul').slideUp(250);
        jQuery(this).next('ul').slideToggle(250);
        jQuery(this).toggleClass('child-open');
        return false;
    });</script>
<!DOCTYPE php>
<?php 
error_reporting(null);
$city = $_POST['get'];
$Url = file_get_contents("http://api.openweathermap.org/data/2.5/weather?q=".$city."&units=metric&appid=73c340f4df1ee2a07dca01d0ce48bf48");
$data=json_decode($Url,true);
// echo "<pre>";
// print_r($data);


$dataurl=file_get_contents("https://pixabay.com/api/?key=29428143-1b7675892c7e12c1f8fdd4157&q=".$_POST['get']."&image_type=photo");
$test=json_decode($dataurl,true);
// echo "<pre>";
// print_r($test);
$flag='flag';
$back=$test['hits'][rand(1,19)]['largeImageURL'];



// echo "<pre>";
// print_r($test);
// $lon=$data['coord']['lon'];
// $lat=$data['coord']['lat'];
// $newtest=file_get_contents('https://api.openweathermap.org/data/2.5/weather?lat='.$lat.'&lon='.$lon.'&appid=73c340f4df1ee2a07dca01d0ce48bf48');
// $test1=json_decode($newtest,true);
$weatherAPI="a595f443b58d4c97962234220222208";
$Weatherlink=file_get_contents('http://api.weatherapi.com/v1/current.json?key='.$weatherAPI.'&q='.$city.'');
$getdata=json_decode($Weatherlink,true);

//   echo "<pre>";
// print_r($getdata);
$cnt=$getdata['location']['country'];
$ctname="a595f443b58d4c97962234220222208";
$getct=file_get_contents("http://api.weatherapi.com/v1/current.json?key=".$ctname."&q=".$_POST['get']);
$gvdata=json_decode($getct,true);
$loc=$gvdata["location"]["country"];
$imurl=$gvdata['current']['condition']['icon'];

// echo "<pre>";
// print_r($dta);
?>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://kit.fontawesome.com/3ade12e83a.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <title>Weather</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');

       .material-symbols-outlined {
         font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD'0,
        'opsz' 48
}
       .button{
        padding: 10px;
        float: right;
        width: 100px;
        border: none;
        border-radius: 10px;
        background-color: #038cfc;
        color: white;
       }   
       .button:hover{
        background-color: #055ca3;
       }  

       .wmain{
        width:100%;
        display: flex;
        flex-direction: column;
            
            align-items: center;
            justify-content: center;
       }
        body{
           
            padding: 5%;
            font-family: 'DynaPuff', cursive;
            overflow:scroll;
          
        }
      .backg{
        margin: 0%;
        padding: 0%;
        position: absolute;
        width: 100%;
        height: 200%;
        z-index: -1;
        left:0%;
        top: 0%;
      }
      .show{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
      }
      #box{
        display: flex;
        width: 100px;
        height: 100px;
        backdrop-filter: blur(50px);
        border-radius:15px;
        box-shadow: 1px 1px 10px black;
        color: white;
        align-items: center;
        justify-content: center;

      }
      .ico{
        display: flex;
        width: 200px;
        height: 200px;
        backdrop-filter: blur(50px);
        border-radius:15px;
        box-shadow: 1px 1px 10px black;
        color: white;
        align-items: center;
        justify-content: center;
        margin: 30px;
        flex-direction: column;

      }
      .search{
        border: none;
        border-radius: 30px;
        padding: 10px;
      }
      .sbar{
         border: none;
        border-radius: 30px;
        padding: 10px;
        width: 300px;

      }
      .heade{
        width: 200px;
        height:200px;
        backdrop-filter:blur(50px);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
    </style>
</head>
<img class="backg" src="<?=$back ?>">
<body>
    <div class="nav">
      <a href="signup.php">
      <button name="bt" class="button">
        Source Code
      </button>
      </a>
    </div>
    <div class="wmain">

        <form method="POST">
        <div class="search"><input class="sbar" name="get" value="india" type="search"></div>
        </form>
<div class="heade" style="box-shadow:1px 1px 50px black;">
        <div class="name"><h1 style="color: white;"><?=$_POST['get'];?></h1></div>
            <img width="50px" src="https://countryflagsapi.com/png/<?=$cnt?>">
            </div>
       <div class="ico">
       <img  src="<?=$imurl?>" >
        <div class="ne"><h1><?= $data['weather']['0']['main']?></h1></div>

          <div id="bo" class="temp"><i style="color: yellow;" class="fa-solid fa-temperature-full"></i>&nbsp<?=round($data['main']['temp']) ?>deg</div>
        </div>
        <div class="show">
     
            <div id="box" class="hum"><span style="color: skyblue;" class="material-symbols-outlined">
humidity_high
</span><?=$data['main']['humidity'] ?></div>
            <div id="box" class="press"><span style="color: orange;" class="material-symbols-outlined">
compress
</span><?=$data['main']['pressure'] ?></div>
            <div id="box" class="min"><span style="color: green;" class="material-symbols-outlined">
thermometer
</span><?=$data['main']['temp_min'] ?></div>
            <div id="box" class="max"><span style="color: red;" class="material-symbols-outlined">
thermometer
</span><?=$data['main']['temp_max'] ?></div>
            <div id="box" class="wind"><i style="color: green;"  class="fa-solid fa-wind"></i>&nbsp<?=$data['wind']['speed'] ?></div>
        </div>
        
    </div>
    
</body>

</html>

selector {
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}
selector .slick-track{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
} 
selector .swiper-wrapper{
  -webkit-transition-timing-function: linear !important; 
  transition-timing-function: linear !important; 
}
.grecaptcha-badge { visibility:hidden;}
@media (max-width:360px) {
	selector br{display: none;}
}
body{
    font-family: Montserrat, "Work Sans", sans-serif;
    font-size: 1.5rem;
    color: rgb(56, 56, 56);
    line-height: 1.6;
}

body{
    font-family: BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-sans;
}
.container {
  width: 500px;
  height: 400px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
}

.container > .child{
  width: 80px;
  height: 80px;
}
header {
    background-color: #fff;
    opacity: 0.6;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.shake {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation-name: shakeMe;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes shakeMe {
    2%, 18% {transform: translate3d(-5px, 0, 0);}
    4%, 16% {transform: translate3d(5px, 0, 0);}
    6%, 10%, 14% {transform: translate3d(-5px, 0, 0);}
    8%, 12% {transform: translate3d(5px, 0, 0);}
    18.1% {transform: translate3d(0px, 0, 0);}
}
.progress-line, .progress-line:before {
  height: 3px;
  width: 100%;
  margin: 0;
}
.progress-line {
  background-color: #58a700;
  display: -webkit-flex;
  display: flex;
}
.progress-line:before {
  background-color: #2f5400;
  content: '';
  -webkit-animation: running-progress 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation: running-progress 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@-webkit-keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
@keyframes running-progress {
  0% { margin-left: 0px; margin-right: 100%; }
  50% { margin-left: 25%; margin-right: 0%; }
  100% { margin-left: 100%; margin-right: 0; }
}
/*-- put this on ServerModule.CustomCSS property --*/

#loading-mask, #loading-indicator, #loading {
  display: none;
}
/* css: 

.element{
    position: relative; <-- important to place effect span in element to be clicked 
}

.ripple{
    position: absolute;
    background-color:#fff;
    transform: translate(-50%,-50%);
    pointer-events: none;
    border-radius: 50%;
    animation: animate 0.5s linear infinite;   
}

@keyframes animate {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0.5;
    }
    100%{
        width: 800px;
        height: 800px;
        opacity: 0; 
    }
}
*/

element.addEventListener("click", (e)=>{
    var rect = e.target.getBoundingClientRect();
    let x=e.clientX - rect.x;
    let y=e.clientY - rect.y;
    let ripples = document.createElement('span');
    ripples.className="ripple";
    ripples.style.left = x + 'px';
    ripples.style.top = y + 'px';
    e.target.appendChild(ripples);
    setTimeout(()=>{
        ripples.remove();
    }, 500);
})
/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 0.2s;
}
.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
.ripple:active {
  background-color: #000;
  background-size: 100%;
  transition: background 0s;
}

/* Button style */
button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  background-color: #2196f3;
  box-shadow: 0 0 4px #999;
  outline: none;
}

/* <button class="ripple">Test button</button> */
/*<div class="preloader"></div>*/

.preloader::after { 
  position: absolute;
  top: 0;
  bottom: 4%;
  right: 0;
  left: 0;
  
  content: " ";
  display: block;
  
  margin: auto;
  height: 32px;
  width: 32px;
  
  box-sizing: border-box;
  border: solid;
  border-width: 4px;
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.55);
  border-bottom-color: rgba(140, 140, 140, 0.2);
  border-right-color: rgba(140, 140, 140, 0.2);
  border-left-color: rgba(140, 140, 140, 0.2);
  
  animation: rotating 0.3s linear infinite;
}

@keyframes rotating{
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}
//<input type="text" value="B01" id="MYINPUT">

$("#MYINPUT").select(function(e){
    var selSt=$(this)[0].selectionStart;
    var selNd=$(this)[0].selectionEnd;
    
    if (selSt<3) {
        $(this)[0].setSelectionRange(3, selNd);
    }
});

.grow { 
  transition: all .2s ease-in-out; 
}
.grow:hover { 
  transform: scale(1.1); 
}
body {
    background: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3) no-repeat;
    /* Keep the inherited background full size. */
    background-attachment: fixed; 
    background-size: cover;
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container {
    width: 30rem;
    height: 20rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);   
    border-radius: 5px;
    position: relative;
    z-index: 1;
    background: inherit;
    overflow: hidden;
}

.container:before {
    content: "";
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
    margin: -20px;
}
div.transparent-click {
    pointer-events: none;
    background: url('your_transparent.png');
/*IE11 conditional:*/
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
    background: none !important;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dfdfdf;
  -webkit-transition: .1s;
  transition: .1s;
  border: 1px solid #000;
  border-radius: 5px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .1s;
  transition: .1s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(32px);
  -ms-transform: translateX(32px);
  transform: translateX(32px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 5px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

</body>
</html> 
@-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
}
  
@keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
}
  
.spinning {
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
/*<i class="fa fa-battery-charging" aria-hidden="true"></i>*/

@keyframes battery-charging {
  0% { content: "\f244"; }
  20% { content: "\f243"; }
  40% { content: "\f242"; }
  60% { content: "\f241"; }
  80% { content: "\f240"; }
}
.fa-battery-charging:before {
  content: "\f244";
  animation: 2s battery-charging infinite;
}
/*-webkit- (Chrome, Safari, newer versions of Opera):*/
.element::-webkit-scrollbar { width: 0 !important }

/*-moz- (Firefox):*/
.element { overflow: -moz-scrollbars-none; }

/*-ms- (Internet Explorer +10):*/
.element { -ms-overflow-style: none; }
<html>
<head>
    <style type="text/css">
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    height: 75px;
}

main {
    flex: auto;
    background-color: #ccc;
}

footer {
    height: 25px;
}
    </style>
</head>
<body>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
</body>
</html>
<html moznomarginboxes mozdisallowselectionprint>
<head>
<!--style type="text/css">

@page { size: auto;  margin: 0mm; }
@media print {  
  body { margin: 1.6cm; margin-top:0;}
}
.header, .header-space,
.footer, .footer-space {
  height: 50px;
}
.header {
  position: fixed;
  top: 0;
  padding-top:20px;
}
.footer {
  position: fixed;
  bottom: 0;
}
.content{
  width: 7.2in;
}
</style-->
<style type="text/css">
@page { margin: 0 }
body { margin: 2cm; margin-top:0; }
.sheet {
  margin: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
}

/** Paper sizes **/
body.A3               .sheet { width: 297mm; height: 419mm }
body.A3.landscape     .sheet { width: 420mm; height: 296mm }
body.A4               .sheet { width: 210mm; height: 296mm }
body.A4.landscape     .sheet { width: 297mm; height: 209mm }
body.A5               .sheet { width: 148mm; height: 209mm }
body.A5.landscape     .sheet { width: 210mm; height: 147mm }
body.letter           .sheet { width: 216mm; height: 279mm }
body.letter.landscape .sheet { width: 280mm; height: 215mm }
body.legal            .sheet { width: 216mm; height: 356mm }
body.legal.landscape  .sheet { width: 357mm; height: 215mm }

/** Padding area **/
.sheet.padding-10mm { padding: 10mm }
.sheet.padding-15mm { padding: 15mm }
.sheet.padding-20mm { padding: 20mm }
.sheet.padding-25mm { padding: 25mm }

/** For screen preview **/
@media screen {
  body { background: #e0e0e0 }
  .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm auto;
  }
}

/** Fix for Chrome issue #273306 **/
@media print {
           body.A3.landscape { width: 420mm }
  body.A3, body.A4.landscape { width: 297mm }
  body.A4, body.A5.landscape { width: 210mm }
  body.A5                    { width: 148mm }
  body.letter, body.legal    { width: 216mm }
  body.letter.landscape      { width: 280mm }
  body.legal.landscape       { width: 357mm }
}

@page { size: letter }




.header, .header-space,
.footer, .footer-space {
  height: 50px;
}
.header {
  position: fixed;
  top: 0;
  padding-top:20px;
}
.footer {
  position: fixed;
  bottom: 0;
}
.content{
  width: 7.5in;
}

</style>

</head>
<body class="letter">
<table>
  <thead><tr><td>
    <div class="header-space"> </div>
  </td></tr></thead>
  <tbody><tr><td>
    <div class="content">
      
      BorderStyle := bsnone;
WindowState := wsMaximized;
I set these properties to make both of them full screen. In the main form there is a button and when I click I want to show the second form as full screen with slide animation so I used this code:

AnimateWindow(form2.Handle, 500, AW_ACTIVATE OR AW_SLIDE OR AW_HOR_NEGATIVE);
Form2 is in auto create and visible property is set to false.

The problem when I tried this I saw odd results, the animation play but the form2 appear without any controls and not covering the full screen.

How to fix that so I can display form2 as full screen with slide animation ?

I am using XE5

delphi
shareimprove this question
edited Feb 24 '15 at 2:40
asked Feb 24 '15 at 2:23

Wel
1,52663378
add a comment
3 Answers
active oldest votes
¿No encuentras la respuesta? Pregunta en Stack Overflow en español.

✕
 
2

Based on MSN
https://msdn.microsoft.com/en-us/library/windows/desktop/ms632669(v=vs.85).aspx
there are lots of problems reported of using this function. So I recomend you go and implement the animation yourself.

Since you are interested only in sliding information do next:

Fist change your form size to fit into the monitor size.

MyForm.Width := Screen.Width;
MyForm.Height := Screen.Height;
Then move your form to the edge of the screen you want the animation to start from. When doing so keep atleast one pixel of the form inside the visible area of the monitor.

//Strating animation from left border
MyForm.Left := 1 - MyForm.Width;
MyForm.Top := 0;

//Starting from right border
MyForm.Left := MyForm.Width - 1;
MyForm.Top := 0;

//Starting from top border
MyForm.Left := 0;
MyForm.Top := 1 - MyForm.Height;

//Starting from bottom border
MyForm.Left := 0;
MyForm.Top := MyForm.Height - 1;
Once your have positioned your form in starting possition make it visible and enable timer that will beused to update forms position multiple times (animate) until it gets into desired position

MyForm.Show;
AniTimer.Enabled;
And start animation which is basically just updating your form position by using a simple timer

//Left to right animation
procedure MyForm.AniTimerOnTimer(Sender: TObject);
//Constant used to define by how many pixels will the form be moved
//on each timer interval
const MoveStep: Integer = 5;
begin
  if MyForm.Left < MoveStep then
  begin
    MyForm.Left := MyForm.Left + MoveStep;
  end;
  else
  begin
    MyForm.Left := 0;
    AniTimer.Enabled := False;
  end;
end;
Use similar approach for other directions if needed.

Instead of defining MoveStep as constant you can make it as a variable and then dynamically calculate its value so that animation is finished in N steps.

MoveStep := Screen.Width div N;
If you would like to have diagonal animation you would need two MoveStep variables. One for horizontal and one for vertical axis. And you need to make sure that both are being calculated in order to finish animation in specific number of steps

MoveStepX := Screen.Width div N;
MoveStepY := Screen.Height div N;
So now you can controll your animation speed by changing MoveStep and timer interval.

Note I don't recomend setting timer interval to small. Why?

As ypu probably know TTimer component isn't known for its acruacy so it could lead to noticable speed variation of of your animation.

Also changing form position multiple times woulrd require part of it being rerendered hwen it comes into visual rage so it could generate significant load to the CPU.

Moving fomr a few less times and with larger increments could greatly reduce the CPU load whle still performing adequate aniamtion smothness.

So do some testing to find the best combination of timer interval and move step.

shareimprove this answer
answered Feb 24 '15 at 8:09

SilverWarior
4,43321016
add a comment

 
2

Your problem is, before Form2 is first shown, the VCL does not create API windows of the windowed controls. Because it doesn't need to. Remember 'visible' is still set to false when you call AnimateWindow.

Below is a not very elegant workaround which sets 'visible' while the form has 0 width and height. It also addresses an additional problem which I don't know why you are not having. It is that I cannot animate a maximized window at all, which seems logical to me - a maximized window does not move. Anyway, to test it I suggest setting 'wsNormal' as WindowState at design time.

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  if Form2.Visible then begin
    Form2.WindowState := wsNormal;
    AnimateWindow(Form2.Handle, 500, AW_HIDE OR AW_SLIDE OR AW_HOR_NEGATIVE);
    Form2.Close;
  end else begin
    Form2.Width := 0;
    Form2.Height := 0;
    Form2.Visible := True;
    ShowWindow(Form2.Handle, SW_HIDE);

    Form2.WindowState := wsNormal;
    Form2.Width := Form2.Monitor.Width;
    Form2.Height := Form2.Monitor.Height;
    AnimateWindow(form2.Handle, 500, AW_ACTIVATE or AW_SLIDE OR AW_HOR_NEGATIVE);
    Form2.WindowState := wsMaximized;
  end;
end;
shareimprove this answer
answered Feb 24 '15 at 17:21

Sertac Akyuz
49k375133
@Wel - did you try this? – Sertac Akyuz Feb 27 '15 at 10:26
add a comment

1

AnimateWindow is a bit of a loner. It doesn't play nicely with the rest of the team in Delphi. Even though the MSDN doc for it says that it shows the form it actually doesn't do it properly. It only does the animation. I suppose it would do it nicely if you went all out Windows API and knew all that is required.

A few things to keep in mind:

I suppose you noticed that the slide effect doesn't show properly with the borders enabled.
It doesn't know about the WindowState property of the form so it will not Maximize the form if you wanted it to.
It doesn't show controls after the call, only graphic controls
It knows nothing of Delphi and how Delphi handles the showing and hiding of its forms
So the trick is:

Take away borders like you have done.
Before showing the form for the first time you must specify its size. Seeing that you want it maximized, just set it to the screen size where it will display and set its position to the four corners of that screen. This can be done on Form2's OnCreate.
So upon clicking the button you first call the AnimateWindow then call normal Form2.Show
There might be other fixes but this is the one I know of.

    </div>
  </td></tr></tbody>
  <tfoot><tr><td>
    <div class="footer-space"> </div>
  </td></tr></tfoot>
</table>
<div class="header">Prueba Encabezado</div>
<div class="footer">Pie de pagina</div>
</body>
</html>
ul {
    column-count: 2;
    column-gap: 0;
}

li {
    display: inline;
}

/*

<div style="height:100%;overflow-y:auto;width:600px">
<ul>
    <li>Element 1<br></li>
    <li>Element 2<br></li>
    <li>Element 3<br></li>
    <li>Element 4<br></li>
    :
    <li>Element n<br></li>
</ul>
*/
body{
    font-family: verdana;
    color:gray;
    margin: 8px;
}

.str{
    color:#F0F;
}

.perc{
    color:#000;
    background-color:#FF0;
}

.comment{
    color:silver;
}

p{
    color: black;
    font-style:italic;
}

<html>
    <head>
        <title>
            test
        </title>
    </head>
    <body>
This is a way to calculate similarity % between two strings based on <a href="https://en.wikipedia.org/wiki/Levenshtein_distance">Levenshtein distance:</a><p><p><br>
    </body>
</html>

function similarity(s1, s2) {
  var longer = s1;
  var shorter = s2;
  if (s1.length < s2.length) {
    longer = s2;
    shorter = s1;
  }
  var longerLength = longer.length;
  if (longerLength === 0) {
    return 1.0;
  }
  return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength);
}

function editDistance(s1, s2) {
  s1 = s1.toLowerCase();
  s2 = s2.toLowerCase();

  var costs = new Array();
  for (var i = 0; i <= s1.length; i++) {
    var lastValue = i;
    for (var j = 0; j <= s2.length; j++) {
      if (i == 0)
        costs[j] = j;
      else {
        if (j > 0) {
          var newValue = costs[j - 1];
          if (s1.charAt(i - 1) != s2.charAt(j - 1))
            newValue = Math.min(Math.min(newValue, lastValue),
              costs[j]) + 1;
          costs[j - 1] = lastValue;
          lastValue = newValue;
        }
      }
    }
    if (i > 0)
      costs[s2.length] = lastValue;
  }
  return costs[s2.length];
}

var $str1="Marco Antonio Piñero Lopez";
var $str2="marco antonio Pineda lópez";

var perc=Math.round(similarity($str1,$str2)*10000)/100;

var txt="The strings: <span class=\"str\">'"+$str1+"'</span> and <span class=\"str\">'"+$str2+"'</span>";
  txt+="<br>are similar <span class=\"perc\">"+perc+"%</span>";
document.write(txt);

$> pdfinfo document.pdf | grep "Pages\:" | grep -o "[0-9]"
.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; 
  white-space: nowrap;
}
.wallpaper {
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
type="text" name="" id="today_date" onblur=" type='text'"
                    onfocus= "type='date'"
/* put in functions.php */
function register_navwalker() {
   require_once get_template_directory() . '/wp-bootstrap5-walker.php';
  //or place code directly in functions.php
}
add_action( 'after_setup_theme', 'register_navwalker' );


/* place in header of theme */
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="main-menu">
            <?php
            wp_nav_menu(array(
                'theme_location' => 'main-menu',
                'container' => false,
                'menu_class' => '',
                'fallback_cb' => '__return_false',
                'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                'depth' => 2,
                'walker' => new bootstrap_5_wp_nav_menu_walker()
            ));
            ?>
        </div>
    </div>
</nav>

  
 /* Nav walker menu code - place in file or functions.php */
  
 <?php
// bootstrap 5 wp_nav_menu walker
class bootstrap_5_wp_nav_menu_walker extends Walker_Nav_menu
{
  private $current_item;
  private $dropdown_menu_alignment_values = [
    'dropdown-menu-start',
    'dropdown-menu-end',
    'dropdown-menu-sm-start',
    'dropdown-menu-sm-end',
    'dropdown-menu-md-start',
    'dropdown-menu-md-end',
    'dropdown-menu-lg-start',
    'dropdown-menu-lg-end',
    'dropdown-menu-xl-start',
    'dropdown-menu-xl-end',
    'dropdown-menu-xxl-start',
    'dropdown-menu-xxl-end'
  ];

  function start_lvl(&$output, $depth = 0, $args = null)
  {
    $dropdown_menu_class[] = '';
    foreach($this->current_item->classes as $class) {
      if(in_array($class, $this->dropdown_menu_alignment_values)) {
        $dropdown_menu_class[] = $class;
      }
    }
    $indent = str_repeat("\t", $depth);
    $submenu = ($depth > 0) ? ' sub-menu' : '';
    $output .= "\n$indent<ul class=\"dropdown-menu$submenu " . esc_attr(implode(" ",$dropdown_menu_class)) . " depth_$depth\">\n";
  }

  function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
  {
    $this->current_item = $item;

    $indent = ($depth) ? str_repeat("\t", $depth) : '';

    $li_attributes = '';
    $class_names = $value = '';

    $classes = empty($item->classes) ? array() : (array) $item->classes;

    $classes[] = ($args->walker->has_children) ? 'dropdown' : '';
    $classes[] = 'nav-item';
    $classes[] = 'nav-item-' . $item->ID;
    if ($depth && $args->walker->has_children) {
      $classes[] = 'dropdown-menu dropdown-menu-end';
    }

    $class_names =  join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
    $class_names = ' class="' . esc_attr($class_names) . '"';

    $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
    $id = strlen($id) ? ' id="' . esc_attr($id) . '"' : '';

    $output .= $indent . '<li ' . $id . $value . $class_names . $li_attributes . '>';

    $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
    $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
    $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
    $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';

    $active_class = ($item->current || $item->current_item_ancestor || in_array("current_page_parent", $item->classes, true) || in_array("current-post-ancestor", $item->classes, true)) ? 'active' : '';
    $nav_link_class = ( $depth > 0 ) ? 'dropdown-item ' : 'nav-link ';
    $attributes .= ( $args->walker->has_children ) ? ' class="'. $nav_link_class . $active_class . ' dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : ' class="'. $nav_link_class . $active_class . '"';

    $item_output = $args->before;
    $item_output .= '<a' . $attributes . '>';
    $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
  }
}
// register a new menu
register_nav_menu('main-menu', 'Main menu');
<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
<link rel="stylesheet" href="mystyle.css">
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>

The content of the document......
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
</body>
</html>
<style>
/* hide focus outline on lockscreen */
.sqs-slide-wrapper[data-slide-type="lock-screen"] .password-input.focus-visible {
  outline:none!important; 
}
  .group-password  * {
    outline: none !important;
}
</style>
.hero-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

*Always set a *background-color* to be used if the image is *unavailable*.

body {
  background-image: url("img_tree.gif"), url("paper.gif");
  background-color: #cccccc;
}

*By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
padding before border. 
margin after border
document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {

	document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){

		everyitem.addEventListener('mouseover', function(e){

			let el_link = this.querySelector('a[data-bs-toggle]');

			if(el_link != null){
				let nextEl = el_link.nextElementSibling;
				el_link.classList.add('show');
				nextEl.classList.add('show');
			}

		});
		everyitem.addEventListener('mouseleave', function(e){
			let el_link = this.querySelector('a[data-bs-toggle]');

			if(el_link != null){
				let nextEl = el_link.nextElementSibling;
				el_link.classList.remove('show');
				nextEl.classList.remove('show');
			}


		})
	});

}
// end if innerWidth
}); 
// DOMContentLoaded  end
img {
	image-rendering: -moz-crisp-edges;
	/* Firefox */
	image-rendering: -o-crisp-edges;
	/* Opera */
	image-rendering: -webkit-optimize-contrast;
	/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
	/* IE (non-standard property) */
}
/* MOD SAFARI MEDIA QUERIES ONLY */
/* -------------------- */

/* SAFRI ONLY */
@supports selector(:nth-child(1 of x)) {
/* --- */
	/* h1  {
			display: none;
		}  */
/* --- */
}
/* MOD SAFARI MEDIA QUERIES ONLY + NESTED MEDIA QUERIES */
@media not all and (min-resolution:.001dpcm) {
	/* --- */

	@media only screen and (min-width: 1200px) {
		/* --- */

		@supports (-webkit-appearance:none) {
			/* --- */

			.display-5 {
				padding-top: 140px !important;

			}

			/* --- @media */
		}

		/* --- supports */
	}

	/* SAFARI  */
	@media only screen and (min-width: 815px) and (max-width: 1199px) {

		/* --- */
		@supports (-webkit-appearance:none) {

			/* --- */
			.display-5 {
				padding-top: 90px !important;

			}

			/* --- @media */
		}

		/* --- supports */
	}


	/* IPAD LANDSCAPE  */
	@media only screen and (min-width: 1022px) and (max-width: 1024px) and (orientation: landscape) {

		/* --- */
		@supports (-webkit-appearance:none) {

			/* --- */
			.display-5 {
				padding-top: 50px !important;

			}

			/* --- @media */
		}

		/* --- supports */
	}


	/* --- */
}
:root {
  --spacer-p: 20vw;
}

.pt-8 {
  padding-top: calc(var(--spacer-p) /4) !important;
}
EDITOR X from 50px to 150px

	:root {
			--maxViewportSize: 1920;
			--minViewportSize: 320;
		}

font-size: calc(50px + (150 - 50) * ((100vw - 320 * 1px) / (1920 - 320)));

font-size: calc(50px + (150 - 50) * ((100vw - var(--minViewportSize) * 1px) / (var(--maxViewportSize) - var(--minViewportSize))));



font-size: calc(1.625rem + 7.5vw);

the font-size will be at most 36px, but will decrease to 3vw if the the viewport is less than 1200px
font-size: min(3vw, 36px);


font-size: max(10vw, 60px);

I want the type to go between being 16px on a 320px screen to 22px on a 1000px screen.
font-size: min(max(16px, 4vw), 22px);

eans font-size:3.5vw, max-font-size:40px, min-font-size:16px
font-size: min(max(3.5vw, 16px), 40px);


font-size: clamp(16px, 4vw, 22px);


clamp() allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.
font-size: clamp(100%, 1rem + 2vw, 24px);
font-size: clamp(16px, 3vw, 32px);
font-size: clamp(12px, 2vw, 20px);

.accordion-item {
	background-color: #f4f4f6;
}

.accordion-header {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.accordion-header::before {
	content: '+';
	font-size: 3.5rem;
	margin-right: 20px;
}

.active-header::before {
	content: '-';
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: 1s ease max-height;
	font-size: 1.5rem;
}
const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach((accordionHeader) => {
	accordionHeader.addEventListener('click', () => {
		accordionContent = accordionHeader.nextElementSibling;
		const height = accordionContent.scrollHeight;

		accordionHeader.classList.toggle('active-header');

		if (accordionHeader.classList.contains('active-header')) {
			accordionContent.style.maxHeight = `${height}px`;
		} else {
			accordionContent.style.maxHeight = '0px';
		}
	});
});
<!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>
        input[type="checkbox"]{
            accent-color: rgb(51, 255, 0);
        }
        input[type="radio"]{
            accent-color: red;
        }
        input[type="range"]{
            accent-color: red;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="test" id="test">
    <input type="radio" name="test1" id="test1">
    <input type="range" name="test2" id="test2">
    <input type="date" name="test3" id="test3">
</body>
</html>
<!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>
        input[type="checkbox"]{
            accent-color: rgb(51, 255, 0);
        }
        input[type="radio"]{
            accent-color: red;
        }
        input[type="range"]{
            accent-color: red;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="test" id="test">
    <input type="radio" name="test1" id="test1">
    <input type="range" name="test2" id="test2">
    <input type="date" name="test3" id="test3">
</body>
</html>
button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

//dont show scrollbar when content is too long
textarea {
  overflow: auto;
}
button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
}
$accent: hsl(250 50% 50%);
$accent-overlay: color.change($accent, $alpha: 0.1);
$accent-darkened: color.scale($accent, $lightness: -30%);
type="text" name="" id="today_date" onblur=" type='text'"
                    onfocus= "type='date'"
<!DOCTYPE html>
<html>
  <head>
    <style>
      .meme_container {
        position: relative;
      }
      .meme_container img {
        z-index: 1;
      }
      .meme_container .top_meme {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }
      .meme_container .bottom_meme {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
      }
    </style>
  </head>

  <body>
    <div class="meme_container">
      <img src="http://i.imgflip.com/1bij.jpg" />
      <p class="top_meme">This is a caption 1</p>
      <p class="bottom_meme">This is a caption 2</p>
    </div>
  </body>
</html>
.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 
.flexwithgap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}
<style>
    /* Universal Box Sizing */
      
    *, *:before, *:after {
      box-sizing: border-box;
    }
      
    /* Universal Box Sizing with Inheritance */
      
    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
</style>
@media only screen and (max-width: 48em) {

}
   <div>
        <div class="rounded-circle test position-relative" style="width: 150px; height:150px; overflow: hidden;">
            <img id="imguplod" width="100%" src="./images/Ellipse 523.png" alt="">
            <label class="cam_img" for="imgInp">
                <img  width="100%" src="./images/group.png" alt="">
            </label>
            <input type="file" name="logo" id="imgInp" style="display: none;" accept="image/*">
        </div>

        <script>
            imgInp.onchange = evt => {
              const[file] = imgInp.files;
              if (file) {
                imguplod.src = URL.createObjectURL(file);
              }
            }
          </script>
        
      </div>
body{
    background-image: url(https://images.unsplash.com/photo-1518155317743-a8ff43ea6a5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    width: 100vw;
}
//HTML
<div class='dropdown'>
          <Link id='product' className='every' to='/products'>OUR PRODUCTS</Link>
           <div class='dropdown-content'>
            <Link to='autocadd'>AutoCadd</Link>
            <Link to='techset'>Techset</Link>
            <Link to='Endorse'>Endorse</Link>
           </div>
          </div>

//CSS

.dropdown{
    position: relative;
    display: inline-block;
}
.dropdown-content{
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content>*{
 color: black;
 padding: 12px 6px;
text-decoration: none;
 display: block;
}

.dropdown:hover .dropdown-content{
    display: block;
}
.dropdown-content>*:hover{
    background-color: #ddd;
}
  <div class="ps-4 mt-2 row">
            <div class=" col-md-6 shadow p-3 mb-5 bg-body rounded">
              <h6 class="TEXT-COLOR">Uplode Document</h6>
              <div class="d-flex gap-1 align-items-center">
                <input class="d-none" type="file" name="" id="imgInp12">
                <div class="">
                  <label class=" btn fs-small nav-btn-bg" for="imgInp12">Upload Document</label>
                </div>
                <div class="">
                  <input class=" form-control p-1" id="upfileName" readonly/>
                </div>
              </div>
            </div>
          </div>
          <script>
            imgInp12.onchange = (evt) => {
              const [file] = imgInp12.files;
              if (file) {
                upfileName.value = file.name;
              }
            };
          </script>
.box.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="main ps-4 py-2">
        <!-- Another variation with a button -->
        <div class="input-group">
          <input type="Search" class=" search_border form-control" placeholder="Search Property">
          <div class="input-group-append">
            <button class="btn  search_btn" type="button"> 
              <i class="fa fa-search"></i>
              Search
            </button>
          </div>
        </div>
      </div>



.main {
  width: 50%;
}

.search_border{
  border: 1px solid var(--yellow);
}

.search_btn{
  background-color: #FA8103;
  color: white !important;
  outline: none;
  border-radius: 0px 10px 10px 0px;
  padding: 0.475rem 0.78rem;
}
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}
/**
*
* Section: Logos
*
*/

jQuery(document).ready( $ => {

  // Init
  initLogosSlider('.section-logos__list', '.section-logos__listItem', '.section-logos__wrapper');

  $(window).on('resize', debounce(function() {
    initLogosSlider('.section-logos__list', '.section-logos__listItem', '.section-logos__wrapper');
  }));

  // Init functions
  function initLogosSlider(sliderClassName, slidesClassName, sliderWrapperClassName) {
    
		if (!$(sliderClassName).length) return;

    // For each slider
    $(sliderClassName).each( function() {
      
      let slider = $(this);
      let wrapper = $(slider).parents(sliderWrapperClassName); // Slider wrapper

      if ( slidesWidthSum(slider) <= $(slider).outerWidth() && $(slider).hasClass("slick-initialized")) {
        $(wrapper).removeClass('is-slider');
        $(slider).slick("unslick");
      }
  
      if ( slidesWidthSum(slider) > $(slider).outerWidth() ) {
        if (!$(slider).hasClass("slick-initialized")) {
          
          $(wrapper).addClass('is-slider');

          let logosTotalCount = $(slider).find(slidesClassName).length;
          let defaultSlides1200 = 5;
          let defaultSlides992 = 4;
          let defaultSlides768 = 2;
          let defaultSlides561 = 1;

          if (logosTotalCount <= defaultSlides1200) {
            defaultSlides1200 -= 1;
          }

          if (logosTotalCount <= defaultSlides992) {
            defaultSlides992 -= 1;
          }

          if (logosTotalCount <= defaultSlides768) {
            defaultSlides768 -= 1;
          }
  
          $(slider).slick({
            infinite: true,
            slidesToShow: 6,
            slidesToScroll: 6,
            dots: true,
            arrows: true,
            autoplay: false,
            prevArrow: $(wrapper).find('.section-logos__arrow.slick-prev')[0],
            nextArrow: $(wrapper).find('.section-logos__arrow.slick-next')[0],
            responsive: [
              {
                breakpoint: 1200,
                settings: {
                  slidesToShow: defaultSlides1200,
                  slidesToScroll: defaultSlides1200,
                }
              },
              {
                breakpoint: 992,
                settings: {
                  slidesToShow: defaultSlides992,
                  slidesToScroll: defaultSlides992,
                }
              },
              {
                breakpoint: 768,
                settings: {
                  slidesToShow: defaultSlides768,
                  slidesToScroll: defaultSlides768,
                }
              },
              {
                breakpoint: 561,
                settings: {
                  slidesToShow: defaultSlides561,
                  slidesToScroll: defaultSlides561,
                }
              },
            ]
          });
  
        }
      }

    });

    // Helper
    function slidesWidthSum(slider) {
      let slidesWidth = 0;
      let totalGap = parseInt( $(slider).css('gap') ) * ( $(slider).find(`${slidesClassName}:not(.slick-cloned)` ).length - 1);

      $(slider).find(`${slidesClassName}:not(.slick-cloned)`).each(function() {
        slidesWidth += $(this).outerWidth();
      });

      return slidesWidth + totalGap;
    }
	}

  // Helper
  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func, 150, event);
    };
  }
})



/**
 *
 * Section: Logos
 *
 */

.section-logos {
	padding: 70px 0;
  background-color: var(--bg-color);

  &, &[data-theme="white"] {
		--bg-color: #fff;
	}

	&[data-theme="grey"] {
		--bg-color: rgba(240, 243, 249, 0.5);
	}

	.container {
    @media (min-width: 1200px) {
      width: 1118px;
    }

    @media (min-width: 1440px) {
      width: 1278px;
    }

    @media (min-width: 1600px) {
      width: 1336px;
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      width: 988px;
    }

		@media (max-width: 767px) {
      max-width: 500px;
			padding-left: 20px;
			padding-right: 20px;
		}
	}

  &__inner {
    max-width: 1078px;
    margin: 0 auto;

    @media (max-width: 1199px) {
      max-width: 896px;
    }

    @media (max-width: 560px) {
      max-width: calc(100% - 70px);
    }
  }

  &__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 37px;

    border-bottom: 1px solid #D4D3D7;

    @media (max-width: 767px) {
      flex-direction: column;
      padding-bottom: 32px;
      text-align: center;
    }
  }

	&__title {
		margin-top: 0;
		margin-bottom: 0;

		font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    color: var(--color-dark2);
	}

  &__wrapper {
    padding-top: 40px;
    position: relative;

    @media (max-width: 767px) {
      padding-top: 32px;
    }

    &.is-slider {
      .section-logos__list {
        display: block;

        &Item {
          margin: 0 17px;
          min-width: unset;
        }
      }

      .section-logos__arrow {
        display: block;
      }
    }

    .slick-dots {
      --slick-dots-size: 12px;
      --slick-dots-background: #D4D3D7;
      --slick-dots-background-active: var(--color-dark2);
      --slick-dots-margin: 0 8px;
    }
  }

  &__arrow {
    --arrow-size: 32px;
    --arrow-offset: 35px;

    width: var(--arrow-size);
    height: var(--arrow-size);
    display: none;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    @media (max-width: 1279px) {
      --arrow-offset: 15px;
    }

    @media (max-width: 1199px) {
      --arrow-offset: 10px;
    }
    
    &.slick-prev {
      right: 100%;
      margin-right: var(--arrow-offset);
      background-image: url('../images/sections/logos/arrow-prev.svg');
    }

    &.slick-next {
      left: 100%;
      margin-left: var(--arrow-offset);
      background-image: url('../images/sections/logos/arrow-next.svg');
    }
  }

	&__list {
		display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 35px;

		&Item {
      --logo-wrapper-width: 150px;
      --logo-wrapper-height: 50px;

			min-width: var(--logo-wrapper-width);
			min-height: var(--logo-wrapper-height);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
      }
    }
	}
}

<section class="section-logos" data-theme="grey">
      <div class="container">
        <div class="section-logos__inner">
          <div class="section-logos__header">
            <h2 class="section-logos__title">Trusted by 1,800+ customers</h2>

            <a href="#" class="moreButton">
              Learn More
              <span class="moreButton-icon">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 6H10" stroke="var(--more-button-color)" stroke-width="4" stroke-linecap="round"/>
                  <path d="M8 2L12 6L8 10" stroke="var(--more-button-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
            </a>
          </div>

          <div class="section-logos__wrapper">
            <button class="section-logos__arrow slick-prev"></button>
            <button class="section-logos__arrow slick-next"></button>

            <div class="section-logos__list">
              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/payoneer.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/masterclass.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/monday.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/lufthansa.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/adobe.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/capgemini.svg" alt="">
              </div>

              <div class="section-logos__listItem">
                <img src="./assets/images/sections/logos/capgemini.svg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

input[type=number] {
  -moz-appearance: textfield;
}
div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}
/*HTML CODE*/
 
<input class="slider m-b-1" 
type="range" min="0" 
max="100" step="1" 
value="40" />
 /* JavaScript */
  
 
const slider = document.querySelector(".slider");
 
slider.addEventListener("input", () => {
updateSlider();
});
 
const updateSlider = function () {
const backgroundPercentage =
((slider.value - slider.min) / (slider.max - slider.min)) * 100;
const backgroundColor = `linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) ${backgroundPercentage}%, var(--success-light) ${backgroundPercentage}%, var(--success-light) 100%)`;
slider.style.background = backgroundColor;
};
 
updateSlider();
 <!-- jQuery library -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

<div class="d-flex justify-content-center align-items-center p-1">
        <div>
          <i class="icon bi bi-bell" id="bell"></i>
          <div class="notifications " id="box">
            <h2>Notifications - <span>2</span></h2>
            <div class="notifications-item">
              <div class="text">
                <p>Samso Nagaro Like your home work</p>
              </div>
            </div>
            <div class="notifications-item">
              <div class="text">
                <p>+20 vista badge earned</p>
              </div>
            </div>
          </div>
        </div>

          <script>
            $(document).ready(function(){
        
            var down = false;
            
            $('#bell').click(function(e){
              
                var color = $(this).text();
                if(down){
                    
                    $('#box').css('height','0px');
                    $('#box').css('opacity','0');
                    down = false;
                }else{
                    
                    $('#box').css('height','auto');
                    $('#box').css('opacity','1');
                    down = true;
                    
                }
                
            });
                
                });
          </script>

          <style>
            .icon {
              cursor: pointer;
              margin-right: 5px;
              /* line-height: 60px; */
            }
            .icon span {
              background: #f00;
              padding: 7px;
              border-radius: 50%;
              color: #fff;
              vertical-align: top;
              /* margin-left: -25px; */
            }
            .icon img {
              display: inline-block;
              width: 26px;
              margin-top: 4px;
            }
            .icon:hover {
              opacity: 0.7;
            }
            .logo {
              flex: 1;
              margin-left: 50px;
              color: #eee;
              font-size: 20px;
              font-family: monospace;
            }
            .notifications {
              width: 300px;
              height: 0px;
              opacity: 0;
              position: absolute;
              top: 63px;
              right: 62px;
              border-radius: 5px 0px 5px 5px;
              background-color: #fff;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
               0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }
            .notifications h2 {
              font-size: 14px;
              padding: 10px;
              border-bottom: 1px solid #eee;
              color: #999;
            }
            .notifications h2 span {
              color: #f00;
            }
            .notifications-item {
              display: flex;
              border-bottom: 1px solid #eee;
              padding: 6px 9px;
              margin-bottom: 0px;
              cursor: pointer;
            }
            .notifications-item:hover {
              background-color: #eee;
            }
            .notifications-item img {
              display: block;
              width: 50px;
              height: 50px;
              margin-right: 9px;
              border-radius: 50%;
              margin-top: 2px;
            }
            .notifications-item .text h4 {
              color: #777;
              font-size: 16px;
              margin-top: 3px;
            }
            .notifications-item .text p {
              color: #aaa;
              font-size: 12px;
            }
          </style>
        <div>
          <span class="text-white fs-small p-0">Diane Ward</span>
        </div>
        <div class="p-3">
          <img
            src="./asset/Ellipse 461.svg"
            alt="user-icon"
            style="width: 2.5rem"
          />
        </div>
      </div>
/***************************************************** 
*  Main                                              *
******************************************************/
 
 
html,
body {
    height: 100%;
}
 
html {
  scroll-behavior: smooth;
}
 
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
 
::selection {
	background-color: var(--primary);
	color: #fff;
}
 
 
/* ----- Inline Links + Menu Links Hover Animation*/
.ct-text-block a, .ct-div-block>a, .table--contact a,
.widget_nav_menu a, .oxy-mega-dropdown_link,
.testimonial--inner .ct-link-text, #cff a, .inline-link {
	position: relative; white-space: nowrap; /*padding-bottom: 1px;*/}
 
.ct-text-block a:hover, .ct-div-block>a:hover, .table--contact a:hover,
.widget_nav_menu a:hover, .oxy-mega-dropdown_link:before,
.testimonial--inner .ct-link-text:hover, #cff a:hover, .inline-link:hover
{text-decoration: none;}
 
.ct-text-block a:before, .ct-div-block>a:before, .table--contact a:before,
.widget_nav_menu a:before, .oxy-mega-dropdown_link:before,
.testimonial--inner .ct-link-text:before, #cff a:not(.cff-load-more):before,
.inline-link:before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--accent);
	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform 0.3s ease-in-out;
}
 
.footer--contact a, #footer .widget_nav_menu a,
.testimonial--inner .ct-link-text, #footer .inline-link {padding-bottom: 1px;}
 
.footer--contact a:before, #footer .widget_nav_menu a:before,
.testimonial--inner .ct-link-text:before, #footer .inline-link
{background-color: #fff;}
 
.ct-text-block a:hover:before, .ct-div-block>a:hover:before, .table--contact a:hover:before,
.widget_nav_menu a:hover:before, .oxy-mega-dropdown_link:hover:before,
.testimonial--inner .ct-link-text:hover:before, #cff a:hover:before, .inline-link:hover:before {
	transform: scaleX(1);
	transform-origin: bottom left;
}
 
#nav-main .oxy-mega-dropdown_link-current:before {transform: scaleX(1);}
 
@media screen and (max-width: 992px) {
	.oxy-mega-dropdown_link:hover:before {
	transform: scaleX(0);
	}
}
 
/* ----- Wordbreak + Hyphenation */
.hyphenate /*.ct-text-block, .ct-headline*/ {
 
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
 
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
 
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
 
}
<button class="btn-57">Button</button>


.btn-57,
.btn-57 *,
.btn-57 :after,
.btn-57 :before,
.btn-57:after,
.btn-57:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-57 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-57:disabled {
  cursor: default;
}
.btn-57:-moz-focusring {
  outline: auto;
}
.btn-57 svg {
  display: block;
  vertical-align: middle;
}
.btn-57 [hidden] {
  display: none;
}
.btn-57 {
  background: none;
  border: 3px solid;
  border-radius: 999px;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 20px 60px;
  position: relative;
  text-transform: uppercase;
}
.btn-57:before {
  background: #fff;
  border-radius: 999px;
  content: "";
  inset: 0;
  position: absolute;
  transform: translate(10px, 10px);
  transition: transform 0.2s;
  z-index: -1;
}
.btn-57:hover:before {
  transform: translate(0);
}
.wrapper {
  display: grid;
  grid-template-columns:
    [full-start] 1fr [wrapper-start]
    minmax(0, 70rem) [wrapper-end] 1fr [full-end];

  /* Optional gap */
  column-gap: var(--pad, 1rem);
}

.wrapper > * {
  grid-column: wrapper;
}

.wrapper > .full-width {
  grid-column: full;
}
/* listing woo*/
ul.products li.product:hover .button{
	color:white;
	background:#0C3734;
}

ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2{
	margin-bottom:25px;
}

body.static-cta-buttons .main-navigation ul.menu li.menu-item-has-children.full-width>.sub-menu-wrapper li a.button, body.static-cta-buttons ul.products li.product .added_to_cart, body.static-cta-buttons ul.products li.product .button{
	border-radius:100px;
}

/* listing ewid*/

html#ecwid_html body#ecwid_body .ec-minicart__title, html#ecwid_html body#ecwid_body .ec-minicart__count, html#ecwid_html body#ecwid_body .ec-minicart__counter, html#ecwid_html body#ecwid_body .ec-minicart__counter::after, html#ecwid_html body#ecwid_body .ec-minicart__subtotal, html#ecwid_html body#ecwid_body .ec-minicart__link{
	background:#F22C96 !important;
	border-radius:500px;
}

.ecsp-title{
    font-size: 17px !important;
}
html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control:not(.form-control--loading) .form-control__button{
    background: #ECFAF9!important;
    color:#162936!important;
border-radius:50px;
padding-top:15px;
padding-bottom:15px;
}
html#ecwid_html body#ecwid_body .ec-size .ec-store .form-control:not(.form-control--loading) .form-control__button:hover{
 background: #0C3734!important;
color:white!important;
}


.gwt-Image{
		width:100% !important;
}

.ecsp-productBrowser-price{
	color:black !important;
}
.ecwid-btn{
background: #ECFAF9!important;
color:black !important;
	border-radius:100px !important;
}
.ecwid-btn:hover{
	background: #0C3734!important;
	color:white !important;
}
html#ecwid_html body#ecwid_body .ecsp .ecwid-btn--primary{
	padding: 8px 5px !important;
	min-width: 132px !important;
		font-size:16px !important;
}
	
	html#ecwid_html body#ecwid_body .ecsp.ecsp-SingleProduct-v2{
	min-width: 150px !important;
		min-height: 357px !important;
}
.ecsp-title{
font-size:17px !important;
	font-weight:bold !important;
	min-height:50px;
}
}
@media (max-width:800px){
html#ecwid_html body#ecwid_body .ec-size .ec-store .grid__products[data-cols="2"] .grid-product:nth-child(n+1){
	width:25% !important;}
.ecsp-title{
font-size:13px !important;
}
}
/*padding selectivo para los responsive*/
@media (max-width:1350px){
	.paddingselectivo{
		padding-left: 50px;
		padding-right: 50px}}
@media (max-width:800px){
	.paddingselectivo{
		padding-left: 10px;
		padding-right: 10px}}
<!DOCTYPE html>
<html>
<head>
<style>
span {
  background-color: yellow;  
}

span.ex1 {
  min-width: 500px;
  display: inline-block;
}
</style>
</head>
<body>
<h1>The min-width Property</h1>

<h2>min-width: none (default):</h2>
<span>Lorem ipsum dolor sit amet...</span>

<h2>min-width: 500px:</h2>
<span class="ex1">Lorem ipsum dolor sit amet...</span>

</body>
</html>
<body>
<h1>The min-height Property</h1>

<h2>min-height: none (default):</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

<h2>min-height: 200px:</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

</body>


<style>
p {
  background-color: yellow;  
}

p.ex1 {
  min-height: 100px;
}
</style>
/* ----- Wordbreak + Hyphenation */
.dont-break-out /*.ct-text-block, .ct-headline*/ {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}
 box-shadow: 0px 0px 20px 10px lightblue;

box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
.flexbox {
  display: flex;
  margin:10px;
}
.red {
  background: red;
}   
.blue {
  background: blue;
  flex-shrink:0;
}
{display: grid; align-items: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}

//For a min value of 240px and a max value of the available width of container, i.e. 1fr
#textexample {
  background: -webkit-linear-gradient(203.89deg, #FF0000 15.35%, #FF9900 99.34%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}
.nav-link{
    font-size: 1.5rem;
    color: rgb(26, 26, 26);
    text-decoration: none;
    position: relative;
 }

 .nav-link::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: hsl(331, 100%, 50%);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 250ms ease-in;
 }

 .nav-link:hover::after{
    transform: scaleX(1);
    transform-origin: left;
 }
img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}
select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
}
/* Background styles */
body {
    background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100');
    background-position: center;
}


/* Glassmorphism card effect */
.card {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}


/* Generated by https://generator.ui.glass/ */
/* define width, and height for object-fit to work. Aspect.ratio can be 1.0 or 16 / 9 */ 

/* great for cards with image in top */
img {
width: 100%;
height: auto;
object-fit: cover; /*can be cover, contain, fill, scale-down*/
aspect-ratio: 1.0;
}

/* great for logos etc. */
img {
width: 100%;
height: auto;
object-fit: scale-down; /*can be cover, contain, fill, scale-down*/
aspect-ratio: 3 / 2;
padding: 1rem;
}
.projects .content .box
{
    width: 340px;
    margin: 30px;
    padding: 20px;
    background: #f6efe8;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 2px 20px rgba(0,0,0,0.1),  0px 2px 20px rgba(0,0,0,0.1);

}
.projects .content .box h4
{
    color: #000;
    font-size: 20px;
    margin-bottom: 20px;
}
.projects .content .box p
{
    color: #555;
    text-indent: 50px;
}
.projects .content .box img {
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
}
.projects-title {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 100px;
}
.projects-title h2{
    color: #000;
    font-size: 40px;
}
.projects .content
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 40px;
    margin-bottom: 40px;

}
<div class="content">
   	<div class="box">
        <img src="photos/[yourphoto]">
        <h4>Title</h4>
        <p>Project Caption</p>
    </div>
   	<div class="box">
        <img src="photos/[yourphoto]">
        <h4>Title</h4>
        <p>Project Caption</p>
    </div>
   	<div class="box">
        <img src="photos/[yourphoto]">
        <h4>Title</h4>
        <p>Project Caption</p>
    </div>
   	<div class="box">
        <img src="photos/[yourphoto]">
        <h4>Title</h4>
        <p>Project Caption</p>
    </div>
   	<div class="box">
        <img src="photos/[yourphoto]">
        <h4>Title</h4>
        <p>Project Caption</p>
    </div>
</div>
<section class="projects" id="projects">
        <div class="projects-title">
            <h2>Projects</h2>
        </div>
</section>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.interest-container {
    max-height: 400px;
    width: 400px;
    box-shadow: 0px 2px 20px rgba(0,0,0,0.1),  0px 2px 20px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 120px; */
}
.interest-container img {
    width: 400px;
    height: 400px;
}
.about {
    margin-top: 90px;
    display: flex;
    flex-direction: row;
    min-height: 80vh;
    justify-content: space-evenly
}
.about-text-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    width: 40%;
}
.about-text-container h2 {
    color: #000;
    font-size: 40px;
    margin-top: 10px;
}
.about-text-container p {
    color: #555;
    text-indent: 50px;
    font-size: 16px;
    font-weight: 400;
    margin-top: 10px;
}
<section class="about" id="about">
  <div class="about-text-container">
     <!-- text -->
  </div>
  <div class="interest-container">
      <img src="photos/devices.jpg">
  </div>
</section>
<section class="about" id="about">
	<div class="about-text-container">
      <h2>About Me</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
      	incididunt ut labore et dolore magna aliqua. Viverra orci sagittis eu volutpat odio 
      	facilisis mauris sit. Sed viverra tellus inhac habitasse platea dictumst vestibulum 		rhoncus. Tristique nulla aliquet enim tortor. Sed pulvinar proin gravida hendrerit. 		Lorem ipsum dolor sit amet. Lectus magna fringilla urna porttitor rhoncus. Tellus
        orci ac auctor augue. Sed enim ut sem viverra. Morbi quis commodo odio aenean. 			Convallis posuere morbi leo urna molestie at.
      </p>
	</div>
    <div class="interest-container">
        <img src="photos/devices.jpg">
    </div>
</section>
<section class="about" id="about">
	<div class="about-text-container">
      <h2>About Me</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
      	incididunt ut labore et dolore magna aliqua. Viverra orci sagittis eu volutpat odio 
      	facilisis mauris sit. Sed viverra tellus inhac habitasse platea dictumst vestibulum 		rhoncus. Tristique nulla aliquet enim tortor. Sed pulvinar proin gravida hendrerit. 		Lorem ipsum dolor sit amet. Lectus magna fringilla urna porttitor rhoncus. Tellus
        orci ac auctor augue. Sed enim ut sem viverra. Morbi quis commodo odio aenean. 			Convallis posuere morbi leo urna molestie at.
      </p>
	</div>
    <div class="intrest-container">
        <img src="photos/devices.jpg">
    </div>
</section>
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.adj-container {
    width: 100%;

}
.adj {
    position: relative;
    display: flex;
    margin-top: 30px;
    justify-content: space-evenly;

}
.adj li {
    list-style: none;
    margin-right: 30px;
    font-size: 20px;
    color: #555;
    font-weight: 200;
}
<div class="adj-container">
   <ul class="adj">
      <li>Thoughtful</li>
      <li>Creative</li>
      <li>Passionate</li>
      <li>Driven</li>
      <li>Intelligent</li>
   </ul>
</div>
.text-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.text-container h2{
    color: #000;
    font-size: 50px;
}

.text-container p{
    color: #555;
    font-size: 30px;
    font-weight: 200;
}
.card-1
{
    min-height: 70vh;
    width: 100%;
    background:url(photos/banner4.png);
    box-shadow: 0px 2px 20px rgba(0,0,0,0.1),  0px 2px 20px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}
.banner
{
    position: relative;
    width: 100%;
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background: #f6efe8;
    flex-direction: column;
}
<section class="banner" id="banner">
    <div class="card-1">
        <div class="text-container">
            <h2>Hello, I'm [Your Name]</h2>
            <p>Welcome to my website.</p>
        </div>
    </div>
</section>
<header>
  <a href="#" class="logo"><span>M</span>y<span>W</span>ebsite</a>
    <ul class="navigation">
      <li><a href="#banner">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#activities" class="nav-btn">Activities</a></li>
    </ul>
</header>
<section class="banner" id="banner">
  <!-- landing content -->
</section>
#checkbox-2 {
  display: none;
}

#checkbox-1:checked ~ #checkbox-2 {
  display: block;
}
/* styling li elements in the header with the navigation and nav-btn classes */
header .navigation li .nav-btn 
{
    padding: 10px;
    background-color: #000;
    color: #fff;
}

/* styling li elements in the header with the navigation and nav-btn classes after hover action */
header .navigation li .nav-btn:hover
{
    background-color: #ff0157;
    color: #fff;
}
/* styling elements in the header with the navigation class (ul - unordered list) */
header .navigation
{
    position: relative;
    display: flex;
}

/* styling li(list) elements in the header with the navigation class (ul) */
header .navigation li
{
    list-style: none;
    margin-left: 30px;
}

/* styling links(a) in li(list) elements in the header with the navigation class (ul) */
header .navigation li a
{
    text-decoration: none;
    color: #000;
    font-weight: 300;
}

/* styling links(a) in li(list) elements in the header with the navigation class (ul) after hover action*/
header .navigation li a:hover
{
    color: #ff0157;
}
/* styling elements in the header with the logo class */
header .logo
{
  	/* font color black */
    color: #000;
    font-weight: 200;
    font-size: 30px;
    /* no link underline */
    text-decoration: none;
}

/* styling the span of elements in the header with the logo class */
header .logo span
{
    color: #ff0157;
    font-weight: 400;
    font-size: 30px;
    text-decoration: none;
}
.scanner-ui { display: none; }
.scanner-hide { visibility: visible; }

body.qrscanner { background-color: transparent; }
body.qrscanner .scanner-ui { display: block; }
body.qrscanner .scanner-hide { visibility: hidden; }
/*======= FONT-WEIGHT ======= */
.fw-light {
  font-weight: 300 !important;
}
.fw-normal {
  font-weight: 400 !important;
}
.fw-medium {
  font-weight: 500 !important;
}
.fw-semibold {
  font-weight: 600 !important;
}
.fw-bold {
  font-weight: 700 !important;
}
#wrapper {
    width: 300px; height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}
input[type=radio]:checked + label {
    color: #fff;
	background-color: hsl(217, 12%, 63%);
}
.document-toc-link.document-toc-link:not(.button)[aria-current]:not([aria-current=""]):not([aria-current=false]) {
  background-color: var(--background-toc-active);
  border-left: 2px solid var(--category-color);
  color: var(--text-primary);
  font-weight: 600;
}
.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}
    
.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

// Another One

.element {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: red;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    background-color: red;
    border-radius: 100%;
  }
  50% {
    background-color: orange;
  }
  100% {
    transform: scale(1.5);
    background-color: yellow;
  }
}

body,
html {
  height: 100%;
}

body {
body {
  display: grid;
  height: 100vh;
  place-items: center;
}

progress {
  accent-color: #30cc7e;
  place-self: center;
  width: clamp(300px, 60%, 850px);
}

.notice {
  background: #fff9c4;
  border-radius: 6px;
  padding: 0.5rem;
  text-align: center;
  width: clamp(300px, 60%, 850px);
}
html
<div class="input-group" style="top: 15px">
        <input type="text" id="name" required class="input" />
        <label for="name" class="input-label"> Email address </label>
</div>


css

.input-group {
  position: relative;
}
.input {
  padding: 10px;
  border: none;
  border-radius: 4px;
  font: inherit;
  color: #fff;
  background-color: transparent;
  outline: 2px solid #d1c5fc;
}
.input-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(10px, 10px);
  transition: transform 0.25s;
}
.input:focus + .input-label,
.input:valid + .input-label {
  transform: translate(10px, -14px) scale(0.8);
  color: #000;
  padding-inline: 5px;
  background: #fff;
}
.input:is(:focus, :valid) {
  outline-color: #b2a7d7;
}
p {
    display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
margin-left: calc( -50vw + 50% );
margin-right: calc( -50vw + 50% );
padding-left: calc( 50vw - 50% );
padding-right: calc( 50vw - 50% );
max-width: 100vw;
<!DOCTYPE html>
<head> 
<title>Start</title>
<link rel="stylesheet" href="film.css">
</head>
<html>
    <body>
        <div class="card"> 
            <h1>SV Codings</h1>
            <p1>HTML basics</p1> <br>
            <p2> DOCTYPE,<br>Head,<br>Title,<br>link CSS to HTML,<br>Body,<br>Div,<br>heading,<br>para,<br>class,<br>card, </p2>
        </div>
    </body>
</html>
[[ .card { 
    height: 100vh;
    width: cover;
    background-color: rgb(25, 219, 35);
    text-align: center;
}
h1{
    color: rgb(236, 234, 236);
} ]]
const reduceData = (data: any[], property: string) => {
  const result = data.reduce((acc, amount) => {
    return acc + Number(amount[property]);
  }, 0);
  return result;
};
<?php

$events_label_singular = tribe_get_event_label_singular();
$events_label_plural   = tribe_get_event_label_plural();

$event_id = get_the_ID();

?>

<div id="tribe-events-content" class="tribe-events-single">

	<p class="tribe-events-back">
		<a href="<?php echo esc_url( tribe_get_events_link() ); ?>"> <?php printf( '&laquo; ' . esc_html_x( 'All %s', '%s Events plural label', 'the-events-calendar' ), $events_label_plural ); ?></a>
	</p>

	<!-- Notices -->
	<?php tribe_the_notices() ?>

	<?php the_title( '<h1 class="tribe-events-single-event-title">', '</h1>' ); ?>

	<div class="tribe-events-schedule tribe-clearfix">
		<?php echo tribe_events_event_schedule_details( $event_id, '<h2>', '</h2>' ); ?>
		<?php if ( tribe_get_cost() ) : ?>
			<span class="tribe-events-cost"><?php echo tribe_get_cost( null, true ) ?></span>
		<?php endif; ?>
	</div>

	<!-- Event header -->
	<div id="tribe-events-header" <?php tribe_events_the_header_attributes() ?>>
		<!-- Navigation -->
		<nav class="tribe-events-nav-pagination" aria-label="<?php printf( esc_html__( '%s Navigation', 'the-events-calendar' ), $events_label_singular ); ?>">
			<ul class="tribe-events-sub-nav">
				<li class="tribe-events-nav-previous"><?php tribe_the_prev_event_link( '<span>&laquo;</span> %title%' ) ?></li>
				<li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>&raquo;</span>' ) ?></li>
			</ul>
			<!-- .tribe-events-sub-nav -->
		</nav>
	</div>
	<!-- #tribe-events-header -->

	<?php while ( have_posts() ) :  the_post(); ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<!-- Event featured image, but exclude link -->
			<?php echo tribe_event_featured_image( $event_id, 'medium', false ); ?>

			<!-- Event content -->
			<?php do_action( 'tribe_events_single_event_before_the_content' ) ?>
			<div class="tribe-events-single-event-description tribe-events-content">
				<?php the_content(); ?>
			</div>
			<!-- .tribe-events-single-event-description -->
			<?php do_action( 'tribe_events_single_event_after_the_content' ) ?>

			<!-- Event meta -->
			<?php do_action( 'tribe_events_single_event_before_the_meta' ) ?>
			<?php tribe_get_template_part( 'modules/meta' ); ?>
			<?php do_action( 'tribe_events_single_event_after_the_meta' ) ?>
		</div> <!-- #post-x -->
		<?php if ( get_post_type() == Tribe__Events__Main::POSTTYPE && tribe_get_option( 'showComments', false ) ) comments_template() ?>
	<?php endwhile; ?>

	<!-- Event footer -->
	<div id="tribe-events-footer">
		<!-- Navigation -->
		<nav class="tribe-events-nav-pagination" aria-label="<?php printf( esc_html__( '%s Navigation', 'the-events-calendar' ), $events_label_singular ); ?>">
			<ul class="tribe-events-sub-nav">
				<li class="tribe-events-nav-previous"><?php tribe_the_prev_event_link( '<span>&laquo;</span> %title%' ) ?></li>
				<li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>&raquo;</span>' ) ?></li>
			</ul>
			<!-- .tribe-events-sub-nav -->
		</nav>
	</div>
	<!-- #tribe-events-footer -->

</div><!-- #tribe-events-content -->
object-fit: cover;
/*Multiple Custom DIVI FONTS - In this Example INTER & Poppins 500 & 700*/
/* Get font & CSS from https://gwfh.mranftl.com/fonts */
/*File structure in this example is: 
/* CSS: root-> assets -> css -> fonts.css
/ FONT FILES: root -> assets -> fonts -> 2 folders, inter & poppins

/* This code goes in functions.php - Child-theme*/
add_filter('et_websafe_fonts', 'load_divi_custom_font',10,2);
function load_divi_custom_font($fonts) {
  wp_enqueue_style( 'divi-child', get_stylesheet_directory_uri() . '/assets/css/fonts.css' );
  // Add multiple fonts to Divi's font menu to acces them within DIVI
  $custom_font = array('Poppins' => array(
    'styles'        => '500,700',
    'character_set' => 'latin',
    'type'          => 'sans-serif',
    'standard'      => 1
  ),
  'Inter' => array(
    'styles'        => '500,700',
    'character_set' => 'latin',
    'type'          => 'sans-serif',
    'standard'      => 1
  ));

  return array_merge($custom_font,$fonts);
}

/*CSS for child-theme*/
/* poppins-500 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins/poppins-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins/poppins-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins/poppins-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins/poppins-v20-latin-500.svg#Poppins') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* poppins-700 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins/poppins-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/poppins/poppins-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins/poppins-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/poppins/poppins-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/poppins/poppins-v20-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* inter-700 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter/inter-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter/inter-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter/inter-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter/inter-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter/inter-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter/inter-v11-latin-700.svg#Inter') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* inter-500 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter/inter-v11-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter/inter-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter/inter-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter/inter-v11-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter/inter-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter/inter-v11-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
  font-display : swap;
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
<?php

add_filter( 'woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields' );
function xa_remove_billing_checkout_fields( $fields ) {
    // change below for the method
    $shipping_method ='local_pickup:1'; 
    // change below for the list of fields
    $hide_fields = array( 'billing_address_1', 'billing_address_2', 'billing_city', 'billing_state', 'billing_postcode' );

    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    // uncomment below line and reload checkout page to check current $chosen_methods
     print_r($chosen_methods);
    $chosen_shipping = $chosen_methods[0];

    foreach($hide_fields as $field ) {
        if ($chosen_shipping == $shipping_method) {
            $fields['billing'][$field]['required'] = false;
            $fields['billing'][$field]['class'][] = 'hide';
        }
        $fields['billing'][$field]['class'][] = 'billing-dynamic';
    }

    return $fields;
}

add_action( 'wp_footer', 'cart_update_script', 999 );
function cart_update_script() {
    if (is_checkout()) :
    ?>
    <style>
        .hide {display: none!important;}
    </style>
    <script>
        jQuery( function( $ ) {

            // woocommerce_params is required to continue, ensure the object exists
            if ( typeof woocommerce_params === 'undefined' ) {
                return false;
            }

            $(document).on( 'change', '#shipping_method input[type="radio"]', function() {
                // change local_pickup:1 accordingly 
                $('.billing-dynamic').toggleClass('hide', this.value == 'local_pickup:1');
            });
        });
    </script>
    <?php
    endif;
}
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
.overflowing {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
// js
#!/usr/bin/env php
<?php
foreach (glob('*.js') as $js) {
   echo "wp_enqueue_script('wptheme-{$js}', get_template_directory_uri() . '/js/{$js}', array('jquery'), '1.0', true);";
}

// Css
#!/usr/bin/env php
<?php
foreach (glob('*.css') as $css) {
   echo "wp_enqueue_style('wptheme-{$css}', get_template_directory_uri() . '/css/{$css}', null, '1.0');";
}
// js
#!/usr/bin/env php
<?php
foreach (glob('*.js') as $js) {
   echo "wp_enqueue_script('wptheme-{$js}', get_template_directory_uri() . '/js/{$js}', array('jquery'), '1.0', true);";
}

// Css
#!/usr/bin/env php
<?php
foreach (glob('*.css') as $css) {
   echo "wp_enqueue_style('wptheme-{$css}', get_template_directory_uri() . '/css/{$css}', null, '1.0');";
}
/* 
	https://www.youtube.com/watch?v=q0E1hbcj-NI
    Browsersync + Sass + Gulp in 15 minutes
    
	install as devDependencies:
	npm install browser-sync cssnano gulp gulp-cli gulp-postcss gulp-sass gulp-terser sass -D    
*/

// run gulp by typing on terminal : gulp
// error: gulp-sass no longer has a default Sass compiler; please set one yourself.

const { src, dest, watch, series } = require("gulp");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const cssnano = require("cssnano");
const terser = require("gulp-terser");
const browsersync = require("browser-sync").create();

// sass task
function sassTask() {
  return src("./sass/style.scss", { sourcemaps: true })
    .pipe(sass())
    .pipe(postcss([cssnano()]))
    .pipe(dest("dist/css", { sourcemaps: "." }));
}

// javascript task
function jsTask() {
  return src("./js/index.js", { sourcemaps: true })
    .pipe(terser())
    .pipe(dest("dist/js", { sourcemaps: "." }));
}

// browsersync
function browserSyncServer(callback) {
  browsersync.init({
    server: {
      baseDir: ".",
    },
  });
  callback();
}

function browserSyncReload(callback) {
  browsersync.reload();
  callback();
}

// watch task
function watchTask() {
  watch("*.html", browserSyncReload);
  watch(
    ["./sass/**/*.scss", ".js/**/*.js"],
    series(sassTask, jsTask, browserSyncReload)
  );
}

// gulp workflow
exports.default = series(sassTask, jsTask, browserSyncServer, watchTask);
<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
HTML

<div class="sticky"></div>


CSS

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%;
}


jQuery

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}
.gradient {
  background-image: linear-gradient(90deg, rgba(94,114,235,1) 0%, rgba(255,145,144,1) 56%, rgba(254,193,149,1) 100%);
  color: transparent;
  -webkit-background-clip: text;
}
#flyout1, #flyout2, #flyout3 {
    margin:0;
    padding:0;
    width:990px;
    overflow:hidden;
}
#flyout1 {
}
#flyout2 {
    background:transparent url(../images/popupBG1.png) top left no-repeat;
}
#flyout3 {
}
UL.paginate {
    float:left;
    margin:0;
    padding:0;
    height:260px;
    display:block;
}
UL.paginate LI {
    float:left;
    margin:40px 30px 20px 27px;
    padding:0;
    display:inline;
    width:130px;
    height:200px;
}
#scrollable {
    margin-top:10px;
    float:left;
    background-color:#eee;
    width:990px;
    border-top: 1px;
    border-top-color: #CCC;
    border-top-style: solid;
}
.pager {
    margin-right:10px;
    overflow:hidden;
    padding:1em 0;
    float:right;
}
.pager li {
    float:left;
    list-style-type:none;
    margin-right:.3em;
    font-size:1.1em;
}
.pager a {
    color:#FF9182;
    outline:none;
    text-decoration:underline;
}
.pager a:hover {
    text-decoration:none;
}
.pager .active a {
    color:#666;
    font-weight:bold;
}
.pager .disabled {
    width:32px;
    text-indent:-9999px;
}
/* PAGINATED CONTENT */
 #subProd {
    float:left;
    margin:0;
    padding:0;
    width:130px;
}
#subProd img.thumb {
    margin:0;
    padding:0 10px;
    background-color:#fff;
    border:1px solid #ccc;
}
.button, .button1, .button2, .button3, .button4, .button5, .qv {
    float:left;
    background-image: linear-gradient(#ffffff, #eeeeee);
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #666;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    min-height: 18px;
    padding: 5px 10px;
    text-decoration:none;
}
#subProd .qv {
    float:right;
    margin:0;
    padding:0;
    cursor: pointer;
    padding:5px 5px 5px 6px;
}
#subProd .qv IMG {
    border:0 none;
    margin:0;
    padding:0;
}
#subProd .product P {
    margin:5px 0;
    padding:0;
    line-height:13px;
    min-height:13px;
}
#subProd .product .title {
    color:#666;
    font-size:13px;
}
#subProd .product .number {
    color:#666;
    font-size:11px;
}
#subProd .product .price {
    font-size:20px;
    font-weight:bold;
    margin-bottom:3px;
    line-height:20px;
}
// Change text read more boton woocommerce
add_filter( 'gettext', 'ds_change_readmore_text', 20, 3 );

function ds_change_readmore_text( $translated_text, $text, $domain ) {
if ( ! is_admin() && $domain === 'woocommerce' && $translated_text === 'Read more') {
$translated_text = 'Quote';
}
return $translated_text;
}
.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip-path: inset(50%);
  margin: -1px;
}
.bg-scrolling-element-when-modal-active {
    /* when modal active */
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    /* Other browsers */
    overscroll-behavior: none;
}
.paragraph {
  whitespace: no-break;
  text-overflow: ellipsis;
  width: 100px;
}
.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
}
body {
  font-family: Camphor, Open Sans, Segoe UI, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.smol-centering {
  display: grid;
  place-content: center;
}
.smol-css-grid {
  --min: 15ch;
  --gap: 1rem;

  display: grid;
  grid-gap: var(--gap);
  /* min() with 100% prevents overflow
  in extra narrow spaces */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}
.content p{   
   display: -webkit-box;   
   -webkit-line-clamp: 3;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}
.holder {
  position: relative;
}
.holder:after {
  left: 0;
  right: 0;
  width: 100%;
  bottom: -21px;
  content: "";
  height: 21px;
  display: block;
  position: absolute;
  /* Here's the SVG embedded into the CSS BG using https://yoksel.github.io/url-encoder/ */
  background: url("data:image/svg+xml, %3Csvg width='1166' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='1166' height='21'%3E%3Crect width='1166' height='21' fill='url(%23paint0_linear)'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Crect width='1166' height='21' fill='url(%23paint1_radial)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x2='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(-1166 -7 2608 -438157 -138 219063)'%3E%3Cstop offset='0' stop-color='%23333' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23000' stop-opacity='1'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='paint1_radial' cx='0.5' cy='0.5' r='0.5' gradientUnits='userSpaceOnUse' gradientTransform='translate(1453 -10) scale(1740 62) rotate(90)'%3E%3Cstop offset='0.0' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
<div class="alert alert--success toast toast--top--right hide">
    This is success alert
    <button class="alert--close">×</button>
</div>
<div class="alert alert--message toast toast--bottom--left hide">
    This is message alert
    <button class="alert--close">×</button>
</div>
<div class="alert alert--error toast toast--bottom--center hide">
    This is danger alert
    <button class="alert--close">×</button>
</div>
<p class="para--lg">
...
</p>
<p class="para--md text--center text--grey">
...
</p>
<p class="para--sm text--bold">
...
</p>
<h1 class="heading--1">Heading 1</h1>
<h2 class="heading--2">Heading 2</h2>
<h3 class="heading--3">Heading 3</h3>
<h4 class="heading--4">Heading 4</h4>
<h5 class="heading--5">Heading 5</h5>
<h6 class="heading--6">Heading 6</h6>
/*HTML CODE*/

<input class="slider m-b-1" 
type="range" min="0" 
max="100" step="1" 
value="40" />

  
  
  
  
  
 /* JavaScript */
  

const slider = document.querySelector(".slider");

slider.addEventListener("input", () => {
updateSlider();
});

const updateSlider = function () {
const backgroundPercentage =
((slider.value - slider.min) / (slider.max - slider.min)) * 100;
const backgroundColor = `linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) ${backgroundPercentage}%, var(--success-light) ${backgroundPercentage}%, var(--success-light) 100%)`;
slider.style.background = backgroundColor;
};

updateSlider();
<div class="rating--container">
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
</div>
<div class="rating--container ">
    <i class="fas fa-star star star--checked"></i>
    <i class="fas fa-star star star--checked"></i>
    <i class="fas fa-star star star--checked"></i>
    <i class="fas fa-star star"></i>
    <i class="fas fa-star star"></i>
</div>
<div class="nav--container">
    <div class="hamburger--icon">
        <i class="fas fa-bars"></i>
    </div>
    <div class="logo">Brand Name</div>
    <nav class="nav--items">
        <ul class="list list--space">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </nav>
</div>
<div class="modal modal--alert hide">
    <h5 class="modal--heading heading--4">Delete Element</h5>
    <p class="modal--text">Are you sure you want to delete it?</p>
    <div class="modal--actions">
        <a href="#" class="link link--primary m-r-1" onclick="closeModal()">Yes</a>
        <a href="#" class="link link--secondary m-r-1" onclick="closeModal()">No</a>
    </div>
</div>
<div class="overlay hide"></div>
<ul class="list list--stacked list--primary p-v-1">
    <li class="list--item">This is stacked list item 1</li>
    <li class="list--item">This is stacked list item 2</li>
    <li class="list--item">This is stacked list item 3</li>
    <li class="list--item">This is stacked list item 4</li>
    <li class="list--item">This is stacked list item 5</li>
</ul>
<ul class="list list--stacked p-v-1">
    <li class="list--item">This is stacked list item 1</li>
    <li class="list--item">This is stacked list item 2</li>
    <li class="list--item">This is stacked list item 3</li>
    <li class="list--item">This is stacked list item 4</li>
    <li class="list--item">This is stacked list item 5</li>
</ul>
<ul class="list list--space p-v-1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<span class="m-r-1 input--primary">
    <input type="radio" name="radio" id="radio1" />
    <label for="radio1">Radio 1</label>
</span>
<span class="m-r-1 input--primary">
    <input type="radio" name="radio" id="radio2" checked />
    <label for="radio2">Radio 2</label>
</span>
<span class="input--primary">
    <input type="checkbox" id="checkbox" name="radio" checked />
    <label for="checkbox">check this check box</label>
</span>
<div class="input--container input--error">
    <label for="phonenumber" class="input--label">Phone Number </label>
    <input type="number" id="phonenumber" class="input" />
</div>
<div class="input--container input--error">
    <label for="phonenumber" class="input--label">Phone Number </label>
    <input type="number" id="phonenumber" class="input" />
    <span class="input--error--message">Phone number should only contain numbers</span>
</div>
<div class="input--container input--standard">
    <label for="name" class="input--label">Name </label>
    <input type="text" id="name" class="input" />
</div>
<div class="input--container input--primary">
    <label for="email" class="input--label">Email </label>
    <input type="email" id="email" class="input" />
</div>
<div class="input--container input--primary input--disabled">
    <label for="address" class="input--label">Address </label>
    <input type="text" id="address" class="input" readonly autocomplete="off" />
</div>
<img class="img--round" 
src="https://picsum.photos/id/1024/300/300" 
alt="sample image" />
<img class="img--res" 
src="https://i.picsum.photos/id/1024/1920/1280.jpg?hmac=-PIpG7j_fRwN8Qtfnsc3M8-kC3yb0XYOBfVzlPSuVII"
alt="sample image" />
<div class="grid grid--3--cols">
    <div>.....</div>
    <div>.....</div>
    <div>.....</div>
</div>
<div class="grid grid--2--cols">
    <div>.....</div>
    <div>.....</div>
</div>
<div class="card card--overlay">
    <img src="https://picsum.photos/id/1/300" alt="Man sitting in front of computer" />
    <div class="card--info">
        <p class="card--title">Web Development</p>
        <p class="card--author">by Hiteshp</p>
    </div>
    <p class="card--description">
        Learn web development in easy and simple way by building small
        projects
    </p>

    <div class="card--footer">
        <div class="card--btn--action">
            <a href="#" class="link link--information">Learn</a>
            <a href="#" class="link link--secondary">Bookmark</a>
        </div>
        <div class="card--btn--icons">
            <button class="btn icon--btn">
                <i class="far fa-heart" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-share-alt" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>

<div class="card card--text">
    <img src="https://picsum.photos/id/1/300" alt="Man sitting in front of computer" />
    <div class="card--info">
        <p class="card--title">Web Development</p>
        <p class="card--author">by Hitesh</p>
    </div>
    <p class="card--description">
        Learn web development in easy and simple way by building small
        projects
    </p>

    <div class="card--footer">
        <div class="card--btn--action">
            <a href="#" class="link link--information">Learn</a>
            <a href="#" class="link link--secondary">Bookmark</a>
        </div>
        <div class="card--btn--icons">
            <button class="btn icon--btn">
                <i class="far fa-heart" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-share-alt" aria-hidden="true"></i>
            </button>
            <button class="btn icon--btn">
                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>
<div class="card card--horizontal">
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content--btn--container">
        <div class="card--content">
            <div class="card--title">Stylish Blue Shirt</div>
            <div class="card--manufacturer">By LP fashion</div>
            <div class="card--review--container">
                <div class="card--review--star">
                    4.2
                    <i class="far fa-star" aria-hidden="true"></i>
                </div>
                <div class="card--review--number">(256)</div>
            </div>
            <div class="card--price--container">
                <div class="actual--price">₹600</div>
                <div class="strike--price">₹1200</div>
                <div class="offer--percentage">(50%off)</div>
            </div>
        </div>
        <div class="card--btn">
            <button class="btn btn--primary w-100">Add to cart</button>
        </div>
    </div>
</div>
<div class="card">
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge">
    <button class="btn icon--btn icon--badge">
        <i class="far fa-heart" aria-hidden="true"></i>
    </button>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge">
    <button class="btn icon--btn icon--badge">
        <i class="fas fa-times" aria-hidden="true"></i>
    </button>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text">
    <span class="badge--text badge--new">New</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text card--disabled">
    <span class="badge--text badge--sold">Sold out</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text">
    <span class="badge--text badge--sold">Sold out</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<button class="btn btn--fab btn--primary m-r-1">
    <i class="fas fa-plus" aria-hidden="true"></i>
</button>
<button class="btn btn--fab btn--secondary">
    <i class="fas fa-arrow-up"></i>
</button>
<button class="btn icon--btn m-r-1">
    <i class="fas fa-shopping-cart fa-2x" aria-hidden="true"></i>
</button>
<button class="btn icon--btn">
    <i class="fas fa-times-circle fa-2x" aria-hidden="true"></i>
</button>
<a href="#" class="link link--primary m-r-1">Link</a>
<a href="#" class="link link--secondary m-r-1">Link</a>
<a href="#" class="link link--information m-r-1">Link</a>
<button class="btn btn--outline btn--primary">Button</button>
<button class="btn btn--outline btn--secondary">Button</button>
<button class="btn btn--outline btn--icon btn--information">
    <i class="fas fa-check" aria-hidden="true"></i>Button
</button>
<button class="btn btn--outline btn--disabled btn--secondary">
    Button
</button>
<button class="btn btn--primary">Button</button>
<button class="btn btn--icon btn--secondary">
    <i class="fas fa-times" aria-hidden="true"></i>Button
</button>
<button class="btn btn--information">Button</button>
<button class="btn btn--primary btn--disabled">
    Button
</button>
<div class="badge--container">
    <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Randomuser" class="m-r-1 avatar avatar--circle avatar--sm" />
    <span class="badge badge--status badge--bottom--right badge--online">
    </span>
</div>

<div class="badge--container">
    <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Randomuser" class="m-r-1 avatar avatar--circle avatar--sm" />
    <span class="badge badge--status badge--bottom--right badge--offline">
    </span>
</div>
<div class="badge--container">
    <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Randomuser" class="m-r-1 avatar avatar--circle avatar--sm" />
    <span class="badge badge--status badge--bottom--right badge--busy"></span>
</div>
<div class="badge--container m-v-1 m-r-2">
    <i class="fas fa-bell fa-2x" aria-hidden="true"></i>
    <span class="badge badge--top--right badge--primary">9</span>
</div>
<div class="badge--container m-v-1 m-r-2">
    <i class="fas fa-envelope fa-2x" aria-hidden="true"></i>
    <span class="badge badge--top--right badge--secondary">9+</span>
</div>
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--xs" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--sm" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--md" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--lg" />
<img src="..." alt="Randomuser" class="avatar avatar--square avatar--xl" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--xs" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--sm" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--md" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--lg" />
<img src="..." alt="Randomuser" class="avatar avatar--circle avatar--xl" />
/* HTML Code */
<link rel="stylesheet" href="https://roarui.netlify.app/css/roarui.css">
  
 /* Import CSS */
  @import url("https://roarui.netlify.app/css/roarui.css");
<style>
	html, body {
  		overflow-y: hidden;
  	}
</style>

<script>
  $(function(){
  setTimeout(function(){
    $('html')
    .css({
      'overflow-y': 'scroll'
    })
    
  	window.scrollTo(0, 0);
  }, 3000);
});
</script>
.grid{
  display: grid;
  gap: 2rem;
  padding: 2rem;
}


@media screen and screen and (min-width: 1200px) {
    .grid{
		grid-template-columns: repeat(3, 1fr);
    }
}

@media and screen and (min-width: 900px){
  .grid{
	grid-template-columns: repeat(2, 1fr);
  }
}

@media and screen and (min-width: 0px){
	.grid{
       grid-template-columns: repeat(1, 1fr);
    }
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.text-gradient {
    background: linear-gradient(94.23deg,#5374fa 12.41%,#fd9179 52.55%,#ff6969 89.95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<!-- 2 column grid -->
<div class="grid grid-col-2">
  <div class="grid-col-item">item1</div>
  <div class="grid-col-item">item2</div>
</div>

<!-- 3 column grid -->
<div class="grid grid-col-3">
  <div class="grid-col-item">item1</div>
  <div class="grid-col-item">item2</div>
  <div class="grid-col-item">item3</div>
</div>
<!-- Basic Snackbar -->
<div class="snackbar">
    <span class="white">Moved to Trash</span>
    <span class="material-icons snackbar-close"> close </span>
</div>

<!-- Stacked Snackbar -->
<div class="stacked-snackbar">
    <div class="snackbar">
        <span class="white">Moved to Trash</span>
        <span class="material-icons snackbar-close"> close </span>
    </div>
    <div class="snackbar">
        <span class="white">Moved to Trash</span>
        <span class="material-icons snackbar-close"> close </span>
    </div>
</div>
<div class="alert alert--success m-v-1">
 This is success alert
<button class="alert--close">×< /button>
 < /div>
 <div class="alert alert--error m-v-1">
  This is error alert
<button class="alert--close">×< /button>
< /div>
 <div class="alert alert--message m-v-1">
  This is message alert<button class="alert--close">×< /button>
 < /div>
 <div class="alert alert--information m-v-1">
 This is information alert
 <button class="alert--close">×< /button>
< /div>
 var preloader = document.getElementById("loading");
    var body = document.querySelector("body");
    var html = document.querySelector("html");
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(function loader() {
        preloader.style.display = "none";
        body.classList.remove("no-scroll-y");
        body.classList.add("no-scroll-x");
        html.classList.add("no-scroll-x");
      }, 1500);
    });
 <div class="modal-container">
     <button id="alert-modal-btn" class="btn primary-btn">
         LOG OUT
     </button>
     <dialog id="alert-modal" class="modal">
         <div class="modal-wrapper">
             <h2 class="modal-header">LOGOUT</h2>
             <span class="modal-text">Are you sure you want to log out?</span>
             <form method="dialog" class="modal-actions">
                 <button class="btn secondary-btn modal-action">
                     NO
                 </button>
                 <button class="btn primary-btn modal-action">YES</button>
             </form>
         </div>
     </dialog>
 </div>
.card-body {
  display: flex;
  flex-direction: column;
}

button.btn {
  margin-top: auto;
}
ins {
  padding: 0 0.125em;
  text-decoration: none;
  background-color: lightgreen
}
del {
  padding: 0 0.125em;
  text-decoration: none;
  background-color: pink;
}
mark {
  padding: 0 0.125em;
}
.note {
  padding: 0 0.125em;
  background-color: lightblue;
}
aside.note {
  padding: 0.5em 1em;
}
u {
  text-decoration: none;
  border-bottom: 3px red dashed;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
/*CSS*/
.field-item__wrapper {
    position: relative;
    padding-top: 15px;
}
.form__field {
    font-family: inherit;
    width: 100%;
    border: 0;
    border-bottom: 2px solid #000;
    outline: 0;
    color: #000;
    padding: 7px 0;
    background: 0 0;
    transition: border-color 0.2s;
}
.form__field::placeholder {
    color: transparent;
    opacity: 0;
}
.form__field:placeholder-shown ~ .form__label {
    cursor: text;
    top: 20px !important;
}
.form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    color: #000;
}
.form__field:focus {
    padding-bottom: 6px;
    border-width: 3px;
    border-image-slice: 1;
    border-color: #000 !important;
}
.form__field:focus ~ .form__label {
    position: absolute;
    top: 0 !important;
    font-size: 0.8em;
    display: block;
    transition: 0.2s;
}
.form__field:invalid,
.form__field:required {
    box-shadow: none;
}
.w-input.error {
    border-color: #cc3131;
}
label.error {
    font-size: 10px;
    line-height: 24px;
    color: #cc3131;
    position: absolute;
    bottom: -25px;
}
/*CSS*/
/*CSS*/
.youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.8;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}

.youtube img {
	width: 100%;
}

.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}
/*CSS*/

/*JS*/
(function() {

	var youtube = document.querySelectorAll(".youtube");

	for (var i = 0; i < youtube.length; i++) {

		var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";

		var image = new Image();
		image.src = source;
		image.addEventListener("load", function() {
			youtube[i].appendChild(image);
		}(i));

		youtube[i].addEventListener("click", function() {

			var iframe = document.createElement("iframe");

			iframe.setAttribute("frameborder", "0");
			iframe.setAttribute("allowfullscreen", "");
			iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=0");

			this.innerHTML = "";
			this.appendChild(iframe);
		});
	};

})();
/*JS*/

/*HTML*/
<div data-embed="YOUTUBE_VIDEO_ID" class="video-modal youtube">
  <div class="play-button"></div>
</div>
/*HTML*/
/*CSS*/
.text__underline {
    transform: translateX(-300%);
    transition: 0.7s;
}
.header__nav-button {
    max-width: fit-content;
    overflow: hidden;
}
.header__nav-button:hover .text__underline {
    animation: toMiddlePos 0.7s;
    transform: translateX(0);
    opacity: 100%;
}
.header__nav-button:not(:hover) .text__underline {
    transform: translateX(300%);
    opacity: 0;
}
@keyframes toMiddlePos {
    from {
        transform: translateX(-300%);
    }
    to {
        transform: translateX(0);
    }
}
/*CSS*/

/*HTML markup*/
<a class="button header__nav-button">
  <span>Your text</span>
  <div class="content-list-item__line line-primary text__underline line__black" style="width: 0%; 	display: block; height: 1px;" />
</a>
/*HTML markup*/
/*JS*/
/*connect luxy.js with CDN*/
<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

/*script to make luxy.js work properly*/
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
if (!isMobile) {
	luxy.init({
		wrapper: '#luxy',
		wrapperSpeed: 0.085,

	});
}
/*JS*/

/*HTML*/
<div id="luxy" class="scroll-container">
	... //your content goes here
</div>
/*HTML*/

/*CSS*/
.scroll-container {
  position: fixed;
}
/*CSS*/
/*CSS*/
#nav__wrapper {
  transform: translateY(0%);
  transition: all 0.3s ease-out;
}

#nav__wrapper.header_hide {
  transform: translateY(-100%);
}
/*CSS*/
  
/*JS*/
const header_el = $("#nav__wrapper"),
    mywindow = $(window);
let mypos = mywindow.scrollTop(),
    up = !1,
    newscroll = 0;
mywindow.scroll(function () {
    (newscroll = mywindow.scrollTop()) > mypos && !up ? (header_el.toggleClass("header_hide"), (up = !up)) : newscroll < mypos && up && (header_el.toggleClass("header_hide"), (up = !up)), (mypos = newscroll);
});
/*JS*/
body::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: #DDDDDD;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background: #707070;
  border-radius: 100px;
}
.outlined__text-white {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px white;
}

.outlined__text-black {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px black;
}
Si es un elemento display: inline; entonces solo por Es innecesario justify-content: center;
son funciones en el plano cartesiano 0.0 y 1.1
cubic-bezier(p1, p2, p3, p4): p<=1

Todas las funciones cubicas tienen un punto de inflexión(o dos puntos de concavidad):
T1= (p1,p2) cordenada donde termina concavo hacia abajo(punto 1 de inflexión)
T2= (p3,p4) cordenada donde termina convexo hacia arriba(punto 2 de inflexión)
Nota: si tiene dos puntos de inflexión es porque entre en 1 y el 2 hay una recta 
Ya sabemos que transition no tiene "animación" porque no tiene intervalo de acción
-- esto condiciona a que todas la propiedades existen despues de que el elemento aparesca
-- si le ponemos transition: color 3s; no surgira la animación porque en el display none
   aun no exite el color, luego , en el display block ya existe y no se da la niamción por que
   no logra tener un intervalo donde cambia su valor, sino que no existe y luego exite
   (sinintervalo)
la unidad 1fr en css grid tiene un comportamiento maximo 
yaque si solo se lo pones a un elemento sera el maximo y si le pones a 3
sera 1/3 que es el maximo; por eso no puede ir en el minimo de minmax(30%, 1fr) eso es lo correcto.

__NOTA__
minmax(min,max):es solo de grid y en su parte min no se le pone 1fr porque tiene comportamiento max
-min(): es de css no de grid, y dentro de sus valores no especifica que permite 1fr(no es valido)
-max(): es de css no de grid, y dentro de sus valores no especifica que permite 1fr(no es valido)
<sl-drawer label="Drawer" class="drawer-scrolling">
  <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
    <p>Scroll down and give it a try! 👇</p>
  </div>
  <sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>

<sl-button>Open Drawer</sl-button>

<script>
  const drawer = document.querySelector('.drawer-scrolling');
  const openButton = drawer.nextElementSibling;
  const closeButton = drawer.querySelector('sl-button[variant="primary"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
</script>
<!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>CSS Specificity</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div id="main">
            <p>
                <a href="#">Link here</a>
            </p>
        </div>
    </div>
</body>
</html>

a {
    color: black;
}

p a {
    color: purple;
}

div #main p a {
    color: yellow;
}

#main a {
    color: blue;
}

.container #main a {
    color: red;
}
.feed-item {
  border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;
}
add_action( 'admin_bar_menu', 'add_link_to_admin_bar', 999 );
function add_link_to_admin_bar($wp_admin_bar) {         
    // adds a child node to site name parent node
    $wp_admin_bar->add_node( array(
      'parent' => 'site-name',
      'id'     => 'plugins',
      'title'  => 'Plugins',
      'href'   => esc_url( admin_url( 'plugins.php' ) ),
      'meta'   => false
    ));
}
add_action( 'admin_bar_menu', 'add_link_to_admin_bar', 999 );
function add_link_to_admin_bar($wp_admin_bar) {         
    // adds a child node to site name parent node
    $wp_admin_bar->add_node( array(
      'parent' => 'site-name',
      'id'     => 'plugins',
      'title'  => 'Plugins',
      'href'   => esc_url( admin_url( 'plugins.php' ) ),
      'meta'   => false
    ));
}
-webkit-text-stroke: 3px black;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: fixed; /* or absolute */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
body, html { margin: 0; padding: 0; }
* { box-sizing: border-box; }
.wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "a a b"
    "a a b";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
  object-fit: cover;
  border-radius: 50%;
  height: 100px;
  width: 100px;
<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>
.revealLTR,
.revealRTL,
.revealTTB,
.revealBTT {
	position: relative;
	overflow: hidden;
}
.revealLTR[data-aos=fade].aos-animate > *,
.revealRTL[data-aos=fade].aos-animate > *,
.revealTTB[data-aos=fade].aos-animate > *,
.revealBTT[data-aos=fade].aos-animate > * {
	animation: fadeIn 0s 0.6s;
	animation-fill-mode: backwards;
}
.revealLTR[data-aos=fade]:not[.aos-animate],
.revealRTL[data-aos=fade]:not[.aos-animate],
.revealTTB[data-aos=fade]:not[.aos-animate],
.revealBTT[data-aos=fade]:not[.aos-animate] {
	opacity: 0;
}
.revealLTR[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateX(-100%);
	animation: revealInLTR 0.6s 0s, revealOutLTR 0.6s 0.6s;
	animation-fill-mode: forwards;
}
.revealRTL[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateX(100%);
	animation: revealInRTL 0.6s 0s, revealOutRTL 0.6s 0.6s;
	animation-fill-mode: forwards;
}
.revealTTB[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateY(-100%);
	animation: revealInTTB 0.6s 0s, revealOutTTB 0.6s 0.6s;
	animation-fill-mode: forwards;
}
.revealBTT[data-aos=fade].aos-animate::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	transform: translateY(100%);
	animation: revealInBTT 0.6s 0s, revealOutBTT 0.6s 0.6s;
	animation-fill-mode: forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes revealInLTR {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes revealOutLTR {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(101%);
	}
}
@keyframes revealInRTL {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes revealOutRTL {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-101%);
	}
}
@keyframes revealInTTB {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes revealOutTTB {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(101%);
	}
}
@keyframes revealInBTT {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes revealOutBTT {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-101%);
	}
}
// style.scss
:root{
  --color-property: $var1;
}

// style.css
:root{
  --color-property: $var1;
}

// No compila nada de las variables:
//tal vez porque :root es el unico pseudo elemento al que se puede aceder directamentes, incluso //desde JS, como; let root = document.querySelector(":root")
// etiqueta: especificidad= 0;
// class: especificidad= 1;
// id: especificidad= 2;
 /* luego de acuerdo a las combinaciones, se sumaran sus especificidades implicadas*/

// EL ORDEN QUE APARECEN EN LA HOJA DE STYLE DE navegador es segun a su especificidad; aparece //primero el de mayor especificidad y los de menor abajo:
//- segun a eso se aanula propiedades:


<style>
body {
  margin: 1em auto;
  max-width: 40em;
  width: 88%;
}
  
/* The CSS aspect-ratio property tells browsers to preserve a specific aspect ratio on an element when scaling the size of it up or down. */

iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}
</style>

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/_VDGysJGNoI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<style>
 .spacer {
  height: 100vh;
}

a {
  color: #3d3d3d;
  font-family: Arial, Helvetica, sans-serif;
}
/* The magic one liner that allows for smooth scrolls */
html {
  scroll-behavior: smooth;
}

  /* Removes the animation for users that don't prefer it */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
  
 </style>

<h1 id="top"><a href="#middle">Let's go to the middle of the page</a></h1> 

<div class="spacer">
  &nbsp;
</div>

<h1 id="middle"><a href="#bottom">Go to the bottom?</a></h1>

<div class="spacer">
  &nbsp;
</div>

<h1 id="bottom"><a href="#top">Nah, let's go back to the top</a></h1>
html {
  /* 62.5% of 16px base font size is 10px */
  font-size: 62.5%;
}
@media (max-width: 980px) {
.forceRowOrder {
	display: flex;
  flex-wrap: wrap;
}

.Order1 {
	order: 1;
	margin-bottom: 30px !important;
}

.Order2 {
	order: 2;
	margin-bottom: 0px !important;
}
}
<div class="slider">
    <div class="slider-value">
        <span>0</span>
        <span>500</span>
        <span>1000</span>
    </div>
    <input type="range" min="0" max="1000" value="500">
</div>
<div class="filter-wrap flex-col">
    <label for="price">
        <h4>Price Range Slider:</h4>
    </label>
    <div class="flex-row spc-btwn">
        <h5>₹0</h5>
        <h5>₹2500</h5>
        <h5>₹5000</h5>
    </div>

    <input type="range" name="price" class="prange" min="0" max="5000" value="2500" />
</div>
  <!-- Navigation -->
  <nav class="flex-row header-bar">
      <div class="flex-row header-left">
          <i class="material-icons header-icon"> menu </i>

          <h1 class="web-logo">Gaming</h1>
      </div>
      <div class="flex-row header-right">
          <button class="btn primary-btn btn-active">LOGIN</button>
          <div class="relative-container">
              <i class="material-icons header-icon">
                  favorite_border</i>
              <div class="badge top-right flex-row center-it nav-badge-color">3</div>
          </div>

          <div class="flex-row relative-container">
              <i class="material-icons header-icon"> shopping_cart </i>
              <div class="badge top-right flex-row center-it nav-badge-color">2</div>
          </div>
          <i class="material-icons header-icon"> logout </i>
      </div>
  </nav>
 <!-- GRIDS -->
 <h1>GRIDS</h1>
 <div class="grid">
     <div class="grid-container grid-two bgGrey">
         <div class="bgred"></div>
         <div class="bggreen"></div>

     </div>
     <div class="grid-container grid-three bgGrey">
         <div class="bgred"></div>
         <div class="bggreen"></div>
         <div class="bgblue"></div>
     </div>
 </div>
<ul class="flex-col center-it stk-list-container">
    <li class="flex-row center-it gap-btwn stack-list-item">
        <div class="flex-col gap-btwn">
            <span class="material-icons"> feed </span>1 hour ago
        </div>
        <div class="flex-col gap-btwn">
            Top story
            <p class="stack-list-text">your text
            </p>
        </div>
        <img src="../ignore/modi.jfif" alt="" class="stk-list-img" />
    </li>
    <li class="flex-row center-it gap-btwn stack-list-item">
        <div class="flex-col gap-btwn">
            <span class="material-icons"> feed </span>1 hour ago
        </div>
        <div class="flex-col gap-btwn">
            Top story
            <p class="stack-list-text">your text
            </p>
        </div>
        <img src="../ignore/river.jfif" alt="" class="stk-list-img" />
    </li>
    <li class="flex-row center-it gap-btwn stack-list-item">
        <div class="flex-col gap-btwn">
            <span class="material-icons"> feed </span>1 hour ago
        </div>
        <div class="flex-col gap-btwn">
            Top story
            <p class="stack-list-text">your text
            </p>
        </div>
        <img src="../ignore/cricket.jfif" alt="" class="stk-list-img" />
    </li>
</ul>
     <ul class="flex-col center-it list-container">
         <li class="flex-row center-it spc-btwn norm-list-item">
             <p>The quantity of mangoes:</p>
             <div>18</div>
         </li>
         <li class="flex-row center-it spc-btwn norm-list-item">
             <p>The quantity of bananas:</p>
             <div>10</div>
         </li>
         <li class="flex-row center-it spc-btwn norm-list-item">
             <p>The quantity of apples :</p>
             <div>12</div>
         </li>
     </ul>
<link
  rel="stylesheet"
  href="https://spectre-ui.netlify.app/documentation/styles.css"
/>
@media screen and (min-width: 640px){
  .Index {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap !important;
  }
  section[id*="split"]{
    width: 50%!important;
  }
  section[id*="full"]{
    width: 100%!important;
  }
}
	
<!-- Basic Rating -->
<div class="rating-simple">
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
    <span class="material-icons rating"> star </span>
</div>

<!-- Number Rating -->
<div class="rating-number-container">
    4.5 <span class="material-icons rating-number"> star </span>
</div>
/* ==========================================================================
Animation System by Neale Van Fleet from Rogue Amoeba
========================================================================== */
.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
  animation-fill-mode: backwards;
}

/* Fade In */
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Pop In */
.animate.pop { animation-name: animate-pop; }

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Blur In */
.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}

@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Glow In */
.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}

@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}

/* Grow In */
.animate.grow { animation-name: animate-grow; }

@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Splat In */
.animate.splat { animation-name: animate-splat; }

@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px);
    }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0) translate(0, 0);
  }
}

/* Roll In */
.animate.roll { animation-name: animate-roll; }

@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}

/* Flip In */
.animate.flip {
  animation-name: animate-flip;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1);
  }
}

/* Spin In */
.animate.spin {
  animation-name: animate-spin;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, .9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
  }
}

/* Slide In */
.animate.slide { animation-name: animate-slide; }

@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Drop In */
.animate.drop { 
  animation-name: animate-drop; 
  animation-timing-function: cubic-bezier(.77, .14, .91, 1.25);
}

@keyframes animate-drop {
0% {
  opacity: 0;
  transform: translate(0,-300px) scale(0.9, 1.1);
}
95% {
  opacity: 1;
  transform: translate(0, 0) scale(0.9, 1.1);
}
96% {
  opacity: 1;
  transform: translate(10px, 0) scale(1.2, 0.9);
}
97% {
  opacity: 1;
  transform: translate(-10px, 0) scale(1.2, 0.9);
}
98% {
  opacity: 1;
  transform: translate(5px, 0) scale(1.1, 0.9);
}
99% {
  opacity: 1;
  transform: translate(-5px, 0) scale(1.1, 0.9);
}
100% {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1);
  }
}

/* Animation Delays */
.delay-1 {
  animation-delay: 0.6s;
}
.delay-2 {
  animation-delay: 0.7s;
}
.delay-3 {
  animation-delay: 0.8s;
}
.delay-4 {
  animation-delay: 0.9s;
}
.delay-5 {
  animation-delay: 1s;
}
.delay-6 {
  animation-delay: 1.1s;
}
.delay-7 {
  animation-delay: 1.2s;
}
.delay-8 {
  animation-delay: 1.3s;
}
.delay-9 {
  animation-delay: 1.4s;
}
.delay-10 {
  animation-delay: 1.5s;
}
.delay-11 {
  animation-delay: 1.6s;
}
.delay-12 {
  animation-delay: 1.7s;
}
.delay-13 {
  animation-delay: 1.8s;
}
.delay-14 {
  animation-delay: 1.9s;
}
.delay-15 {
  animation-delay: 2s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}
<style>
    @media all and (max-width: 600px) {
    .table-wrapper {
      width: 95%;
    }
    .td-inline {
      display: inline-table !important;
      width: 100%;
    }
    .img-100 img {
      width: 100%;
      height: auto; 
    }
    
    .show {
      display: block;
    }
    
    }
</style>


<!-- Image left + Text Right-->
<table width="638" border="0" cellpadding="0" cellspacing="0" align="center" class="table-wrapper" style="background: #f4f5f6">
    <tr>
        <td>
            <!-- Image -->
            <table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="48%">
                <tr>
                    <td class="img-100">
                        <img src="https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=327&q=80" width="310" height="auto" alt="blank" style="display: block" border="0" />
                    </td>
                </tr>
            </table>
            <!-- Text -->
            <table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="50%">
                <tr>
                    <td width="30" class="width-20"></td>
                    <td align="center">
                        <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                            <tr>
                                <td height="34" class="height-10"></td>
                            </tr>
                            <tr>
                                <td style="
                        font-size: 28px;
                        font-weight: 500;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.3;
                      ">
                                    Lorem ipsum dolor sit amet
                                </td>
                            </tr>
                            <tr>
                                <td height="16" class="height-10mid"></td>
                            </tr>

                            <tr>
                                <td style="
                        font-size: 18px;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.5;
                      ">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </td>
                            </tr>
                            <tr>
                                <td height="30"></td>
                            </tr>
                            <tr>
                                <td align="left">
                                    <table cellpadding="0" cellspacing="0" border="0" align="left">
                                        <tr>
                                            <td width="200" align="center" height="45" style="border: 2px solid #000">
                                                <a target="_blank" href="#" style="
                                font-size: 18px;
                                     color: #000;
                                text-transform: uppercase;
                                font-family: 'Open Sans', Arial, sans-serif;
                                font-weight: 700;
                                text-align: center;
                                display: block;
                                line-height: 45px;
                                vertical-align: middle;
                                text-decoration: none;
                              ">Shop the Sale</a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr class="show">
                                <td height="20"></td>
                            </tr>
                        </table>
                    </td>
                    <td width="30"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- End Image left + Text Right -->

<!-- Blank space / divider -->
<table width="640" border="0" cellpadding="0" cellspacing="0" align="center" class="table-wrapper" style="background: #f4f5f6">
    <tr>
        <td height="40" class="mob-height-20"></td>
    </tr>
</table>
<!-- End Blank space / divider -->

<!-- Text Left - Image Right -->
<table width="638" border="0" cellpadding="0" cellspacing="0" dir="ltr" align="center" class="table-wrapper" style="background: #f4f5f6">
    <tr>
        <td>
            <!-- Image -->
            <table cellpadding="0" cellspacing="0" border="0" align="right" class="td-inline" width="48%">
                <tr>
                    <td class="img-100">
                        <img src="https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=389&q=80" width="310" height="auto" alt="blank" style="display: block" border="0" />
                    </td>
                </tr>
            </table>
            <!-- Text -->
            <table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="50%">
                <tr>
                    <td width="30" class="width-20"></td>
                    <td align="center">
                        <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                            <tr>
                                <td height="34"></td>
                            </tr>
                            <tr>
                                <td style="
                        font-size: 28px;
                        font-weight: 500;
                        color: #000;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.3;
                      ">
                                    Lorem ipsum dolor sit amet
                                </td>
                            </tr>
                            <tr>
                                <td height="16"></td>
                            </tr>

                            <tr>
                                <td style="
                        font-size: 18px;
                        color: #000;
                        font-family: 'Open Sans', Arial, sans-serif;
                        line-height: 1.5;
                      ">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </td>
                            </tr>
                            <tr>
                                <td height="30"></td>
                            </tr>
                            <tr>
                                <td align="left">
                                    <table cellpadding="0" cellspacing="0" border="0" align="left">
                                        <tr>
                                            <td width="200" align="center" height="45" style="border: 2px solid #000">
                                                <a target="_blank" href="#" style="
                                font-size: 18px;
                                color: #000;
                                text-transform: uppercase;
                                font-family: 'Open Sans', Arial, sans-serif;
                                font-weight: 700;
                                text-align: center;
                                display: block;
                                line-height: 45px;
                                vertical-align: middle;
                                text-decoration: none;
                              ">Watch the Video</a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr class="show">
                                <td height="20"></td>
                            </tr>
                        </table>
                    </td>
                    <td width="30"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- End Text Left - Image Right -->
:root {
	
/*** COLOR SYSTEM ***/
	
/* 
GLOBAL COLOR SETUP (HSL)
Set the global colors below using HSL variables.
*/
	
	--primary-h: 44;
	--primary-s: 98%;
	--primary-l: 50%;

	--secondary-h: 41.1;
	--secondary-s: 100%;
	--secondary-l: 63.3%;

	--accent-h: 54.5;
	--accent-s: 15.5%;
	--accent-l: 86.1%;

	--base-h: 357.2;
	--base-s: 70.5%;
	--base-l: 47.8%;

/* 
SHADING VARIABLES
If you want to adjust the generated shade variants, you can adjust the percentages here.
Higher percentages are lighter and lower are darker.
*/

	--ultra-light: 95%;
	--light: 85%;
	--dark: 25%;
	--ultra-dark: 10%;

/* 
GLOBAL COLOR VARIABLES
These are the variables you can use in styling. They don't need to be edited.
Future plans: Auto generate full complimentary, triadic, analogous, etc. color schemes.
*/

	--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
	--primary-ultra-light: hsl(var(--primary-h), var(--primary-s), var(--ultra-light));
	--primary-light: hsl(var(--primary-h), var(--primary-s), var(--light));
	--primary-dark: hsl(var(--primary-h), var(--primary-s), var(--dark));
	--primary-ultra-dark: hsl(var(--primary-h), var(--primary-s), var(--ultra-dark));
	--primary-trans-80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .8);
	--primary-trans-60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .6);
	--primary-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .4);
	--primary-trans-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .2);
	--primary-comp: hsl(calc(var(--primary-h) + 180), var(--primary-s), var(--primary-l));
	--secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
	--secondary-ultra-light: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-light));
	--secondary-light: hsl(var(--secondary-h), var(--secondary-s), var(--light));
	--secondary-dark: hsl(var(--secondary-h), var(--secondary-s), var(--dark));
	--secondary-ultra-dark: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-dark));
	--secondary-trans-80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .8);
	--secondary-trans-60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .6);
	--secondary-trans-40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .4);
	--secondary-trans-20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .2);
	--secondary-comp: hsl(calc(var(--secondary-h) + 180), var(--secondary-s), var(--secondary-l));
	--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--accent-ultra-light: hsl(var(--accent-h), var(--accent-s), var(--ultra-light));
	--accent-light: hsl(var(--accent-h), var(--accent-s), var(--light));
	--accent-dark: hsl(var(--accent-h), var(--accent-s), var(--dark));
	--accent-ultra-dark: hsl(var(--accent-h), var(--accent-s), var(--ultra-dark));
	--accent-trans-80: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .8);
	--accent-trans-60: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .6);
	--accent-trans-40: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .4);
	--accent-trans-20: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .2);
	--accent-comp: hsl(calc(var(--accent-h) + 180), var(--accent-s), var(--accent-l));
	--base: hsl(var(--base-h), var(--base-s), var(--base-l));
	--base-ultra-light: hsl(var(--base-h), var(--base-s), var(--ultra-light));
	--base-light: hsl(var(--base-h), var(--base-s), var(--light));
	--base-dark: hsl(var(--base-h), var(--secondary-s), var(--dark));
	--base-ultra-dark: hsl(var(--base-h), var(--base-s), var(--ultra-dark));
	--base-trans-80: hsla(var(--base-h), var(--base-s), var(--base-l), .8);
	--base-trans-60: hsla(var(--base-h), var(--base-s), var(--base-l), .6);
	--base-trans-40: hsla(var(--base-h), var(--base-s), var(--base-l), .4);
	--base-trans-20: hsla(var(--base-h), var(--base-s), var(--base-l), .2);
	--base-comp: hsl(calc(var(--base-h) + 180), var(--base-s), var(--base-l));
	
/*** END COLOR SYSTEM ***/
}
<div class="modal">
    <div class="modal-header">
        Content...
    </div>
    <div class="modal-body">
        Content...
    </div>
    <div class="modal-footer">
        <button class="btn btn-secondary">...</button>
        <button class="btn btn-primary">...</button>
    </div>
</div>
/* To use REM units effectively, you'll want to make sure you reset your root font-size to 62.5% */

html {
     font-size: 62.5%;
}

/* MAX WIDTH UTILITY CLASSES */

.max-w--320 {
  width: 100%;
  max-width: 32rem;
}

.max-w--480 {
  width: 100%;
  max-width: 48rem;
}

.max-w--640 {
  width: 100%;
  max-width: 64rem;
}

.max-w--720 {
  width: 100%;
  max-width: 72rem;
}

.max-w--960 {
  width: 100%;
  max-width: 96rem;
}

.max-w--1120 {
  width: 100%;
  max-width: 112rem;
}

.max-w--full {
  width: 100%;
  max-width: 100%;
}
/* Owl Spacing */

.ct-section.owl-spacing--s .ct-section-inner-wrap > * + *,
.owl-spacing--s:not(.ct-section) > * + * {
margin-top: .5vmax;
}

.ct-section.owl-spacing--m .ct-section-inner-wrap > * + *,
.owl-spacing--m:not(.ct-section) > * + * {
margin-top: 1vmax;
}

.ct-section.owl-spacing--l .ct-section-inner-wrap > * + *,
.owl-spacing--l:not(.ct-section) > * + * {
margin-top: 2vmax;
}

.ct-section.owl-spacing--xl .ct-section-inner-wrap > * + *,
.owl-spacing--xl:not(.ct-section) > * + * {
margin-top: 4vmax;
}
<div class="card-shadow">
    <div class="card-img-container">
        <img class="card-img" src="" alt="" />
        <span class="card-badge-text">content...</span>
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-vertical">
    <div class="card-img-container">
        <img class="card-img" src="" alt="" />
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-horizontal">
    <div class="card-img-container">
        <img class="card-horizontal-img" src="" alt="" />
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-text-only">
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-overlay">
    <div class="card-img-container">
        <img class="card-img img-text" src="" alt="" />
        <span class="card-text-overlay">content...</span>
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content...</div>
    </div>
</div>
<div class="card-dismiss">
    <div class="card-img-container">
        <img class="card-img" src="" alt="" />
        <span class="material-icons card-dismiss-icon"> close </span>
    </div>
    <div class="card-body">
        <div class="card-content">content...</div>
        <div class="card-sub-content">content......</div>
    </div>
</div>
div class="card-badge">
<div class="card-img-container">
    <img class="card-img" src="" alt="" />
    <span class="card-badge-text">content...</span>
</div>
<div class="card-body">
    <div class="card-content">content...</div>
    <div class="card-sub-content">content...</div>
</div>
</div>
.ticker-wrap .ticker {
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}
// NOTAS 
 /*
 1) SVG , PNG ,JPG: 
 para una misma imagen, puede pasar que el peso de svg sea mayor que png o jpg; porque
 dependera de que grafica se lleva a svg, si son figuras simples -> svg pesa poco; pero si son
 muchas imagenes intrincadas entonces svg terminara pesando mas, ya que jpg y png cuardan bits y svg guarda codigo vectorias.
 */

/*
2) -webkit-mask-img "solo funciona para firefox" 
   por lo tanto para enmascarar es mejor usar SVG
   -donde se usara "<image> con width y height obligatorios" y no <img>  
   -aplicar stdDeviation="10" entre 1 y 10 se pasa como que va perdiendo espacio
*/

/*
3) es mejor mover la mascara modificando cx y cy , sera mas simple.

  NOTA: las forma de escalar para un mismo tamaño con  background-image  y <img src=""/>
        No son iguales. es mejor usar un mismo tipo si quiere sobreponer imagenes parecidas y dar           efecto collage
*/

/*
  ENMASCARAR CON 	clipPath esta muy bien, incluso para moverlo con el mousemove es simple; pero 
  "no tiene forma de difuminar los bordes de lamascara con la función gauss"
*/
<!-- Primary/ Secondary Button -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

<!-- Link Button -->
<button class="btn btn-primary-link">
    <a href="">Primary Link Button</a>
</button>
<button class="btn btn-secondary-link">
    <a href="">Secondary Link Button</a>
</button>

<!-- Icon Button -->
<button class="btn btn-primary-icon btn-flex">
    <span class="material-icons"> account_circle </span>
    Primary Icon Button
</button>
<button class="btn btn-secondary-icon btn-flex">
    <span class="material-icons"> notifications </span>
    Secondary Icon Button
</button>

<!-- Floating Action Button -->
<button class="btn btn-float">
    <span class="material-icons"> add </span>
</button>
<button class="btn btn-float">
    <span class="material-icons"> arrow_upward </span>
</button>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Woodstone</h1>
  <h5>Neque porro quisquam</h5>
  <h6>Est. 1958</h6>
</div>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Vanguard</h1>
  <h5>Cras ornare tristique elit</h5>
  <h6>Est. 1965</h6>
</div>
<div class="snip1306">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <h1>Spartacus</h1>
  <h5>At vero eos et accusamus</h5>
  <h6>Est. 1977</h6>
</div>
_______________________________-
  
  @import url(https://fonts.googleapis.com/css?family=Raleway:500);
@import url(https://fonts.googleapis.com/css?family=Righteous);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1306 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  color: #bdbdbd;
  margin: 40px 25px;
  max-width: 285px;
  width: 100%;
  text-align: center;
  font-size: 16px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.snip1306 h1,
.snip1306 h5 {
  margin: 0;
  text-transform: uppercase;
}
.snip1306 h1 {
  font-family: 'Righteous', Arial, sans-serif;
  font-size: 1.8em;
  line-height: 50px;
  position: relative;
  background-color: #bdbdbd;
  color: #212121;
  text-align: center;
  margin: 0 30px 10px;
}
.snip1306 h1:before,
.snip1306 h1:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: -5px;
  border-width: 25px 10px;
  border-style: solid;
}
.snip1306 h1:before {
  left: -23px;
  border-color: #bdbdbd #bdbdbd #bdbdbd transparent;
}
.snip1306 h1:after {
  right: -23px;
  border-color: #bdbdbd transparent #bdbdbd #bdbdbd;
}
.snip1306 h5 {
  font-weight: 500;
}
.snip1306 h6 {
  margin: 0;
  display: inline-block;
  position: relative;
}
.snip1306 h6:before,
.snip1306 h6:after {
  position: absolute;
  height: 1px;
  content: '';
  background: #bdbdbd;
  width: 30px;
  top: 50%;
}
.snip1306 h6:before {
  left: -35px;
}
.snip1306 h6:after {
  right: -35px;
}
.snip1306 .diamond {
  width: 10px;
  height: 10px;
  margin: 15px 5px;
  display: inline-block;
  line-height: 80px;
  background: #bdbdbd;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}
.snip1306 .diamond:nth-of-type(2) {
  -webkit-transform: rotateZ(-45deg) scale(2) translate(2px, -2px);
  transform: rotateZ(-45deg) scale(2) translate(2px, -2px);
}
/* Demo purposes only */
body {
  background-color: #212121;
}
<figure class="snip1515">
  <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample47.jpg" alt="sample47" /></div>
  <figcaption>
    <h3>Fleece Marigold</h3>
    <h4>Founder</h4>
    <p>Which is worse, that everyone has his price, or that the price is always so low.</p>
    <div class="icons"><a href="#"><i class="ion-social-reddit"></i></a>
      <a href="#"> <i class="ion-social-twitter"></i></a>
      <a href="#"> <i class="ion-social-vimeo"></i></a>
    </div>
  </figcaption>
</figure>
<figure class="snip1515">
  <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample83.jpg" alt="sample83" /></div>
  <figcaption>
    <h3>Norman Gordon</h3>
    <h4>Web Designer</h4>
    <p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
    <div class="icons"><a href="#"><i class="ion-social-reddit"></i></a>
      <a href="#"> <i class="ion-social-twitter"></i></a>
      <a href="#"> <i class="ion-social-vimeo"></i></a>
    </div>
  </figcaption>
</figure>
<figure class="snip1515">
  <div class="profile-image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" /></div>
  <figcaption>
    <h3>Ruby Von Rails</h3>
    <h4>Public Relations</h4>
    <p>The only skills I have the patience to learn are those that have no real application in life. </p>
    <div class="icons"><a href="#"><i class="ion-social-reddit"></i></a>
      <a href="#"> <i class="ion-social-twitter"></i></a>
      <a href="#"> <i class="ion-social-vimeo"></i></a>
    </div>
  </figcaption>
</figure>


____________________________________________________________________________________-
  @import url(https://fonts.googleapis.com/css?family=Open+sans);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);
.snip1515 {
  font-family: 'Open Sans', Arial, sans-serif;
  position: relative;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #000000;
  text-align: center;
  line-height: 1.4em;
  font-size: 14px;
  box-shadow: none !important;
}

.snip1515 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.snip1515 .profile-image {
  display: inline-block;
  width: 80%;
  z-index: 1;
  position: relative;
  padding: 10px;
  border: 2px solid #e8b563;
}

.snip1515 .profile-image img {
  max-width: 100%;
  vertical-align: top;
}

.snip1515 figcaption {
  width: 100%;
  background-color: #F2F2F2;
  color: #555;
  padding: 125px 25px 25px;
  margin-top: -100px;
  display: inline-block;
}

.snip1515 h3,
.snip1515 h4,
.snip1515 p {
  margin: 0 0 5px;
}

.snip1515 h3 {
  font-weight: 600;
  font-size: 1.3em;
  font-family: 'Playfair Display', Arial, sans-serif;
}

.snip1515 h4 {
  color: #8c8c8c;
  font-weight: 400;
  letter-spacing: 2px;
}

.snip1515 p {
  font-size: 0.9em;
  letter-spacing: 1px;
  opacity: 0.9;
}

.snip1515 .icons {
  text-align: center;
  width: 100%;
}

.snip1515 i {
  padding: 10px 2px;
  display: inline-block;
  font-size: 18px;
  font-weight: normal;
  color: #e8b563;
  opacity: 0.75;
}

.snip1515 i:hover {
  opacity: 1;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
+++++++++++++++++++++_________________________________________________

/* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
<div class="card-horizontal">
    <div class="card-horizontal-media">
        <img class="responsive-img" src="/src/img/backpack1.jpg" alt="no img">
    </div>
    <div class="d-flex flex-column p-1 gap-1 w-100-per">
        <div class="card-body-header">
            <h2 class="font-size-md m-0">Backpack</h2>
            <h class="font-size-sm color-gray-500">Grey & Black</h>
            <div class="d-flex flex-column font-weight-600">
                <div class="d-flex gap-1">
                    <span>₹ 699 </span>
                    <span class="text-decoration-linethrough"> ₹ 1398</span>
                </div>
                <div class="color-green-600">50% off</div>
            </div>
        </div>
        <button class="btn btn-add-cart btn-secondary w-100-per font-size-regular">Add to Cart</button>
        <button class="btn btn-add-cart btn-outline w-100-per font-size-regular">Remove From Wishlist</button>
    </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
.snip1241 {
  font-family: 'Raleway', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}
.snip1241 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1241 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 1em;
  padding: 0;
}
.snip1241 a {
  padding: 0.5em 0.8em;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  text-decoration: none;
}
.snip1241 a:before,
.snip1241 a:after {
  height: 14px;
  width: 14px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}
.snip1241 a:before {
  right: 0;
  top: 0;
  border-right: 3px solid #9b59b6;
  border-top: 3px solid #9b59b6;
  -webkit-transform: translate(-100%, 50%);
  transform: translate(-100%, 50%);
}
.snip1241 a:after {
  left: 0;
  bottom: 0;
  border-left: 3px solid #9b59b6;
  border-bottom: 3px solid #9b59b6;
  -webkit-transform: translate(100%, -50%);
  transform: translate(100%, -50%);
}
.snip1241 a:hover,
.snip1241 .current a {
  color: #ffffff;
}
.snip1241 a:hover:before,
.snip1241 .current a:before,
.snip1241 a:hover:after,
.snip1241 .current a:after {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  opacity: 1;
}
/* Demo purposes only */
body {
  background-color: #212121;
}
<ul class="snip1241">
  <li class="current"><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<ul class="snip1241">
  <li class="current"><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>
/* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
@import url(https://fonts.googleapis.com/css?family=Work+Sans);
.snip1526 {
  font-family: 'Work Sans', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

.snip1526 *,
.snip1526 *:after {
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.snip1526 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 0.6em;
  -webkit-perspective: 50em;
  perspective: 50em;
}

.snip1526 a {
  backface-visibility: hidden;
  color: #ffffff;
  display: block;
  line-height: 2.2em;
  padding: 0 1.4em;
  position: relative;
  text-decoration: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-color: #667273;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.snip1526 a:after {
  background-color: #5c122e;
  color: transparent;
  content: attr(data-hover);
  top: 0%;
  line-height: 2.2em;
  position: absolute;
  left: 100%;
  width: 100%;
  -webkit-transform: translateX(0%) rotateY(90deg);
  transform: translateX(0%) rotateY(90deg);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.snip1526 li:hover a,
.snip1526 li.current a {
  -webkit-transform: translate(-50%) rotateY(-90deg);
  transform: translate(-50%) rotateY(-90deg);
  background-color: #1e2222;
  color: transparent;
}

.snip1526 li:hover a:after,
.snip1526 li.current a:after {
  background-color: #b12358;
  color: #ffffff;
  cursor: pointer;
}
<ul class="snip1526">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>
@import url(https://fonts.googleapis.com/css?family=Work+Sans);
.snip1526 {
  font-family: 'Work Sans', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

.snip1526 *,
.snip1526 *:after {
  box-sizing: border-box;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.snip1526 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 0.6em;
  -webkit-perspective: 50em;
  perspective: 50em;
}

.snip1526 a {
  backface-visibility: hidden;
  color: #ffffff;
  display: block;
  line-height: 2.2em;
  padding: 0 1.4em;
  position: relative;
  text-decoration: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-color: #667273;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.snip1526 a:after {
  background-color: #5c122e;
  color: transparent;
  content: attr(data-hover);
  top: 0%;
  line-height: 2.2em;
  position: absolute;
  left: 100%;
  width: 100%;
  -webkit-transform: translateX(0%) rotateY(90deg);
  transform: translateX(0%) rotateY(90deg);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.snip1526 li:hover a,
.snip1526 li.current a {
  -webkit-transform: translate(-50%) rotateY(-90deg);
  transform: translate(-50%) rotateY(-90deg);
  background-color: #1e2222;
  color: transparent;
}

.snip1526 li:hover a:after,
.snip1526 li.current a:after {
  background-color: #b12358;
  color: #ffffff;
  cursor: pointer;
}
<ul class="snip1526">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>
<ul class="snip1526">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>
/* Demo purposes only */
var snippet = [].slice.call(document.querySelectorAll('.hover'));
if (snippet.length) {
  snippet.forEach(function (snippet) {
    snippet.addEventListener('mouseout', function (event) {
      if (event.target.parentNode.tagName === 'figure') {
        event.target.parentNode.classList.remove('hover')
      } else {
        event.target.parentNode.classList.remove('hover')
      }
    });
  });
}
<figure class="snip1585">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
  <figcaption>
    <h3>Ingredia <span>Nutrisha</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="sample106" />
  <figcaption>
    <h3>Dianne <span>Ameter</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" alt="sample109" />
  <figcaption>
    <h3>Samuel <span>Serif</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>



@import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);
.snip1585 {
  background-color: rgb(41, 46, 57);
  color: #fff;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  margin: 10px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.snip1585 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1585:before,
.snip1585:after {
  background-color: rgba(46, 52, 64,  0.5);
  border-top: 50px solid rgba(46, 52, 64, 0.5);
  border-bottom: 50px solid rgba(46, 52, 64, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
  opacity: 0;
}

.snip1585:before {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.snip1585:after {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}

.snip1585 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.snip1585 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.snip1585 h3 {
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
}

.snip1585 h3 span {
  display: block;
  font-weight: 700;
}

.snip1585 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.snip1585:hover > img,
.snip1585.hover > img {
  opacity: 0.7;
}

.snip1585:hover:before,
.snip1585.hover:before,
.snip1585:hover:after,
.snip1585.hover:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.snip1585:hover figcaption,
.snip1585.hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
<figure class="snip1585">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
  <figcaption>
    <h3>Ingredia <span>Nutrisha</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="sample106" />
  <figcaption>
    <h3>Dianne <span>Ameter</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1585"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" alt="sample109" />
  <figcaption>
    <h3>Samuel <span>Serif</span></h3>
  </figcaption>
  <a href="#"></a>
</figure>



let box = document.querySelector(".box");
let img1 = document.querySelector(".img1");
const t = img1.getBoundingClientRect();
let bg = img1.querySelector('image');

function moverCursor(e) {
  let x = e.pageX - t.left - (t.width / 2);
  let y = e.pageY - t.top - (t.height / 2);
  
  img1.style.setProperty(`top`, `${y}px`);
  img1.style.setProperty(`left`, `${x}px`);
  
  bg.style.setProperty(`x`, `${-x}px`);
  bg.style.setProperty(`y`, `${-y}px`);
}
box.addEventListener("mousemove", moverCursor);

/*CSS*/
.box {
  width: 500px;
  height: 250px;
  border: 2px solid red;
  position: relative;
  background-image: url(https://picsum.photos/600/250);
  overflow: hidden;
}

.img1 {
  position: absolute;
}



/*HTML*/
<div class="box">
  <svg class="img1"  width="150" height="150">
    <defs>
      <filter id="filter">
        <feGaussianBlur stdDeviation="10" />
      </filter>
      <mask id="mask">
        <ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill="white" filter="url(#filter)"></ellipse>
      </mask>
    </defs>
    <image href="https://picsum.photos/500/250" width="500" height="250" mask="url(#mask)"></image>
  </svg>
</div>

@import url("https://bliss-ui.netlify.app/lib/index.css");
<link rel="stylesheet" href="https://bliss-ui.netlify.app/lib/index.css" />
  .home__button {
  outline-color: transparent;
  padding: 0;
  border-radius: 5em;
  border: 0px solid #000;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2em;
  text-transform: uppercase;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  max-width: 450px;
  font-size: 14px;
  background: #6f75ff;
  color: #ffffff;
  margin-right: 10px;
  width: 96px;
  height: 40px;
}
<!-- CSS -->
   <style>
      .tabbed-content {
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        width: 95%;
        margin: 0 auto;
        margin-left: 20px;
      }

      .tabs-wrapper {
        display: none;
      }

      .tabs-wrapper.current {
        display: inherit;
      }

      .tabs {
        margin: 0;
        padding: 0;
        margin-right: 30px;
        list-style: none;
        display: flex;
        line-height: normal;
      }
      .side.tabs {
        width: 200px;
        float: left;
        display: block;
        margin-top: 0px;
        height: 700px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #f2f2f2;
      }

      /* Individual tab */
      .tab-link {
        color: #fff;
        display: block;
        padding: 15px 25px;
        margin-bottom: 0px;
        background: #c2c2c2;
        cursor: pointer;
        width: 150px;
        text-align: center;
        word-break: break-word;
        letter-spacing: 1.5px;
      }
      .side.tab-link {
        width: 225px;
        text-align: left;
        margin-top: 0px !important;
      }
      .tab-link:hover {
        background: #00693c;
      }
      .tab-link.current {
        background: #00693c;
        color: #fff;
      }
      .tab-content {
        display: none;
        border: 4px solid #cccccc;
        padding: 20px;
        margin: 0;
        float: left;
        min-height: 700px;
        width: 75%;
        box-sizing: border-box;
        position: relative;
      }
      .tab-content.current {
        display: inherit;
      }
    </style>


<!-- HTML FOR THE TABS -->
<div class="tabbed-content">
    <!-- Top Tab Navigation -->
    <ul class="tabs">
        <li class="top-nav tab-link current" data-tab="tides">TIDES</li>
        <li class="top-nav tab-link" data-tab="kentico">Kentico</li>
    </ul>

    <!-- Tabs Wrapper TIDES -->
    <div class="tabs-wrapper current" id="tides">
        <!-- Archive Video -->
        <div class="tab-content current" id="archive">
            <h3>How to Add to the TIDES Feature Archive</h3>
            <p>Small Description here</p>
            <div class="video-wrapper">
                <div class="video-container" id="video-container">
                    <video controls id="video" preload="metadata" width="600" height="400">
                        <source src="../video/2022/Kentico-Staging-Instructions.mp4" type="video/mp4" />
                    </video>
                </div>
            </div>
        </div>

        <!-- Marketing Email Calendar Video -->
        <div class="tab-content" id="calendar">
            <h3>How to Add to the Marketing Email Calendar</h3>
            <p>Small Description here</p>
            <p>Video Here</p>
        </div>

        <!-- TIDES SIDE TAB -->
        <ul class="side tabs">
            <li class="side tab-link current" data-tab="archive">
                How to Add to the TIDES Feature Archive
            </li>
            <li class="side tab-link" data-tab="calendar">
                How to Add to the Marketing Email Calendar
            </li>
        </ul>
    </div>

    <!-- Tabs Wrapper KENTICO -->
    <div class="tabs-wrapper" id="kentico">
        <!-- Kentico Staging Environment Video -->
        <div class="tab-content current" id="kenticoStaging">
            <h3>How to Use the Kentico Staging Environment</h3>
            <p>Small Description here</p>
            <p>Video Here</p>
        </div>

        <!-- Kentico SIDE TAB -->
        <ul class="side tabs">
            <li class="side tab-link current" data-tab="kenticoStaging">
                How to Use the Kentico Staging Environment
            </li>
        </ul>
    </div>
</div>
<!-- JAVASCRIPT FOR THE TABS -->
<script>
    const sideTabs = () => {
      let tabs = document.querySelectorAll(".side .tab-link");
    		let activeTopTab = document.getElementsByClassName("top-nav tab-link current")[0].getAttribute("data-tab");
    
    		tabs.forEach((btn) => {
    			btn.addEventListener("click", () => {
    				let closestTabWraper = btn.closest(".tabs-wrapper");
    		// only want to remove + add classes to sections that are currently visible or active 
    				if(closestTabWraper.id === activeTopTab) {
            //select only btns related to that top tab and remove the current class from all. Adding it back to only the one clicked. 
    					//this accounts for if a button is clicked on itself
    					let visibleTabs = closestTabWraper.querySelectorAll(".side .tab-link")
    					visibleTabs.forEach(b => b.classList.remove("current"));
    					btn.classList.add("current");
    					//Repeat the process for sections, but adding the class to the tabContent that matches the element id of the clicked tab
    					let relatedSections = closestTabWraper.querySelectorAll(".tab-content");
    					relatedSections.forEach(s =>s.classList.remove("current"));
    					let matchingTab = btn.getAttribute("data-tab");
                  document.getElementById(matchingTab).className += " current";
    				}
    			})
    		})
    };
    
    const topTabs = () => {
      const tabs = document.querySelectorAll(".top-nav");
      const tabWrappers = document.querySelectorAll(".tabs-wrapper");
    		tabs.forEach((btn) => {
    			btn.addEventListener("click", () => {
    				tabs.forEach(b => b.classList.remove("current"));
    				btn.classList.add("current");
    				tabWrappers.forEach(t => t.classList.remove("current"));
    				let matchingWrapper = btn.getAttribute("data-tab");
    				document.getElementById(matchingWrapper).classList.add("current");
    			});
    		})
    };
    
    topTabs();
    sideTabs();
</script>
<div style={{position: 'absolute', width: '300px', height: '300px'}}>
        <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="100%">
          <path fill="url(#gradient)">
            <animate
              attributeName='d'
              dur='10000ms'
              repeatCount='indefinite'
              values='
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
                M382.5,342Q310,434,205.5,396Q101,358,98.5,248Q96,138,207.5,87.5Q319,37,387,143.5Q455,250,382.5,342Z;
                M399.5,340.5Q309,431,207.5,393Q106,355,101.5,247Q97,139,201.5,108.5Q306,78,398,164Q490,250,399.5,340.5Z;
                M383.5,362Q323,474,210.5,417Q98,360,78,235Q58,110,185.5,83Q313,56,378.5,153Q444,250,383.5,362Z;
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
              '
            >
            </animate>
          </path>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" style={{stopColor: 'rgb(255, 95, 109)'}}/>
              <stop offset="100%" style={{stopColor: 'rgb(255, 195, 113)'}}/>
            </linearGradient>
          </defs>
        </svg>
      </div>
<script src="https://gist.github.com/shmbajaj53/f67cacf4cfbdb3b236dc7e62d76acf5e.js"></script>
<div class="rating-container">
    <h1>Rate Product</h1>
    <div class="star-icon">
        <input type="radio" name="rating1" id="rating1" />
        <label for="rating1" class="material-icons"> star </label>
        <input type="radio" name="rating2" id="rating2" />
        <label for="rating2" class="material-icons"> star </label>
        <input type="radio" name="rating3" id="rating3" />
        <label for="rating3" class="material-icons"> star </label>
        <input type="radio" name="rating4" id="rating4" />
        <label for="rating4" class="material-icons"> star </label>
        <input type="radio" name="rating5" id="rating5" />
        <label for="rating5" class="material-icons"> star </label>
    </div>
</div>
<div class="parent">
    <img src="../assets/tourism.png" alt="" />
    <section class="snackbar">
        <span>Can't send Photos. Retry in 5 seconds.</span>
        <h3 class="retry">RETRY</h3>
        <div class="cross">X</div>
    </section>
</div>
<!DOCTYPE html>  
<html>  
<head>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(document).ready(function() {  
 $("h1").css("color", "red");  
 });  
 </script>  
 </head>  
<body>  
<h1>This is first paragraph.</h1>  
<p>This is second paragraph.</p>  
<p>This is third paragraph.</p>  
</body>  
</html>  

 
<!-- h1 to h6 -->
<div class="txt-util-wrap">
    <h1>This is H1 HEADING</h1>
    <h2>This is H2 HEADING</h2>
    <h3>This is H3 HEADING</h3>
    <h4>This is H4 HEADING</h4>
    <h5>This is H5 HEADING</h5>
    <h6>This is H6 HEADING</h6>
</div>

<!-- alignment -->
<div class="txt-util-wrap">
    <p class="txt-left">This text is left aligned</p>
    <p class="txt-center">This text is Center aligned</p>
    <p class="txt-right">This text is right aligned</p>
</div>
<!-- decoration -->
<div class="txt-util-wrap">
    <p class="txt-grey">This text GREY COLORED</p>
    <p class="txt-underline">Underline text</p>
</div>
<!-- diff sizes -->
<div class="txt-util-wrap">
    <p class="txt-lg">This is large text</p>
    <p class="txt-md">This is medium text</p>
    <p class="txt-sm">This is small text</p>
    <p>This is Default text</p>
</div>
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}
<div class="navigation">
    <ul class="nav-list">
        <li class="nav-list-item">Logo</li>
    </ul>
    <ul class="nav-list">
        <li class="nav-list-item"><input type="text" placeholder="Search"></li>
    </ul>
    <ul class="nav-list">
        <li class="nav-list-item"><button>Login</button></li>
        <li class="nav-list-item">WishList</li>
        <li class="nav-list-item">Cart</li>
    </ul>
</div>
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}
<ul class="stacked-list">
  <li class="list-border">
    <img src="your_img_loc" alt=""> 
    <span>Friend 1 commented on your post</span></li>
  <li class="list-border">
    <img src="your_img_loc" alt="">
    <span>Friend 2 liked your post</span> </li>
  <li class="list-border">
    <img src="your_img_loc" alt="">
    <span>Friend 3 sent Friend request</span></li>
</ul>
<ul class="spaced-list">
    <li class="list-normal">Item 1</li>
    <li class="list-normal">Item 2</li>
    <li class="list-normal">Item 3</li>
</ul>

<ul class="spaced-list">
    <li class="text-decoration-none">Item 1</li>
    <li class="text-decoration-none">Item 2</li>
    <li class="text-decoration-none">Item 3</li>
</ul>
public class Simba{
	public static void main(String args[]){
	System.out.println("Hello Element Tutorials");
	}}
<?php
  $myVar = 'red';
  
  switch ($myVar) {
      case 'red':
          echo 'It is red';
          break;
      case 'blue':
          echo 'It is blue';
          break;
      case 'green':
          echo 'It is green';
          break;
  }
  ?> 
  
<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<!DOCTYPE html>  
<html>  
<head>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(document).ready(function() {  
 $("h1").css("color", "red");  
 });  
 </script>  
 </head>  
<body>  
<h1>This is first paragraph.</h1>  
<p>This is second paragraph.</p>  
<p>This is third paragraph.</p>  
</body>  
</html>  

 
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript can change HTML content</h1>

<p id="one">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("one").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>
<!DOCTYPE html>
  <html>
  <head>
  <style>
  body {
    background-color: lightpink;
  }
  
  h1 {
    color: yellow;
    text-align: center;
  }
  
  p {
    font-family: roboto;
    font-size: 27px;
  }
  </style>
  </head>
  <body>
  
  <h1>My First CSS Example</h1>
  <p>This is a paragraph.</p>
  
  </body>
  </html>
  
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML table Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid red;
    }
</style>
</head>
<body>
    <table>
        <caption>User Details</caption>
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alura</td>
                <td>alura@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>John</td>
                <td>john@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Milinda</td>
                <td>milida@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>




	
<!DOCTYPE html>
<html>
<head>
    <title>HTML style tag</title>
    <style type="text/css">
        h1 { color: red; }
        p { color: yellow; }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML input tag</title>
</head>
<body>
    <form action="yourfile" method="post">
        <label for="first-name">First name:</label>
        <input type="text" name="first-name" id="first-name">
        <input type="submit" value="Submit">
        <input type="reset" name="Reset">
    </form>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML img tag</title>
</head>
<body>
    <div>
   		<img src="/img/example.png" alt="html">
    	
    </div>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML iframe tag</title>
</head>
<body>
    <iframe src="/index.html" width="400" height="300" scrolling="auto">
        <p>[Your browser does not support frames or is currently configured not to display frames. However, you may visit <a href="https://www.elementtutorials.com/">the related document.</a>]</p>
    </iframe>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML i tag</title>
</head>
<body>
    <p>Here is some <i>italic</i> text.</p>
	<p>Here is some <i>more italic</i> text.</p>
</body>
</html>
<h1 class="heading-1">This is h1 heading</h1>
<h2 class="heading-2">This is h2 heading</h2>
<h3 class="heading-3">This is h3 heading</h3>
<h4 class="heading-4">This is h4 heading</h4>
<h5 class="heading-5">This is h5 heading</h5>
<h6 class="heading-6">This is h6 heading</h6>

<div>
    <span class="small-text">This is small text</span>
</div>

<div>
    <span class="gray-text">This is gray text</span>
</div>

<p class="center-text">This is center text</p>
<!DOCTYPE html>
<html>
<head>
    <title>A Complete HTML document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML hr tag</title>
</head>
<body>
    <p>This is the first paragraph of text.</p>
    <hr>
    <p>This is second paragraph of text.</p>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML headings tag</title>
</head>
<body>
    <h1>Heading  1</h1>
    <h2>Heading  2</h2>
    <h3>Heading  3</h3>
    <h4>Heading  4</h4>
    <h5>Heading  5</h5>
    <h6>Heading  6</h6>
</body>
</html> 







<!DOCTYPE html>
<html>
<head>
<title>Example of HTML header Tag</title>
</head>
<body>
    <header>
		<h1>Top Browsers</h1>
		<nav>
			<p>
                <a href="https://www.google.com">google</a> | 
                <a href="https://www.yahhoo.com">yahoo</a> | 
                <a href="https://www.bing.com">bing</a>
            </p>
		</nav>
	</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML head tag</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML form tag</title>
</head>
<body>
    <form>
        <p>
            First name: <input type="text" name="first-name">
            <button type="submit" value="Submit">Submit</button>
            <button type="reset" value="Reset">Reset</button>
        </p>
    </form>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML footer Tag</title>
</head>
<body>
    <footer>
		<nav>
			<p>
				<a href="https://www.google.com/">Terms of Use</a> |
				<a href="https://www.google.com/">Privacy Policy</a>
			</p>
		</nav>
		<p>Copyright &copy; 1998 </p>
	</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML figure Tag</title>
</head>
<body>
    <figure>
		<img src="image.jpg" alt="Space Shuttle">
		
	</figure>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML fieldset tag</title>
</head>
<body>
    <form action="http://www.google.com/" method="post">
        <fieldset>
            <legend>Gender</legend>
            <input type="radio" name="gender" value="male" id="male">
            <label for="male">Male</label>
            <input type="radio" name="gender" value="female" id="female">
            <label for="female">Female</label>
        </fieldset>
    </form>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML embed Tag</title>
</head>
<body>
    <embed src="/index.html" width="500" height="500">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML em tag</title>
</head>
<body>
    <p>This is an <em>important point</em> to consider.</p>
	<p>This is one more <em>important point</em> to consider.</p>
</body>
</html>
	<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML dt tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line2</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML dl tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML div tag</title>
    <style type="text/css">
        .welcome-box{
            background:lightblue;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="welcome-box">
        <h1>Welcome</h1>
        <p>Hi, welcome to our website.</p>
    </div>
    <p><strong>Note:</strong> To learn more about style rules please study tutorials on <a href="">CSS</a>.</p>
</body>
</html> 
<!DOCTYPE>
<html>  
<body>  
 
<dialog> <p>This is an HTML dialog popup</p> <button id="close">Close Dialog</button>
  </dialog> 
  <button id="show">Show Me the Dialog</button> 

  <script>  
    
    var dialog = document.querySelector('dialog'); 
    document.querySelector('#show').onclick = function() { 
      dialog.show(); }; document.querySelector('#close').onclick = 
        function() { dialog.close(); }; 
  </script>
  

</body>
</html>  
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML dfn tag</title>
</head>
<body>
    <p>The <dfn title="Hyper Text Markup Language">HTML</dfn> is the publishing language of the World Wide Web.</p>
</body>
</html> 
<html>
<head>
<title>Example of HTML details Tag</title>
<style type="text/css">
    details{
    	margin: 10px;
    }
</style>
</head>
<body>
<details>
    <summary>What is HTML?</summary>
    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of web pages.</p>
</details>
<details>
    <summary>What is Twitter Bootstrap?</summary>
    <p>Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. </p>
</details>
<details>
    <summary>What is CSS?</summary>
    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. </p>
</details>
<p><strong>Note:</strong> The details tag currently not supported in Firefox and Internet Explorer.</p>
</body>
</html>                                		
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML del tag</title>
</head>
<body>
    <h1>To Do</h1>
    <ul>
        <li>$2000</li>
        <li>$3000</li>
        <li><del>$4000</del></li>
        <li>$5000</li>
    </ul>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML dd tag</title>
</head>
<body>
    <h1>Definition List</h1>
    <dl>
        <dt>line1</dt>
        <dd>– definition1</dd>
        <dt>line2</dt>
        <dd>– definition2</dd>
    </dl>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of HTML data Tag</title>
<style>
    data:hover::after {
        content: ' (ID ' attr(value) ')';
        font-size: .7em;
    }
</style>
</head>
<body>
    <p>New Movie Makers</p>
    <ul>
        <li><data value="204">Alson</data></li>
        <li><data value="205">Corner</data></li>
        <li><data value="206">John</data></li>
    </ul>
	<p><strong>Note:</strong> Place the mouse pointer over the list item to see how it actually works.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML col Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <table>
        <colgroup>
            <col style="background-color:red">
            <col span="2" style="background-color:yellow">
        </colgroup>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Alson</td>
            <td>Alson@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Corner</td>
            <td>Corner@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John doe</td>
            <td>John@mail.com</td>
        </tr>
    </table>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML code tag</title>
</head>
<body>
    <p>This is paragraph <code>computer code</code> another line.</p>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML cite Tag</title>
</head>
<body>
    <p>My favorite movie is <cite>Avengers</cite>.</p>
	<p>My another favorite movie is <cite>Bloodshoot</cite>.</p>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML caption Tag</title>
<style type="text/css">
    table, td, th {
        border: 1px solid gray;
    }
</style>
</head>
<body>
    <table>
        <caption>User Details</caption>
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alson</td>
                <td>Alson@mail.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Conner</td>
                <td>Conner@mail.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John Doe</td>
                <td>John@mail.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>



  

<!DOCTYPE html>
  <html>
  <body>
  
  <canvas id="firstcanvas" width="500" height="500" style="border:1px solid red;">
  Your browser does not support the HTML canvas tag.
  </canvas>
  
  </body>
  </html>
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML button tag</title>
</head>
<body>
    <form>
        <p>
            First name: <input type="text" name="first-name">
            <button type="submit" value="Submit">Submit</button>
            <button type="reset" value="Reset">Reset</button>
        </p>
    </form>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML br tag</title>
</head>
<body>
    <p>This paragraph contains<br>a line break.</p>
	<p>This paragraph contains <br>multiple <br>line breaks.</p>
</body>
</html> 






<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML body tag</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML blockquote tag</title>
</head>
<body>
    <blockquote>
        <p>This is an example of a long quotation.</p>
    </blockquote>
</body>
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML bdo tag</title>
</head>
<body>
    <p>The sequence "1-2-3-4-5" was reversed as: <bdo dir="rtl">1-2-3-4-5</bdo></p>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML bdi Tag</title>
</head>
<body>
  <p>If the bdi element is not supported in the browser, the username of the Arabic user would confuse the text</p>
    <p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML base tag</title>
    <base href="https://www.elementtutorials.com/">
</head>
<body>
	<p>Learn <a href="https://www.elementtutorials.com/">CSS</a>.</p>
</body>
</html> 


<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML b Tag</title>
</head>
<body>
    <p>This <b>sentence</b> contains some <b>bold</b> words.</p>
	<p>Here are <b>some</b> more <b>bold</b> words.</p>
</body>
</html> 


<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML audio Tag</title>
</head>
<body>
	<audio controls="controls" src="/audio.mp3">
        Your browser does not support the HTML5 audio element.
    </audio>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML aside Tag</title>
</head>
<body>
	<h1>Apollo 13 Mission</h1>
	<p>This is paragraph</p>
	<p>[...]</p>
    <aside>
		<h1>Apollo 13 Facts</h1>
		<p>The aside element represents a section of the web page that encloses content which is tangentially related to the content around it.</p>
	</aside>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML article Tag</title>
</head>
<body>
    <article>
		<h1>Introduction to HTML</h1>
		<p>HTML is a markup language that is used for creating web pages.</p>
	</article>
</body>
</html>


<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="/img/favicon.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML address tag </title>
</head>
<body>
    <address>
        Written by <a href="mailto:hello@example.com">Alson</a>.<br> 
        Contact us at:<br>
        street NO:, Hollywood<br>
        USA
    </address>
</body>
</html> 

<!DOCTYPE html>
<html>
<head>
    <title>Example of HTML a tag</title>
</head>
<body>
<a href="https://www.elementtutorials.com/">ElementTutorials</a>
</body>
</html> 

<div class="image-round">
    <img src="your_img_loc" alt="">
</div>
<div class="image-responsive">
    <img src="your_img_loc" alt="">
</div>
<form action="" class="input-wrap flex-col">
    <!-- textbox -->
    <div class="textbox flex-col">
        <label for="review" class="heading">Give Feedback</label>
        <textarea name="review" id="" cols="30" rows="10"></textarea>
    </div>
    <!-- input with validation -->
    <div class="input-group correct flex-col">
        <label for="email">Email</label>
        <input type="email" class="input-area" placeholder="rushikesh@neog" />
        <p>Email matches with database</p>
    </div>
    <div class="input-group error flex-col">
        <label for="pass">Enter Password</label>
        <input type="password" class="input-area" placeholder="pass@1234" />
        <p>Password must contain special characters*</p>
    </div>
</form>
<form class="form-container mb-1" action="">
	<div class="form-header">Form</div>
	<div class="form-body">
		<label for="email">Email</label>
		<input type="email" placeholder="example@example.com">
	</div>
    <div class="form-body">
    	<label for="password">Password</label>
        <input type="password" placeholder="password">
    </div>
    <button class="btn-primary">Submit</button>
</form>
<div>
    <div class="input-container">
        <label for="name">Name</label>
        <input type="text" placeholder="Enter name" class="input-default" name="name" />
        <span>Default Message</span>
    </div>
    <div class="input-container">
        <label for="email">Email</label>
        <input type="email" placeholder="Enter Email" class="input-fail" name="email" />
        <span class="text-fail">Error Message</span>
    </div>
    <div class="input-container">
        <label for="password">Password</label>
        <input type="password" placeholder="Password" class="input-success" name="password" />
        <span class="text-success">Success Message</span>
    </div>
</div>
<div class="textarea-container">
    <textarea class="textarea" placeholder="Write here..."></textarea>
    <button>Send</button>
</div>
img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="responsive-img-set">
    <p>Responsive image</p>
    <img class="img-resp" src="../assets/gamepad.jpg" alt="img-resp" />
    <p>Round and Responsive image</p>
    <img class="img-resp img-round" src="../assets/gamepad.jpg" alt="rsp-round-img" />
</div>
<div class="rel">
    <img class="av" src="your_img_loc" alt="" />
    <span class="status red"></span>
</div>
<div class="rel">
    <img class="av" src="your_img_loc" alt="" />
    <span class="status green"></span>
</div>
<div class="rel">
    <img class="av" src="your_img_loc" alt="" />
    <span class="status gray"></span>
</div>
<div class="rel">
    <img class="av" src="your_icon_loc" alt="" />
    <span class="status icon-status green"></span>
</div>
<div class="badge-container">
    <img class="badge-img" src="" alt="" />
    <span class="badge-avatar">5</span>
</div>
<div class="badge-container">
    <span class="material-icons black"> notifications </span>
    <span class="badge-icon">5</span>
</div>
<div class="alert alert-primary">This is Primary Alert</div>
<div class="alert alert-secondary">This is Secondary Alert</div>
<div class="alert alert-error">This is Error Alert</div>
<div class="alert alert-warning">This is Warning Alert</div>
<div class="alert alert-success">This is Success Alert</div>
 <!-- Cards with shadow -->
 <div class="card-with-shadow">
     <div class="card">
         <img class="brand-img" src="../assets/gow.jpg" alt="demo" />
         <div class="card-info">
             <h5 class="product-name">God of War</h5>
             <p class="description">PEGI Rating: Ages 16 and Above</p>
             <div class="green-rate">
                 4.5 <span class="material-icons star-icon"> star </span>
             </div>

             <span class="price"><sup>₹</sup>2,970<s>5,499</s><span class="saving">Save 2,529 (46%)</span></span>
             <button class="card-btn primary-btn">BUY NOW</button>
             <button class="card-btn card-icon-btn">
                 <span class="material-icons icon"> shopping_cart </span>
                 Add to Cart
             </button>
         </div>
     </div>
 </div>
  <!-- Horizontal cards -->
  <div class="card hori-card">
      <img class="brand-img" src="../assets/gow.jpg" alt="demo" />
      <div class="card-info">
          <h5 class="product-name">God of War</h5>
          <p class="description">PEGI Rating: Ages 16 and Above</p>
          <div class="green-rate">
              4.5 <span class="material-icons star-icon"> star </span>
          </div>

          <span class="price"><sup>₹</sup>2,970<s>5,499</s><span class="saving">Save 2,529 (46%)</span></span>
          <button class="card-btn primary-btn">BUY NOW</button>
          <button class="card-btn card-icon-btn">
              <span class="material-icons icon"> shopping_cart </span>
              Add to Cart
          </button>
      </div>
  </div>
  <div class="text-only">
      <h3>This is text only card</h3>
      <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam
          expedita laudantium qui libero omnis praesentium veritatis dicta eos
          itaque consequatur repellendus mollitia possimus labore dolor,
          doloribus, animi perspiciatis provident maiores.
      </p>
  </div>
<!-- Cards with text overlay -->
<div class="overlay relative-wrap">
    <img src="https://picsum.photos/200" alt="img" />
    <div class="text-overlay top">
        <h3>This is text overlay card</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam
            expedita laudantium qui libero omnis praesentium veritatis dicta eos
            itaque consequatur repellendus mollitia possimus labore dolor,
            doloribus, animi perspiciatis provident maiores.
        </p>
    </div>
</div>
<!-- 2nd one -->
<div class="overlay relative-wrap">
    <img src="../assets/uncharted.jpeg" alt="img" />
    <div class="text-overlay bg-color">
        <h3>Uncharted 4</h3>
        <p>
            Uncharted 4: A Thief's End is a 2016 action-adventure game developed
            by Naughty Dog and published by Sony Computer Entertainment
        </p>
    </div>
</div>
  <!-- Cards with dismiss -->
  <div class="card opa relative-wrap">
      <img class="brand-img" src="../assets/gow.jpg" alt="demo" />
      <div class="card-info">
          <h5 class="product-name">God of War</h5>
          <p class="description">PEGI Rating: Ages 16 and Above</p>
          <div class="green-rate">
              4.5 <span class="material-icons star-icon"> star </span>
          </div>

          <span class="price"><sup>₹</sup>2,970<s>5,499</s><span class="saving">Save 2,529 (46%)</span></span>

          <button class="card-btn primary-btn">BUY NOW</button>
          <button class="card-btn card-icon-btn">
              <span class="material-icons icon"> shopping_cart </span>
              Add to Cart
          </button>
      </div>
      <h3 class="out-stock">OUT OF STOCK</h3>
      <button class="btn dismiss float-action">
          <span class="material-icons close"> close </span>
      </button>
  </div>
<!-- Cards with badges -->
<div class="card relative-wrap">
    <img class="brand-img" src="../assets/gow.jpg" alt="demo" />
    <div class="card-info">
        <h5 class="product-name">God of War</h5>
        <p class="description">PEGI Rating: Ages 16 and Above</p>
        <div class="green-rate">
            4.5 <span class="material-icons star-icon"> star </span>
        </div>

        <span class="price"><sup>₹</sup>2,970<s>5,499</s><span class="saving">Save 2,529 (46%)</span></span>

        <button class="card-btn primary-btn">BUY NOW</button>
        <button class="card-btn card-icon-btn">
            <span class="material-icons icon"> shopping_cart </span>
            Add to Cart
        </button>
    </div>
    <h3 class="card-badge">Gamer's <span>choice</span></h3>
</div>
<!-- Simple card -->
<div class="card">
    <img class="brand-img" src="../assets/gow.jpg" alt="demo" />
    <div class="card-info">
        <h5 class="product-name">God of War</h5>
        <p class="description">PEGI Rating: Ages 16 and Above</p>
        <div class="green-rate">
            4.5 <span class="material-icons star-icon"> star </span>
        </div>

        <span class="price"><sup>₹</sup>2,970<s>5,499</s><span class="saving">Save 2,529 (46%)</span></span>
        <button class="card-btn primary-btn">BUY NOW</button>
        <button class="card-btn card-icon-btn">
            <span class="material-icons icon"> shopping_cart </span>
            Add to Cart
        </button>
    </div>
</div>
// hay dos formas de hacer: 1(variables css y .setProperty para modificar las propiedades);
                          y 2(usando vien `` y clipPath=`circle()`).
                          
1) 
//solo agregamos correcatamente objeto.style.clipPath = `circle(50px at $(x) $(y))`; siendo x,y //variables de la función que gracias a `` se podran incluir.

2)
//javascript
let img1 = document.querySelector(".img1");
const t = img1.getBoundingClientRect();
function moverCursor(e){
    let m = e.pageX - t.left  ;
    let n = e.pageY - t.top  ;
    img1.style.setProperty(`--x`,`${m}px`);
    img1.style.setProperty(`--y`,`${n}px`);
}
img1.addEventListener("mousemove", moverCursor);

//css
.box {
   width: 500px;
   height: 250px;
   border: 2px solid red;
   position: relative;
}

.img1 {
   width: 450px;
   height: 240px;
   background-color: purple;
   --x: 0px;
   --y: 0px;
   --r: 50px;
   clip-path: circle(var(--r) at var(--x) var(--y));
}
//html
    <div class="box">
	<div class="img1">Hello word, hola mundo<br>Hello word, hola mundo<br>Hello word, hola mundo</div>
    </div>
 <button class="btn primary-btn">PRIMARY BUTTON</button>
 <a style="text-decoration: none" href="https://coolors.co"> <button class="btn linked-btn">
         <span class="material-icons">
             link
         </span>
         Click here
     </button></a>
 <button class="btn icon-btn">
     <span class="material-icons">
         shopping_cart
     </span>
     Add to Cart
 </button>
 <button class="btn float-action">
     +
 </button>
 <div class="alert_wrap success">
     <i class="material-icons">
         check_circle</i>
     <h3>NEOG-ALERT.COM: Success Alert</h3>
     <i class="material-icons">
         highlight_off
     </i>
 </div>

 <div class="alert_wrap info">
     <i class="material-icons">
         info
     </i>
     <h3>NEOG-ALERT.COM: Info Alert</h3>
     <i class="material-icons">
         highlight_off
     </i>
 </div>

 <div class="alert_wrap danger">
     <i class="material-icons">
         warning
     </i>
     <h3>NEOG-ALERT.COM: Danger Alert</h3>
     <i class="material-icons">
         highlight_off
     </i>
 </div>

 <div class="alert_wrap warning">
     <i class="material-icons">
         error_outline
     </i>
     <h3>NEOG-ALERT.COM: Warning Alert</h3>
     <i class="material-icons">
         highlight_off
     </i>
 </div>
<div class="badge-collection">
    <!-- 1st  -->
    <div class="relative-container">
        <p>Notification</p>
        <div class="badge top-right">4</div>
    </div>
    <!-- 2nd  -->
    <div class="relative-container">
        <p>Messages</p>
        <div class="badge lrg top-right">1</div>
    </div>
    <div class="relative-container">
        <i class="fab fa-twitter icon-badge"></i>
        <div class="badge lrg top-right">1</div>
    </div>
    <!-- 3rd  -->
    <div class="relative-container">
        <button class="btn-1">Action</button>
        <div class="badge top-left">8</div>
    </div>
    <!-- 4th  -->
    <div class="relative-container">
        <button class="btn-2 hide">Hide</button>
        <div class="badge top-right hide_it">7</div>
    </div>

</div>
<div class="img_avatar_set">
    <div class="relative-wrap">
        <img class="img-avatar small" src="https://picsum.photos/200" alt="" />
        <div class="circle bottom-right"></div>
    </div>
    <div class="relative-wrap">
        <img class="img-avatar medium" src="https://picsum.photos/200" alt="" />
        <div class="circle bottom-right online"></div>
    </div>
    <div class="relative-wrap">
        <img class="img-avatar large" src="https://picsum.photos/200" alt="" />
        <div class="circle bottom-right issue"></div>
    </div>
    <div class="relative-wrap">
        <img class="img-avatar largest" src="https://picsum.photos/200" alt="" />
        <div class="circle bottom-right offline"></div>
    </div>
</div>
<div class="img_avatar_set">
    <img class="img-avatar small maron-border" src="https://picsum.photos/200" alt="" />
    <img class="img-avatar medium online-border" src="https://picsum.photos/200" alt="" />
    <img class="img-avatar large issue-border" src="https://picsum.photos/200" alt="" />
    <img class="img-avatar largest" src="https://picsum.photos/200" alt="" />
</div>
 <div class="text_avatar">
     <div class="named-avatar small-na"><span>RT</span></div>
     <div class="named-avatar medium-na"><span>RT</span></div>
     <div class="named-avatar large-na"><span>RT</span></div>
     <div class="named-avatar"><span>RT</span></div>
 </div>
<div class="rel">
  <img class="avatar" src="you_img_loc" alt="img" />
  <span class="status red"></span>
</div>
<div class="rel">
  <img class="avatar" src="you_img_loc" alt="img" />
  <span class="status green"></span>
</div>
<div class="rel">
  <img class="avatar" src="you_img_loc" alt="img" />
  <span class="status gray"></span>
</div>
<div class="rel">
  <img class="avatar" src="your_icon_loc" alt="icon" />
  <span class="status icon-status green"></span>
</div>
<img class="avatar avatar-sm" src="your_img_loc" alt="img" />
<img class="avatar avatar-md" src="your_img_loc" alt="img" />
<img class="avatar avatar-lg" src="your_img_loc" alt="img" />
<img class="avatar avatar-xl" src="your_img_loc" alt="img" />
<style>
.thrivecart-courses-page {
background-image: url( ADD IMAGE URL HERE );
background-repeat: no-repeat;
background-size: cover; }
</style>
<style>
/* Font Rendering */
body 
{
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: 
 antialiased; -text-rendering: 
 auto;
}      
h1, h2, h3 {-text-rendering: optimizeLegibility;} 
</style>
//paste in the body of the page and place a div with an id of “instagram-feed”//
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Instagram-Photos-Without-API-instagramFeed/jquery.instagramFeed.js"></script>
<script>
$(window).on('load', function(){
  $.instagramFeed({
    'username': 'flux.academy',
    'container': "#instagram-feed",
    'items': 5,
    'margin': 1
  });
});
</script>
//Hide unnessesary stuf and wrap all (paste the code in the head of the page)//
<style>
.instagram_profile {
  display: none
}

.instagram_profile {
  display: none
}

.instagram_gallery {
    display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;

   -webkit-flex-direction: row;
   -ms-flex-direction: row;
    flex-direction: row;

   -webkit-align-items: center;
   -ms-flex-align: center;
    align-items: center;

   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
    justify-content: space-between; 
    
   -webkit-flex-flow:row wrap;
   -ms-flex-flow:row wrap;
   flex-flow:row wrap;
}

//controll number of images per row with the "%"
.instagram_gallery a {
  width: 33.33% !important;
}

.instagram_gallery a img {
  width: 98%!important;
  display: block;
  height: auto;
}
</style>
<!--ESTILOS:
- Toda la barra se llama: scrollbar(barra = en ingles "bar")
- thumb: se le llama al pulgar que esta dentro
- track: se le llama al camino, pista.
Entonces cuendo quieras editar solo tienes que combinar:
::-webkit-scrollbar{}
::-webkit-scrollbar-thumb{}
::-webkit-scrollbar-track{}
A todos puedes aplicarles: puedes aplicarle border-radious, background, etc..
EXEPTO: dimenciones como whidth(esto le corresponde a la barra (scrollbar)).
NOTA: primero se deve editar(aunque sea minimo) scrollbar sino no correra las ediciones de los 
      otros componentes     
-->

<!--TRANSICIÓN: Se le denomina Smooth Scroll al efecto de transición
-CSS: scroll-behavior: smooth; para transiciones suabes
  html {
  scroll-behavior: smooth; // se le aplica al elemento que genera el scroll, ejemp la pagina.
  }
-Javascript: 
  window.scroll({
    top: 2500, 
    left: 0, 
    behavior: 'smooth'
  }); // aplicado a la ventana principal. vea el link hay otro caso
-->
/*
Sass offers a long list of built-in functions. They serve all kinds of purposes including string manipulation, color related operations, and some handy math methods such as random() and round().

To exhibit one of the more simple Sass functions, we will create a quick snippet that utilizes darken($color, $amount) to make an on-hover effect.
*/

$awesome-blue: #2196F3;

a {
  padding: 10px 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}
/* 
Although vanilla CSS now also offers this feature in the form of calc(), the Sass alternative is quicker to write, has the modulo % operation, and can be applied to a wider range of data-types (e.g. colors and strings). 
*/

$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}
.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}
@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}
<div id="container">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>
<!--
const element = document.querySelector("#container");

element.addEventListener('wheel', (event) => {
  event.preventDefault();

  element.scrollBy({
    left: event.deltaY < 0 ? -30 : 30,
    
  });
});
-->

<!--
#container {
  display: flex;
  overflow-x: scroll;
  
  max-width: 50rem;
  margin: 0 auto;
}

#container p {
  font-family: sans-serif;
  
  border-radius: 8px;
  background: #ff6961;
  color: white;
  
  padding: 2rem 3rem;
  margin: 2rem 1rem;
}
-->
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}
/* Language Switcher */
header ul.sub-menu{
    padding: 14px 20px !important;
    background-color: #FFF;
    box-shadow: 0 10px 25px rgb(32 32 35 / 14%);
    border-radius: 6px;
}
header ul.sub-menu > li > a{
    text-align: left !important;
    transition: all .3s ease-in-out;
}
header ul.sub-menu > li span.menu-item-text > img{
    vertical-align: sub;
    width: 16px !important;
    max-height: 16px !important;
    height: 16px !important;
    border-radius: 50%;
}
.pp-advanced-menu .pp-has-submenu-container img{
    display: none;
}
.pp-advanced-menu .pp-has-submenu-container span.menu-item-text::before{
    content: "\f0ac";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    display: inline-block;
    font-size: 16px;
    margin-right: 5px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.pp-advanced-menu .pp-has-submenu-container .pp-menu-toggle{
    right: -10px;
}
header .pp-advanced-menu ul.menu > li.menu-item-has-children.pp-has-submenu:hover span.pp-menu-toggle {
    transform: rotate(-180deg);
}
header .pp-advanced-menu ul.menu > li.menu-item-has-children.pp-has-submenu span.pp-menu-toggle {
    transition: all .3s ease-in-out;
}
body:not(.fl-builder-edit) header .pp-advanced-menu ul.menu > li.menu-item-has-children.pp-has-submenu {
    padding: 25px 0;
}
ul.sub-menu > li.lang-item-en span.menu-item-text img,
ul.sub-menu > li.lang-item-id span.menu-item-text img,
ul.sub-menu > li.lang-item.current-lang{
    display: none;
}
ul.sub-menu > li.lang-item > a{
    padding: 0 !important;
}
ul.sub-menu > li.lang-item-en span.menu-item-text::before,
ul.sub-menu > li.lang-item-id span.menu-item-text::before{
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    vertical-align: middle !important;
}
ul.sub-menu > li.lang-item span.menu-item-text > span{
    margin-left: 10px !important;
}
ul.sub-menu > li.lang-item-en span.menu-item-text::before{
    background: url('/wp-content/uploads/australia.svg');
}
ul.sub-menu > li.lang-item-id span.menu-item-text::before{
    background: url('/wp-content/uploads/indonesia.svg');
}
@media(min-width: 860px){
  header .pp-advanced-menu ul.menu > li.menu-item > a{
    position: relative;
  }
  header .pp-advanced-menu ul.menu > li.menu-item > a:before{
      position: absolute;
      width: 0;
      height: 2px;
      content: "";
      bottom: -10px;
      left: 50%;
      transform: translatex(-50%);
      -webkit-transform: translatex(-50%);
      -moz-transform: translatex(-50%);
      background-color: #EF9A9A;
      border-radius: 5px;
      transition: 0.6s width ease;
  }
  header .pp-advanced-menu ul.menu > li.menu-item > a:hover:before,
  header .pp-advanced-menu ul.menu > li.active > a:before{
      width: 25px;
  }
  header .pp-advanced-menu ul.menu > li.active > a{
      color: #EF9A9A !important;
  }
}
header.fl-theme-builder-header-shrink .fl-row-content-wrap {
    box-shadow: 0 1px 25px rgba(57,63,72,.1);
    padding: 10px 20px;
}
header .menu > li.menu-item:last-child{
    display: none;
}
header .pp-advanced-menu ul.menu > li.menu-item{
    position: relative;
}
header .pp-advanced-menu ul.menu > li.menu-item > a{
    transition: all .3s ease-in-out;
}
.fl-page a{
    text-decoration: none !important;
    transition: all .3s ease-in-out;
}
.fl-rich-text p{
  margin-bottom: 0;
}
.fl-rich-text p:not(:first-child){
    margin-top: 25px;
}
a.fl-button{
    transition: all .3s ease-in-out;
}
body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
<style> .wf-force-outline-none[tabindex="-1"]:focus{outline:none;} </style>


<style>

[data-option-label="color-name-link"] {
background-image: url("image-color-name"); // you get those field from a cms colors collections / put as many data option label field as maximum colors swatch you would like to have
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-2:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-2:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-3:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-3:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-4:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-4:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
[data-option-label="{{wf {&quot;path&quot;:&quot;color-5:name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"] {
background-image: url("{{wf {&quot;path&quot;:&quot;color-5:colors-link&quot;,&quot;type&quot;:&quot;Link&quot;\} }}");
}
ֿ/*/ ((--=.lw-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-selected {
   kjborder: 3px solid  #ffb700;))--
}
/*/
video::-webkit-media-controls-panel {
display: none !important;
opacity: 1 !important;}

</style>

<style>
.color-buttons:focus {
outline: none;
}
.color-buttons{
box-shadow: 0 0 0 1px #1f2d1c;
border: 2.5px solid #faf5f2;
}

.color-buttons:active {
box-shadow: 0 0 0 1px #bababa;
}
.color-buttons:hover {
box-shadow: 0 0 0 1px #bababa;
}

body {
 overflow-x: hidden !important;
  position: relative !important;
  width:100% !important;
  }
  

</style>

<!-- No Highlight Tabs  -->
<style>                                  
.arrow {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */                                  
</style> 

<script>
document.querySelectorAll('[data-node-type="commerce-add-to-cart-pill"]').forEach(el => el.dataset['optionLabel'] = el.textContent)
</script>

<script>
  var FC = FC || {};
 
  FC.onLoad = function () {
    FC.client.on("ready.done", function () {
      document
        .querySelector(".w-commerce-commerceaddtocartbutton")
        .addEventListener("click", (e) => {
          e.preventDefault();
 
          const name = document.querySelector(".foxy-product-name").innerText;
          const price = document.querySelector(".foxy-product-price").innerText;
          const code = document.querySelector(".foxy-product-code").innerText;
          const image = document.querySelector(".foxy-product-image").src;
 
          const quantity = document.querySelector(".w-commerce-commerceaddtocartquantityinput").value;
 
          let cartUrl = `https://${FC.settings.storedomain}/cart?name=${encodeURIComponent(name)}&price=${price}&code=${code ?? encodeURIComponent(code)}&quantity=${quantity ?? 1}&image=${encodeURIComponent(image)}`;
 
          const variantSelect = document.querySelectorAll("[data-node-type='commerce-add-to-cart-option-select']");
 
          const variantName = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.previousElementSibling.innerText)
          );
 
          const variantValueName = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.options[select.selectedIndex].text)
          );
 
          const variantValue = Array.from(variantSelect).map((select) =>
            encodeURIComponent(select.value)
          );
 
          if (variantSelect.length > 0 && variantValue.includes("")) {
            return;
          } else {
            variantName.forEach(
              (name, index) => (cartUrl += `&${name}=${variantValueName[index]}`)
            );
 
            FC.client.event("cart-submit").trigger({
              data: { cart: "add" },
              url: cartUrl,
            });
          }
        });
    });
  };
</script>
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

.bottom-line {
  margin-top: 25px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

/* FOOTER */

footer {
  font-size: 14px;
}

.address {
  margin-bottom: 5px;
}

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}
img{
  display:block; 
  margin-left: auto; 
  margin-right: auto; 
}
   .new_banner, .sale_banner, .discount-label {
      font-size: 12px;
    }

	.product_slider .slides .image__inner {position: relative; margin: 0 auto;}
//HTML
<ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li class="current">Customer Support</li>
    <li>Careers</li>
    <li>Investors</li>
    <li>News</li>
    <li>About Us</li>
</ul>

//JS
let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;

while(nextSibling) {
    console.log(nextSibling);
    nextSibling = nextSibling.nextElementSibling;
}
//HTML
<div class="container">
  <div class="star-widget">
    <input type="radio" name="rate" id="rate-5" />
    <label for="rate-5" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-4" />
    <label for="rate-4" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-3" />
    <label for="rate-3" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-2" />
    <label for="rate-2" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-1" />
    <label for="rate-1" class="fas fa-star"></label>
 </div>
</div>


//CSS
html,
body {
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background-color: rgb(16, 16, 16);
}

.container {
  width: 400px;
  background-color: #111;
  padding: 20px 30px;
  border: 1px solid #444;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* STARS */
.star-widget input {
  display: none;
}

.star-widget label {
  font-size: 40px;
  color: #444;
  padding: 10px;
  float: right;
  cursor: pointer;
  transition: all 0.2s ease;
}

input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label {
  color: #fd4;
}
input:checked ~ label {
  color: #fd4;
}

input#rate-5:checked ~ label {
  color: #fe7;
  text-shadow: 0 0 20px #952;
}
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #082032;
}
.wrapper {
    display: flex;

}
.wrapper .static-txt{
    color: #fff;
    font-size: 60px;
    font-weight: 400;
}
.dynamic-txt li{
    list-style: none;
    color: #ff4c29;
    font-size: 60px;
    font-weight: 500;
    top: 0;
    position: relative;
    animation: slide 12s steps(4) infinite;
}
@keyframes slide { 
    100%{
        top:-360px
    }
    
}

.wrapper .dynamic-txt{
    margin-left: 15px;
    line-height: 90px;
    height: 90px;
   
    overflow: hidden;

}
.dynamic-txt li{
    position: relative;
}
.dynamic-txt li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #082032;
    border-left: 2px solid #ff4c29;
    left: 0;
    animation: typing 3s steps(10) infinite;

}
@keyframes typing {
    40%,
    60% {
        left: calc(100% + 30px);
    }
    100% {
        left: 0;
    }
}
/* hide deal name and closed date columns on pipeline table */
.post-type-archive-deal .deal_table thead tr th:nth-child(2),
.post-type-archive-deal .deal_table tbody tr td:nth-child(2),
.post-type-archive-deal .deal_table thead tr th:nth-child(6),
.post-type-archive-deal .deal_table tbody tr td:nth-child(6) {
  display: none;
}
/*-- hide new and popular widget from group --*/
.company-id-386 .dash_widget_holder {
  display: none;
}
/* ---hide delete deal button--- */
.subscriber .btn.red.confirm_delete {
  display: none;
}
/*--- hide available content in training and presales ---*/
.post-type-archive-learn .section_holder:last-child {
  display: none;
}
/* --- hide left nav item from sub */
.subscriber li.menu-learn {display: none; }
/*-- css for partner tier styles --*/
.tier_level {
     height: auto;
     float: right;
     padding-right: 10px;
}
.tier_level img {
    height: 65px;
    width: auto;
    position: absolute;
    top: -3px;
    right: 275px;
}
@media only screen and (max-width: 600px){
  .tier_level img {
      right: 50px;
      top: 1px;
      height: 55px;
  }
}
 
 
 
// JS to display logos based on group
jQuery(document).ready(function ($) {
 
    var isLoggedIn = !!$(".logged-in").length;
    var myGroups = isLoggedIn ? abUser.group_id : [];
 
    function partnerTierFunction() {
      // set up DOM
      $("#header .wrapper").append('<div class="tier_level"></div>');
      // create object for partner tiers
      var myTier = {
        "19": {
          name: "Steel",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233007/BS_Badge_Steel_White.png"
        },
        "23": {
          name: "Cobalt",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233001/BS_Badge_Cobalt_White.png"
        },
        "24": {
          name: "Sky",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233005/BS_Badge_Sky_White.png",
        },
        "25": {
          name: "Sapphire",
          image: "https://cdn.allbound.com/bluescape-ab/2020/09/08233003/BS_Badge_Sapphire_White.png",
        },
      };
 
      // check if the user is in a tier group
      for (var i = 0; i < myGroups.length; i++) {
        // associate tier label to group values
        var groups = myGroups[i];
        var tier = myTier[groups];
        // populate DOM with tier label
        if (tier !== undefined) {
          var $z = $("div.tier_level");
          $z.append('<img src="' + tier["image"] + '">');
          break;
        }
      }
    }
 
    function visibilityDriver() {
      visScenarios.forEach(function(scenario) {
        if (scenario.condition) {
          scenario.outcome();
        }
      })
    }
    
    var visScenarios = [
      {
        condition: isLoggedIn,
        outcome: function () {
          partnerTierFunction();
        },
      },
    ];
    visibilityDriver();
 
}); // end ready function
/*-- CSS deal to opportunity edits --*/
.single-prospect_page ul.tab_nav li:nth-child(4) a { visibility:hidden; }
.deal-child .pipeline_overview h2.page_title,
.deal-child article h1,
#box_tab_related_deals .not_available,
#box_tab_related_deals .existing_deal_btn,
#box_tab_related_deals p,
#box_tab_related_deals h2,
.ab_header_btns .deal_reg .btn_title,
.deal_table thead tr th:nth-child(2),
.pipeline_summary .flex:nth-child(2) h3,
.pipeline_summary .flex:nth-child(3) h3,
.coach_sidebar_title,
.coach_overview__name .coach_overview__label { display:none; }

  // JS deal to opportunity edits
  $('.deal-child .pipeline_overview h2.page_title').html('Register an Opportunity').show();
  $('.deal-child article h1').html('Opportunity Registration').show();
  $('.coach_overview__name .coach_overview__label').html('Opportunity Name').show();
  $('.coach_sidebar_title').html('Opportunity Information').show();
  $('.pipeline_summary .flex:nth-child(2) h3').html('Number of Opportunities').show();
  $('.pipeline_summary .flex:nth-child(3) h3').html('Average Opportunity Size').show();
  $('.deal_table thead tr th:nth-child(2)').html('Opportunity Name').show();
  $('#tiptip_content').hide();
  $('.ab_header_btns .deal_reg').attr('title', 'Create an Opportunity');
  $('.ab_header_btns .deal_reg .btn_title').html('Opp Reg').show();
  $('.single-prospect_page ul.tab_nav li:nth-child(4) a').html('Related Opportunities').css('visibility', 'visible');
  $('#box_tab_related_deals h2').html('Related Opportunities').show();
  $('#box_tab_related_deals p').text('View Opportunities associated with this Prospect Page.').show();
  $('#box_tab_related_deals .existing_deal_btn').text('Link to a related Opportunity').show();
  $('#box_tab_related_deals .not_available').text("You don't have any Opportunities associated with this Prospect Page.").show();
.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}
/* ---View Now button color--- */
.single-learn .flex.btn.block {background: #b61668; }
.single-knowledge-base .flex.btn.block {background: #b61668; }
.single-campaign .flex.btn.block {background: #b61668; }
/*-- increase size of dr button --*/
.post-type-archive-deal div.ab_header_btns {
  font-size: 1.2rem;
}
/* --- left side nav order --- */
.menu_main li.menu-dashboard {order:0; }
.menu_main li.menu-win {order: 1; }
.menu_main li.menu-learn {order: 2; }
.menu_main li.menu-events {order: 3; }
.menu_main li.menu-playbooks {order: 4; }
.menu_main li.menu-engage {order: 5; }
.menu_main li.menu-pipeline {order: 6; }
.menu_main li.menu-mdf {order: 7; }
.menu_main li.menu-prospect {order: 8; }
.menu_main li.menu-campaigns {order: 9; }
.menu_main li.menu-knowledge-base {order: 10; }
:root {
  /* primary colors */
  --primary-color: #45454f;
  --primary-color-hover: #45454fcc;

  /* secondary colors */
  --secondary-color: #45454f;
  --secondary-color-hover: #45454fcc;

  /* aditional colors */
  --tertiary-color: #696969;
  --neutral-color-black: #464145;

  --white: #ffffff;
}

/* ------------------ LOGIN PAGE ------------------ */
/* LOGIN buttons */
a.um_button.btn_idp,
#signup_form #insert_user,
.credentials_content form input[type="submit"],
.um_login_button {
  background-color: var(--primary-color);
  color: #3a94c6;
}

/* LOGIN buttons (HOVER) */
a.um_button.btn_idp:hover,
#signup_form #insert_user:hover,
.credentials_content form input[type="submit"]:hover,
.um_login_button:hover {
  background-color: var(--primary-color-hover);
  color: #91a8c4;
}

/* LOST PASSWORD */
.credentials_content a[class^="lostpassword_link"],
#signup_form > p.signin_now > a {
  color: var(--secondary-color);
  color: #3a94c6;
}

/* LOST PASSWORD (HOVER) */
.credentials_content a[class^="lostpassword_link"]:hover {
  color: var(--secondary-color-hover) !important;
  color: #91a8c4;
}

/* REQUEST AN ACCOUNT */
.join_button {
  color: var(--secondary-color) !important;
  color: #3a94c6;
}

/* REQUEST AN ACCOUNT (HOVER) */
.req_account_container .join_button:hover {
  color: var(--secondary-color-hover) !important;
  color: #91a8c4;
}

/* ------------------ DASHBOARD ------------------ */
/* Hero Image CTA button */
.dashboard-hero .btn--minimal {
  color: #f2f2f2;
  background: #3a94c6;
}

/* Hero Image CTA button (HOVER) */
.dashboard-hero .btn--minimal:hover {
  color: #f2f2f2;
  background: #91a8c4;
}

/* Quick Links Widget text */
.dashboard-quicklinks__links ol li a,
.dashboard-quicklinks__links ol li::before {
  color: #3a94c6;
}

/* View my Channel Manager Widget button */
.dashboard-minimal .btn--minimal--blue {
  margin: 10px;
  border-radius: 3px;
  background: #3a94c6 !important;
  color: #fff;
}

/* View my Channel Manager Widget button (HOVER) */
.dashboard-minimal .btn--minimal--blue:hover {
  color: #fff;
  background: #91a8c4 !important;
}

/*-------------DASHBOARD BUTTONS-------------*/
/* Dashboard Buttons - Icons */
.dashboard-btn__content span {
  color: #3a94c6;
}

/* Dashboard Buttons - Arrows */
.dashboard-btn__content__arrow svg {
  stroke: #3a94c6;
}

/*--Dashboard Buttons - Title color (right of icon)--*/
.dashboard-btn__content__category {
  color: #3a94c6;
}

/* Dashboard Buttons - background color (HOVER) */
.dashboard-btn:hover {
  background: #6e83b1;
}

/*-- DB Button Text Hover --*/
.dashboard-btn:hover .dashboard-btn__content span,
.dashboard-btn:hover .dashboard-btn__content__arrow svg,
.dashboard-btn:hover .dashboard-btn__content__category,
.dashboard-btn:hover .dashboard-btn__content__text,
.dashboard-btn:hover .dashboard-btn__content h4 {
  color: #f2f2f2;
  stroke: #f2f2f2;
}

/*---------------------- New and Popular Widget ----------------------*/
/* New and Popular Widget - Text */
.dashboard-popular-new__tab-content ul li::before,
.dashboard-popular-new__tab-content
  ul
  a
  .dashboard-popular-new__tab-content__pane__link
  p,
.dashboard-popular-new__tab-content
  ul
  a
  .dashboard-popular-new__tab-content__pane__views
  p {
  color: #272e40;
}

/* New and Popular Widget - Active Header */
.dashboard-popular-new__tab-row a.active {
  background: #6e83b1;
}

/* New and Popular Widget - Inactive Header */
.dashboard-popular-new__tab-row a {
  background: #6e83b1;
}

/* ----------------------Calendar Widget ----------------------*/
.dashboard-calendar__title a {
  color: var(--primary-color);
}

.dashboard-calendar__event__details .category {
  color: var(--primary-color);
}

/*----------------------Pinned Content----------------------*/
.dashboard-minimal .empty_asset_content h3 {
  color: var(--primary-color);
}

/*--Header initials avatar bckground color--*/
.avatar_small svg rect {
  fill: #272e40;
}

.empty_asset_content h3 {
  color: var(--primary-color);
}

.cta-button-slider__buttons li button {
  background-color: var(--primary-color);
}

/*--View Event button and Update button--*/
.btn,
.btn:link,
.btn:visited,
.ab_settings input[type="submit"] {
  background-image: none !important;
  padding: 10px 20px;
  background-color: var(--primary-color);
}

/*--View Event button and Update button (HOVER)--*/
.btn:hover,
.btn:active,
.ab_settings input[type="submit"]:hover,
.ab_settings input[type="submit"]:active {
  background-color: var(--secondary-color-hover) !important;
}

/*--Event +playbook button (BG) color--*/
.btn.dark,
.btn.dark:link,
.btn.dark:visited {
  background-color: var(--primary-color);
}

/*--Event +playbook button (text HOVER) color--*/
.btn.dark:hover,
.btn.dark:active {
  color: #f2f2f2;
}

/*--Deal header icon text color--*/
.ab_header_btns span.btn_title {
  color: #272e40;
}

/*--Deal header icon color--*/
.ab_header_btns span[class^="icon-"] {
  background-color: #3a94c6;
}

/*--Deal header icon color (HOVER)--*/
.ab_header_btns a:hover span[class^="icon-"] {
  background-color: #3a94c6;
}

/*--Header tab selection color--*/
.tab_nav.horizontal li.active a {
  border-bottom-color: var(--primary-color);
}

/*--Event title color (HOVER)--*/
a:hover .asset_content h3 {
  color: var(--primary-color) !important;
}

/*--S&E filter button text color--*/
#filter_results form input[type="submit"],
.post-type-knowledge-base #searchsubmit {
  background-color: var(--primary-color) !important;
  color: #fff;
}

/*--S&E filter button text color--*/
#filter_results form input[type="submit"]:hover,
.post-type-knowledge-base #searchsubmit:hover {
  background-color: var(--primary-color-hover) !important;
  color: #fff;
}

/*--Default dropdown menu link color--*/
.user_content a:link,
.user_content a:visited,
a.logout_link span[class^="icon-"] {
  color: #4d4d4f;
}

/*--Default dropdown menu icon color--*/
.user_content a span[class^="icon-"] {
  color: #3a94c6;
}

/*--Dropdown link color (HOVER)--*/
.user_content a:hover,
a.logout_link:hover {
  color: #3a94c6;
}

/*--Drop down menu icon color (HOVER)--*/
.user_content a:hover span[class^="icon-"],
a.logout_link:hover span[class^="icon-"] {
  color: #272e40;
}

/*--Bell header icon color--*/
#ab_notifications > a > span {
  color: #6a65ad;
}

/*--Team CoLab header icon color--*/
#ab_colab > a > span {
  color: #3a94c6;
}

#ab_notifications > a:hover > span,
#ab_colab > a:hover > span {
  opacity: 0.7;
}

/*--(/Learn) course percentage text color--*/
.asset a:link,
.asset a:visited {
  color: var(--primary-color);
}

.asset .progress span {
  background: var(--primary-color);
}

/*--System settings active selection color--*/
.content_nav ul li.active a:before {
  background-color: var(--primary-color);
}

/*--Pipeline total value color--*/
.pipeline_summary .flex.pipeline_total {
  background-color: #272e40;
}

/*--Pipeline (Deal details) milestone text--*/
.coach_overview__label {
  color: var(--primary-color);
}

/*--Pipeline (Deal details) milestone outer circle--*/
.status_check.complete .check_holder {
  border-color: var(--primary-color);
}

/*--Pipeline (Deal details) milestone inner circle--*/
.status_bar.complete,
.status_check.complete .check_holder span[class^="icon-"] {
  background-color: var(--primary-color);
}

/*--Pipeline (Deal details) deal info title--*/
.coach_sidebar_title {
  color: var(--primary-color);
}

.coach_team_avatar:hover {
  border-color: var(--primary-color);
}

#body_block > section > div.main_content.wrapper > form > a:hover {
  color: var(--primary-color-blue);
}

.profile_settings #ab_colab {
  color: var(--primary-color);
}

/*--Pinned Icon color--*/
span.icon-pin.pinned {
  color: var(--primary-color);
}

/* Show me How Widget */
#walkme-player
  > div
  > div.walkme-question-mark.walkme-override.walkme-css-reset,
.u-userLauncherColor:not([disabled]) {
  background-color: #6e83b1 !important;
}
/* update font */
body {
  font-family: "Montserrat", sans-serif !important;
}
/*-- move login box to the left --*/
.home_credentials a .ab_login_logo {
  display: none;
}
.home_credentials {
  margin-top: 2% !important;
}
@media only screen and (min-width: 1550px) {
  .home_credentials {
    margin-right: 62% !important;
  }
}
@media only screen and (min-width: 1351px) and (max-width: 1550px) {
  .home_credentials {
    margin-right: 59% !important;
  }
}
@media only screen and (min-width: 1151px) and (max-width: 1350px) {
  .home_credentials {
    margin-right: 55% !important;
  }
}
@media only screen and (min-width: 1026px) and (max-width: 1150px) {
  .home_credentials {
    margin-right: 52% !important;
  }
}
@media only screen and (min-width: 976px) and (max-width: 1025px) {
  .home_credentials {
    margin-right: 25% !important;
  }
}
@media only screen and (min-width: 751px) and (max-width: 975px) {
  .home_credentials {
    margin-right: 20% !important;
  }
}
@media only screen and (min-width: 601px) and (max-width: 750px) {
  .home_credentials {
    margin-right: 12% !important;
  }
}
@media only screen and (max-width: 600px) {
  .home_credentials {
    margin-right: 5% !important;
  }
}
section.home_login {
  background-size: 100%;
}
*{
   margin: 0;
   padding: 0;
}
header{
  background-image:linear-gradient(rgba(0,0,0.5),rgba(0,0,0,0.5)), url('img/taj.jpg');
  height: 100vh;
  background-size:cover;
  background-position:center;

}
ul{
  float: right;
  list-style-type: none;
  margin-top: 25px;
}
ul li{
  display:inline-block;
}
ul li a{
    text-decoration:none;
    color: #fff;
    padding:5px 20px;
    border:1px solid transparent;
    transition:0.6s ease;
}
ul li a:hover{
  background-color:#fff;
  color: #000;
}
ul li.active a{
  background-color:#fff;
  color: #000;

}
.logo h4{
  flood:left;
  color:#fff;
  height:10px;
  height-top:25px;
}
.main{
  max-width:1200px;
  margin:auto;
}
.title{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.title h1{
  color:#fff;
  font-size: 70px;
}
.button{
  position: absolute;
  top:60%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.btn{
    color: #fff;
    text-decoration:none;
    padding: 10px 30px;
    border: 1px solid #fff;
    transition: 0.6s ease;
    
}
.btn:hover{
  background-color:#fff;
  color: #000;

}


.next-image-button:focus {
  outline: none;
}
.next-image-button:focus-visible {
  outline: 3px solid currentColor; /* That'll show 'em */
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    /* CSS */
}
  .circle-list li{
    padding: 2.5em;
    border-bottom: 1px dashed #ccc;
  }

  .circle-list h2{
    position: relative;
    margin: 0;
  }

  .circle-list p{
    margin: 0;
  }

  .circle-list h2:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    z-index: -1;
    left: -1.3em;
    top: -.8em;
    background: #f5f5f5;
    height: 1.5em;
    width: 1.5em;
    border: .1em solid rgba(0,0,0,.05);
    text-align: center;
    font: italic bold 1em/1.5em Georgia, Serif;
    color: #ccc;
    border-radius: 1.5em;
    transition: all .2s ease-out;
  }

  .circle-list li:hover h2:before{
    background-color: #ffd797;
    border-color: rgba(0,0,0,.08);
    border-width: .2em;
    color: #444;
    transform: scale(1.5);
  }
  .rectangle-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;
  }

  .rectangle-list a:hover{
    background: #eee;
  }

  .rectangle-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #fa8072;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
  }

  .rectangle-list a:after{
    position: absolute;
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;
  }

  .rectangle-list a:hover:after{
    left: -.5em;
    border-left-color: #fa8072;
  }
  .rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
  }

  .rounded-list a:hover{
    background: #eee;
  }

  .rounded-list a:hover:before{
    transform: rotate(360deg);
  }

  .rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
  }
@import url("https://fonts.googleapis.com/css2?family=poppins:wght@300;400;500;600&display=swap");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
}


    .container{
        width: 100%;
        height: 100vh;
        background: #f0fff3;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .coupon-card{
        background: linear-gradient(135deg,#7158fe, #9d4de6 );
        color: #fff;
        text-align: center;
        padding: 40px 80px;
        border-radius: 15px;
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0,0.15 );
        position: relative;

    }
    .logo{
        width: 100px;
        
        border-radius: 8px;
        margin-bottom: 20px
    }
    .coupon-card h3{
        font-size: 28px;
        font-weight: 400;
        line-height: 40px;
    }
    .coupon-card p{
        font-size: 15px;
    }
    .coupon-row{
        display: flex;
        align-items: center;
        margin: 25px auto;
        width: fit-content;
        font-size: 15px;
    }
    #cpncode{
        border: 1px dashed #fff;
        padding: 10px 20px;
        border-right: 0;
    }
    #cpnbtn{
        border: 1px solid #fff;
        background: #fff;
        padding: 10px 20px;
        color: #7158fe;
        cursor: pointer;
    }

    .circle1,.circle2{
        background: #f0fff3;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;  
        top: 50%;
        transform: translateY(-50%);
      }
      .circle1{
          left: -25px;
      }
      .circle2{
        right: -25px;
    }
@import url("https://fonts.googleapis.com/css2?family=poppins:wght@300;400;500;600&display=swap");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
}


    .container{
        width: 100%;
        height: 100vh;
        background: #f0fff3;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .coupon-card{
        background: linear-gradient(135deg,#7158fe, #9d4de6 );
        color: #fff;
        text-align: center;
        padding: 40px 80px;
        border-radius: 15px;
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0,0.15 );
        position: relative;

    }
    .logo{
        width: 100px;
        
        border-radius: 8px;
        margin-bottom: 20px
    }
    .coupon-card h3{
        font-size: 28px;
        font-weight: 400;
        line-height: 40px;
    }
    .coupon-card p{
        font-size: 15px;
    }
    .coupon-row{
        display: flex;
        align-items: center;
        margin: 25px auto;
        width: fit-content;
        font-size: 15px;
    }
    #cpncode{
        border: 1px dashed #fff;
        padding: 10px 20px;
        border-right: 0;
    }
    #cpnbtn{
        border: 1px solid #fff;
        background: #fff;
        padding: 10px 20px;
        color: #7158fe;
        cursor: pointer;
    }

    .circle1,.circle2{
        background: #f0fff3;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;  
        top: 50%;
        transform: translateY(-50%);
      }
      .circle1{
          left: -25px;
      }
      .circle2{
        right: -25px;
    }
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to top, #56e2d7 0%, #58cff1 100%);
}
.wrapper{
  background: #fff;
  padding: 20px;
  width: 450px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
.wrapper form{
  height: 55px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}
form i{
  position: absolute;
  width: 55px;
  text-align: center;
  font-size: 23px;
  color: #c4c4c4;
  pointer-events: none;
}
form input:valid ~ i{
  color: #58cff1;
}
form input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 50px 0 45px;
  font-size: 20px;
  caret-color: #58cff1;
  border: 2px solid #ddd;
  border-radius: 5px;
  transition: all 0.1s ease;
}
form input::selection{
  color: #fff;
  background: #58cff1;    
}
form input:focus,
form input:valid{
  border-color: #58cff1;
}
form input::placeholder{
  color: #c4c4c4;
}
form .counter{
  position: absolute;
  right: 3px;
  width: 55px;
  font-size: 20px;
  color: #c4c4c4;
  text-align: center;
  border-left: 1px solid #d8d8d8;
  pointer-events: none;
}
form input:valid ~ .counter{
  color: #58cff1;
  border-color: #58cff1;
}
body {
 background-image: radial-gradient(circle, #FFF, #FFF 1px, #171717 1px, #171717);
    background-size: 28px 28px;
}
/*Generic Media Query 
	========================================================================== */

h1 {
  font-size: 1.5rem;
}

@media screen and (min-width: 800px) {
  h1 {
    font-size: 2rem;
  }
}


/*Reset Border Box 
	========================================================================== */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}




/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
--border-size-{1-5}
--radius-{1-6}
--radius-round
--radius-blob-{1-5}
--radius-conditional-{1-6}
.loaded {
  animation: var(--animation-fade-in) forwards;
}

.actionsheet {
  animation: var(--animation-slide-out-down) forwards;

  &.open {
    animation: var(--animation-slide-in-up) forwards;
  }
}

.alert {
  animation: var(--animation-blink);
}
--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
--font-serif: ui-serif, serif;
--font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
--font-size-{00-8}
--font-size-fluid-{0-3}
--font-weight-{1-9}
--font-letterspacing-{0-7}
--font-lineheight-{00-5}
html {
  --brand-grape: var(--grape-5);

  --text1-grape: var(--grape-9);
  --text2-grape: var(--grape-7);

  --surface1-grape: var(--grape-0);
  --surface2-grape: var(--grape-1);
  --surface3-grape: var(--grape-2);
  --surface4-grape: var(--grape-3);
}
/* index.pcss */
@import "https://unpkg.com/open-props/src/props.colors.css";
@import "https://unpkg.com/open-props/src/props.orange.css";
@import "https://unpkg.com/open-props/src/props.easing.css";
@import "https://unpkg.com/open-props/src/props.sizes.css";
/* etc */
/* index.pcss */
@import "https://unpkg.com/open-props/src/index.css";
@import "https://unpkg.com/open-props/src/extra/normalize.css";
.checkmark-list {
  align-self: flex-start;
  display: grid;
  gap: var(--size-2);
  font-size: var(--font-size-fluid-1);
  font-weight: var(--font-weight-2);
  padding-inline-start: 0;
}
.op-icon-p {
  stroke: var(--indigo-2);
  @nest a:hover & { stroke: var(--indigo-1); }

  @nest [data-theme="light"] & {
    stroke: var(--indigo-9);
    @nest a:hover & { stroke: var(--indigo-8); }
  }
}
pre > code {
  box-shadow: var(--shadow-6);
  font-family: var(--font-mono);
  font-size: var(--font-size-2);
}
.gradient-swatch {
  border-radius: var(--radius-2);
  aspect-ratio: var(--ratio-landscape);
}
blockquote {
  --_accent-1: var(--lime-5);
  --_accent-2: var(--lime-4);
  --_bg: var(--surface-2);
  --_ink: var(--text-1);

  color: var(--_ink);
  border-color: var(--_accent-2);
  background-color: var(--_bg);
  justify-self: flex-start;
}
.just-for-gap {
  display: grid;
  gap: var(--size-4);
}
@import "https://unpkg.com/open-props";
.1_37 { 
	overflow:hidden;
}
.group_2_1_37 { 
	width:356px;
	height:128px;
	position:absolute;
}
.rectangle_6_1_38 { 
	background-image:linear-gradient(0deg, rgba(33.63579511642456, 2.964380532503128, 98.81249696016312, 1) 0%,rgba(5.769382417201996, 24.423721432685852, 192.31249898672104, 1) 100%) ;
	width:356px;
	height:128px;
	position:absolute;
	left:0px;
	top:0px;
	border-top-left-radius:25px;
	border-top-right-radius:25px;
	border-bottom-left-radius:25px;
	border-bottom-right-radius:25px;
}
.text_1_39 { 
	color:rgba(255, 255, 255, 1);
	width:87px;
	height:60px;
	position:absolute;
	left:136px;
	top:34px;
	font-family:Simonetta;
	text-align:left;
	font-size:48px;
	letter-spacing:0;
}
.twemoji_man_walking_medium_skin_tone_1_44 { 
	width:68px;
	height:68px;
	position:absolute;
	left:258px;
	top:60px;
	background-image: url(your image here);
}
.ellipse_10_1_55 { 
	box-shadow:0px 0px 20px rgba(255, 255, 255, 0.25);
	transform: rotate(180deg);
	border-radius:500px;
	background-color:rgba(252.87500202655792, 252.87500202655792, 252.87500202655792, 1);
	width:9px;
	height:9px;
	position:absolute;
	left:48px;
	top:23px;
}
.ellipse_11_1_56 { 
	box-shadow:0px 0px 20px rgba(255, 255, 255, 0.25);
	transform: rotate(180deg);
	border-radius:500px;
	background-color:rgba(252.87500202655792, 252.87500202655792, 252.87500202655792, 1);
	width:9px;
	height:9px;
	position:absolute;
	left:80px;
	top:71px;
}
.ellipse_12_1_57 { 
	box-shadow:0px 0px 20px rgba(255, 255, 255, 0.25);
	transform: rotate(180deg);
	border-radius:500px;
	background-color:rgba(252.87500202655792, 252.87500202655792, 252.87500202655792, 1);
	width:9px;
	height:9px;
	position:absolute;
	left:178px;
	top:14px;
}
.ellipse_14_1_59 { 
	box-shadow:0px 0px 20px rgba(255, 255, 255, 0.25);
	transform: rotate(180deg);
	border-radius:500px;
	background-color:rgba(252.87500202655792, 252.87500202655792, 252.87500202655792, 1);
	width:9px;
	height:9px;
	position:absolute;
	left:330px;
	top:32px;
}
.ellipse_13_1_58 { 
	box-shadow:0px 0px 20px rgba(255, 255, 255, 0.25);
	transform: rotate(180deg);
	border-radius:500px;
	background-color:rgba(252.87500202655792, 252.87500202655792, 252.87500202655792, 1);
	width:9px;
	height:9px;
	position:absolute;
	left:251px;
	top:47px;
}
html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}
<div id="uno">
 <div id="dos">
   <div id="tres">
     <div id="cuatro">
       <div id="cinco"></div>
     </div>
   </div>
 </div>
</div>

<style>  
  #uno{
width: 500px;
height: 300px;
background-color:green;
}
#uno:hover{ background: black}
#dos{
width:450px;
height:250px;
background: yellow;
}
#dos:hover{ background: white}
#tres{
width:400px;
height: 200px;
background: red;
}
#cuatro{
width:350px;
height:150px;
background:blue;
}
#cinco{
width:300px;
height:100px;
background:purple;
}
</style>
<div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 input[type="submit"] {
transition: 0.3s ease-in-out all
}

.wpcf7 input:not([type="submit"]),
.wpcf7 textarea {
width: 100%;
}

.wpcf7 input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.wpcf7 textarea {
border-width: 0 0 2px;
border-color: #41506DFF;
border-style: solid;
background-color: #FFFFFFFF;
padding: 8px;
color: #3F3F3F;
margin-bottom:20px;
}

.wpcf7 input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus,
.wpcf7 textarea:focus {
border-width: 0 0 2px;
border-color: #41506D;
border-style: none;
background-color: #FFFFFFFF;
box-shadow: 0px 0px 13px #00000024;
}
.wpcf7 label {
font-size:16px;
font-weight:600;
color:#41506D;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
font-size:16px;
font-weight:600;
color:#000000;
}
.wpcf7 input[type="submit"] {
font-size:16px;
font-weight:600;
color:#FFFFFF;
background-color:#41506D;
padding:16px 40px;
height: auto;
display: block;
width: 100%;
max-width: 100%;
border-radius: 30px;
}
.wpcf7 input[type="submit"]:hover {
color:#FFFFFFFF;
background-color:#6A82A6FF;
box-shadow: 0px 12px 33px #00000055;
border-radius: 30px;
}
<div class="skt-hero"> <!--Inicia contenedor -->
<div class="columnas z1" style="--backgroundImg: url(https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg)">1ahola</div>
<div class="columnas z2" style="--backgroundImg: url(https://wallpaperstock.net/wonderful-trees-path-sun-light-wallpapers_47680_1920x1200.jpg)">2a</div>
<div class="columnas z3" style="--backgroundImg: url(https://img.culturacolectiva.com/featured_image/2018/10/04/1538678265674/deforestacion-del-bosque-amazonico-diecisiete-por-ciento.jpg)" >3a</div>
<div class="columnas z4" style="--backgroundImg: url(https://st.depositphotos.com/1012061/4434/i/600/depositphotos_44342021-stock-photo-sun-rays-inside-coconut-palms.jpg)">4a</div>
</div> <!-- Fin del contenedor -->

// css 

body{
z-index: -10:
} /* para asegurar que nadie este por debajo de body*/
.skt-hero {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    background-image: url(https://haciendofotos.com/wp-content/uploads/las-mejores-fotos-de-paisajes-2020.jpg);
    background-size: cover;
}
.skt-hero:hover{
    z-index:-3;
}
.columnas {
    width: 25%;
    height: 100%;
    border: 1px solid gray;
    background-color: transparent;
    position:absolute;
    opacity: 0.05;
    transition: opacity 2s ease;
}
.columnas:hover {
    height: 100%;
    width:100vw;
    background-image: var(--backgroundImg);
    position: ;
    z-index: -1;
    background-size: cover;
    opacity: 1;
}
.z1{
left:0%;
}
.z1:hover{
left:0%;
}
.z2{
left:25%;
}
.z2:hover{
left:0%;
}
.z3{
left:50%;
}
.z3:hover{
left:0%;
}
.z4{
left:75%;
}
.z4:hover{
left:0%;
}
<h1>The z-index Property</h1>

<div ></div>

<p>Because the image has a z-index of -1, it will be placed behind the heading.</p>


/*css*/
h1 {
 position:absolute;
 z-idex: ;
}
div{
  background-image:url(https://picsum.photos/200);
  width:100px;
  height:140px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
p {
position:absolute;
 z-index: ;
}
<section class="destacada">
  <div class="contenido text-center">
    <h1 class="estilo"> Ayuda </h1>
    <img src="http://picsum.photos/100/100"/>
  </div>
</section> 

//css 
.destacada img{
  width: 50px;
  height: 50px;
}

 h1:hover ~ img{
  width: 200px; /*O lo que quieras*/
  height: 200px; /*O lo que quieras*/ 
}
let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

selector {
     -webkit-text-stroke: 1px #C02727;
}
@import "~antd/lib/style/themes/default.less";
@import "~antd/dist/antd.less"; // Import Ant Design styles

@primary-color: #10f5e2; // primary color for all components
@link-color: #10f5e2; // link color
@success-color: #60f7ca; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 2px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers
.glitch {
    position: relative;
}

@media screen and (min-width: 786px) {
    .glitch:before, .glitch:after {
        content: attr(data-text);
        color:#FFEA00;
        mix-blend-mode: lighten;
        position: absolute;
        top: 0;
        width: 100%;
        clip: rect(0, 0, 0, 0);
    }
    .glitch:before {
        left: -1px;
        text-shadow: 2px 0 rgba(255, 25, 105, 0.7);
    }
    .glitch:after {
        left: 1px;
        text-shadow: -3px 0 rgba(29, 77, 204, 0.7);
    }
    .glitch:hover:before {
        text-shadow: 5px 0 rgba(255, 25, 105, 0.7);
        animation: glitch-loop-1 0.9s infinite ease-in-out alternate-reverse;
    }
    .glitch:hover:after {
        text-shadow: -7px 0 rgba(29,77,204, 0.7);
        animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
    }
    @keyframes glitch-loop-1 {
        0% {
            clip: rect(8vw, 9999px, 2vw, 0);
        }
        25% {
            clip: rect(6vw, 9999px, 20vw, 0);
        }
        50% {
            clip: rect(16vw, 9999px, 22vw, 0);
        }
        75% {
            clip: rect(10px, 9999px, 18vw, 0);
        }
        100% {
            clip: rect(20px, 9999px, 24vw, 0);
        }
    }
    @keyframes glitch-loop-2 {
        0% {
            top: -1px;
            left: 1px;
            clip: rect(12vw, 9999px, 28vw, 0);
        }
        25% {
            top: -6px;
            left: 4px;
            clip: rect(16vw, 9999px, 4vw, 0);
        }
        50% {
            top: -3px;
            left: 2px;
            clip: rect(14vw, 9999px, 6vw, 0);
        }
        75% {
            top: 0px;
            left: -4px;
            clip: rect(18vw, 9999px, 8vw, 0);
        }
        100% {
            top: -1px;
            left: -1px;
            clip: rect(10vw, 9999px, 30vw, 0);
        }
    }
}
.grain {
  height: 100%h;
  background-color: transparent;
  position: relative;
  z-index: 300;
  pointer-events: none;
}

.grain:after {
  animation: grain 8s steps(10) infinite;
  background-image: url("https://assets.website-files.com/5dff182dc3faab4c98b08388/5dff21c5e65e0610a8d38b86_noisy-texture-100x100-o5-d10-c-FFFFFA-t1.png");
  content: "";
  height: 300%;
  left: -50%;
  position: fixed;
  top: -100%;
  width: 300%;
}

@keyframes grain {
  0%, 100% {transform: translate(0,0);}
  10% {transform: translate(-5%,-10%);}
  30% {transform: translate(3%,-15%);}
  50% {transform: translate(12%,9%);}
  70% {transform: translate(9%,4%);}
  90% {transform: translate(-1%,7%);}
}
/*
  Why these specific rules ? Read this amazing article :
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  line-height: calc(1em + 0.5rem);
}

html, body {
  height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* for the next one, put the selector for the app element */

:root {
  isolation: isolate;
}
color: black;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: black;
// hoja css
wp_enqueue_style( 'tema_fray_framework', get_template_directory_uri().'/css/fray.css',array(),time());
// hoja Js
wp_enqueue_script( 'tema_fray_js', get_template_directory_uri() . '/js/misfunciones.js', array(),time(),true);

// true: carga el js en el footer
// false(por defecto): carga el js en el head
// Nota: "las hojas css(estilo), se deben cargar en el head(defaul o false)" 
<style>
    /* Box sizing rules */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    /* Remove default margin */
    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
      margin: 0;
    }
    
    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role='list'],
    ol[role='list'] {
      list-style: none;
    }
    
    /* Set core root defaults */
    html:focus-within {
      scroll-behavior: smooth;
    }
    
    /* Set core body defaults */
    body {
      min-height: 100vh;
      text-rendering: optimizeSpeed;
      line-height: 1.5;
    }
    
    /* A elements that don't have a class get default styles */
    a:not([class]) {
      text-decoration-skip-ink: auto;
    }
    
    /* Make images easier to work with */
    img,
    picture {
      max-width: 100%;
      display: block;
    }
    
    /* Inherit fonts for inputs and buttons */
    input,
    button,
    textarea,
    select {
      font: inherit;
    }
    
    /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
    @media (prefers-reduced-motion: reduce) {
      html:focus-within {
       scroll-behavior: auto;
      }
      
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
</style>
    // HTML
    <div id="box">
        <div id="item1">CLICK <br> item1</div>
        <div id="item2" class="none">item2</div>
    </div>

    // CSS
    #box{
        background-color: rebeccapurple;
        width:300px;
        height: 600px;
    }
    #item1{
        position: absolute;
        right: 20px;
        background-color: red;
        width:100px;
        height: 300px;
        cursor: pointer;
    }
    
    #item2{
        position: absolute;
        right: 140px;
        background-color: yellowgreen;
        width:150px;
        height: 300px;
    } 
    
    .block{
        display: block;
    }  //se separa en class diferentes las opciones puntuales que cambiaran dinamicamente.
    .none{
        display: none;
    }

// JavaScript
let item1 = document.getElementById("item1");
let item2= document.getElementById('item2');

let boton=document.getElementById("item1");
let contador=0;

item1.addEventListener("click",boton.onclick);

boton.onclick=function(){ // al agregar onclick capturamos los clicks
    contador++; 
    if (contador%2==0){  // modulo que distingue impar de par
        document.getElementById("item2").classList.add("none");
    }else{
        document.getElementById("item2").classList.remove("none");
        document.getElementById("item2").classList.add("block");
    }
};
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
span {
  min-height: 100px;
  display: inline-flex;
  align-items: center;
  border: 1px solid aqua;
}
h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1:hover:after { transform: scaleX(1); }
h1.fromRight:after{ transform-origin:100% 50%; }
h1.fromLeft:after{  transform-origin:  0% 50%; }
# Syntax
:root {
  --primary: #666;
  --hintergrund: #ccc;
  --akzent: #c32e04;
  --linkfarbe: #09c;
}

h2 {
  color: var(--primary);
  border-bottom: medium solid var(--akzent);
}

# Fallback mit festen Werten für custom properties
h1 {
  color: var(--akzentfarbe, red);
}
.elementor-icon-list-items .elementor-icon-list-item {
  position: relative;
}

.elementor-icon-list-items .elementor-icon-list-icon {
  position: absolute;
  top: 6px;
  left: 0;
}

.elementor-icon-list-items .elementor-icon-list-text {
  margin-left: 27px;
}
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15); 
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15);
@keyframes animate-in {
    0% {
        background-size:  0 2px, 0 0, 0 0, 0 0; 
    }

    25% {
        background-size:  100% 2px, 0 0, 0 0, 0 0; 
    }

    50% {
        background-size:  100% 2px, 2px 100%, 0 0, 0 0; 
    }

    75% {
        background-size:  100% 2px, 2px 100%, 100% 2px, 0 0; 
    }

    100% {
        background-size:  100% 2px, 2px 100%, 100% 2px, 2px 100%;  
    }
}
.input-container.outline { 
    background-image: linear-gradient(to right, var(--clr), var(--clr)),
                      linear-gradient(to bottom, var(--clr), var(--clr)),
                      linear-gradient(to right, var(--clr), var(--clr)),
                      linear-gradient(to bottom, var(--clr), var(--clr));
    background-size:  100% 2px, 2px 100%, 100% 2px, 2px 100%;
    background-position:  0 0, 100% 0%, 100% 100%, 0 100%; 
    background-repeat: no-repeat;
}
.input-container.outline {
    background-image: linear-gradient(to right, var(--clr), var(--clr));
    background-size:  100% 2px;
    background-position:  0 0; 
    background-repeat: no-repeat;
}
.input-container {
    padding: 2px; 
    margin: 1.5rem 0; 
}
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root {
    --clr: #FDA4AF;
    --dark: #171717; 
    --light: #f8f8ff; 
    --font: 'Poppins', sans-serif;
}

* {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
}

body {
    padding: 6em 3em; 
    font-family: var(--font);
    background-color: var(--dark);
    color: var(--light); 
}

h1 {
    color: #ccc; 
    font-size: 1.5rem;
    text-align: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-right {
    text-align: right;
}

button {
    background-color: var(--clr);
    color: #000;
    border-radius: 0; 
    border: 2px solid var(--clr); 
    padding: 0.5em 1.5em;  
    font-family: inherit;
    transition: background-color 0.2s linear, color 0.2s linear; 
}

button:focus, 
button:hover {
    color: var(--clr);  
    background-color: transparent;
    border-color: var(--clr);
}

input {
    padding: 1em; 
    width: 100%; 
    border-radius: 0; 
    background-color: #242424;
    border: none; 
    color: var(--light); 
}

input:focus,
button:focus {
    outline: none; 
    box-shadow: none;
}

::placeholder {
    color: #ccc; 
    font-family: var(--font); 
}
.listing-style__2 .lisfinity-product--meta__icon{
    display: none !important;
}

.listing-style__2{
    position: relative;
}

.listing-style__2 .woocommerce-Price-amount{
    color: #000;
}

.listing-style__2 .lisfinity-product--meta-wrapper{
    position: absolute;
    left: 130px;
    bottom: -60px;
}

.listing-style__2 .lisfinity-product--info-wrapper .lisfinity-product--info:nth-of-type(2).flex-center{
    display: none;
}

@media screen and (max-width:1100px){
    .listing-style__2 .lisfinity-product--meta-wrapper{
        position: absolute;
        left: 100px;
        bottom: -60px;
    }
}

@media screen and (max-width:768px){
    .listing-style__2 .lisfinity-product--meta-wrapper{
        position: absolute;
        left: 300px;
        bottom: -60px;
    }
}

@media screen and (max-width:650px){
    .listing-style__2 .lisfinity-product--meta-wrapper{
        position: absolute;
        left: 190px;
        bottom: -60px;
    }
}

@media screen and (max-width:450px){
    .listing-style__2 .lisfinity-product--meta-wrapper{
        position: absolute;
        left: 170px;
        bottom: -60px;
    }
}
<section class="section-faq">
<div class="page-width">
    <div class="single-product__section-title-wrapper text-center">
      <h2 class="single-product__section-title ">{{ section.settings.title | escape }}</h2>
    </div>

    <div class="accordion-wrapper">
      <div class="accordion">
        {% for block in section.blocks %}
          <h5 class="accordion__title">{{block.settings.title}}</h5>
          <div class="accordion__panel">
            <div class="accordion__panel-text">{{block.settings.text}}</div>
          </div>
        {% endfor %}
      </div>
    </div>

</div>
</section>

<style>
  .accordion__title:after{
    background-image: url({{'arr-down.png' | asset_url}});
    background-position:center right;
    background-size:contain;
  }
  .accordion__title_active:after {
    background-image: url({{'arr-up.png' | asset_url}});
    background-position:center right;
    background-size:contain;
  }
</style>

<script>
   // ------------------ Accordion ----------------------\\
$('.accordion__title').click(function(){
  $(this).toggleClass('accordion__title_active');
  $(this).next().toggleClass('accordion__panel_active');
})
</script>


{% schema %}
  {
    "name": "FAQ",
    "class": "faq",
    "settings": [
		{
		"type": "text",
		"id": "title",
		"label": "Heading",
		"default": "FAQ"
		}
    ],
    "blocks": [
      {
        "type": "text",
        "name": "FAQ",
        "settings": [
          {
            "id": "title",
            "type": "text",
            "label": "Question",
            "default": "Sample FAQ question"
          },
          {
            "id": "text",
            "type": "richtext",
            "label": "FAQ answer",
            "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nisi ut condimentum ultricies. Praesent tincidunt facilisis ipsum quis porta. Morbi sed quam eu tortor volutpat porttitor sit amet at quam.</p>"
          }
        ]
      },
      {
        "type": "html",
        "name": "FAQ-HTML",
        "settings": [
          {
            "id": "title",
            "type": "text",
            "label": "Question",
            "default": "Sample FAQ question"
          },
          {
            "id": "text",
            "type": "html",
            "label": "FAQ answer",
            "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nisi ut condimentum ultricies. Praesent tincidunt facilisis ipsum quis porta. Morbi sed quam eu tortor volutpat porttitor sit amet at quam.</p>"
          }
        ]
      }
    ]
  }
{% endschema %}



<style>
/* accordion */
.accordion {
    padding: 25px 0 35px;
}

h5.accordion__title {
  background-color:#d9e3e9;
  line-height: 60px;
  padding: 0 25px;
  margin-top: 15px;
  margin-bottom:0;
  font-size: 16px;
  /*letter-spacing: 1px;*/
  font-weight:500;
  position: relative;
  cursor: pointer;
  transition: .3s;
  color:#16526a;
}
.accordion__title > p {
	font-size:16px;
  	color:#16526a;
}

h5.accordion__title:after {
    content: '';
    width: 30px;
    height: 17px;
    position: absolute;
    right: 35px;
    top: 27px;
    background-repeat: no-repeat;
    background-size: contain;
}

/*h5.accordion__title_active:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 15px solid #16526a;
    position: absolute;
    bottom: 0;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 1;
}*/

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out -600ms;
  background-color:#0d4d66;
}
.accordion__panel_active{
  max-height: 5000px;
  transition: max-height 1s ease-in-out 0s;
}
.accordion__panel-text{
  padding: 15px 30px 30px;
  video{
      max-width: 100%;
  }
}

.accordion__panel-text .product-info__table-wrapper {
    display: flex;
  	margin:0;
    width: 67%;
}
.accordion__panel-text > p {
	color:white;
}
.accordion__panel-video{
  width: 100%;
  height: 465px;
  @media(max-width: 1440px){
      height: 310px;
  }
}
@media(max-width: 767px){
  h5.accordion__title {
      line-height: 20px;
      padding: 15px 25px 15px 10px;
      font-size: 12px;
  }
  .accordion__title > p {
	font-size:12px;
  }
  .accordion__title:after {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
  }
}
.accordion__panel-text-title {
  font-weight: 700;
  margin: 10px 0;
}
.accordion__panel_tech-row{
  margin-bottom: 10px;
}
.accordion__title_active {
	color:#ffb5a7;
  	
}

/* End of accordion */
</style>
* {
  font-size: 0;
  margin: 0;
  padding: 0;
}
section {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}
span {
  background: black;
  color: white;
  font-size: 11px;
  height: 100px;
  width: 100px;
}
span:nth-child(-n+5) {
  order: 1;
}
span:nth-child(4),
span:nth-child(5) {
  margin-left: 200px;
}
span:nth-child(6) {
  order: 4;
}
span:nth-child(7) {
  order: 3;
}
span:nth-child(8) {
  order: 2;
}
span:nth-child(n+9) {
  order: 5;
}
span:nth-child(9),
span:nth-child(10) {
  margin-right: 200px;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, maximum-scale=1.0">

<style>
  .slick-slider {
    -ms-touch-action: unset !important;
    touch-action: unset !important;
  }
</style>
.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a {
  position: relative;
    display: block;
    text-decoration: none;
    font-family: "Lato";
    color: #ecf0f1;
    text-transform: uppercase;
    padding: 4px 0;
  transition: 0.5s;
}
.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a::after {
  position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    top: 100%;
    left: 0;
    background: #ff7000;
    transition: transform 0.5s;
    transform: scaleX(0);
    transform-origin: right;
}
.et_pb_menu__menu>nav>ul>li>a:hover::after {
 transform: scaleX(1);
  transform-origin: left;
}

//disable the border for dropdown items
.et-menu .menu-item-has-children>a:first-child:after{
    
    background: none;
    border: none;
    content: ''
}
/* 
Generic Styling, for Desktops/Laptops 
*/

.success {
  position: relative;
  z-index: 13;
  margin: 4% 13%;
  padding: 0 0 0 35px;
  border: solid 13px Green;
  background-color: Green;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  font-size: 15px;
  line-height: 20px;
  color: #FFF;
  overflow: hidden;
}

.success:after {
  content: "";
  position: absolute;
  z-index: 12;
  width: 10px;
  height: 19px;
  bottom: 12px;
  left: 5px;
  border: solid 2px #FFF;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.field-label {
    color: #ffa500;
    text-decoration: underline;
}
.oxygen-body{
  /* Full width styling for Oxygen Gutenberg blocks and Gutenberg images*/
  width:100vw;
  overflow-x:hidden;
}

.alignfull {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
}
<div class="responsive">
<iframe src="https://embed.voomly.com/embed/assets/embed.html?videoId=5YeTj-fPX&videoRatio=1.7&type=v" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen width="1000" height="600"></iframe>
</div>


<style>
.responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.responsive iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
img {
  max-width: 100%;
  width: 500px;  // assume this is the default size
}
a.dont-jump-around-on-hover {
  display: block;

  &:after {
    display: block;
    content: attr(name);
    font-weight: 700;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
  }
}


<a class="dont-jump-around-on-hover" href="" name="Downloads">Downloads</a>
.wrapper {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@font-face {
    font-family: 'icomoonregular';
    src: local('icomoonregular'),
         url('icomoon-webfont.eot?#iefix') format('embedded-opentype'),
         url('icomoon-webfont.woff') format('woff'),
         url('icomoon-webfont.ttf') format('truetype'),
         url('icomoon-webfont.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-strecht: condensed;
    unicode-range: "U+0-10FFFF";
}
.buy-now {
  box-sizing: border-box;
  font-size: 1.1rem;
  border: 2px solid #eb2633;
  background-color: #eb2633;
  color: white;
  padding: 0.6rem 1rem;
  text-decoration: none;
  margin: 2rem 0 0;
  display: block;
  width: fit-content;
  border-radius: 5px;
  transition: 100ms ease-in-out;
}

.buy-now:hover {
  background-color: transparent;
  color: black;
}
HTML

<div class="body">
  <input type="checkbox"  class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
      <div class="spinner diagonal part-1"></div>
      <div class="spinner horizontal"></div>
      <div class="spinner diagonal part-2"></div>
  </label>
  <div id="sidebarMenu">
        <div class="main-content-wrapper">
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </div>
    </div>
</div>


CSS


.body{
width: 100%;
height: 100%
}

#sidebarMenu {
    height: 171px; /*change here related your menu height*/
    position: fixed;
    overflow: none;
    width: 100%;
    z-index: 100;
    transform: translateY(-171px); /*change here related your menu height*/
}
.main-content-wrapper a{
    width: 100%;
    height: 40px;
    display: block;
    background: #030303;
    text-align: center;
    padding-top: 15px;
    border: 1px solid #4b4545;
    color: whitesmoke;
    text-decoration: none;
}
#sidebarMenu::-webkit-scrollbar {
    width: 12px;
}
#sidebarMenu::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
}
#sidebarMenu::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
    background: #0000002e;
    height: 50px;
}
.sidebarMenuInner{
    margin:0;
    padding:0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translatey(0);
    top:50px /*change here related your top menu height*/
}
input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 22px;
    width: 22px;
    left:10px;
    top:10px;
    display: none
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: black;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}


 @media screen and (max-width: 950px) {
      .sidebarIconToggle{
          display:block
       }
    }
* {
  outline: 1px solid red;
}
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
<script>
  // Add dark mode classes and elements' classes
  // newDarkClass - a name of a class with dark mode attributes 
  // defaultClass - a class of an element a new class will be added to
  var darkClasses = [

    { newDarkClass: 'bodyDark', defaultClass: 'body' },
    { newDarkClass: 'h2_dark', defaultClass: 'h2' },

  ];
	
  // Listening to a switch and running a function on click
  document.getElementById("switch").addEventListener("click", darkSwitch);

  // checking if cookie exists
  var cookieState = Cookies.get('darkMode');

  // First visit - cookieState is undefined
  // If cookie exists we are parsing it to get a boolean
  if (cookieState === undefined) {
    var isDarkmodeEnabled = false;
  } else {
    var isDarkmodeEnabled = JSON.parse(cookieState)
  };

  // Cookie doesn't exist: darkMode = false 
  // Cookie exists: darkMode = true/false
  var darkMode = isDarkmodeEnabled;

  // Adding classes on page load if darkmode is enabled
  window.onload = addClassesOnLoad();

  // Changing darkMode state and adding or removing classes
  function darkSwitch() {

    // Setting darkMode to its opposite value
    darkMode = !darkMode;

    if (darkMode === true) {
      // Looping through an array and deleting classes
      darkClasses.forEach(item => {
        var element = document.querySelectorAll(`.${item.defaultClass}`)
        element.forEach(h => h.classList.add(item.newDarkClass))
      });
    } else {
      // Looping through an array and deleting classes
      darkClasses.forEach(item => {
        var element = document.querySelectorAll(`.${item.defaultClass}`)
        element.forEach(h => h.classList.remove(item.newDarkClass))
      });
    };
    // Saving darkMode state to the cookie
    Cookies.set('darkMode', darkMode);
  }

  // Adding classes on page load if darkmode is enabled
  //
  function addClassesOnLoad() {

    if (darkMode === true) {

      // Changing switch state
      document.getElementById("switch").checked = true;


      darkClasses.forEach(item => {
        var element = document.querySelectorAll(`.${item.defaultClass}`)
        element.forEach(h => h.classList.add(item.newDarkClass))
      });
    };
  }

</script>

<style>

  /* DEFINE DARK MODE CLASSES HERE */

</style>
npm init
npm install express express-generator exlint nodemon


// In package,json
"scripts": {
  ...
  "start": "node ./bin/www",
  "devstart": "nodemon ./bin/www",
  "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
  "lint": "eslint src/js"
  ...
}
  
// Express Skeleton using express-generator
express <appnam> --view=pug
cd <appname>
npm install
- Linux: 		DEBUG=express-locallibrary-tutorial:* npm start
- Powershell: 	DEBUG=express-locallibrary-tutorial:* npm start

const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const dateFormat = require("dateformat");

const AssignmentSchema = new Schema({
  title: { type: String, required: true },
  description: { type: String, required: true },
  deadline: { type: date, required: true },
});

AssignmentSchema.virtual("date").get(function () {
  return dateFormat(this.timestamp, "mmmm dS, yyyy, h:MM:ss TT");
});

module.exports = mongoose.model("Assignment", AssignmentSchema);
.btn41-43 {
  padding: 10px 25px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  background: transparent;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.btn-42 {
  border: 2px solid rgb(255, 255, 255);
  z-index: 1;
  color: white;
}

.btn-42:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: rgb(255, 255, 255);
  transition: all 0.3s ease;
}

.btn-42:hover {
  color: rgb(0, 0, 0);
}

.btn-42:hover:after {
  top: 0;
  height: 100%;
}

.btn-42:active {
  top: 2px;
}
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
  
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
  
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
  
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
  
input:checked + .slider {
  background-color: #272727;
}
  
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
  
.slider.round {
  border-radius: 34px;
}
  
.slider.round:before {
  border-radius: 50%;
}
<style>
    .bg_dark{
         background-color: rgb(109, 105, 105);
    }
    .h2_dark{
        color: rgb(255, 255, 255);
    }
</style>
<style>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    border: 1px solid #c8d4f3;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

</style>

<div class="videoWrapper">
  <iframe width="100%" src="" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
.accordion {
  background-color: #fff;
  color: #424242;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #868686;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: '\2212';
}

.panel {
  padding: 0 18px;
  background-color: #fcfcfc;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#banner .slick-dots {
	display: flex;
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
}

#banner .slick-dots li button {
	font-size: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #fff;
	background: transparent;
	border-radius: 50%;
	margin: 0 5px;
}

#banner .slick-dots li.slick-active button {
	width: 20px;
	height: 20px;
	background: var(--hover);
	border-color: var(--hover);
}
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>
        document.addEventListener('DOMContentLoaded', function () {
            $(".readmore").on("click", function () {
                $(this).parent().parent().toggleClass("toggled");

            });
        });
</script>
HTML:

<div class="hamburger-menu">
  <div class="bar top"></div>
  <div class="bar middle"></div>
  <div class="bar bottom"></div>
</div>

CSS:

.hamburger-menu {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
}

.hamburger-menu .bar {
  height: 5px;
  background: black;
  border-radius: 5px;
  margin: 3px 0px;
  transform-origin: left;
  transition: all 0.5s;
}

.hamburger-menu:hover .top {
  transform: rotate(45deg);
}

.hamburger-menu:hover .middle {
  opacity: 0;
}

.hamburger-menu:hover .bottom {
  transform: rotate(-45deg);
}
HTML:

<button class="mouse-cursor-gradient-tracking">
  <span>Hover me</span>
</button>

CSS:

.mouse-cursor-gradient-tracking {
  position: relative;
  background: #7983ff;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}

.mouse-cursor-gradient-tracking span {
  position: relative;
}

.mouse-cursor-gradient-tracking:before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}

.mouse-cursor-gradient-tracking:hover:before {
  --size: 200px;
}

JS:

let btn = document.querySelector('.mouse-cursor-gradient-tracking');
btn.addEventListener('mousemove', e => {
  let rect = e.target.getBoundingClientRect();
  let x = e.clientX - rect.left;
  let y = e.clientY - rect.top;
  btn.style.setProperty('--x', x + 'px');
  btn.style.setProperty('--y', y + 'px');
});
div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
/* Vertically Centering Text */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Horizontally Center */
.text {
  text-align: center;
}
button:focus { /* Some exciting button focus styles */ }
button:focus:not(:focus-visible) {
  /* Undo all the above focused button styles
     if the button has focus but the browser wouldn't normally
     show default focus styles */
}
button:focus-visible { /* Some even *more* exciting button focus styles */ }
@media (max-width: 500px){
	.image-wrap a:before{
		display:none;
	}
/*EX:.container {
    padding: 0 15px;
// 576px window width and more
    @include sm {
        padding: 0 20px;
    }
// 992px window width and more
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    } */
 
// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;
 
// Small tablets (portrait view)
$screen-md-min: 768px;
 
// Tablets and small desktops
$screen-lg-min: 992px;
 
// Large tablets and desktops
$screen-xl-min: 1200px;
 
 
// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
       @content;
   }
}
 
// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
       @content;
   }
}
 
// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
       @content;
   }
}
 
// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
       @content;
   }
}
theme-01: Primary(#0A192F), Secondary(#64FFDA), Font-1(#CCD6F6), Font-2(#8892B0)
<style>
  /* POWER Full Pack - Important 3D Box Fix - Chrome 93/94 - 03. Sep 2021 */
.pwr-3D-box {
    transform: perspective(1200px) scale(1) !important;
}
.pwr-header.pwr-header-fixed,
.pwr-burger {
    transform: translateZ(100px) !important;
}
.pwr-post-item__overlay,
.pwr-value__overlay,
.pwr-image-box__overlay,
.pwr-team-member__overlay {
    transform: none !important;
}
.featherlight {
    transform: translateZ(101px) !important;
}
@media (hover: hover) {
    .pwr-3D-box:hover {
        transform: perspective(1200px) scale(1.05) !important;
    }
}
</style>
<style>
  /* POWER THEME - Important 3D Box Fix - Chrome 93/94 - 03. Sep 2021 */
.pwr-3D-box {
    transform: perspective(1200px) scale(1);
}
.pwr-header.pwr-header-fixed,
.pwr-burger {
    transform: translateZ(100px);
}
.pwr-post-item__overlay,
.pwr-value__overlay,
.pwr-image-box__overlay,
.pwr-team-member__overlay {
    transform: none;
}
.featherlight {
    transform: translateZ(101px);
}
@media (hover: hover) {
    .pwr-3D-box:hover {
        transform: perspective(1200px) scale(1.05);
    }
}
</style>
div {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

html {
    background-color: peachpuff;
footer {
  /* fixed bottom */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
html {
  font-size: calc(60% + 0.8vmin);
}

* {
  font-size: 1rem;
}

h1 {
  font-size: 2.2rem;
}
h2 {
  font-size: 1.6rem;
}
h3 {
  font-size: 1.3rem;
}
.products .product-type-simple{
	    border: 5px solid #fff;
	    background: #FFFFFF;
    box-shadow: 10px 14px 34px -10px rgb(0 0 0 / 15%);
    border-radius: 5px;
}

.image-wrap img{

	border-radius:5px;
}
.owp-quick-view{
			border-radius:5px;
}
/* OCULTAR FILTROS*/
.woocommerce .oceanwp-grid-list a:last-child{
	display:none;
}
.woocommerce .oceanwp-grid-list a.active{
	display:none;
}
/* estableciendo padding selectivo para mejorar el responsive en pantallas menor a 1920*/

@media (max-width: 1400px){
.paddingselectivo{
	padding-left: 45px;
	padding-right: 45px;
	}}
	
@media (max-width: 700px){
.paddingselectivo{
	padding-left: 0px;
	padding-right: 0px;
	}}
.gridprod .title:after {
  		content: url('https://fashionballoonsdecorations.com/wp-content/uploads/2021/07/car.png');
     float: right;
			margin-right:15px;
     }
/* Listing product icon medio*/
.btn-wrap a:before{
	z-index: 999;
transition: all .5s;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f290";
    text-align: center;
    position: absolute;
	left: 40%;
    color: #fff;
    bottom: 84px;
    font-size: 12px;
    font-size: 20px;
    border-radius: 150px;
    padding: 10px 15px;
    background: #DE9CB6;
}
#parent {
	position: relative;
}

iframe{
  position: absolute;
  top:0;
  right: 0;
  botto:0;
  left: 0;
}
/* End of Page Graphic */
/* Use .path-frontpage for home page and .node-id where id is the node id, ex. .node-16 */
.path-frontpage .footer {
  margin-top: 0;
}

#your-block-id {
  margin: 0;
  padding: 0;
}
/* Rankings Feature Title Centering */
#your-block-id .panel__title {
 text-align: center; 
}
#your-block-id .panel__title:after {
 margin: auto; 
}
/* Full width custom block background and forgrond colors */
.custom-fwb {
  background-color: #022851;
  color: #fff;
}
/* Full width custom block title size and color */
.custom-fwb h2 {
  color: #fff;
  font-size: 3rem;
}
/* Full width custom block 2 tone color style */
.custom-fwb h2 span {
  color: #FFBF00;
  display: block;
}
/* Full width custom block image that hangs over the edge */
.custom-fwb img {
  top: -58px;
  position: relative;
}

/* Vertically center full width body text in large screen sizes */
@media only screen and (min-width: 992px) {
  .custom-fwb__body {
  position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
"reset": {
		"scope": "scss, css",
		"prefix": "rst",
		"body": [
			"* {",
			"\tmargin: 0;",
			"\tpadding: 0;",
			"\tbox-sizing: border-box;",
			"\tfont-family: ${1};",
			"}"
		]
	}
  &:after {
            content: '';
            display: block;
            position: absolute;
            border-bottom: 1px solid #282828;
            z-index: 100;
            width: 100%;
            margin: 0 auto;
            transform: translateX(-50%);
            left: 50%;
        }
&:before {
                        content: "\f39e";
                        font-size: 18px;
                        font-family: 'Font Awesome 5 Brands';
                        position: relative;
                        margin-right: 10px;
                    }
ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}
.flip-container {
  background: transparent;
  display: inline-block;
}

.flip-this {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-container:hover .flip-this {
  transition: 0.9s;
  transform: rotateY(180deg);
}
/*  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'


Rules:
 1 : Worst cast
 2 : Remove Constants
 


/* XXXXXXXX--XXXXXX */

/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/*    */
/* XXXXXXXX--XXXXXX */
/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}
.flex-container {

  /* We first create a flex layout context */

  display: flex;

  

  /* Then we define the flow direction 

     and if we allow the items to wrap 

   * Remember this is the same as:

   * flex-direction: row;

   * flex-wrap: wrap;

   */

  flex-flow: row wrap;

  

  /* Then we define how is distributed the remaining space */

  justify-content: space-around;

  

  padding: 0;

  margin: 0;

  list-style: none;
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

<div class="sr-only">This text is hidden.</div> 
const Nav = styled.div`
    div > a.active > div {
        color: ${props => props.color}
     }
`
function Header() {
    const {DefaultColor} = useContext(GlobalContext)
    return <Nav color={DefaultColor?.success} />
}
.LikeButton button {
  margin: 1rem;
  transition: all 0.5s ease;
  transform: scale(1);
}

.LikeButton button:hover {
  cursor: pointer;
  transform: scale(1.25);
  filter: brightness(120%);
}
.button {
  color: #ff0000;
}

/* note: 100% is baseline 70% would be darker */
.button:hover {
  filter: brightness(125%);
}
//Using Inline Styles
import React from 'react';

function App() {
  return (
    <div
      style={{
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      }}
    />
  );
}

export default App;

//Conditional Changing the Background Color in React
import React from 'react';

function App() {
  const isBackgroundRed = true;

  return (
    <div
      style={{
        backgroundColor: isBackgroundRed ? 'red' : 'blue',
      }}
    />
  );
}

export default App;

//OR

//App.js
import React from 'react';
import './App.css';

function App() {
  const isBackgroundRed = true;
  
  return (
    <div className={isBackgroundRed ? 'background-red' : 'background-blue'} />
  );
}

export default App;
//App.css
.background-red {
  background-color: red;
}

.background-blue {
  background-color: blue;
}
.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}
/* 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); }
**  

 /* 
 Lesson 2: Node and Express Environment
 */
  
  > npm list express
  // Return the list of express 'version'. or just check the 'package.json'
  
  
  //Installing packages
  > npm install express
  
  // Express to run server and routes
const express = require('express');

// Start up an instance of app
const app = express();
  

// method '.listen'
const port = 8080;
const server = app.listen(port, listening); //Listening is callback function. 
function listening(){
  console.log("Server runing on Port",port)
}



Methods:
get | post | put | delete

**
  const express = require('express');
  const app = express(); //Creating Instance

  app.get('/', function(req, res ){
    // '/' is the URL Path on the browser. '/' is the           home/root folder on the project.
    // 'request'( Client to server)
    // 'response' ( Server to client )
    res.send("<h1>Jaskaran Singh</h1>");
   })

  app.get('/karan', function(req, res ){
      res.send("<h1>Hi Karan Singh</h1>");
  })
   //It will work for url 'http://localhost:8080/karan'
  
// POST method route
app.post('/', function (req, res) {
  res.send('POST received')
})  

app.listen(8080, ()=>{
    console.log("Runnung....")
   });
**
  // TODO-ROUTES!
app.post('/add', callBack1 )

function callBack1(req, res){
    res.send('Post Received')
  //create a POST route that uses the url /add and sends the response POST received when used to make a request.
}
**
  const data = [];
  app.post('/flavor', addFlavor);

 function addFlavor (req, res) {
  data.push(req.body);
   // A way to store the data
};
**
  let data = []
 app.post('/animal', callBack2 );
 function callBack2(req, res){
  data.push( req.body )   
   //Add a POST route for adding a favorite animal via the path ’/animal’ to an array named data. You will need to create the array as well.
}
**
   /* ------------------------ ------------------*/ 
  
                    /* Async Js */
 : The keyword async before a function makes the function return a promise
  
**
 aync function test(){
   return "Some results...";
   // Since we are using 'aync', test() will be a            asynchrounous function.
 }   
> test(); //It will return a 'pending' Promise
> test().then((res)=>{},(rej)=>{})
**   
**
  const retrieveData = async (url='') =>{ 
  const request = await fetch(url);
  try {
  // Transform into JSON
  const allData = await request.json()
  }
  catch(error) {
    console.log("error", error);
    // appropriately handle the error
  }
}
**
  
//Server and Client side.
//Async Js.

**
const express = require('express');
const app = express();

//Movie Empty List.
let fakeData = {
    animal : 'lion', fact : 'lions are fun'
};
app.get('/fakeAnimalData', getFakeData );
function getFakeData(req, res){
 res.send(fakeData)
}
app.listen(8080, ()=>{
    console.log("Runnung....")
});
// 'localhost:8080/fakeAnimalData'  will return 'fakeData' Object

**
  /*    Chaining Promises    */
  
  
  
 
   /* ------------------------ ------------------*/ 
   /* ------------------------ ------------------*/ 
 
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}
/* the navbar-brand has two <span> children. The first contains the 'C'. The second contains the 'utespot' */
/* target the siblings of the first span in .navbar-brand */
.navbar-brand span + span {
	margin-left: 5px;
	/* we change the letter spacing to negative, so that the letters bunch up on top of each other. We use 'em' so that the spacing is relative to the element's font-size */
	letter-spacing: -0.52em;
	/* make it disappear */
	opacity: 0;
	/* we want it to animate -- just means move. when a css attribute changes, it will 'tween' between its old value and its new */
	/* we could target the transition to just work on opacity and letter-spacing, but 'all' is quick here*/
	transition: all 0.3s ease-out;
}

.navbar-brand:hover span + span {
	/* on hover, we spread the letters out again */
	/* since we set the transition (animate) to apply to all attributes, this change in letter-spacing will be animated (from its old value of -0.52em to its new of 0.1em) */
	letter-spacing: 0.1em;
	/* make it visible -- the transition:all will also apply to the opacity, so the opacity will also animate between its old value (0 - transparent) and its new (1 - opaque)*/
	opacity: 1;
}
element::after {
	/* ::before and ::after are pseudo-elements, and require a content attribute to exist. Often, we make it empty, because we are using these pseudo-elements to do funky little visual UI tricks, that have no content within. Also, mixing content and style feels wrong. */
	content: "";
	/* border on the bottom */
	border-bottom: 1px solid black;

	/* All the following is positioning stuff. It is absolute, so it is out of the flow, and we can put it wherever we want. We are putting it at the bottom of its (relative) parent, and we position its left-side 50% across the width of its parent (from the left). */
	position: absolute;
	width: 60%;
	bottom: 0;
	left: 50%;
	/* THEN we use the transform:translate to move it back to the left, but this time, just 50% of its OWN width. The effect of moving it right 50% of its parent, and left 50% of its own width, centers it in its parent. magic! */
	transform: translate(-50%, 0);
}
img {
	transition: all ease 500ms;
}

img:hover {
	transform: scale(1.25);
	opacity: 0.7;
}
//SIMPLE SANS SERIF FONT
body {
 font-family: 'Lato', sans-serif;
 font-weight: 300;
}
//https://fonts.google.com/specimen/Lato?query=lato
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Prata&display=swap" rel="stylesheet"> 

// CLASSIC SERIF VERY DIGNIFIED
h1, h2, h3, h4, h5, h6 {
 font-family: 'Prata', serif;
}
//https://fonts.google.com/specimen/Prata
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet"> 
transition: width .2s ease-in-out;
-webkit-font-smoothing: antialiased;
idを付けたelementが出てくる前に、<script src="app.js"></script>が先に来ているから。

<div id="test"></div>
のあとに
<script src="app.js"></script>
を持ってこないとJavaScriptは何を言わているか分からない。
一番良いのは</body>の直前。
/* A href that contains “example.com” */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}
[data-type='primary' s] {
  color: red;
}

.item:not(:last-child) {
  margin-left: 2rem;
}
document.addEventListener('mouseover', addBorder)

function addBorder(e) {
  document.querySelectorAll('*').forEach(el => el.style.border = '')
  e.target.style.border = '10px solid lime'
}
 animation: 12s rotate .1s infinite linear;

0% {
    transform: rotate(0deg)  translateX(16px) rotate(0deg);
}
100% {
    transform: rotate(360deg)  translateX(16px) rotate(-360deg);
}
// 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
// for parent div
      style="display: flex; align-items: center; justify-content: center"
.container {
  display: flex; /* or inline-flex */
}
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-family: "Open Sans", sans-serif;
  background: var(--color-grey);
}

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

.form-item {
  position: relative;
  margin: 5px 0;
}

.fas {
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  cursor: pointer;
}
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            
    &:hover {
        filter: brightness(0.6);
    }
    display: flex;
    justify-content: center;
<input type = "image" src = "@ Url.Content (topRated.Value)" onclick = "this.form.submit" class = "resize" width = "175" height = "250">

img.resize {
    width: 175 pixels;
    height: 250 pixels;
}
.knap {
    position: relative;
    width: 203px;
    height: 42px;
    padding: 11px;
    padding-left: 30px;
    padding-right: 54px;
    outline: none;
    cursor: pointer;
    font-weight: 700 !important;
    background-color: #AD8350;
    color: white !important;
    font-weight: 700;
    line-height: 42px !important;
    font-size: 16px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
    border-radius: 5px;


    &:hover {
        color: white;
        background-color: #9B7547;

        &:before {
            margin-left: 5px;
            -moz-transition: 200ms all ease-in-out;
            -o-transition: 200ms all ease-in-out;
            -webkit-transition: 200ms all ease-in-out;
            transition: 200ms all ease-in-out;
        }
    }

    &:before {
        content: '\f178';
        font-family: 'Font Awesome 5 Pro';
        font-weight: 400;
        font-size: 16px;
        position: absolute;
        float: right;
        padding-left: 132px;
        z-index: 1;
        -moz-transition: 200ms all ease-in-out;
        -o-transition: 200ms all ease-in-out;
        -webkit-transition: 200ms all ease-in-out;
        transition: 200ms all ease-in-out;
    }

    &:focus {
        outline: none;
    }
}
        span {
            font-size: 0;

            &:before {
                font-family: 'Font Awesome 5 Pro';
                font-size: 18px;
                display: inline-block;
                content: '\f178';
                font-weight:300;
            }
        }
<!-- 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">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="page">
        <div class="menu">MENU</div>
            <div class="clearfix">
                <div class="sidebar">SIDEBAR</div>
                <div class="content">CONTENT</div>
            </div>    
        <div class="footer">FOOTEER</div>
    </div>

   

</body>
</html>

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

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.menu {
    background-color:#B2D6FF;
    height: 100px;        
}

.sidebar {    
    float: left;
    background-color:#F09A9D;
    height: 300px;
    width: 30%;
}

.content {
    float:right;
    width: 70%;
    background-color:#F5CF8E;
    height:300px;
}

.footer {
    background-color: #D6E9FE;
    height: 200px;
}

.clearfix::before, .clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

.clearfix {
    clear: both;
    *zoom:1;
}
<style>
.heading {
  font-family: sans-serif;
  font-weight: 700;
}
.warning {
  color: yellow;
}
.danger {
  color: red;
}
.info {
  color: blue;
}
</style>

<body>
<h1 class="heading warning">...</h1>
<h2 class="heading danger">...</h2>
<h3 class="heading info">...</h3>
</body>
.xxx.yyy {
  color: darkgreen;
}

.xxx {
  color: red;
}
body, html {
    height: 100%;
    margin: 0;
}

.hero-image {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://unsplash.it/1800/1600');
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
}

.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
}

.hero-button {
    width: 150px;
    height: 50px;
    font-size: 30px;
    font-weight: bold;
    background-color:tomato;
    border-radius:30% 10% 30%;
    border:none;
    outline:none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.hero-button:hover {
    background-color:red;
    color: #fff
}
  position: absolute;
  top: 50%; right: 50%;
  transform: translate(50%,-50%);
 position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);    
.owl-dots {
    display: block;
    height: 0px !important;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    margin-top: -45px;
    outline-style: none;

 

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

 

.owl-dot {
    width: 10px;
    height: 10px;
    background-color: #bbb !important;
    border-radius: 50%;
    display: inline-block !important;
    margin: 2.5px;
    outline-style: none;

 

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

 

button.owl-dot.active {
    background-color: #ffbc00 !important;
    outline-style: none;

 

    &:focus {
        outline: none;
        box-shadow: none;
    }
}
/* Changes color of menu links */
a.menu-link{
	color: white !Important;
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
}
a.menu-link:hover{
	color: #d0e1d6 !important;
}

/* Brings site header to front of page and makes if full width */
#site-header{
	z-index: 10 !Important;
	width: 100vw !important;
}

/* Page title*/
/* Disable page title on landing page */
.page-id-131 .page-header{
	display: none;
}
/* Puts long strands of text on multiple lines */
.page-header div.container{
	max-width: 50%;
}

/* Text styling throughout site */
h1, h2, h3, h4, h5, h6{
	font-family:"Raleway", sans-serif;
	font-weight: 500 !Important;
};
p{
	font-family: "Open Sans", sans-serif !important;
	color: #404040 !Important;
}
p a{
	text-decoration: underline !important;
}
p a:hover{
	color: #7C4DFF;
}

/* Styling the "Our Team" section on the About page. */
.team-container{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 .5em;
	display: flex;
	flex-flow: row wrap !Important;
	justify-content: space-around !important;
}
.team-box{
	width: 47%; !Important;
	min-width: 300px;
	margin-bottom: 1em;
}
.team-box h3{
	background-color: #9CBFA7;
	font-weight: 600;
	color: white;
	padding-top: 10px;
	margin-bottom: 0;
	text-align: center;
}
.team-box p{
	padding: 1em;
	border: 10px solid #9CBFA7;
}

/* Sticky sidebar! */
.elementor-element-7f915bb, .elementor-element-7f915bb .elementor-widget-container, .elementor-element-076b6c7, .elementor-element-076b6c7 .elementor-widget-container, .elementor-element-f1064db, .elementor-element-f1064db .elementor-widget-container  {
	height: 100%;
}
div#sticky-sidebar{
	z-index: 0; 
  top: 105px;
	box-sizing: border-box;
  position: relative;
  position: -webkit-sticky;
  position: sticky !important;
}
#sticky-sidebar h2{
	color: white;
	background-color: #9CBFA7;
	padding: 10px;
	margin-bottom: 0;
}
#sticky-sidebar a{
	color: #351431;
	font-family: "Raleway", sans-serif;
	font-weight: 500;
	font-size: 1.2em;
}
.page-links{
	background-color: white;
	text-align: left;
	padding-left: 10px;
	border: 5px solid #9CBFA7;
	margin-top: 0;
}
aside{
	position: default;
	padding-left: 1em;
	height: 100% !Important;
	border-left: 5px solid #D0E1D6;
	box-sizing: border-box;
	height: 100% !important;
}
.sticky-element-placeholder{
	height: inherit;
}

/* Footer content styling*/
#footer h4{
	border-left: none;
	padding-left: 0;
	font-family: "Raleway", Sans-serif;
	font-size: 1.2em;
}
#footer p a{
	color: #D0e1d6 !important;
}
#footer p{
	font-family: "Open Sans", sans-serif;
	font-size: 1em;
	color: whitesmoke;
}
/* Makes site header sticky */
#site-header{
	position: -webkit-sticky;
	top: 0;
	position: sticky;
}
.subheading{
	font-size: 1.1em;
	font-style: italic;
	color: #9cbfa7;
}
/* RESPONSIVE Space added on wider desktop/laptop views */
#site-logo{
	padding-left: 10vw;
}
@media only screen and (max-width: 1200px){
	#site-logo{
		padding-left: 0;
	}
}
@media only screen and (max-width: 700px){
	.page-header .container{
		margin-left: 1em;
	}
	.page-header-title{
		text-align: left;
	}
	.subheading{
		text-align: left;
		font-size: 1em;
	}
	.page-header{
		background-position: bottom center !important; 
	}
}
img.responsive-logo{
	max-width: 160px !important;
}

/*Adds hanging indent for citation items*/
.citation{
	padding-left: 25px;
	text-indent: -25px;
}
cssbuttons/index.html
​ ​<p>​
​   ​<input​ class=​"button"​ type=​"button"​ value=​"A Button!"​​>​
​   ​<a​ class=​"button"​ href=​"http://pragprog.com"​​>​A Link!​</a>​
​ ​</p>​
body {
  background: rgb(48, 52, 52)
}
.container {
  margin: 0 auto;
  width: 200px;
  position: relative;
}
.leaves {
  width: 7px;
  height: 70px;
  background: #339B00;
  border-radius: 0 0 10px 10px;
  position: absolute;
  left: 50%;
  margin-left: -4px;
  z-index: 1;
}
.leaves:after {
  content: '';
  width: 80px;
  height: 80px;
  background: #339B00;
  position: absolute;
  border-radius: 0% 50%;
  transform: rotate(96deg) skew(21deg, 11deg);
  transform-origin: left top;
  top: 32px;
}
.leaves:before {
  content: '';
  width: 70px;
  left: 8px;
  height: 70px;
  background: #339B00;
  position: absolute;
  border-radius: 0% 50%;
  transform: rotate(-16deg) skew(21deg, 11deg);
  transform-origin: left top;
  top: 32px;
}
.lemon {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: yellow;
  position: absolute;
  transform: rotate(48deg) skew(6deg, 6deg);
  top: 69px;
  left: 50%;
  margin-left: -80px;
}
.lemon:after {
  content: '';
  width: 50px;
  height: 50px;
  background: yellow;
  top: 64%;
  left: 50%;
  position: absolute;
  margin-left: 24px;
  border-radius: 19px;
}
.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
p {
    text-decoration: underline;
}
// i custom.js

    $('.sliderBig').owlCarousel({
        loop: true,
        stagePadding: 0,
        margin: 0,
        autoWidth: false,
        lazyLoad: true,
        autoplay: true,
        nav: true,
        navContainer: '.customNav',
        navText: ["<i class='fal fa-long-arrow-left'></i>", "<i class='fal fa-long-arrow-right'></i>"],
        dots: true,
        dotsContainer: '.customDots',
        autoplayHoverPause: true,
        smartSpeed: 1000,
        onLoadLazy: lazySrcset,
        onInitialize: showSlider,
        responsive: {
            0: {
                items: 1
            }
        }
    });

// slut

// Reset button styling
    input, button {
        all: unset
    }


// Slider dots i bunden

.owl-dots {
    display: block;
    height: 0px !important;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    margin-top: -45px;
    outline-style: none;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

.owl-dot {
    width: 10px;
    height: 10px;
    background-color: #bbb !important;
    border-radius: 50%;
    display: inline-block !important;
    margin: 2.5px;
    outline-style: none;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

button.owl-dot.active {
    background-color: #ffbc00 !important;
    outline-style: none;

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

//slut

// SliderDots i højre side
.slider .customDots {
    position: absolute;
    bottom: 30px;
    z-index: 5;
    counter-reset: dots;
    height: 10px;
    width: 10px;
    color: #f00;
    right: 66px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
//

//Streger i højre side.

    .customDots {
        position: absolute;
        bottom: 30px;
        z-index: 5;
        counter-reset: dots;
        height: 114px;
        width: 10px;
        color: #f00;
        right: 46px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);

        &.hidden {
            display: none;
        }

        button {
            position: relative;
            background-color: transparent;
            background-image: none;
            border: none;
            box-shadow: none;
            outline: none;

            &:after {
                -moz-transition: 200ms all ease-in-out;
                -o-transition: 200ms all ease-in-out;
                -webkit-transition: 200ms all ease-in-out;
                transition: 200ms all ease-in-out;
                -moz-transition-property: all;
                -o-transition-property: all;
                -webkit-transition-property: all;
                transition-property: all;
                content: "";
                width: 3px;
                height: 30px;
                background-color: rgba(255,255,255, 0.5);
                display: inline-block !important;
                outline-style: none;
            }
            /*        &:before {
                @include transition();
                counter-increment: dots;
                content: "0" counter(dots);
                @include fontStyle(16px, $color-fontlight, 600);
                opacity: 0.7;
            }*/
            &.active, &:hover {
                &:after {
                    -moz-transition: 200ms all ease-in-out;
                    -o-transition: 200ms all ease-in-out;
                    -webkit-transition: 200ms all ease-in-out;
                    transition: 200ms all ease-in-out;
                    -moz-transition-property: all;
                    -o-transition-property: all;
                    -webkit-transition-property: all;
                    transition-property: all;
                    content: "";
                    width: 3px;
                    height: 30px;
                    background-color: white !important;
                    display: inline-block !important;
                    outline-style: none;
                }
            }
        }
    }
<!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>
/* v2.0 | 20110126
http://meyerweb.com/eric/tools/css/reset/
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, 
  mark, 
  audio, 
  video {
	margin:;
	padding:;
	border:;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height:;
}
ol, 
  ul {
	list-style: none;
}
blockquote, 
  q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, 
  q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing:;
}
	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;
		}
	}
@media (max-width: 960px) {
  .container {
    width: 700px;
  }
}
@media (max-width: 720px) {
  .container {
    width: 500px;
  }
}
@media (max-width: 540px) {
  .container {
    width: 300px;
  }
}
.iframe-container {
      // overflow: hidden;
      // /* 16:9 aspect ratio */
      // padding-top: 56.25%;
      // position: relative;
      width: 100%;
      padding-top: 100%;
      position: relative;
      iframe {
         // border: 0;
         // height: 100%;
         // left: 0;
         // position: absolute;
         // top: 0;
         // width: 100%;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
    }
/* Default values */
:root {
    --text-color: #222;
}
/* Values in alt-color */
.alt-color {
    --text-color: green;
}
/* Vercschachtelung muss beibehalten werden, damit IE Fallback greift */
.alt-color p {
    color: green; /* fuer IE */
    color: var(--text-color);
}

/* 
ohne IE Support waere das für einen Farbwechsel ausreichend:

p {
    color: var(--text-color);
}
*/
@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
	flex-direction: column-reverse;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}
 
}
<div class="slider">
    <div class="owl-carousel owl-theme sliderLogo">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>


    $('.sliderLogo').owlCarousel({​​​​​​​
        loop: true,
        stagePadding: 0,
        margin: 0,
        autoWidth: false,
        lazyLoad: true,
        autoplay: true,
        nav: true,
        navContainer: '.customNav',
        navText: ["<i class='fal fa-long-arrow-left'></i>", "<i class='fal fa-long-arrow-right'></i>"],
        dots: true,
        autoplayHoverPause: true,
        smartSpeed: 1000,
        onLoadLazy: lazySrcset,
        onInitialize: showSlider,
        responsive: {​​​​​​​
            0: {​​​​​​​
                items: 3
            }​​​​​​​
        }​​​​​​​
    }​​​​​​​);
 
//big shadow
    -webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.06);
    -moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.06);
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.06);

//small shadow
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.06);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.06);
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.06);

//Transparent images
	-webkit-filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.06));
	filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.06));
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
@font-face {
  font-family: Hetilica;
  src: url(Hetilica.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@media (max-width: 996px) {

    body > main > div.slider__raekke > div > div > div:nth-child(2) > div > div > div > div > div.owl-carousel.owl-theme.sliderBig.owl-loaded.owl-drag > div.owl-stage-outer > div > div.owl-item.active > div:after {
        width: 100%;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(to right, rgba(247,247,49,1) 0%,rgba(255,255,255,0) 69%);
        height: 100%;
    }
}
    -webkit-filter: brightness(80%);
@media (min-width: 1199.98px)  {
    .normal2 {
        position: sticky !important;
        width: 100% !important;
        top:103px;
    }

    .normal {
        position: sticky !important;
        width: 100% !important;
        top:0;

    }
}
 box-shadow: inset 0 0 0 1000px rgba(45, 48, 71, 0.86);
.vertical-align {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    &:after {
        content: '';
        display: block;
        border-bottom: 1px solid rgba(112, 112, 112, 0.1);
        margin-top:0;
        margin-bottom:-8px;
    }
<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>
body > main > div:nth-child(4) > div > div > div > div > div > table > thead:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; /* <-- put left edge in the middle */
    margin-left: -20%; /* <-- shift to the left by half of the width */
    width: 40%;
    height: 1px;
    background: #000;
}

    <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%;
}
.bgVideo {
	position: absolute;
	pointer-events: none;
	width: 100%;
	height: 100%;
	background: none;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;

	video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: none;
	}
}

@media(min-aspect-ratio: 16/9) {
	.videoBg  video {
		width: 100%;
		height: auto;
	}
}

@media(max-aspect-ratio: 16/9) {
	.videoBg  video {
		width: auto;
		height: 100%;
	}
}
ul li:not(:first-of-type) {
  color: red;
}
ul li:not(:last-of-type) {
margin-bottom: 20px;
}
//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.
// GRID to List For Mobile Start //
/* if( isset($_GET['s'])){ */
function product_grid_list_mod()
{  ?>
<style>
	Your styles here
</style>
<?php /* } */
add_action('wp_head', 'product_grid_list_mod', 100);
}
// GRID to List For Mobile End //
        /*   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");
})
.email {
  opacity: .75;
  text-overflow: ellipsis;
  overflow: hidden;
}
background-image: url(/src/assets/icons/image.png)

background-image: url(${dropdown});
nav#menu li:nth-child(n+2):nth-child(-n+5) a:before {
    content: "\f078";
    font-size: 8px;
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    right: 2px;
    top: 15px;
}
::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}
@media (max-width: 960px) {
  /* For a screen < 960px, this CSS will be read */
  .container {
    width: 700px;
  }
}
@media (max-width: 720px) {
  /* For a screen < 720px, this CSS will be read */
  .container {
    width: 500px;
  }
}
@media (max-width: 540px) {
  /* For a screen < 540px, this CSS will be read */
  .container {
    width: 300px;
  }
}
/* 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 --------------- */
.module .content .items .item .poster a .see,
.module .content .items .item .poster img{
	-webkit-transition: none;
    transition: none;
}
<!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>Background & Borders</title>
</head>
<style>
  .hasnai {
    text-align: center;
  }

  #box-1 {
    background-color: red;
    /* border-width: 5px;
    border-style: dotted;
    border-color: black; */
    border: double 5px black;
    border-radius: 15px;
  }

  #box-2 {
    background-color: chartreuse;
    border: 5px solid blue;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  #box-3{
    /* If you all properties togather than don't use background-image just use background */
    /* background-image: url("img/hrhasnai.jpg")*/
    background: url("img/hrhasnai.jpg") no-repeat center center/cover;
    /* background-repeat: no-repeat;*/
    /* background-position:100px 0px; */
    /* background-position:center center; */
    /* background-position:center top; */
    /*background-size: cover; */

    height: 300px;
    width: 600px;
    color: white;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  #box-4{
    background: url("img/flutter.png") no-repeat center center;
    background-attachment:fixed;
  }
</style>

<body>
  <H1 class="hasnai">
    Hasnain
  </H1>
  <div id="box-1">
    <h1>Box One</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <br>
  <div id="box-2">
    <h1>Box Two</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <div id="box-3">
    <h1>Box Three</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <div id="box-4">
    <h1>Box Four</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <div id="box-5">
    <h1>Box Five</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>

</body>

</html>
<!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>Colors in CSS</title>

  <style>
    /*Hex value*/
    h1{
      color: rgb(red, green, blue) ;
    }
    /*Color Name*/
    h2{
      color: blue;
    }
    /*Color RGB*/
    h3{
      color: #00000;
    }
  </style>

</head>
<body>

<h1>Color By Hex value</h1>  
<h2>Color By Color Name</h2>
<h3>Color by Color RGB</h3>

</body>
</html>
<!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>Fonts in CSS</title>

  <style>
    body{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 1.6em;
    }
    #welcome p span{
      font-weight: bold;
    }
    #about p span{
      font-style: italic;
    }
    
  </style>
</head>
<body>
  
  <div id="welcome">
    <h2 class="primary-heading">Welcome</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <span> Eius praesentium laboriosam ratione molestiae nobis, nisi quod laudantium aliquid accusamus</span> expedita!</p>
  </div>
  <div id="about">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span> Cumque enim natus ad? Mollitia alias repudiandae </span>iusto molestias voluptatum, dolores eius.</p>
  </div>
  
</body>
</html>
<!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>CSS Selector's</title>

  <style>
    /*Elements Selector's*/
    body{
      background-color: rgb(75, 56, 56);
    }

    /*# Sign is for ID's*/
    #welcome{
      background-color: rgb(31, 151, 57);
    }
    /* . sign is for class */
    .primary-heading{
      color: crimson;
    }
    .about{
      color:darkgoldenrod;
    }
    /*Multiple selectors 
    Multiple selectors is divided by "," coma*/
    #welcome,#about{
      border: 1px solid black;
      padding: 10px;
      margin-bottom: 10px;
    }

    /* Nasted selector's */
    #welcome p{
      background-color:oldlace;
      font-size: 20px;0
    }
    #about{
      background-color: blanchedalmond;
    }
    
  </style>

</head>
<body>
  
  <div id="welcome">
    <h2 class="primary-heading">Welcome to Our Course </h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non odit sed impedit rem tempore labore quasi veritatis laborum quae quo?</p>
  </div>

  <div id="about">
    <h2 class="about">About</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque debitis esse expedita quo sit. Praesentium ea ipsum numquam voluptas exercitationem?</p>
  </div>



</body>
</html>
                     /*        "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 ----------- */
.some-class {
    background-image: linear-gradient(to bottom, rgba(6, 7, 7, 0.52), rgba(22, 20, 22, 0.73)), url(/assets/images/mainbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
             /*      Utilities             */

/* Break points for Grid */          

Extra small  <576px	
Small        ≥576px
Medium       ≥ 768px	
Large        ≥992px	
Extra large  ≥1200px

/* Basic Typography  */
/* HEADINGS */
<h4>Heading Four</h4>
<h5 class="h1">Heading Five</h5>  /* Biggest size  */
<h6>Heading Six</h6>

/* DISPLAY CLASSES */ 
<h1 class="display-1">Display 1</h1>
<h1>Display 2</h1>
<h1>Display 3</h1>
<h1 class="display-4">Display 4</h1>


/* PARAGRAPHS */ 
<!-- LEAD -->
<p class="lead">Loremdita eum,quaerat, vitae dolorum, dolor autem reiciendis                 sapiente.</p>
<!-- MONOSPACE PARAGRAPH -->
<p class="text-monospace">My monospace paragraph</p>


/* STYLE CLASSES */
<p class="font-weight-bold">Bold Text</p>
<p class="font-weight-normal">Normal Text</p>
<p class="font-italic">Italic Text</pA>

/* TEXT TRANSFORMS */
<p class="text-lowercase">MAKE LOWERCASE</p>
<p class="text-uppercase">make uppercase</p>
<p class="text-capitalize">make capitalized</p>

/* BLOCKQUOTES */ 
<blockquote class="blockquote">
<p>This is a blockquote</p>
</blockquote>

<!-- BLOCKQUOTE RIGHT ALIGNED -->
<blockquote class="blockquote text-right">
<p>This is a blockquote aligned right</p>
</blockquote>

<!-- BLOCKQUOTE WITH FOOTER -->
<blockquote>
<footer class="blockquote-footer">Someone famous here.
</footer>


/* LISTS */ 
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>

<!-- INLINE LIST -->
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Lorem ipsum</li>
</ul>
/* -----------------------------XX---------------- */

    /*      Text-align and display    */

<!-- ALIGNMENT -->
<p class="text-left">Text aligned left</p>
<p class="text-center">Text aligned center</p>
<p class="text-right">Text aligned right</p>

<!-- RESPONSIVE ALIGN -->
<p class="text-sm-right">Right aligned on small or larger</p>
<p class="text-lg-right">Right aligned on large or larger</p>
<p class="text-xl-right">Right aligned on xl or larger</p>

<p class="text-sm-left">Left aligned text on small or larger</p>
<p class="text-md-left">Left aligned text on medium or larger</p>
<p class="text-lg-left">Left aligned text on large or wider</p>
<p class="text-xl-left">Left aligned text on extra large or wider</p>

<p class="text-sm-center">Center aligned text on small or larger</p>
<p class="text-md-center">Center aligned text on medium or larger</p>
<p class="text-lg-center">Center aligned text on large or wider</p>
<p class="text-xl-center">Center aligned text on extra large or wider</p>

<!-- VERTICAL ALIGNMENT -->
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-bottom">bottom</span>
<span class="align-middle">middle</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

<!-- TURN BLOCK TO INLINE -->
<h1 class="d-inline">Hello</h1>
<h1 class="d-inline">Goodbye</h1>

<!-- TURN INLINE TO BLOCK -->
<span class="d-block bg-primary">Block</span>

<!-- INLINE BLOCK -->
<div class="d-inline-block bg-primary">
<h3 class=''>Hello</h3>
This is inline
</div>
<div  class="d-inline-block bg-warning">
<h3 class=''>Hello</h3>
This is inline
</div>
/* -----------------------------XX--------------------- */

/*       Floats & Fixed Positions   */

<!-- FLOATS -->
<div class="float-left">Float left</div>
<br>
<div class="float-right">Float right</div>
<br>
<div class="float-none">Float none</div>
<br>

<!-- RESPONSIVE FLOATS -->
<div class="float-sm-right">Float right on small or wider</div>
<br>
<div class="float-md-right">Float right on medium or wider</div>
<br>
<div class="float-lg-right">Float right on large or wider</div>
<br>
<div class="float-xl-right">Float right on extra large or wider</div>
<br>

<div class="float-sm-left">Float left on small or wider</div>
<br>
<div class="float-md-left">Float left on medium or wider</div>
<br>
<div class="float-lg-left">Float left on large or wider</div>
<br>
<div class="float-xl-left">Float left on extra large or wider</div>
<br>

<div class="float-sm-none">Float none on small or wider</div>
<br>
<div class="float-md-none">Float none on medium or wider</div>
<br>
<div class="float-lg-none">Float none on large or wider</div>
<br>
<div class="float-xl-none">Float none on extra large or wider</div>
<br>

<br>
<br>

<!-- CLEARFIX -->
<div class="bg-success clearfix">
<button class="float-left">Float Left</button>
<button class="float-right">Float Right</button>
</div>

<!-- FIXED TOP -->
<h3 class="fixed-top">Fixed Top</h3>

<!-- FIXED STICKY -->
<h3 class="sticky-top bg-success">Sticky</h3>

<!-- FIXED BOTTOM -->
<h3 class="fixed-bottom">Fixed Bottom</h3>


     /* Colors & Background */

<!-- TEXT COLORS -->
<p class="text-primary">Text Primary Color</p>
<p class="text-secondary">Text Secondary Color</p>
<p class="text-success">Text Success Color</p>
<p class="text-info">Text Info Color</p>
<p class="text-warning">Text Warning Color</p>
<p class="text-danger">Text Danger Color</p>
<p class="text-light">Text Light Color</p>
<p class="text-dark">Text Dark Color</p>
<p class="text-white">Text White Color</p>
<p class="text-muted">Text Muted</p>
<p class="text-black-50">Text Black 50</p>
<p class="text-white-50 bg-primary">Text White 50</p>

<br>
<br>

<!-- BACKGROUND COLORS -->
<div class="bg-primary">Background Primary Color</div>
<div class="bg-secondary">Background Secondary Color</div>
<div class="bg-success">Background Success Color</div>
<div class="bg-info">Background Info Color</div>
<div class="bg-warning">Background Warning Color</div>
<div class="bg-danger">Background Danger Color</div>
<div class="bg-light">Background Light Color</div>
<div class="bg-dark">Background Dark Color</div>
<div class="bg-white">Background White Color</div>
<div class="bg-transparent">Background Transparent</div>

<!-- INVISIBLE -->
<p class="invisible">Hello</p>
/* -----------------------------XX--------------------- */
     /*      Spacing               */

Size and Values ( rem ):
0 : 0
1 : .25rem
2 : .5rem
3 : 1rem
4 : 1.25rem
5 : 3rem

x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom


  <!-- MB MARGIN BOTTOM -->
        <h1 class="bg-success mb-0">Margin Bottom 0</h1>
        <h1 class="bg-success mb-1">Margin Bottom 1</h1>
        <h1 class="bg-success mb-2">Margin Bottom 2</h1>
        <h1 class="bg-success mb-3">Margin Bottom 3</h1>
        <h1 class="bg-success mb-4">Margin Bottom 4</h1>
        <h1 class="bg-success mb-5">Margin Bottom 5</h1>

        <br>
        <br>

        <!-- MT MARGIN TOP -->
        <h1 class="bg-success mt-0">Margin Top 0</h1>
        <h1 class="bg-success mt-1">Margin Top 1</h1>
        <h1 class="bg-success mt-2">Margin Top 2</h1>
        <h1 class="bg-success mt-3">Margin Top 3</h1>
        <h1 class="bg-success mt-4">Margin Top 4</h1>
        <h1 class="bg-success mt-5">Margin Top 5</h1>

        <br>
        <br>

        <!-- ML & MR -->
        <p>
            <span class="bg-success mr-5">Margin Right 5</span> dolor sit amet,
            <span class="bg-success ml-3">Margin Left 3 </span> 
        </p>

        <br>
        <br>

        <!-- MX MARGIN LEFT RIGHT -->
        <p>Lorem ipsum
            <span class="bg-success mx-5">Margin Left & Right 5</span>
        </p>

        <br>
        <br>

        <!-- MY  MARGIN TOP BOTTOM -->
        <p class="bg-success my-5">Margin Top & Bottom 5</p>

        <br>
        <br>

        <!-- BLANK - ALL SIDES -->
        <p class="bg-success m-5">Margin All Sides 5</p>

        <br>
        <br>

        <!-- PB PADDING BOTTOM -->
        <h1 class="bg-warning p-0">Padding Bottom 0</h1>
        <h1 class="bg-warning pb-1">Padding Bottom 1</h1>
        <h1 class="bg-warning pb-2">Padding Bottom 2</h1>
        <h1 class="bg-warning pb-3">Padding Bottom 3</h1>
        <h1 class="bg-warning pb-4">Padding Bottom 4</h1>
        <h1 class="bg-warning pb-5">Padding Bottom 5</h1>

        <br>
        <br>

        <!-- PT PADDING TOP -->
        <h1 class="bg-warning pt-0">Padding Top 0</h1>
        <h1 class="bg-warning pt-1">Padding Top 1</h1>
        <h1 class="bg-warning pt-2">Padding Top 2</h1>
        <h1 class="bg-warning pt-3">Padding Top 3</h1>
        <h1 class="bg-warning pt-4">Padding Top 4</h1>
        <h1 class="bg-warning pt-5">Padding Top 5</h1>

        <br>
        <br>

        <!-- PL & PR -->
        <p>
            <span class="bg-warning pr-5">Padding Right 5</span>                              <span class="bg-warning pl-3">Padding Left 3 </span>
        </p>

        <br>
        <br>

        <!-- PX PADDING LEFT RIGHT -->
        <p>Lorem ipsum
            <span class="bg-warning pl-5 pr-5">Padding Left & Right 5</span>
        </p>

        <br>
        <br>

        <!-- PY  PADDING TOP BOTTOM -->
        <p class="bg-warning pt-5 pb-5">Padding Top & Bottom 5</p>

        <br>
        <br>

        <!-- ALL SIDES -->
        <p class="bg-warning p-5">Padding All Sides 5</p>

        <!-- HORIZONTAL CENTERING -->
        <div class="bg-info mx-auto" style="width: 200px;">
            Horizontal Centering
        </div>
          /* -----------------------------XX----------------- */
              
                       /*        Sizing & Borders         */
 <!-- WIDTH CLASSES -->
        <div class="w-25    bg-success  p-3">Width 25%</div>
        <div class="w-50    bg-success  p-3">Width 50%</div>
        <div class="w-75    bg-success  p-3">Width 75%</div>
        <div class="w-100   bg-success  p-3">Width 100%</div>
        <div class="w-auto  bg-success  p-3">Width Auto</div>

        <br>
        <br>

        <!-- HEIGHT CLASSES -->
        <div style="height: 200px;border : 1px solid black">
            <div class="h-25 bg-primary d-inline-block">Height 25%</div>
            <div class="h-50 bg-primary d-inline-block">Height 50%</div>
            <div class="h-75 bg-primary d-inline-block">Height 75%</div>
            <div class="h-100 bg-primary d-inline-block">Height 100%</div>
            <div class="h-auto bg-primary d-inline-block">Height Auto</div>
        </div>

        <br>
        <br>

        <!-- BORDERS -->
        <div class="border p-3 mb-2 bg-light">Regular</div>
        <div class="border-top b1 p-3 mb-2 bg-light">Border Top</div>
        <div class="border-bottom p-3 mb-2 bg-light">Border Bottom</div>
        <div class="border-right p-3 mb-2 bg-light">Border Right</div>
        <div class="border-left p-3 mb-2 bg-light">Border Left</div>

        <br>
        <br>

        <!-- BORDER COLORS -->
        <div class="border border-primary p-3 mb-2 bg-light">Primary</div>
        <div class="border border-secondary p-3 mb-2 bg-light">Secondary</div>
        <div class="border border-success p-3 mb-2 bg-light">Success</div>
        <div class="border border-info p-3 mb-2 bg-light">Info</div>
        <div class="border border-warning p-3 mb-2 bg-light">Warning</div>
        <div class="border border-danger p-3 mb-2 bg-light">Danger</div>
        <div class="border border-light p-3 mb-2 bg-light">Light</div>
        <div class="border border-dark p-3 mb-2 bg-light">Dark</div>
        <div class="border border-white p-3 mb-2 bg-light">White</div>

        <br>
        <br>

        <!-- BORDER RADIUS -->
        <div class="border rounded p-3 mb-2 bg-light">Rounded</div>
        <div class="border rounded-top p-3 mb-2 bg-light">Rounded Top</div>
        <div class="border rounded-bottom p-3 mb-2 bg-light">Rounded Bottom</div>
        <div class="border rounded-right p-3 mb-2 bg-light">Rounded Right</div>
        <div class="border rounded-left p-3 mb-2 bg-light">Rounded Left</div>
        <div class="border rounded-circle w-25 p-3 mb-2 bg-light">Rounded Circle</div>
        <div class="border rounded-0 p-3 mb-2 bg-light">Dark</div>

       /* -----------------------------XX---------------------- */
                  /*      Custom Breakpoints           */



  .example{
          height: auto;
          position: absolute;
          bottom: 45px;
          width: 100%;
          max-width: 80rem;
          left:50%;
          transform: translate(-50%, 0);
  }
img:not([alt]) {
  outline: 2px solid red;
}
<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>
javascript:(d=>{var css=`:root{background-color:#f1f1f1;filter:invert(1) hue-rotate(180deg)}img:not([src*=".svg"]),picture,video{filter: invert(1) hue-rotate(180deg)}`,style,id="dark-mode",ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else {style = d.createElement('style');style.type="text/css";style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)
/* Hide lazyload images when JS fails (noscript will kick in then)  */
.no-js img.lazyload {
    display: none;
}

/* Prevent flash of broken image when src is not yet swapped by lazysizes */
img[src=""],
img:not([src]) {
  visibility: hidden;
}
<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>
add_filter( 'style_loader_src',  'sdt_remove_ver_css_js', 9999, 2 );
add_filter( 'script_loader_src', 'sdt_remove_ver_css_js', 9999, 2 );

function sdt_remove_ver_css_js( $src, $handle ) 
{
    $handles_with_version = [ 'style','general' ]; // <-- Adjust to your needs!
    if ( strpos( $src, 'ver=' ) && ! in_array( $handle, $handles_with_version, true ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
wp_enqueue_style('main-styles', get_template_directory_uri() . '/css/style.css', array(), filemtime(get_template_directory() . '/css/style.css'), false);
@import "compass/css";

​
3
*, *:before, *:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html, body {

  font-size: 62.5%;

  height: 100%;

  overflow: hidden;

}

​

$openSans: 'Open Sans', Helvetica, Arial, sans-serif;

$bg1: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sls-1.jpg';

$bg2: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sls-2.jpg';

$bg3: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sls-3.jpg';

$bg4: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sls-4.jpg';

$bg5: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sls-5.jpg';
*, *:before, *:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

​

html, body {

  height: 0%;

}
10
​

$lightBlue: darken(#EAFBFF, 50%);

$darkBlue: #208FF9;

​

body {

  &:before,

  &:after {

    content: "";

    display: block;

    height: 50%;
*, *:before, *:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

​

body {

  background: #006cc7;

  font-family: 'Roboto', Helvetica, Arial, sans-serif;

}

​

$circleSize: 0px;

$dlPad: 20px;

$dlWidth: 320px + $dlPad * 2;

$dlHeight: $circleSize + 50px + $dlPad*2;
16
$strokeW: 6px;

​

.dl-box {
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
//1 : Basic web development training.

// To selecto to certain section of different web page.
<a href='dummy.html#section-4'> Link to dummy page ( section 4 ) </a>

//Create account with AWS ( s3 ).
Hosted http://jpannu.s3-website.ca-central-1.amazonaws.com/ 

<mark> This will highlight text </mark>
<del> This will delete/stike the text </del>

          ----------------------------XX--------------------------
//CSS
               //css selectors
a[href='url'] { /*Selecting using attribute*/  }
a[target='_blank'] { /*Another Example */ }

p::first-letter {  }
p::first-line { }

p.word_wrap {
  word-wrap : break-word;
}

//Javascript

    //Generating Random number between a, b;
    let randomNumber = Math.floor(Math.random()* ( b-a ) + a);
    
    //Prompt & //confirm.
     /* Promopt provide two values, Either actual value( If ok is pushed) , or 'null'( if cancel button is pushed ). We can program it according to that */

let name = prompt('Please Enter First Name');
name == 'jaskaran' ? console.log('log in success') : console.log('Error');
name == 'null' ? console.log('Need to select ok button') : console.log('This is not good example');

let confirmName = confirm("Are you sure you want do this?");
if(confirmName) { doTheJob() }else{
  dontDoTheJob();
}


 //Bootstrap 3 ( Twitter )

<input class='btn btn-default' value='click here'> </input>

<button class='btn'> Mail <span class='badge'> 12000 </button>

<img src='' class='img-circle' />
<img src='' class='img-thumbnail' />
<img src='' class='img-rounded' />
.shape-separator {
  position: relative;
  height: 48px;
  background: #333;
}
.shape-separator::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}
// Thanks to https://dtransforms.desandro.com/box

​
3
body {

  display: flex;

  height: 0vh;

  justify-content: center;

  align-items: center;

  background: #f2f2f2;

}
10
​

.icon-list {

  display: flex;

  list-style-type: none;

  transform-style: preserve-3d;

  transform: rotateX(50deg) rotateZ(50deg);

​

  .icon-list__item {

    a {
body {

  background: #909f;

  padding: 3rem 0 0 3rem;

  font-size: px;

  height: 0vh;

  margin: 0;

  overflow: hidden;
8
}
9
​
10
.site-wrap {

  display: grid;
12
  grid-template-columns: 280px 1fr;

}

​

.site-nav {

  background: #0b121b;

  color: white;

  border-top-left-radius: 2rem;

  display: flex;
.neumorphism-toggle {

    position: relative;

    transition: transform .3s;

    transform: scale(var(--scale, 1)) translateZ(0);

    &:active {

        --scale: .6;

    }

    input {
9
        display: none;

        & + label {

            background: #fff;

            border-radius: 9px;

            padding: px 0 16px 20px;

            min-width: 208px;

            display: block;
16
            cursor: pointer;

            position: relative;

            box-shadow: -12px -12px 24px var(--light-shadow, transparent), 12px 12px 24px var(--shadow, transparent);
body {

  /* feel free to change height */

  height: 000px;

  background: linear-gradient(
5
    to bottom,

    orange,

    darkblue

  );

}

​

h1 {

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 

  font-weight: 300;

  color: white;

  text-transform: uppercase;

  text-align: center;

  font-size: 22px;

  letter-spacing: 5px;

  font-weight: 100;
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;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
<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>
.border { 
    width: 400px;
    padding: 20px;
    border-top: 10px solid #FFFF00;
    border-bottom:10px solid #FF0000;
    background-image: 
        linear-gradient(#FFFF00, #FF0000),
        linear-gradient(#FFFF00, #FF0000)
    ;
    background-size:10px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}
<!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>
box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);
Squarespace sectionID {
  	@media screen and (min-width: 640px) {
      	.sqs-row{
      	display: flex;
      	align-items: center;
      	box-sizing: border-box;
      	justify-content: center;
  	}
 	}	
/*                   Project : Natour  : - Jonas    */

.element {
  //Will always keep in top
       background-position : top;
     }

                     //Center the data using old school way.
.parent { position : relative; } 
.text-box {
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%,-50%);
    text-align : center;
}
.heading {
    animation-name: from-left;
    animation-duration: 2s;
   animation-iteration-count:3
  //How many times the animation should iterate.
}

//3D feel for button click.
a:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
a:active{
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
  }

                                  // Button affect.
.btn:link, .btn:visited {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    background: white;
    border-radius: 128px;
    padding: 12px 40px;
    transition: all .2 s ease-in;
    position: relative;
}

.btn::after {
   //Adding at the back of the original button.
    content : "";
    position: absolute;
    display: inline-block;
    top:0;
    right : 0;
    border-radius: 128px;
    background-color: grey;

    height: 100%;
    width : 100%;
    opacity: .5;
    z-index: -1;
    transition: all .4s;
}

.btn:hover::after {
  //When hovered it should show can box shadow going on.
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}


//Inheritance.
* { 
      box-sizing: inherit;
  //For all the elements will inherit from 'body'.
}
html { font-size : 62.5% /* (62.5% of the size of user's browser's font size.) */ }

body {
      box-sizing : border-box;
}
      
    /* ********************************************************** */
      
/*
 Title : Build a Responsive Website | HTML, CSS Grid, Flexbox & More. ( Youtube )
 By : Travery Media 
*/  
    
      
        
    /* ********************************************************** */
    
      
      
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;
}
.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
  grid-gap: 1rem;
}
                      /* --------------------------- */
// New Css tags.
.items { vertical-align : middle;  }
.selector {
  min-width : 100px;
  max-width : 200px;
 }
                      /* --------------------------- */

@media screen (max-width : 60rem) and (orientation : portrait){ 
 ... 
}
// To Specify devices with "Portrait" Orientation. Like "Ipads/Tablets".
                      /* --------------------------- */


//Spacing of the element.
element {
 position : fixed;
  width : 50%;
} 
 /*  If the element's 'position' is 'fixed'.
 Then % styled  apllied on the element works in respect to the VH or VW.
 */
                      /* --------------------------- */
//Font.
form > input[type='text'] {
 font : inherit; 
}
/* If we don't Inherit the properties, Then it use browser's style.
We want to use style(font size/family )as the rest of the web pages */
                      /* --------------------------- */

//Disbled buttons.
.btn.disabled {
 cursor : no-pointer;
  background : red;
}
/* This way we can desing UI, like a disabled Input.  
Were it does not allow to type in anything.
*/
                      /* --------------------------- */

// Meta Tag.
<meta name='viewport' content='width=device-width, initial-scale=1.0, 
 maximum-scale=2.0,minimum-scale=1.2'>
//Meta Information In the Head Tag.
//Some of them are optional.
                      /* --------------------------- */
//To hover and show some content.
  .elem p {
  color : transparent   ;
  }
.elem:hover p {
 color : green;
 }
                      /* --------------------------- */

  //To change kind of opacity.
div.box {
 filter : brightness(0);
 }  
div.box:hover {
 filter : brightness(100%);
 }  
    
                      /* --------------------------- */
  .btn { 
   transition-property: color , background-color;
   transition: .2s ease;
   }
                      /* --------------------------- */
.elem {
	width : fit-content;
 }
                      /* --------------------------- */
  .img {
  	object-fit: cover; 
  }

                      /* --------------------------- */
#footer .social-item img {
	filter: grayscale(1);
}// Will Make it black and white.
#footer .social-item img:hover {
	filter: grayscale(0);
}//Hovering will show original color of the img.

                      /* --------------------------- */
 /* To get Text on the hovered a Tag  */
//HTML
<li><a data-after-abc="Home" href="#">Home</a></li>
<li><a data-after-abc="Services" href="#">Services</a></li>
<li><a data-after-abc="Projects" href="#">Projects</a></li>
  //CSS
#header  ul a::after {
	content: attr(data-after-abc);
	position: absolute;
	font-size: 15rem;
	top: 50%;
	left: 50%;
	z-index: -1;
	color : rgba(128, 128, 128, 0.253);
	transform: translate(-50%, -50%) scale(0);
}

#header  ul li:hover a::after {
	cursor: pointer;
	transform: translate(-50%, -50%) scale(1);
}

                      /* --------------------------- */
/* Hamburger Animation */
.bar {
	height : 3px;
	width : 25px;
	background : black;
	position: relative;
}
.bar::before, 
 .bar::after {
	 content : '';
	 position: absolute;
	 left : 0 ;
	 height : inherit;
	 width : 25px;
	 background : black;
	 transition: .3s ease-in-out transform;
}
.bar::before {
	top : -8px;
}
.bar::after {
	bottom : -8px;
}
//Animate 01
.hamburger.close .bar::before {
	top: 0;
}
.hamburger.close .bar::after {
  bottom : 0;
}


//Hamburger is parent
 //Animate 02

.hamburger.close .bar {
	background : transparent;
}
.hamburger.close .bar::before {
	top:0;
	transform : rotate(45deg);
}
.hamburger.close .bar::after {
	transform : rotate(-45deg);
	top : 0;
}
// And will need to Toggle class 'close' via Js.

                      /* --------------------------- */
//Menu is alway Flahing ( white Round on the borders ).
.hamburger {
	position: relative;
	height: 60px;
	width: 60px;
	display: inline-block;
	border: 3px solid white;
	z-index: 1000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transform: scale(0.8);
	margin : 15px;
}

.hamburger::before {
	content: '';
	position: absolute;
	border: 3px solid white;
	height: inherit;
	width: inherit;
	border-radius: 50%;
	animation: hamburger_puls 2s infinite;
}
@keyframes hamburger_puls  {
  0% {
	opacity: 1;
	transform: scale(1);
  }
  100% {
   opacity: 0;
   transform: scale(1.3);
  }
}

                      /* --------------------------- */

.select {
  user-select : none;
  //User can not select any thing for this selector.
}
                      /* --------------------------- */

//Pseudo.
.selector >  li:last-child { 
                    // Will select "Last" li for the "selector" Element.
                    }          
             
/* Width and Height properties will not work with the inline properties,
 In order to make width/height changes, We need to add "inline-block"
 or "block" properties to the 
 provided Element. */

// Project Hotel Website,

//Focus.
#selector:focus {  outline : none; }
//It will Remove the 'outline' from the required selector.


//Linking Specific "Devices" For Responsive design.
<link rel='stylesheet' media='screen and (max-width: 768px )' href='name.css'>
  //This Css will only load when the Screen size is less than '768px'.

  /* --------------------------- */
  //SNAP: It will automatically adjust the 'section' with View Port. We use this when we w         ant the user to see the Full view port of 1 section.  
  
  container{
    scroll-snap-type: y mandatory;
  }
  section {
    scroll-snap-align: center;  
  }

                      /* --------------------------- */


  
  
              

  
  
/*** box sizing border-box for all elements ***/
*,
*::before,
*::after{box-sizing:border-box;}
a{text-decoration:none; color:inherit; cursor:pointer;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;}
figure{margin:0;}
input::-moz-focus-inner {border:0; padding:0; margin:0;}
ul, ol, dd{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;}
p{margin:0;}
cite {font-style:normal;}
fieldset{border-width:0; padding:0; margin:0;}
@import "resets/normalize.scss";
@import "resets/reset.local.scss";
@import "resets/typography.scss";
html{ 
   font-size: 1px;/*for using REM units*/
}
body{
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   font-size: 16rem;
   font-weight: 400;
   line-height: 1.3;
   color: #222;
}
box-shadow: inset 0 -0.475em 0 rgba(163,218,227,0.5);
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; font-size: 62.5% }

body,
input,
button,
select,
textarea { font: 600 1rem Poppins; color: #222222; }

a { text-decoration: none; }
a:link { color: #6A26CD; }
a:hover { color: #431488; }
a:active { color: #6A26CD; }
a:visited { color: #6A26CD; }

html, body, #root { height: 100%; }

ul, ol { margin: 0 0 1rem; padding: 0 0 0 1rem; }
table { border-collapse: collapse; }
th { text-align: left; }   
td { vertical-align: middle; }
:root {
    --space-unit: 1em;
    --space-xxs:  calc(0.25 * var(--space-unit));
    --space-xs:   calc(0.5 * var(--space-unit));
    --space-sm:   calc(0.75 * var(--space-unit));
    --space-md:   calc(1.25 * var(--space-unit));
    --space-lg:   calc(2 * var(--space-unit));
    --space-xl:   calc(3.25 * var(--space-unit));
    --space-xxl:  calc(5.25 * var(--space-unit));
}
HEIGHT : 1% ~ 1vh
WIDTH  : 1% ~ 1vw
.container {
  flex-flow: column wrap;
}
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
/* CSS HEX */
--safety-yellow: #f5d400ff;
--eerie-black: #141414ff;
--bottle-green: #006655ff;
--green-crayola: #00b881ff;
--shadow: #82785eff;
--auburn: #a72525ff;
--orange-pantone: #ff600aff;
--alabaster: #f4f4edff;

/* CSS HSL */
--safety-yellow: hsla(52, 100%, 48%, 1);
--eerie-black: hsla(0, 0%, 8%, 1);
--bottle-green: hsla(170, 100%, 20%, 1);
--green-crayola: hsla(162, 100%, 36%, 1);
--shadow: hsla(43, 16%, 44%, 1);
--auburn: hsla(0, 64%, 40%, 1);
--orange-pantone: hsla(21, 100%, 52%, 1);
--alabaster: hsla(60, 24%, 94%, 1);

/* SCSS HEX */
$safety-yellow: #f5d400ff;
$eerie-black: #141414ff;
$bottle-green: #006655ff;
$green-crayola: #00b881ff;
$shadow: #82785eff;
$auburn: #a72525ff;
$orange-pantone: #ff600aff;
$alabaster: #f4f4edff;

/* SCSS HSL */
$safety-yellow: hsla(52, 100%, 48%, 1);
$eerie-black: hsla(0, 0%, 8%, 1);
$bottle-green: hsla(170, 100%, 20%, 1);
$green-crayola: hsla(162, 100%, 36%, 1);
$shadow: hsla(43, 16%, 44%, 1);
$auburn: hsla(0, 64%, 40%, 1);
$orange-pantone: hsla(21, 100%, 52%, 1);
$alabaster: hsla(60, 24%, 94%, 1);

/* SCSS RGB */
$safety-yellow: rgba(245, 212, 0, 1);
$eerie-black: rgba(20, 20, 20, 1);
$bottle-green: rgba(0, 102, 85, 1);
$green-crayola: rgba(0, 184, 129, 1);
$shadow: rgba(130, 120, 94, 1);
$auburn: rgba(167, 37, 37, 1);
$orange-pantone: rgba(255, 96, 10, 1);
$alabaster: rgba(244, 244, 237, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-right: linear-gradient(90deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-bottom: linear-gradient(180deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-left: linear-gradient(270deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-top-right: linear-gradient(45deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-bottom-right: linear-gradient(135deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-top-left: linear-gradient(225deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-bottom-left: linear-gradient(315deg, #f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
$gradient-radial: radial-gradient(#f5d400ff, #141414ff, #006655ff, #00b881ff, #82785eff, #a72525ff, #ff600aff, #f4f4edff);
ROBOTO fonts

.myfonts {
Roboto Black
font-family: roboto, sans-serif;
font-weight: 900;
font-style: normal;


Roboto Black Italic
font-family: roboto, sans-serif;
font-weight: 900;
font-style: italic;

Roboto Bold
font-family: roboto, sans-serif;
font-weight: 700;
font-style: normal;


Roboto Bold Italic
font-family: roboto, sans-serif;
font-weight: 700;
font-style: italic;


Roboto Italic
font-family: roboto, sans-serif;
font-weight: 400;
font-style: italic;


Roboto Light
font-family: roboto, sans-serif;
font-weight: 300;
font-style: normal;


Roboto Light Italic
font-family: roboto, sans-serif;
font-weight: 300;
font-style: italic;


Roboto Medium
font-family: roboto, sans-serif;
font-weight: 500;
font-style: normal;


Roboto Medium Italic
font-family: roboto, sans-serif;
font-weight: 500;
font-style: italic;


Roboto Regular
font-family: roboto, sans-serif;
font-weight: 400;
font-style: normal;

Roboto Thin
font-family: roboto, sans-serif;
font-weight: 200;
font-style: normal;

Roboto Thin Italic
font-family: roboto, sans-serif;
font-weight: 200;
font-style: italic;

Roboto Condensed Italic
font-family: roboto-condensed, sans-serif;
font-weight: 400;
font-style: italic;

Roboto Condensed Regular
font-family: roboto-condensed, sans-serif;
font-weight: 400;
font-style: normal;

Roboto Condensed Bold Italic
font-family: roboto-condensed, sans-serif;
font-weight: 700;
font-style: italic;

Roboto Condensed Bold
font-family: roboto-condensed, sans-serif;
font-weight: 700;
font-style: normal;

Roboto Mono Thin Italic
font-family: roboto-mono, monospace;
font-weight: 200;
font-style: italic;

Roboto Mono Thin
font-family: roboto-mono, monospace;
font-weight: 200;
font-style: normal;

Roboto Mono Light Italic
font-family: roboto-mono, monospace;
font-weight: 300;
font-style: italic;

Roboto Mono Light
font-family: roboto-mono, monospace;
font-weight: 300;
font-style: normal;

Roboto Mono Italic
font-family: roboto-mono, monospace;
font-weight: 400;
font-style: italic;

Roboto Mono Regular
font-family: roboto-mono, monospace;
font-weight: 400;
font-style: normal;

Roboto Mono Medium
font-family: roboto-mono, monospace;
font-weight: 500;
font-style: normal;

Roboto Mono Medium Italic
font-family: roboto-mono, monospace;
font-weight: 500;
font-style: italic;

Roboto Mono Bold Italic
font-family: roboto-mono, monospace;
font-weight: 700;
font-style: italic;

Roboto Mono Bold
font-family: roboto-mono, monospace;
font-weight: 700;
font-style: normal;
}


#nav {
    border-radius: 10px 0px 10px 0px;
    background-color: white;
}
box-shadow: rgb(0 0 0 / 12%) 0px 5px 10px;
transition: box-shadow 200ms ease 0ms;

//onhover
box-shadow: rgb(0 0 0 / 12%) 0px 30px 60px;
    
//HMTL

<div class="container">

 <div id="a" class="box">Div A</div>
<div id="b" class="box">Div B</div>
<div id="c" class="box">Div C</div>
<div id="d" class="box">Div D</div>
<div id="e" class="box">Div E</div>
<div id="f" class="box">Div F</div>

</div>


//CSS
body {
  font-family: arial;
  font-weight: 600;
  color: white;
  font-size: 2em;
}
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10%;
  text-align: center;
  grid-gap: 40px;
}

.box {
   background-color: green;
   padding: 20px;
  
}

#a {


}

#a:hover {
     grid-column: 1 / 4;
     grid-row: 1/6;
}

#a:hover ~ #b {
    background: #ccc;
        grid-column: 4;
}

#a:hover ~ #c {
    background: #ccc;
        grid-column: 4;
}

#a:hover ~ #d {
    background: #ccc;
            grid-column: 4;

}

#a:hover ~ #e {
    background: #ccc;
            grid-column: 4;

}

#a:hover ~ #f {
    background: #ccc;
            grid-column: 4;

}

#b:hover {
     grid-column: 1 / 4;
     grid-row: 1/6;
}

#b:hover ~ #a {
    background: #ccc;
        grid-column: 4;
}

#b:hover ~ #c {
    background: #ccc;
        grid-column: 4;
}

#b:hover ~ #d {
    background: #ccc;
            grid-column: 4;

}

#b:hover ~ #e {
    background: #ccc;
            grid-column: 4;

}

#b:hover ~ #f {
    background: #ccc;
            grid-column: 4;

}
//store colors and fonts
:root {
--clr-name-name: #;
--ff-name:
}

*,
*::before,
*::after {
    box-sizing: border-box;
  }

//application

font-family: var(--ff-name);
/*
Title:     Oxygen Code Editor Theme
Type:      CSS > Compile SCSS Code
Location:  Custom Hooks
Hook name: oxygen_enqueue_ui_scripts
Priority:  10
*/

#oxygen-ui {
    .cm-s-default {
        &.CodeMirror {
            background-color: #263238 !important;
            color: rgba(233, 237, 237, 1) !important;
            font-size:15px !important;
        }
        .CodeMirror-gutters {
            background: #263238 !important;
            color: rgb(83, 127, 126) !important;
            border: none !important;
        }
        .CodeMirror-guttermarker,
        .CodeMirror-guttermarker-subtle,
        .CodeMirror-linenumber {
            color: rgb(83, 127, 126);
        }
        .CodeMirror-cursor {
            border-left: 1px solid #f8f8f0;
        }
        div.CodeMirror-selected,
        &.CodeMirror-focused div.CodeMirror-selected,
        .CodeMirror-line::selection,
        .CodeMirror-line::-moz-selection,
        .CodeMirror-line > span::selection,
        .CodeMirror-line > span::-moz-selection,
        .CodeMirror-line > span > span::selection,
        .CodeMirror-line > span > span::-moz-selection {
            background: rgba(255, 255, 255, 0.15) !important;
        }
        .CodeMirror-activeline-background {
            background: rgba(0, 0, 0, 0.2);
        }
        .cm-keyword {
            color: rgba(199, 146, 234, 1);
        }
        .cm-operator {
            color: rgba(233, 237, 237, 1);
        }
        .cm-variable-2 {
            color: #80cbc4;
        }
        .cm-variable-3,
        .cm-type {
            color: #82b1ff;
        }
        .cm-builtin {
            color: #decb6b;
        }
        .cm-atom {
            color: #f77669;
        }
        .cm-number {
            color: #f77669;
        }
        .cm-def {
            color: rgba(233, 237, 237, 1);
        }
        .cm-string {
            color: #c3e88d;
        }
        .cm-string-2 {
            color: #80cbc4;
        }
        .cm-comment {
            color: #dcedc8;
        }
        .cm-variable {
            color: #82b1ff;
        }
        .cm-tag {
            color: #80cbc4;
        }
        .cm-meta {
            color: #80cbc4;
        }
        .cm-attribute {
            color: #ffcb6b;
        }
        .cm-property {
            color: #80cbae;
        }
        .cm-qualifier {
            color: #decb6b;
        }
        .cm-variable-3,
        .cm-type {
            color: #decb6b;
        }
        .cm-tag {
            color: rgba(255, 83, 112, 1);
        }
        .cm-error {
            color: rgba(255, 255, 255, 1);
            background-color: #ec5f67;
        }
    }
}
<button accesskey="b">Important Button</button>

// Animate scrolling only if users don’t prefer reduced motion
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
  
	// Add some spacing between the target and the top of the viewport
	:target {
		scroll-margin-top: 0.8em;
	}
}
.animated-content {
	animation: 3s linear 1s infinite alternate slidein; 
}

@media screen and (prefers-reduced-motion: reduce) {
	.animated-content {
		animation: fade 0.5s ease-in both;
	}
}
.gentle-flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1ch;
}
<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>
React
Vue 3
Svelte
Angular

modern css frameworks:
------------------------
tailwind 
bootstrap
materialize
material design lite
bulma
skeleton (most minimal)
pure css (min)
iu kit
p {
  animation: translate-down 1s infinite alternate linear;
}
@keyframes margin-down {
  from {
    margin-top: 0;
  }
  to {
    margin-top: 30px;
  }
}
@keyframes margin-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(300px);
  }
}
<div class='parent'>
  <div class='child'></div>
</div>

.parent {
  width: 400px;
  height: 400px;
  background-color: blue;
}
.child {
  width: 50%;
  height: 50%;
  background-color: red;
  animation: left-to-right 1s ease-in forwards infinite alternate;
}
.parent:hover .child {
  /*animation: left-to-right 1s ease-in forwards 3 alternate 3s;*/
  animation-play-state: paused;
}
@keyframes left-to-right {
  0 {
    transform: translateX(0);
    background-color: red;
  }
 33% {
    transform: translateY(100%);
  }
  50% {
     background-color: blue;
  }
  66% {
    transform: translateX(100%) translateY(100%);
  }
  100% {
    transform: translateX(100%);
     background-color: green;
  }
}
table {width:100%; table-layout: fixed;}
table td {word-wrap:break-word;}
border-radius: ArI ArD AbD AbI;
a {
  font-size: 2em;
  transition: transform .3s ease-out;
  display: inline-block;
}
a:hover {
  transform: translate(0, -5px);
}
image.src = 'http://placekitten.com/200/300';
image.width = 250;
image.classList.add('cute');
image.alt = 'Cute Kitten';
/*EX:.container {
    padding: 0 15px;
// 576px window width and more
    @include sm {
        padding: 0 20px;
    }
// 992px window width and more
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    } */

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;


// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
       @content;
   }
}

// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
       @content;
   }
}

// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
       @content;
   }
}

// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
       @content;
   }
}
ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
}
ul {
  max-width: 400px;
  margin: 0 auto;
  list-style-type: none;
  counter-reset: steps;
  margin: 0;
  font-family: sans-serif;
}
ul li {
  padding: 0 0 20px 50px;
  position: relative;
  margin: 0;
}
ul li:after {
  position: absolute;
  top: 0;
  left: 0;
  content: counter(steps);
  counter-increment: steps;
  border: 2px solid #000;
  border-radius: 50%;
  display: inline-block;
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
  background: #fff;
}
ul li:before {
  position: absolute;
  left: 13px;
  top: 0;
  content: "";
  height: 100%;
  width: 0;
  border-left: 2px dashed #000;
}
ul li:last-of-type:before {
  border: none;
}
<!DOCTYPE html>
<html>
<head>
<style>
p::before { 
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>
​
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
​
</body>
</html>
​
Pixels are static values which may work for certain dimensions but will cause problems and hinder design at different dimensions/views(mobile-desktop)

For responsive web design it is a must to follow certain design practices :

1- No Pinch Zoom: Solved by applying viewport correctly.
2- No Horizontal Scrolling: Solved by using relative sizing and positioning and instead of absolute positioning.
3- Font-size Handling: Use em and rems instead of pixels.
4- Layout: Use Media Queries,Flexboxes, Bootstrap etc.
img {
  shape-outside: polygon(0.23% 2px, 17.11% 0.84%, 61.14% 21.01%, 69.91% 20.17%, 86.88% 27.73%, 90.64% 36.09%, 86.53% 50.56%, 80.07% 79.29%, 86.55% 99.48%, 0px 100%);
  shape-margin: 20px;
  float: left;
  display: inline-block;
}
<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"> 
body{
	margin-top: 50px;
	background-color: #0191C8;
}
.comment-main{
	background-color: #74C2E1;
	box-shadow: 1px 2px 6px 2px #005B9A;
}
.comment-main ul{
	list-style: none;
}
.sub-cmt-img{
	width: 55px !important;
    height: 55px !important;
    border-radius: 50%;
} 
.main-cmt-img{
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
}
.border-bottom{
	font-size: 13px;
	border-bottom: 1px solid #d3d3d3;
}
.user-comment{
	background-color: #f3f3f3 !important;
    box-shadow: 0px 5px 8px -4px #c1c1c1;
}
.user-comment-desc, .user-comment span{
	color: #a0a0a0;
}
.user-comment-desc p{
	font-size: 12px;
	display: inline-block;
	float: left;
}
.send-icon i{
	font-size: 20px;
	background: #f3f3f3;
	padding: 6px 5px;
	border-radius: 50%;
	color: #74C2E1;
	height: 35px;
	width: 35px;
}
.user-comment:before{
    content: "";
    height: 0;
    width: 0;
    top: 0;
    left: -10px;
    position: absolute;
    border-style: solid;
    border-width: 13px 0 0 13px;
	border-color: #f3f3f3 transparent transparent transparent; 
}
#leftCol {
    position: fixed;
    width: 150px;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
}
<html lang="en">
	<head>
		<!--using external files-->
		<?php require('import.html') ?>
		
		<title>U Chen Daily | Home</title>
	</head>
	<style>
		@media only screen and (min-width: 893px) {
		.card-img-top{
		width: 100%;
		height: 15vw; 
		object-fit: cover;
		}
		}
		
		.card-body{
		background: #1f52a3;
		}
		
		.card-footer{
		background: #1f52a3;
		}
		
		.h5{
		color: #1f52a3;
		}
		
		.card-text{
		font-size: 12px;
		}
	</style>
	<body class="bg-light">
		<!--using external files-->
		<?php require('header.php'); ?>
		<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>First slide label</h5>
						<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Second slide label</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="https://via.placeholder.com/1500x550" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-sm-block">
						<h5>Third slide label</h5>
						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
					</div>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--4 latest news START-->
		<div class="container-fluid bg-light" style="padding: 40px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-6">
					<h5 style="color: #1f52a3;">Latest News</h5>
				</div>
				
				<div class="col-6 d-flex justify-content-end">
					<a href="" class="btn btn-link font-weight-bold" style="color: #1f52a3;">MORE NEWS <i class="fas fa-angle-double-right" style="font-size: 18px;"></i></a>
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 latest news END-->
		<!--4 nation news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Nation News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Nation" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php	
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 nation news END-->
		<!--4 world news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">World News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="World" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 world news END-->
		<!--4 entertainment news START-->
		<div class="container-fluid bg-light" style="padding: 20px 0 0; margin-bottom: 40px;">
			<div class="row" style="margin: 0 50px;">
				<div class="col-sm">
					<h5 style="color: #1f52a3;">Entertainment News</h5>
				</div>
				<div class="col-sm">
				</div>
				<div class="col-sm">
				</div>
			</div>
			
			<div class="card-deck" style="margin: 10px 50px;">
				<?php
					$dbc = mysqli_connect('localhost', 'root', '');	//connect database
					mysqli_select_db($dbc, 'news');	//select database
					
					$query = 'SELECT * FROM news WHERE news_category="Entertainment" ORDER BY news_datetime DESC LIMIT 4';
					$runQuery = mysqli_query($dbc, $query);
				?>
				<!--news card START-->
				<?php
					if($runQuery){
						foreach($runQuery as $row){
						?>
						<div class="card mb-4">
							<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id'] ?>">
								<img class="card-img-top" 
								src="<?php 
									if(empty($row['news_image'])){
										echo 'https://via.placeholder.com/350x250';
										}else{
										echo $row['news_image'];
									}
								?>" alt="Card image cap">
							</a>
							<div class="card-body">
								<a href="/205CDE/Assignment/news.php?id=<?php echo $row['news_id']; ?>">
									<h5 class="card-title text-uppercase text-light d-md-none d-lg-block">
										<?php 
											if(strlen($row['news_title']) > 50){
												echo substr($row['news_title'], 0, 50).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
									<h5 class="card-title text-uppercase text-light d-none d-md-block d-lg-none">
										<?php 
											if(strlen($row['news_title']) > 106){
												echo substr($row['news_title'], 0, 106).'...';
												}else{
												echo $row['news_title'];
											}
										?>
									</h5>
								</a>
							</div>
							<div class="card-footer border-0">
								<div class="row">
									<div class="col-6 card-text text-light text-uppercase"><i class="fas fa-hashtag"></i>
										<?php echo $row['news_category']; ?>
									</div>
									<div class="col-6 card-text text-light text-right text-uppercase"><i class="far fa-clock"></i>
										<?php echo date('d-M-Y', strtotime($row['news_datetime']));?>
									</div>
								</div>
							</div>
						</div>
						<div class="w-100 d-none d-sm-block d-lg-none"><!-- wrap every 2 on sm--></div>
						<?php
						}
						}else{
						echo "ERROR! No record found!";
					}
					mysqli_close($dbc);
				?>
				<!--news card END-->
			</div>
		</div>
		<!--4 entertainment news END-->
		<!--using external files-->
		<?php require('footer.html'); ?>
	</body>
</html>				
<picture>
<source media='(max-width: 1024px)' srcset='<?php echo get_template_directory_uri()?>/images/demo/work-image-bg--mobile.jpg' class="project__bg--mobile" alt="">
<img src="<?php echo get_template_directory_uri()?>/images/demo/work-image-bg.jpg" class="project__bg--desktop" alt="" />
</picture>
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}
​
div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>
​
<h2>Padding and element width - with box-sizing</h2>
​
<div class="ex1">This div is 300px wide.</div>
<br>
​
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>
​
</body>
</html>
​
input[type="text"]:focus {
  outline: none;
}
.wrapper:after {
    content: '';
    display: block;
    clear: both;
}
@media only screen and (min-width: 768px){
    .img-banner{
        display: block;
        width: 100%;
    }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
<div class="login-wrap">

  <div class="login-html">

    <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>

    <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>

    <div class="login-form">

      <div class="sign-in-htm">

        <div class="group">

          <label for="user" class="label">Username</label>

          <input id="user" type="text" class="input">

        </div>

        <div class="group">

          <label for="pass" class="label">Password</label>

          <input id="pass" type="password" class="input" data-type="password">

        </div>

        <div class="group">

          <input id="check" type="checkbox" class="check" checked>

          <label for="check"><span class="icon"></span> Keep me Signed in</label>

        </div>

        <div class="group">
        
        
        
        
        
        
        <style="css">
        body{
	margin:0;
	color:#6a6f8c;
	background:#c8c8c8;
	font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:670px;
	position:relative;
	background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#1161ee;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}
        </style>
// template.html
<link rel="stylesheet" href="{% static '/bulma-css/bulma-divider.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static '/bulma-css/bulma-switch.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/bulma-css/bulma.min.css' %}" type="text/css"> 
<link rel="stylesheet" href="{% static '/css/main.css' %}" type="text/css"> 


// settings.py

STATIC_URL = '/static/'

STATIC_ROOT = 'avon/static'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

// views.py

def template(request, self):
	return render(request, "template.html")
    
//  urls.py

urlpatterns [] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

    
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}
 .center-me {
  margin: 0 auto;
}
<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>​
<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>
<h1 class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>
body::before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
  z-index: 100;
}
.fieldset {
  position: relative;
  border: 1px solid #ddd;
  padding: 10px;
}

.fieldset h1 {
  position: absolute;
  top: 0;
  font-size: 18px;
  line-height: 1;
  margin: -9px 0 0; /* half of font-size */
  background: #fff;
  padding: 0 3px;
}
/*MC subscribe button styling*/
#mc-embedded-subscribe {
    padding: 10px;
    font-family: Montserrat;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #ffffff;
    background: #5ebb48;
    border: 1px solid #bdd749;
    margin-top: 10px;
}
.category-header {

  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  blur-radius: 0;
  spread-radius: 0;
  text-decoration: none;
  font-family: open-sans, lato;
  font-weight: lighter;
  font-size: 38px;
  text-align: center
  align-contents: center;
  
}
<ol><li><a href="#return">I want to return my purchase! What do I do?</a></li><li><a href="#return-a-gift">I would like to return a gift that was sent to me. How do I do that?</a></li><li><a href="#exchange">Can I exchange my order instead of returning it?</a></li><li><a href="#label-and-misplaced">I printed out my label and misplaced it. How can I retrieve it again?</a></li><li><a href="#does-it-take">How long does it take for me to get a refund?</a></li><li><a href="#international-returns">Do your pre-paid labels cover international returns?</a></li><li><a href="#gift-card-cert-return">I am returning an item purchased with a Gift Certificate or Gift Card, how does that work?</a></li><li><a href="#I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?">I only see the option to return my order through UPS on the website. Am I able to return through USPS instead?</a></li></ol>
 .lower-canvas {
                width: 100% !important;
                height: 100% !important;
                position: relative !important;  
            }
            .upper-canvas {
                width: 100% !important;
                height: 100% !important;
                position: absolute !important;
            }
            .canvas-container {
                width: 100% !important;
                height: auto !important;
                border-radius: 20px;
            }
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
<?php
    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
?>

body { color: red; }
p { text-shadow: 1px 1px 1px #000; }
function print_r(o) {
  return JSON.stringify(o,null,'\t').replace(/\n/g,'<br>').replace(/\t/g,'&nbsp;&nbsp;&nbsp;'); 
}
body {
  font-size: 62.5%  /* 1em = 10px */
}
@media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
.dynamic-shadow {

  position: relative;

  width: rem;

  height: 10rem;

  background: linear-gradient(5deg, #d7ff, #00ffb8);
6
  z-index: 1;
7
}
8
.dynamic-shadow::after {

  content: '';
10
  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  top: 0.5rem;

  filter: blur(0.4rem);

  opacity: 0.7;

  z-index: -1;

}

​
.container {
  display: flex; /* or inline-flex */
}
<style>
.wrapper {
  display: flex;
  flex-direction: column
}

@media only screen and (max-width: 767px) {
  .wrapper1 {
    order: 2
  }
  .wrapper2 {
    order: 1
  }
}
</style>

<body>
  <div class="wrapper">
    <div class="wrapper1">
      <div class="col s12 l6">
        some text
      </div>
    </div>
    <div class="wrapper2">
      <div class="col s12 l6">
        some more text
      </div>
    </div>
  </div>
</body>
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
 add_filter( 'jetpack_sharing_counts', '__return_false', 99 );
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );
                                
 .rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don
                                
::selection {
  background-color: #FFA;
  color: #000;
}
                                
                                @media print {
  a::after{
    content: " (" attr(href) ") ";
  }
}
                                
                                html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}
                                
<style>
@import url('https://fonts.googleapis.com/css?family=Teko&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Teko', sans-serif;
  background: #000;
}

a {
  text-decoration: none;
  color: inherit;
  font-size: 4vmin;
}

p {
  position: relative;
  text-align: center;
  font-size: 8vmin;
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: .8;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 80% 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s linear infinite;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }
  
  100% {
    background-position-x: 500%;
  }
}
</style>

<p>Welcome to my codepen profile:<br><a href="https://codepen.io/cssparadise">codepen.io/cssparadise</a></p>
const button = document.getElementById("superCoolButton");

// 1 - setting the property
// properties are in camel.Case
button.style.backgroundColor = "black"; 
button.style.color = "white";

// 2 - by using keys to set the property 
// keys are in the kebab-case
button.style["background-color"] = "black"; 
button.style["color"] = "white";

// 3 - setting the css Text property will parse it as normal css. 
button.style.cssText = "background-color:black; color:white;";
 .conic-gradient {
  background: conic-gradient(from 90deg, #fff, #000);
}                               
                                
 const arr = ["This", "Little", "Piggy"];
const first = arr.slice(0, 1);
const the_rest = arr.slice(1);console.log(first); // ["This"]
console.log(the_rest); // ["Little", "Piggy"]                               
                                
<style>

 .circle:before {
                    content: ' \25CF';
                    font-size: 50px;
                    color: black;
                }
</style>

<span class="circle"></span>
ol li {
	 list-style-type: none;
     }
     
// OR

li {
	list-style-type: none;
}
.box-one {
	width: 100px;
	margin: 0 auto;
}

.box-two {
	width: 100px;
	margin-left: auto;
    margin-right: auto;
}
.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );
}
.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      blue,
      yellow, 
      green
    );
}
/* Linear gradient pattern */

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
}

/* Radial gradient pattern */

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}
.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
} 
/* if the primary input mechanism system of the device CANNOT hover */
@media (hover: none) { }

/* if the primary input mechanism system of the device can hover */
@media (hover: hover) { }
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
> More steps
body {
	width: 100%;
	margin: 0;
	display: flex;
	min-height: 100vh; /*always have atleast the height of viewport*/
}

.main {
	display: flex;
	flex-direction: column;
}
.main__section {
	flex-grow: 1; /*magical line*/
}
.main__footer {
	margin-top: auto;
}



.block {
    &__element 				{color: red;
	    $self : &;
        #{$self}__element 	{color: green}
    }   
}

/*
	.block__element 			{color: red}
	.block__element__element 	{color: green}

*/
<h2 style="text-align:center">Modal Image Gallery</h2>
<div class="row">
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(1)" alt="Sample image 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(2)" alt="Sample image 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(3)" alt="Sample image 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(4)" alt="Sample image 4">
    </div>
  </div>
</div>
> More steps
star

Sun Mar 17 2024 13:24:39 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Mar 16 2024 23:38:29 GMT+0000 (Coordinated Universal Time) https://github.com/shadcn-ui/taxonomy/blob/main/app/(auth)/login/page.tsx

#react #react.js #javascript #jsx #tailwind #css
star

Thu Mar 14 2024 14:34:54 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Mar 07 2024 04:27:16 GMT+0000 (Coordinated Universal Time)

#dotenv #css
star

Tue Mar 05 2024 15:34:14 GMT+0000 (Coordinated Universal Time) https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/

#css #typography #layout
star

Tue Mar 05 2024 02:15:15 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Mar 04 2024 14:50:01 GMT+0000 (Coordinated Universal Time) https://codesandbox.io/p/sandbox/async-http-jyftfw?file=%2Fstyles.css%3A1%2C1-50%2C2

#css
star

Fri Feb 16 2024 08:20:10 GMT+0000 (Coordinated Universal Time) https://codepen.io/Omurbekovic/pen/dywpRrE

#css
star

Fri Feb 16 2024 08:14:07 GMT+0000 (Coordinated Universal Time) https://codepen.io/Omurbekovic/pen/gOEKEMP

#css
star

Fri Feb 16 2024 08:00:58 GMT+0000 (Coordinated Universal Time) https://codepen.io/Omurbekovic/pen/OJqXeVB

#css
star

Fri Feb 16 2024 02:29:24 GMT+0000 (Coordinated Universal Time) https://webdesign.tutsplus.com/build-an-infinite-blinking-text-animation-with-css-and-a-touch-of-javascript--cms-93490t

#css #javascript
star

Mon Feb 12 2024 06:31:42 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Feb 12 2024 04:50:45 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Feb 07 2024 23:26:35 GMT+0000 (Coordinated Universal Time)

#css #google #font #preload
star

Wed Feb 07 2024 14:57:09 GMT+0000 (Coordinated Universal Time) https://www.thiscodeworks.com/user/dashboard

#html #css
star

Wed Feb 07 2024 00:31:20 GMT+0000 (Coordinated Universal Time)

#css #html #form #checkbox #radio_button
star

Tue Feb 06 2024 10:27:45 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Wed Jan 31 2024 22:54:45 GMT+0000 (Coordinated Universal Time)

#css #full-width #breakout
star

Wed Jan 31 2024 22:53:51 GMT+0000 (Coordinated Universal Time)

#css #height #animate
star

Wed Jan 31 2024 07:14:56 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Mon Jan 22 2024 19:27:21 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Jan 19 2024 18:39:04 GMT+0000 (Coordinated Universal Time) https://www.bing.com/search?q=Bing%20AI&showconv=1&form=M403X3

#html #css #javascript
star

Fri Jan 19 2024 08:10:17 GMT+0000 (Coordinated Universal Time) https://codepen.io/jh3y/pen/LYaWoRB

#css #javascript
star

Thu Jan 18 2024 10:06:32 GMT+0000 (Coordinated Universal Time) https://www.orioninfosolutions.com/poker-game-development.php

#poker #software #php #html #css #design
star

Mon Jan 15 2024 20:46:13 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Jan 15 2024 10:40:01 GMT+0000 (Coordinated Universal Time) https://codepen.io/jh3y/pen/MWxbrEp

#css
star

Thu Jan 11 2024 22:23:46 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css?newreg

#css
star

Thu Jan 11 2024 22:20:24 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css?newreg

#css #rotate #circle
star

Tue Jan 02 2024 14:28:29 GMT+0000 (Coordinated Universal Time) https://piccalil.li/blog/a-more-modern-css-reset/

#css
star

Sat Dec 23 2023 00:05:25 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Dec 21 2023 16:28:02 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Dec 19 2023 11:49:55 GMT+0000 (Coordinated Universal Time) https://share.bito.ai/static/share?aid=370c4051-69fe-4987-84c0-5fe4dbb7cddb

#dotenv #css
star

Sun Dec 17 2023 19:43:23 GMT+0000 (Coordinated Universal Time) https://g.co/bard/share/1647430116d0

#html #css #javascript
star

Sun Dec 17 2023 12:05:06 GMT+0000 (Coordinated Universal Time) https://chat.openai.com/c/9c689a90-e565-43b2-b16e-e4e64203e782

#react.js #javascript #css
star

Tue Dec 12 2023 07:12:43 GMT+0000 (Coordinated Universal Time) https://codepen.io/jh3y/pen/QWYPaax

#css #javascript
star

Mon Dec 11 2023 04:15:34 GMT+0000 (Coordinated Universal Time) https://bskyvision.com/entry/css-스크롤-기능은-작동하지만-스크롤바는-안-보이게-하기

#css
star

Sun Dec 10 2023 10:56:14 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Dec 08 2023 09:20:34 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Dec 05 2023 07:39:43 GMT+0000 (Coordinated Universal Time) https://codepen.io/jh3y/pen/XWOodoP

#css #scroll #animation
star

Sun Nov 26 2023 19:53:31 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Nov 21 2023 08:13:13 GMT+0000 (Coordinated Universal Time) https://www.emailaudience.com/dark-mode-email/

#css #mark-up #email
star

Mon Nov 20 2023 22:44:01 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/neumorphism-and-css/

#css
star

Thu Nov 16 2023 15:30:29 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Nov 12 2023 21:19:22 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Nov 12 2023 21:17:32 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Nov 12 2023 04:11:39 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Nov 07 2023 15:35:51 GMT+0000 (Coordinated Universal Time)

#css #color
star

Tue Nov 07 2023 15:34:38 GMT+0000 (Coordinated Universal Time)

#css #layout
star

Tue Nov 07 2023 07:48:12 GMT+0000 (Coordinated Universal Time)

#css #scss
star

Wed Nov 01 2023 13:23:53 GMT+0000 (Coordinated Universal Time)

#html #css #js
star

Wed Nov 01 2023 12:47:48 GMT+0000 (Coordinated Universal Time)

#html #css #js
star

Thu Oct 26 2023 03:56:08 GMT+0000 (Coordinated Universal Time) https://www.cssscript.com/zoom-image-on-hover/

#html #css #javascript
star

Wed Oct 25 2023 06:34:21 GMT+0000 (Coordinated Universal Time) https://www.bram.us/2023/10/23/css-scroll-detection/

#css #scroll #animation
star

Tue Oct 24 2023 16:59:17 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 23 2023 18:44:17 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 23 2023 18:43:55 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 23 2023 18:37:18 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 23 2023 18:32:39 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 23 2023 18:30:28 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 23 2023 18:11:11 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 23 2023 18:06:44 GMT+0000 (Coordinated Universal Time) https://cleanlightingcoalition.org/transitioning-to-leds-bolsters-8-sdgs/

#css
star

Mon Oct 23 2023 10:22:09 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 23 2023 10:21:48 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 23 2023 10:19:44 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 23 2023 06:23:20 GMT+0000 (Coordinated Universal Time) https://codepen.io/jh3y/pen/abPgrGR

#pop-out #image #scrollers #css #animations
star

Mon Oct 23 2023 06:00:40 GMT+0000 (Coordinated Universal Time) https://codesandbox.io/embed/length-units-mcilvb

#css #length #units
star

Fri Oct 20 2023 05:07:23 GMT+0000 (Coordinated Universal Time) https://play.tailwindcss.com/5xFxuQCFkW

#css #frontend #styling #tailwindcss
star

Wed Oct 18 2023 10:05:41 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/1264187/css-how-do-i-create-a-gap-between-rows-in-a-table

#css
star

Tue Oct 17 2023 08:18:05 GMT+0000 (Coordinated Universal Time)

#css #breakpoints
star

Mon Oct 16 2023 09:29:28 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Sat Oct 14 2023 08:57:40 GMT+0000 (Coordinated Universal Time)

#css #json
star

Sat Oct 14 2023 08:53:57 GMT+0000 (Coordinated Universal Time)

#css #json
star

Sat Oct 14 2023 08:53:14 GMT+0000 (Coordinated Universal Time)

#css #json
star

Sat Oct 14 2023 08:48:30 GMT+0000 (Coordinated Universal Time)

#css #json
star

Fri Oct 13 2023 12:29:55 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Oct 12 2023 15:29:47 GMT+0000 (Coordinated Universal Time) https://play.tailwindcss.com/cSpMlF5BQj

#css #react.js #frontend #styling #tailwindcss
star

Thu Oct 12 2023 15:29:39 GMT+0000 (Coordinated Universal Time) https://play.tailwindcss.com/cSpMlF5BQj

#css #react.js #frontend #styling #tailwindcss
star

Wed Oct 11 2023 13:20:11 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Wed Oct 11 2023 06:40:11 GMT+0000 (Coordinated Universal Time) https://play.tailwindcss.com/x7vMjleR9z

#css #react.js #frontend #styling #tailwindcss
star

Mon Oct 09 2023 16:49:18 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Oct 08 2023 15:39:33 GMT+0000 (Coordinated Universal Time)

#css #react.js #frontend #styling
star

Sat Oct 07 2023 01:11:06 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Oct 05 2023 17:25:45 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#html #css
star

Thu Oct 05 2023 07:23:29 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Oct 04 2023 16:47:59 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Oct 03 2023 15:46:16 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/46249541/change-arrow-colors-in-bootstraps-carousel

#css
star

Mon Oct 02 2023 06:42:49 GMT+0000 (Coordinated Universal Time)

#css #html #jquery
star

Fri Sep 29 2023 07:19:58 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Tue Sep 26 2023 06:26:13 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/40559629/how-to-make-a-horizontal-scrolling-carousel-using-flexbox

#html #css
star

Tue Sep 26 2023 06:05:32 GMT+0000 (Coordinated Universal Time) https://www.cssportal.com/css-style-editor/

#css
star

Sun Sep 24 2023 19:23:37 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Sep 22 2023 06:34:56 GMT+0000 (Coordinated Universal Time)

#css #scss
star

Tue Sep 19 2023 04:32:54 GMT+0000 (Coordinated Universal Time)

#css #html #jquery
star

Wed Sep 13 2023 11:47:46 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Tue Sep 12 2023 19:35:13 GMT+0000 (Coordinated Universal Time)

#html #css #responsive
star

Tue Sep 12 2023 15:34:48 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Sep 07 2023 08:26:51 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Sep 06 2023 16:03:38 GMT+0000 (Coordinated Universal Time) https://chat.openai.com/share/8f1f514b-9bc2-4019-ad1e-a6a5f203a87b

#css #tailwindcss #react.js #frontend #style
star

Wed Sep 06 2023 05:41:11 GMT+0000 (Coordinated Universal Time)

#css #tailwindcss #react.js #frontend #style
star

Fri Sep 01 2023 13:14:20 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Aug 24 2023 11:21:32 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Tue Aug 22 2023 10:21:50 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Aug 17 2023 15:38:23 GMT+0000 (Coordinated Universal Time) https://www.codinguru.online/compiler/html

#html #css #javascript #compiler
star

Thu Aug 17 2023 05:36:57 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 15 2023 13:29:15 GMT+0000 (Coordinated Universal Time) https://fffuel.co/css-selectors/

#css
star

Tue Aug 15 2023 13:28:44 GMT+0000 (Coordinated Universal Time) https://fffuel.co/css-selectors/

#css
star

Tue Aug 15 2023 13:28:40 GMT+0000 (Coordinated Universal Time) https://fffuel.co/css-selectors/

#css
star

Tue Aug 15 2023 13:28:28 GMT+0000 (Coordinated Universal Time) https://fffuel.co/css-selectors/

#css
star

Tue Aug 15 2023 13:28:18 GMT+0000 (Coordinated Universal Time) https://fffuel.co/css-selectors/

#css
star

Fri Aug 11 2023 07:27:15 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #php
star

Tue Aug 08 2023 04:18:33 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Aug 03 2023 14:48:09 GMT+0000 (Coordinated Universal Time) https://chat.openai.com/share/b5a5f8e2-a1f2-465b-950e-1ffa302628f6

#react.js #css #javascript
star

Tue Aug 01 2023 08:44:00 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jul 27 2023 07:24:12 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Sat Jul 22 2023 10:03:24 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Jul 21 2023 19:12:43 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page

#css #html
star

Fri Jul 21 2023 13:45:05 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Fri Jul 21 2023 13:43:19 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jul 20 2023 10:05:14 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jul 19 2023 22:04:41 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jul 19 2023 18:27:19 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jul 18 2023 13:14:58 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Tue Jul 18 2023 11:35:10 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Mon Jul 17 2023 10:29:14 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jul 11 2023 12:58:59 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Mon Jul 10 2023 08:42:35 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Mon Jul 03 2023 11:50:54 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Jun 30 2023 20:02:04 GMT+0000 (Coordinated Universal Time) https://kinsta.com/knowledgebase/hide-page-title-wordpress/

#css
star

Fri Jun 30 2023 13:15:37 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Fri Jun 30 2023 06:55:47 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jun 29 2023 17:14:13 GMT+0000 (Coordinated Universal Time)

#css #squarespace
star

Thu Jun 29 2023 11:49:25 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jun 29 2023 09:01:29 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jun 29 2023 07:20:06 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 28 2023 17:59:45 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 28 2023 08:30:00 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 28 2023 06:41:09 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 28 2023 05:46:47 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 28 2023 05:12:32 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Fri Jun 23 2023 21:08:16 GMT+0000 (Coordinated Universal Time) https://medium.com/p/7ea2f0d8ff7c/edit

#html #css #javascript
star

Thu Jun 22 2023 21:43:50 GMT+0000 (Coordinated Universal Time)

#html5 #css
star

Thu Jun 22 2023 21:33:16 GMT+0000 (Coordinated Universal Time)

#css #html5
star

Thu Jun 22 2023 21:10:29 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #html5
star

Thu Jun 22 2023 21:08:09 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #html5
star

Thu Jun 22 2023 18:33:24 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 21 2023 07:00:02 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Tue Jun 20 2023 05:17:36 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Fri Jun 16 2023 15:50:41 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Jun 16 2023 07:10:41 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Fri Jun 16 2023 05:41:48 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Fri Jun 16 2023 05:18:20 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 14 2023 06:41:44 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 14 2023 01:46:31 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Tue Jun 13 2023 16:05:23 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Jun 10 2023 17:05:12 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jun 08 2023 13:37:38 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jun 08 2023 12:08:17 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jun 08 2023 11:40:20 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jun 08 2023 06:37:12 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jun 08 2023 06:35:37 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 07 2023 07:02:49 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 07 2023 06:45:38 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 07 2023 05:46:37 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 07 2023 05:35:16 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 07 2023 05:26:12 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed Jun 07 2023 05:23:57 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Tue Jun 06 2023 13:24:12 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Mon Jun 05 2023 09:33:33 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Mon Jun 05 2023 09:19:17 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Mon Jun 05 2023 07:47:04 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Sat Jun 03 2023 13:13:29 GMT+0000 (Coordinated Universal Time)

#html #javascript #css
star

Fri Jun 02 2023 05:21:25 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Fri Jun 02 2023 05:17:36 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jun 01 2023 08:49:27 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Thu Jun 01 2023 05:18:53 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed May 31 2023 10:08:15 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Wed May 31 2023 05:18:33 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Tue May 30 2023 06:34:31 GMT+0000 (Coordinated Universal Time)

#css
star

Mon May 29 2023 12:21:02 GMT+0000 (Coordinated Universal Time) https://schooliner.com/snippets/hollow-letters/

#css
star

Mon May 29 2023 10:18:22 GMT+0000 (Coordinated Universal Time) http://animation.kaustubhmenon.com/

#css
star

Mon May 29 2023 10:10:35 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css
star

Mon May 29 2023 10:07:20 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css
star

Mon May 29 2023 10:05:02 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css
star

Mon May 29 2023 10:03:34 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css
star

Mon May 29 2023 09:59:43 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css
star

Mon May 29 2023 09:54:36 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/

#css
star

Fri May 26 2023 09:57:41 GMT+0000 (Coordinated Universal Time)

#css
star

Wed May 24 2023 19:01:55 GMT+0000 (Coordinated Universal Time) https://github.com/LingoBotics/LingoBotics.github.io/404.html

#html #css #404 #error #redirect
star

Wed May 24 2023 12:14:27 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Tue May 23 2023 10:01:35 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Tue May 23 2023 09:50:48 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Tue May 23 2023 09:06:33 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Mon May 22 2023 13:01:18 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Mon May 22 2023 10:31:30 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Mon May 22 2023 09:33:42 GMT+0000 (Coordinated Universal Time)

#react.js #css #javascript
star

Fri May 19 2023 08:37:32 GMT+0000 (Coordinated Universal Time) https://schooliner.com/snippets/floating-labels/

#css
star

Thu May 18 2023 14:29:53 GMT+0000 (Coordinated Universal Time)

#css
star

Thu May 18 2023 10:10:36 GMT+0000 (Coordinated Universal Time)

#css
star

Thu May 18 2023 04:57:44 GMT+0000 (Coordinated Universal Time)

#react.js #css #prompts
star

Thu May 18 2023 03:12:47 GMT+0000 (Coordinated Universal Time)

#css
star

Mon May 15 2023 09:19:53 GMT+0000 (Coordinated Universal Time)

#javascript #html #css #typescript #react.js
star

Sat May 13 2023 13:22:59 GMT+0000 (Coordinated Universal Time) https://dev.to/afif/border-with-gradient-and-radius-387f

#css
star

Thu May 11 2023 12:55:49 GMT+0000 (Coordinated Universal Time)

#css
star

Wed May 10 2023 14:26:23 GMT+0000 (Coordinated Universal Time)

#css
star

Tue May 09 2023 16:48:38 GMT+0000 (Coordinated Universal Time) https://www.toptal.com/front-end/dynamic-css-with-custom-properties

#javascript #css
star

Tue May 09 2023 08:42:35 GMT+0000 (Coordinated Universal Time) https://healzz.blog

#html #css
star

Sun May 07 2023 22:14:41 GMT+0000 (Coordinated Universal Time)

#css
star

Tue May 02 2023 21:27:57 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-background

#css
star

Sun Apr 30 2023 09:54:25 GMT+0000 (Coordinated Universal Time)

#css #javascript
star

Wed Apr 26 2023 08:05:52 GMT+0000 (Coordinated Universal Time)

#css #sass #react.js
star

Wed Apr 26 2023 00:12:44 GMT+0000 (Coordinated Universal Time) https://gradient.style/#type=linear&space=oklab&linear_named_angle=--&linear_angle=360&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22oklch%2892%25+0.05+340%29%22%2C%22auto%22%3A0%2C%22position1%22%3A27%2C%22position2%22%3A27%7D&stops=%7B%22kind%22%3A%22hint%22%2C%22auto%22%3A50%2C%22percentage%22%3A50%7D&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22oklch%2890%25+0.03+300%29%22%2C%22auto%22%3A100%2C%22position1%22%3A100%2C%22position2%22%3A100%7D

#css
star

Tue Apr 25 2023 02:04:11 GMT+0000 (Coordinated Universal Time) https://gradient.style/#type=linear&space=oklab&linear_named_angle=--&linear_angle=326&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22oklch%2870%25+0.20+340%29%22%2C%22auto%22%3A%220%22%2C%22position1%22%3A27%2C%22position2%22%3A27%7D&stops=%7B%22kind%22%3A%22hint%22%2C%22auto%22%3A%2250%22%2C%22percentage%22%3A%2250%22%7D&stops=%7B%22kind%22%3A%22stop%22%2C%22color%22%3A%22oklch%2890%25+0.03+300%29%22%2C%22auto%22%3A%22100%22%2C%22position1%22%3A%22100%22%2C%22position2%22%3A%22100%22%7D

#css
star

Sat Apr 22 2023 06:21:38 GMT+0000 (Coordinated Universal Time) https://github.com/iamshaunjp/complete-sass-tutorial/blob/lesson-9/shinobi/_colors.scss

#css #sass
star

Thu Apr 13 2023 11:03:12 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll

#css
star

Wed Apr 12 2023 14:21:46 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/styling-links-with-real-underlines/

#css #ui #links
star

Tue Apr 11 2023 16:08:35 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Apr 11 2023 11:26:49 GMT+0000 (Coordinated Universal Time) https://www.codeinwp.com/snippets/pure-css-tooltips/

#css
star

Fri Apr 07 2023 22:25:53 GMT+0000 (Coordinated Universal Time)

##php ##wordpress #css #html
star

Thu Apr 06 2023 19:09:58 GMT+0000 (Coordinated Universal Time) https://jsfiddle.net/dokino7/xg0tvab2/3/

#javascript #html #css
star

Thu Apr 06 2023 13:55:43 GMT+0000 (Coordinated Universal Time) https://andy-bell.co.uk/a-modern-css-reset/

#css
star

Wed Apr 05 2023 20:00:50 GMT+0000 (Coordinated Universal Time)

#javascript #css
star

Wed Apr 05 2023 10:06:58 GMT+0000 (Coordinated Universal Time) https://www.browserstack.com/guide/what-are-css-and-media-query-breakpoints

#css #media #breakpoints
star

Tue Apr 04 2023 04:17:28 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/45086899/flexbox-item-wrap-to-a-new-line

#css
star

Tue Apr 04 2023 03:36:06 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/howto/howto_css_image_center.asp

#css
star

Tue Apr 04 2023 03:28:28 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Mar 30 2023 04:48:11 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Mar 28 2023 17:45:46 GMT+0000 (Coordinated Universal Time)

#css #squarespace
star

Mon Mar 27 2023 04:31:09 GMT+0000 (Coordinated Universal Time) https://flaviocopes.com/vscode-prettier-fix-html-mess/

#css
star

Fri Mar 24 2023 12:01:23 GMT+0000 (Coordinated Universal Time) https://www.thegoodlineheight.com

#typography #css #line-height
star

Fri Mar 24 2023 06:34:55 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Mar 24 2023 06:31:47 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Mar 24 2023 06:30:23 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Mar 24 2023 06:25:52 GMT+0000 (Coordinated Universal Time)

#css #html
star

Thu Mar 23 2023 05:35:34 GMT+0000 (Coordinated Universal Time) https://www.qt.io/product/qt6

#html #css #button
star

Fri Mar 17 2023 11:47:09 GMT+0000 (Coordinated Universal Time) https://1stwebdesigner.com/css-basics-visibility-hidden-vs-display-none/

#css #layout
star

Thu Mar 09 2023 03:00:21 GMT+0000 (Coordinated Universal Time) https://create-react-app.dev/docs/adding-css-reset/

#css
star

Wed Mar 08 2023 21:23:45 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Mar 08 2023 21:12:24 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/526035/how-can-i-position-my-div-at-the-bottom-of-its-container

#css
star

Tue Mar 07 2023 21:38:09 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Mar 05 2023 00:13:53 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/dyzKWeK

#scss #css
star

Sun Mar 05 2023 00:05:05 GMT+0000 (Coordinated Universal Time) https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.css

#css
star

Sun Mar 05 2023 00:03:35 GMT+0000 (Coordinated Universal Time) https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.css

#css
star

Sat Mar 04 2023 23:56:44 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/zYpVbgy

#scss #css
star

Sat Mar 04 2023 23:54:23 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/JjMgJbZ

#scss #css
star

Sat Mar 04 2023 23:26:27 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/poKEejO

#scss #css
star

Sat Mar 04 2023 23:23:17 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/XWYqmRM

#css #scss
star

Sat Mar 04 2023 19:06:10 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/yLERopN

#scss #css
star

Sat Mar 04 2023 18:41:45 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/XWBKJOY

#scss #css #framework
star

Sat Mar 04 2023 18:30:57 GMT+0000 (Coordinated Universal Time) https://codepen.io/wander031180/pen/vYaqejR

#css
star

Thu Mar 02 2023 08:43:55 GMT+0000 (Coordinated Universal Time)

#javascript #html #css
star

Wed Mar 01 2023 11:23:04 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Feb 27 2023 01:19:12 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Fri Feb 24 2023 17:46:22 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Feb 19 2023 04:40:47 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 16 2023 11:21:35 GMT+0000 (Coordinated Universal Time) https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/html-css-practical-exercise-15.php

#css
star

Thu Feb 16 2023 10:41:53 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Feb 16 2023 06:32:16 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Feb 15 2023 16:42:47 GMT+0000 (Coordinated Universal Time) https://codepen.io/AllThingsSmitty/pen/MyqmdM

#css
star

Tue Feb 14 2023 08:07:38 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Feb 14 2023 08:01:13 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Feb 13 2023 11:18:48 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Feb 12 2023 16:38:31 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 12 2023 14:38:34 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 11 2023 07:49:24 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr

#css
star

Fri Feb 10 2023 09:28:25 GMT+0000 (Coordinated Universal Time) https://bchampiodev.wpengine.com/

#css
star

Fri Feb 10 2023 04:24:34 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Feb 08 2023 13:37:53 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 07 2023 07:08:41 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 07 2023 06:11:55 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 11:45:24 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 11:43:50 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 11:42:15 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 10:14:35 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 09:54:21 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 08:11:48 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 04 2023 08:07:42 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Feb 03 2023 19:02:31 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 02 2023 15:28:09 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 02 2023 06:53:54 GMT+0000 (Coordinated Universal Time) https://htmldog.com/guides/css/beginner/selectors/

#css
star

Thu Feb 02 2023 06:53:04 GMT+0000 (Coordinated Universal Time) https://htmldog.com/guides/css/beginner/applyingcss/

#css
star

Wed Feb 01 2023 15:26:38 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 01 2023 15:21:14 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 18:01:27 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 17:40:25 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 17:09:20 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 13:25:27 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 12:54:10 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 12:48:54 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 31 2023 11:35:50 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Jan 30 2023 15:40:40 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Jan 30 2023 05:01:55 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Jan 27 2023 18:33:07 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Jan 27 2023 17:10:29 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Jan 26 2023 17:38:30 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Jan 26 2023 16:54:10 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Jan 25 2023 13:51:22 GMT+0000 (Coordinated Universal Time) kekablakoshaz.hu

#css
star

Mon Jan 23 2023 13:33:14 GMT+0000 (Coordinated Universal Time)

#css #javascript
star

Mon Jan 16 2023 12:42:58 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Jan 16 2023 09:32:34 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text

#typography #css #fluid
star

Fri Jan 13 2023 09:03:24 GMT+0000 (Coordinated Universal Time) https://www.matuzo.at/blog/2023/hsl-custom-properties/

#css #variables #hsl #customproperties
star

Thu Jan 12 2023 08:20:37 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jan 11 2023 16:32:31 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Jan 11 2023 13:55:31 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jan 11 2023 10:11:43 GMT+0000 (Coordinated Universal Time) https://pqina.nl/blog/fade-out-overflow-using-css-mask-image/

#css
star

Mon Jan 09 2023 10:34:10 GMT+0000 (Coordinated Universal Time)

#css #html
star

Mon Jan 09 2023 10:15:28 GMT+0000 (Coordinated Universal Time)

#css #html
star

Sun Jan 08 2023 18:46:07 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Jan 07 2023 13:54:47 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Jan 06 2023 02:50:16 GMT+0000 (Coordinated Universal Time) http://browserhacks.com/

#css
star

Fri Dec 30 2022 14:18:42 GMT+0000 (Coordinated Universal Time)

#css #howto find second <p> element in a <div>?
star

Thu Dec 29 2022 22:18:28 GMT+0000 (Coordinated Universal Time)

#always #css
star

Wed Dec 28 2022 15:01:03 GMT+0000 (Coordinated Universal Time) https://www.a11yproject.com/posts/how-to-hide-content/

#css #html
star

Wed Dec 21 2022 22:39:03 GMT+0000 (Coordinated Universal Time) https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-making-a-website-responsive/modules/wdcp-22-learn-responsive-design-b73c8b37-9b6f-4f4a-aa5c-d0299ca2fdcc/lessons/sizing-elements/exercises/percentages-padding-margin

#css
star

Wed Dec 21 2022 22:35:11 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Dec 20 2022 13:36:57 GMT+0000 (Coordinated Universal Time)

#css #popup
star

Mon Dec 19 2022 04:37:43 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/perfect-full-page-background-image/

#css
star

Thu Dec 15 2022 12:21:09 GMT+0000 (Coordinated Universal Time) https://codi.link/PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCgk8aGVhZD4NCgkJPHRpdGxlPlBhZ2UgVGl0bGU8L3RpdGxlPg0KCTwvaGVhZD4NCgk8Ym9keT4NCg0KICAgIDxhcnRpY2xlIGNsYXNzPSJjYXJkIj4NCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQtYm9keSI+DQogICAgICAgQEFudG9uaW8gUm9ibGVzDQogICAgICA8L2Rpdj4NCiAgICA8L2FydGljbGU+DQoJPC9ib2R5Pg0KPC9odG1sPg==%7COnJvb3Qgew0KICAtLWJvcmRlci1jb2xvcjogbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCB0b21hdG8gMCUsIGdvbGQgMTAwJSk7DQogIC0tY2FyZC1jb2xvcjogIzIyMjsNCn0NCi5jYXJkIHsNCiAgYmFja2dyb3VuZDogdmFyKC0tYm9yZGVyLWNvbG9yKTsNCiAgYXNwZWN0LXJhdGlvOiAxMC8xNjsNCiAgd2lkdGg6IDIwMHB4Ow0KICBwYWRkaW5nOiA1cHg7DQogIGJvcmRlci1yYWRpdXM6IDE2cHg7DQogIHBvc2l0aW9uOiByZWxhdGl2ZTsNCn0NCg0KLmNhcmQtYm9keSB7DQogIGNvbG9yOiB3aGVhdDsNCiAgYmFja2dyb3VuZDogdmFyKC0tY2FyZC1jb2xvcik7DQogIGRpc3BsYXk6IGZsZXg7DQogIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KICB3aWR0aDogMTAwJTsNCiAgaGVpZ2h0OiAxMDAlOw0KICBib3JkZXItcmFkaXVzOiAxNnB4Ow0KfQ0KDQoNCg0KDQo=%7C

#html #css
star

Thu Dec 15 2022 12:17:27 GMT+0000 (Coordinated Universal Time) https://codi.link/PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCgk8aGVhZD4NCgkJPHRpdGxlPlBhZ2UgVGl0bGU8L3RpdGxlPg0KCTwvaGVhZD4NCgk8Ym9keT4NCg0KICAgIDxhcnRpY2xlIGNsYXNzPSJjYXJkIj4NCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQtYm9keSI+DQogICAgICAgQEFudG9uaW8gUm9ibGVzDQogICAgICA8L2Rpdj4NCiAgICA8L2FydGljbGU+DQoJPC9ib2R5Pg0KPC9odG1sPg

#html #css
star

Wed Dec 14 2022 09:19:33 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Dec 13 2022 05:57:11 GMT+0000 (Coordinated Universal Time) https://www.w3docs.com/snippets/css/how-to-create-a-fixed-navbar-with-css.html

#css
star

Mon Dec 12 2022 16:55:58 GMT+0000 (Coordinated Universal Time)

##php ##wordpress #css #html
star

Mon Dec 12 2022 05:53:39 GMT+0000 (Coordinated Universal Time)

#css #js
star

Sun Dec 11 2022 00:23:39 GMT+0000 (Coordinated Universal Time) https://github.com/anishaaa1/remnote-css

#css
star

Fri Dec 09 2022 12:43:14 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Dec 08 2022 12:05:43 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

#typography #css #fluid
star

Tue Dec 06 2022 13:18:32 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Dec 06 2022 13:16:47 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Dec 06 2022 03:55:13 GMT+0000 (Coordinated Universal Time) https://codepen.io/delvignefred/pen/ZEKyjeo

#css
star

Tue Dec 06 2022 03:51:25 GMT+0000 (Coordinated Universal Time) https://codepen.io/genarocolusso/pen/ozvamp

#css
star

Tue Dec 06 2022 03:50:30 GMT+0000 (Coordinated Universal Time) https://codepen.io/ivanodintsov/pen/WRjXdy

#css
star

Tue Dec 06 2022 03:49:12 GMT+0000 (Coordinated Universal Time) https://codepen.io/Roro-decode/pen/VWpLRm

#music #player #css
star

Sat Dec 03 2022 11:27:24 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Dec 03 2022 11:25:24 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Dec 03 2022 11:24:47 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Dec 03 2022 11:17:37 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Dec 03 2022 08:12:35 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Dec 03 2022 08:06:03 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Dec 01 2022 06:53:36 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Nov 28 2022 11:18:25 GMT+0000 (Coordinated Universal Time)

#css #js
star

Sun Nov 27 2022 03:51:21 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/patterns-for-practical-css-custom-properties-use/

#css
star

Sun Nov 27 2022 02:58:04 GMT+0000 (Coordinated Universal Time) https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/

#css
star

Sun Nov 27 2022 02:12:07 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Nov 27 2022 00:03:58 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/ease-out-in-ease-in-out/

#css
star

Fri Nov 25 2022 23:56:41 GMT+0000 (Coordinated Universal Time) https://codepen.io/bramus/pen/bGKoZNq

#css
star

Fri Nov 25 2022 23:52:19 GMT+0000 (Coordinated Universal Time) https://www.bram.us/

#css
star

Fri Nov 25 2022 22:32:00 GMT+0000 (Coordinated Universal Time) https://developer.salesforce.com/forums/?id

#css
star

Thu Nov 24 2022 15:21:53 GMT+0000 (Coordinated Universal Time) https://www.folkstalk.com/tech/css-when-click-select-another-class-with-code-examples/

#css
star

Thu Nov 24 2022 10:49:53 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/54256415/css-target-just-class-name-starts-with-and-ends-with-string

#css
star

Thu Nov 24 2022 10:44:09 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/13352080/match-all-elements-having-class-name-starting-with-a-specific-string

#css
star

Thu Nov 24 2022 10:33:23 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/the-css-has-selector/

#css
star

Tue Nov 22 2022 11:39:18 GMT+0000 (Coordinated Universal Time) https://www.hivelance.com/blockchain-forking

#b2b #c++ #css #react.js #javascript #mongoshell #mysql #crypto #nft #blockchainfork development
star

Tue Nov 22 2022 11:38:10 GMT+0000 (Coordinated Universal Time) https://www.hivelance.com/nft-token-development

#b2b #c++ #css #react.js #javascript #mongoshell #mysql #crypto #nft #nfttoken
star

Tue Nov 22 2022 11:36:30 GMT+0000 (Coordinated Universal Time) https://www.hivelance.com/erc20-token-development

#erc20 #b2b #c++ #css #react.js #javascript #mongoshell #mysql #crypto
star

Tue Nov 22 2022 06:34:06 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Nov 21 2022 17:14:53 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/almanac/properties/t/text-decoration-skip-ink/

#css
star

Sat Nov 19 2022 17:24:10 GMT+0000 (Coordinated Universal Time) https://ferie.medium.com/detect-a-touch-device-with-only-css-9f8e30fa1134

#css
star

Sat Nov 19 2022 09:45:24 GMT+0000 (Coordinated Universal Time) https://www.section.io/engineering-education/watch-for-system-dark-mode-using-js-css/

#js #html #css
star

Thu Nov 17 2022 08:54:51 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/29331831/css-styling-a-link-based-on-its-href

#typography #css #fluid
star

Sat Nov 12 2022 22:25:35 GMT+0000 (Coordinated Universal Time) https://www.benmarshall.me/styling-file-inputs/

#css
star

Sat Nov 12 2022 22:25:04 GMT+0000 (Coordinated Universal Time) https://www.benmarshall.me/css-aspect-ratio/

#css
star

Sat Nov 12 2022 22:21:47 GMT+0000 (Coordinated Universal Time) https://www.benmarshall.me/responsive-iframes/

#css
star

Fri Nov 11 2022 14:06:27 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Nov 11 2022 14:05:43 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Nov 11 2022 14:05:04 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Nov 10 2022 09:23:08 GMT+0000 (Coordinated Universal Time) https://github.com/notion-enhancer/desktop/issues/32

#css
star

Wed Nov 09 2022 13:13:40 GMT+0000 (Coordinated Universal Time) https://gomakethings.com/how-to-animate-scrolling-to-anchor-links-with-one-line-of-css/

#css #html
star

Sun Nov 06 2022 07:24:14 GMT+0000 (Coordinated Universal Time) https://github.com/murufi/murufi/new/main?filename

#undefined #html #css
star

Tue Nov 01 2022 13:45:30 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Nov 01 2022 13:33:25 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Oct 29 2022 18:24:07 GMT+0000 (Coordinated Universal Time)

#css #html
star

Thu Oct 27 2022 14:08:01 GMT+0000 (Coordinated Universal Time) https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/

#typography #css #fluid
star

Thu Oct 27 2022 13:28:14 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/simplified-fluid-typography/

#typography #css #fluid
star

Tue Oct 25 2022 21:21:42 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/16841323/making-gradient-background-fill-page-with-css

#css
star

Mon Oct 24 2022 07:49:39 GMT+0000 (Coordinated Universal Time) https://jetthoughtsdev.wpengine.com/wp-content/uploads/custom-css-js/586.css

#css
star

Mon Oct 24 2022 07:10:15 GMT+0000 (Coordinated Universal Time)

#css #js
star

Thu Oct 20 2022 14:06:51 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/almanac/properties/b/break-inside/

#list #typography #css
star

Thu Oct 20 2022 08:19:48 GMT+0000 (Coordinated Universal Time) https://www.bram.us/2022/10/13/upgrading-colors-to-hd-on-the-web/?utm_source

#css #color
star

Thu Oct 20 2022 08:19:25 GMT+0000 (Coordinated Universal Time) https://www.bram.us/2022/10/13/upgrading-colors-to-hd-on-the-web/?utm_source

#css #color
star

Thu Oct 20 2022 08:16:06 GMT+0000 (Coordinated Universal Time) https://www.bram.us/2022/10/13/upgrading-colors-to-hd-on-the-web/?utm_source

#css #color #fallback
star

Tue Oct 18 2022 19:14:59 GMT+0000 (Coordinated Universal Time) https://github.com/soflyy/oxygen-bugs-and-features/issues/1151

#css
star

Sat Oct 15 2022 17:52:37 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:52:15 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:51:44 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:51:08 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:49:13 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:48:46 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:46:56 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:45:23 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:40:40 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:39:46 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:38:01 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:37:32 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:25:59 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:23:28 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:23:03 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:21:34 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:21:14 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:20:40 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:19:55 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:18:54 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:16:33 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:14:15 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:13:54 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:12:48 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:11:30 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:07:03 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:06:33 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:06:00 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:03:30 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:03:07 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 17:00:56 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 15 2022 16:59:52 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Oct 13 2022 07:45:59 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal

#css #html
star

Tue Oct 11 2022 23:42:04 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 10 2022 17:04:01 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Oct 09 2022 19:23:54 GMT+0000 (Coordinated Universal Time) https://youtube.com/clip/UgkxFkAoCvfD3YhOIjiG88-9hRv8a-kBoTS_

#css
star

Sat Oct 08 2022 09:39:07 GMT+0000 (Coordinated Universal Time)

#css #js
star

Fri Oct 07 2022 12:43:11 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Oct 06 2022 12:33:18 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/using-css-transitions-auto-dimensions/

#css #javascript
star

Sun Oct 02 2022 13:14:08 GMT+0000 (Coordinated Universal Time) https://cssgradient.io/blog/css-gradient-text/

#css
star

Sat Oct 01 2022 06:55:19 GMT+0000 (Coordinated Universal Time) https://htmlcssfreebies.com/bootstrap-5-author-box-section-component/

#css
star

Sat Oct 01 2022 06:54:40 GMT+0000 (Coordinated Universal Time) https://htmlcssfreebies.com/bootstrap-5-hero-section-component/

#css
star

Sat Oct 01 2022 06:54:22 GMT+0000 (Coordinated Universal Time) https://htmlcssfreebies.com/bootstrap-5-masonry-grid-layout-component/

#css
star

Sat Oct 01 2022 06:53:51 GMT+0000 (Coordinated Universal Time) https://htmlcssfreebies.com/bootstrap-5-about-me-section-component/

#css
star

Sat Oct 01 2022 06:53:26 GMT+0000 (Coordinated Universal Time) https://htmlcssfreebies.com/bootstrap-5-blog-section-template-component/

#css
star

Sat Oct 01 2022 06:52:34 GMT+0000 (Coordinated Universal Time) https://htmlcssfreebies.com/bootstrap-5-achievements-section-component/

#css
star

Sat Oct 01 2022 06:13:07 GMT+0000 (Coordinated Universal Time) https://kulturbanause.de/blog/einfuhrung-in-das-flexbox-modell-von-css/

#css
star

Fri Sep 30 2022 13:03:31 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Sep 27 2022 22:06:52 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Sep 25 2022 22:41:56 GMT+0000 (Coordinated Universal Time) https://www.udemy.com/course/modern-html-css-from-the-beginning/learn/lecture/13285482#overview

#css
star

Sun Sep 25 2022 08:24:42 GMT+0000 (Coordinated Universal Time) https://sebhastian.com/html-hover-text/

#html #css
star

Fri Sep 23 2022 10:41:31 GMT+0000 (Coordinated Universal Time) https://teamtreehouse.com/community/mathfloor-mathrandom-max-min-1-min-explanation

#css
star

Tue Sep 20 2022 06:54:47 GMT+0000 (Coordinated Universal Time) https://www.joshwcomeau.com/css/custom-css-reset/

#css
star

Fri Sep 16 2022 19:28:55 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Sep 13 2022 07:45:20 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/learn-the-basics-the-css-position-property/

#css #position #sticky
star

Tue Sep 13 2022 07:40:31 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/learn-the-basics-the-css-position-property/

#css #position #fixed
star

Tue Sep 13 2022 07:34:52 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/learn-the-basics-the-css-position-property/

#css #position #absolute
star

Tue Sep 13 2022 07:26:04 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/learn-the-basics-the-css-position-property/

#css #position #relative
star

Tue Sep 13 2022 07:15:31 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/learn-the-basics-the-css-position-property/

#css #position #static
star

Tue Sep 13 2022 06:20:34 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Sep 10 2022 05:15:12 GMT+0000 (Coordinated Universal Time)

#css #js
star

Fri Sep 09 2022 13:52:35 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Sep 09 2022 13:52:34 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Sep 08 2022 19:37:08 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#css
star

Thu Sep 08 2022 12:45:35 GMT+0000 (Coordinated Universal Time)

#javascript #jquery #html #css
star

Thu Sep 08 2022 12:44:06 GMT+0000 (Coordinated Universal Time)

#javascript #jquery #html #css
star

Wed Sep 07 2022 09:11:31 GMT+0000 (Coordinated Universal Time)

#html #css #php #mys #js #json
star

Wed Aug 31 2022 11:34:02 GMT+0000 (Coordinated Universal Time)

#htm #css
star

Wed Aug 31 2022 11:31:38 GMT+0000 (Coordinated Universal Time)

#htm #css #elementor
star

Wed Aug 31 2022 11:27:05 GMT+0000 (Coordinated Universal Time)

#htm #css #elementor
star

Wed Aug 31 2022 11:22:47 GMT+0000 (Coordinated Universal Time)

#htm #css
star

Wed Aug 31 2022 11:09:01 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 30 2022 13:55:06 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 30 2022 13:50:34 GMT+0000 (Coordinated Universal Time) https://interactive-examples.mdn.mozilla.net/pages/css/flex-basis.html

#css
star

Mon Aug 29 2022 21:04:27 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 21:01:06 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 21:00:43 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 21:00:02 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 19:48:20 GMT+0000 (Coordinated Universal Time)

#delphi #css
star

Mon Aug 29 2022 19:40:15 GMT+0000 (Coordinated Universal Time)

#javascript #css
star

Mon Aug 29 2022 19:17:44 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 19:04:22 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Aug 29 2022 17:23:51 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Mon Aug 29 2022 17:19:09 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 17:14:18 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 17:13:27 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 17:07:21 GMT+0000 (Coordinated Universal Time)

#css #html
star

Mon Aug 29 2022 17:06:19 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 17:03:31 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 16:29:23 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 16:15:48 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Aug 29 2022 15:57:19 GMT+0000 (Coordinated Universal Time)

#css #html
star

Mon Aug 29 2022 15:43:36 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 29 2022 15:33:25 GMT+0000 (Coordinated Universal Time) https://codepad.co/snippet/circular-progress-bar-using-css-56272

#html #css
star

Mon Aug 29 2022 15:32:08 GMT+0000 (Coordinated Universal Time) https://codepad.co/snippet/login-page-2-56216

#css #html
star

Sun Aug 28 2022 22:53:52 GMT+0000 (Coordinated Universal Time)

#html #javascript #css
star

Sun Aug 28 2022 22:48:37 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Aug 28 2022 22:47:16 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Aug 28 2022 12:28:38 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Aug 28 2022 12:03:37 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Aug 27 2022 08:23:33 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/css/css3_mediaqueries.asp

#css #media-queries
star

Fri Aug 26 2022 05:19:19 GMT+0000 (Coordinated Universal Time)

#css #js
star

Thu Aug 25 2022 11:04:40 GMT+0000 (Coordinated Universal Time) https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker

#css #php #wordpress
star

Tue Aug 23 2022 14:45:24 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 23 2022 06:28:58 GMT+0000 (Coordinated Universal Time)

#css #squarespace
star

Mon Aug 22 2022 13:52:09 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 22 2022 13:51:16 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 22 2022 13:30:27 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 22 2022 13:28:31 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 22 2022 13:14:57 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 22 2022 08:57:18 GMT+0000 (Coordinated Universal Time) https://bootstrap-menu.com/detail-basic-hover.html

#bootstrap #css #javascript #hover #dropdown
star

Sun Aug 21 2022 22:57:12 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Aug 21 2022 22:51:39 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Aug 21 2022 22:50:46 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Aug 21 2022 04:38:22 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Aug 21 2022 02:32:48 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Aug 19 2022 18:45:25 GMT+0000 (Coordinated Universal Time)

#javascript #html #css
star

Fri Aug 19 2022 18:41:32 GMT+0000 (Coordinated Universal Time)

#javascript #html #css
star

Fri Aug 19 2022 18:02:28 GMT+0000 (Coordinated Universal Time)

#css #js
star

Fri Aug 19 2022 18:02:25 GMT+0000 (Coordinated Universal Time)

#css #js
star

Thu Aug 18 2022 20:20:09 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Aug 18 2022 20:19:02 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Aug 18 2022 13:09:06 GMT+0000 (Coordinated Universal Time) https://blog.mayank.co/the-case-for-using-sass-in-2022

#css
star

Tue Aug 16 2022 06:09:09 GMT+0000 (Coordinated Universal Time)

#css #js
star

Tue Aug 16 2022 01:27:06 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Aug 15 2022 09:36:42 GMT+0000 (Coordinated Universal Time)

#css #js
star

Fri Aug 12 2022 15:05:03 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#css
star

Thu Aug 11 2022 23:23:55 GMT+0000 (Coordinated Universal Time)

#css #flexbox
star

Mon Aug 08 2022 16:52:05 GMT+0000 (Coordinated Universal Time) https://codepen.io/sam-league/pen/eYMKMyE

#css
star

Fri Aug 05 2022 18:36:18 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/box-sizing/#aa-universal-box-sizing-with-inheritance

#css
star

Thu Aug 04 2022 14:54:20 GMT+0000 (Coordinated Universal Time) https://petradesign.art/wp-admin/theme-editor.php

#css
star

Thu Aug 04 2022 07:23:41 GMT+0000 (Coordinated Universal Time)

#css #js
star

Thu Aug 04 2022 07:21:52 GMT+0000 (Coordinated Universal Time)

#css #html
star

Thu Aug 04 2022 05:08:50 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover

#javascript #react #css #button #hover #dropdown
star

Wed Aug 03 2022 12:38:31 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Aug 03 2022 10:57:13 GMT+0000 (Coordinated Universal Time) https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox

#css
star

Wed Aug 03 2022 05:53:24 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Aug 03 2022 05:17:13 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 02 2022 13:27:40 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically

#css
star

Mon Aug 01 2022 12:09:50 GMT+0000 (Coordinated Universal Time)

#javascript #css #html
star

Sat Jul 30 2022 11:30:00 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/40690284/remove-increment-and-decrement-icon-from-input-field

#css #html
star

Fri Jul 29 2022 08:45:03 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements

#css
star

Tue Jul 26 2022 14:42:55 GMT+0000 (Coordinated Universal Time) https://bootstrap-cheatsheet.themeselection.com/index.html#card-grid

#html #css #javascript
star

Mon Jul 25 2022 17:39:57 GMT+0000 (Coordinated Universal Time)

#css #javascript
star

Mon Jul 25 2022 17:38:01 GMT+0000 (Coordinated Universal Time)

#css #javascript
star

Mon Jul 25 2022 10:47:10 GMT+0000 (Coordinated Universal Time)

#javascript #css
star

Sun Jul 24 2022 16:03:17 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Jul 24 2022 12:45:46 GMT+0000 (Coordinated Universal Time)

#css #buttons
star

Sat Jul 23 2022 17:40:25 GMT+0000 (Coordinated Universal Time) https://css-irl.info/breaking-out-of-a-central-wrapper/?utm_campaign

#css
star

Fri Jul 22 2022 17:39:56 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Jul 22 2022 13:11:25 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/cssref/tryit.asp?filename

#css #html
star

Fri Jul 22 2022 13:07:36 GMT+0000 (Coordinated Universal Time)

#css #html
star

Thu Jul 21 2022 17:43:38 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jul 21 2022 12:01:27 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/css/tryit.asp?filename=trycss3_box-shadow7

#css #shadow
star

Sun Jul 17 2022 13:47:23 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/49447242/force-flex-item-on-a-single-line

#css
star

Fri Jul 15 2022 01:07:45 GMT+0000 (Coordinated Universal Time)

#css #html
star

Tue Jul 12 2022 13:57:19 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/8384751/css-text-gradient

#css #scss #sass #html
star

Sun Jul 10 2022 12:02:09 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

#css
star

Thu Jul 07 2022 17:24:48 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jul 07 2022 01:35:19 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio

#css
star

Tue Jul 05 2022 07:02:02 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/7638677/how-can-i-remove-the-gloss-on-a-select-element-in-safari-on-mac#comment64900877_7638745

#css
star

Sat Jul 02 2022 12:24:12 GMT+0000 (Coordinated Universal Time) https://ui.glass/generator/

#css
star

Thu Jun 30 2022 08:37:55 GMT+0000 (Coordinated Universal Time) https://egghead.io/lessons/css-apply-aspect-ratio-sizing-to-images-with-css-object-fit

#css
star

Thu Jun 30 2022 04:23:58 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jun 30 2022 04:23:36 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jun 30 2022 04:23:15 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jun 30 2022 04:20:44 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 29 2022 23:07:31 GMT+0000 (Coordinated Universal Time) https://meyerweb.com/eric/tools/css/reset/

#css
star

Wed Jun 29 2022 15:36:56 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 29 2022 15:36:26 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 29 2022 15:35:42 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 29 2022 15:34:39 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 29 2022 15:34:38 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jun 28 2022 14:36:25 GMT+0000 (Coordinated Universal Time) https://piccalil.li/blog/a-modern-css-reset/

#css
star

Tue Jun 28 2022 04:23:26 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jun 28 2022 04:15:56 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jun 28 2022 04:07:21 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jun 28 2022 04:04:14 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jun 28 2022 03:59:46 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jun 28 2022 03:54:30 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jun 28 2022 03:51:33 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Jun 27 2022 09:35:21 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/56845290/html-css-how-have-a-checkbox-appear-when-another-checkbox-is-checked

#css
star

Mon Jun 27 2022 01:23:22 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Jun 27 2022 01:08:13 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Jun 27 2022 00:55:37 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Jun 24 2022 14:41:35 GMT+0000 (Coordinated Universal Time)

#bash #ionic #angular #capacitor #qrcode #reader #css
star

Fri Jun 24 2022 04:29:02 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jun 21 2022 13:23:35 GMT+0000 (Coordinated Universal Time) https://piccalil.li/blog/a-modern-css-reset/

#css #reset
star

Sun Jun 19 2022 05:34:49 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera

#css
star

Thu Jun 16 2022 19:12:32 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/20354920/how-to-change-the-style-of-a-radio-button-with-javascript-when-clicked

#css
star

Wed Jun 15 2022 14:07:32 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 15 2022 09:25:43 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 15 2022 05:16:00 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 15 2022 05:13:46 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Jun 13 2022 02:20:39 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Jun 09 2022 12:22:48 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text

#css
star

Thu Jun 09 2022 12:21:14 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

#css
star

Thu Jun 02 2022 11:02:10 GMT+0000 (Coordinated Universal Time) http://127.0.0.1:3000/film.html

#html #css
star

Wed Jun 01 2022 14:11:06 GMT+0000 (Coordinated Universal Time)

#javascript #sass #gulp #css
star

Wed May 25 2022 08:11:40 GMT+0000 (Coordinated Universal Time) https://oxygenbuilder.com/tutorial/how-to-setup-the-events-calendar-with-oxygen/

#css
star

Sat May 21 2022 13:28:48 GMT+0000 (Coordinated Universal Time)

#css
star

Sat May 21 2022 03:28:39 GMT+0000 (Coordinated Universal Time)

#css
star

Fri May 20 2022 13:25:55 GMT+0000 (Coordinated Universal Time)

#php #css #divi
star

Thu May 19 2022 07:37:25 GMT+0000 (Coordinated Universal Time) https://piccalil.li/blog/a-modern-css-reset/

#css
star

Mon May 16 2022 07:09:00 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/50498391/remove-selected-checkout-fields-with-woocommerce-depending-on-shipping-method

#php #javascript #css
star

Mon May 16 2022 05:41:31 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#css
star

Mon May 16 2022 00:14:05 GMT+0000 (Coordinated Universal Time) https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-more-text-styles

#css #html
star

Mon May 16 2022 00:09:11 GMT+0000 (Coordinated Universal Time) https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-more-text-styles

#css #html
star

Sat May 14 2022 10:28:43 GMT+0000 (Coordinated Universal Time)

#generator #css #js
star

Sat May 14 2022 10:28:41 GMT+0000 (Coordinated Universal Time)

#generator #css #js
star

Fri May 13 2022 09:03:15 GMT+0000 (Coordinated Universal Time)

#javascript #sass #gulp #css
star

Fri May 13 2022 05:21:37 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4

#css
star

Thu May 12 2022 11:40:32 GMT+0000 (Coordinated Universal Time) https://meyerweb.com/eric/tools/css/reset/

#css
star

Tue May 10 2022 10:12:54 GMT+0000 (Coordinated Universal Time)

#js #html #css
star

Tue May 10 2022 08:10:29 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/css-triangle/

#css
star

Sun May 08 2022 15:44:43 GMT+0000 (Coordinated Universal Time) https://codepen.io/pokecoder/pen/gOGpKqM

#css
star

Tue May 03 2022 00:41:20 GMT+0000 (Coordinated Universal Time) https://larsmidgaard.no/css-trick-fluid-text-size-with-max-font-size/

#css
star

Wed Apr 27 2022 09:18:21 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Apr 26 2022 17:04:31 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Apr 26 2022 16:46:17 GMT+0000 (Coordinated Universal Time) https://www.htmhell.dev/26-tasty-buttons/

#css
star

Tue Apr 26 2022 16:40:12 GMT+0000 (Coordinated Universal Time) https://benfrain.com/preventing-body-scroll-for-modals-in-ios/

#css
star

Mon Apr 25 2022 08:52:48 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 24 2022 10:26:48 GMT+0000 (Coordinated Universal Time) https://codepen.io/amirgnm/pen/WNdLNmb

#html #css #javascript
star

Sun Apr 24 2022 09:35:09 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Apr 23 2022 17:30:12 GMT+0000 (Coordinated Universal Time) https://leerob.io/blog/how-stripe-designs-beautiful-websites

#css
star

Thu Apr 21 2022 05:50:14 GMT+0000 (Coordinated Universal Time) https://smolcss.dev/

#css
star

Thu Apr 21 2022 05:49:24 GMT+0000 (Coordinated Universal Time) https://smolcss.dev/

#css
star

Thu Apr 21 2022 05:07:42 GMT+0000 (Coordinated Universal Time) https://elad.medium.com/trimming-multi-lines-in-css-5ae59d5e6d84

#css #line-clamp
star

Thu Apr 21 2022 04:10:19 GMT+0000 (Coordinated Universal Time) https://codepen.io/alexmwalker/pen/ZMVNbo

#css #svg
star

Sun Apr 17 2022 03:41:17 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:40:43 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:40:07 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:39:27 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:37:32 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:37:03 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:36:15 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:35:46 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:35:18 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:35:00 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:34:27 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:33:36 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:32:46 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:32:15 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:31:53 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:31:15 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:30:17 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:28:04 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:27:13 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:26:37 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:22:24 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:21:58 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:21:24 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:20:56 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:20:26 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:19:34 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:18:38 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:16:53 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:15:41 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 17 2022 03:05:38 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Apr 11 2022 23:48:53 GMT+0000 (Coordinated Universal Time)

#js #scroll #css #setup
star

Mon Apr 11 2022 19:54:55 GMT+0000 (Coordinated Universal Time) https://umeshmk.github.io/react-schematic/

#css
star

Sun Apr 10 2022 05:14:30 GMT+0000 (Coordinated Universal Time) https://piccalil.li/blog/a-modern-css-reset/

#css
star

Fri Apr 08 2022 16:10:51 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Apr 07 2022 12:35:00 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Apr 07 2022 10:48:58 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/fixing-tables-long-strings/

#css
star

Wed Apr 06 2022 20:13:32 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Apr 06 2022 12:53:45 GMT+0000 (Coordinated Universal Time) from @realsantosm

#css
star

Sat Apr 02 2022 04:57:16 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Fri Apr 01 2022 08:39:35 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Mar 30 2022 09:39:31 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/48406628/bootstrap-align-button-to-the-bottom-of-card

#css
star

Mon Mar 28 2022 17:12:15 GMT+0000 (Coordinated Universal Time) https://every-layout.dev/layouts/cluster/

#css
star

Sat Mar 26 2022 07:57:48 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/copyediting-with-semantic-html/

#css
star

Wed Mar 23 2022 17:04:28 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Mar 20 2022 18:08:42 GMT+0000 (Coordinated Universal Time) https://agency-website-c0d1e7.webflow.io/

#css #form
star

Sun Mar 20 2022 17:56:00 GMT+0000 (Coordinated Universal Time) https://agency-website-c0d1e7.webflow.io/

#css #js #html #youtube-embed #lazy-load #youtube-lazy-load
star

Sun Mar 20 2022 17:48:21 GMT+0000 (Coordinated Universal Time) https://agency-website-c0d1e7.webflow.io/

#css #animation #text-underline
star

Sun Mar 20 2022 17:39:14 GMT+0000 (Coordinated Universal Time) https://agency-website-c0d1e7.webflow.io/

#js #css #html #smooth-scrolling #luxy.js
star

Sun Mar 20 2022 17:07:22 GMT+0000 (Coordinated Universal Time) https://agency-website-c0d1e7.webflow.io/

#css #js #header #navbar #scroll-animation
star

Sun Mar 20 2022 17:01:15 GMT+0000 (Coordinated Universal Time) https://agency-website-c0d1e7.webflow.io/

#css #scrollbar
star

Sun Mar 20 2022 16:55:31 GMT+0000 (Coordinated Universal Time) https://agency-website-c0d1e7.webflow.io/

#css #text-styles
star

Wed Mar 16 2022 20:19:27 GMT+0000 (Coordinated Universal Time) https://www.bauer.uh.edu/parks/bezier.htm

#funcion #css #transition #cubic-bezier
star

Wed Mar 16 2022 19:39:14 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/es/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

#css #sass #grid #minmax()
star

Tue Mar 15 2022 00:59:53 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/es/docs/Web/CSS/minmax()

#css #sass #grid #minmax()
star

Mon Mar 14 2022 11:27:08 GMT+0000 (Coordinated Universal Time) https://shoelace.style/

#javascript #shoelace #css #front #human/data/nlp #nlp #nltk #graycloud
star

Mon Mar 14 2022 03:47:18 GMT+0000 (Coordinated Universal Time) https://www.scaler.com/topics/css/css-specificity/

#css
star

Fri Mar 11 2022 13:28:46 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/newsletter/272-jams/

#css #sass
star

Tue Mar 08 2022 12:40:57 GMT+0000 (Coordinated Universal Time)

#php #css
star

Tue Mar 08 2022 11:17:56 GMT+0000 (Coordinated Universal Time) https://www.webtng.com/code-snippets-used-when-creating-an-oxygen-site/

#css #php
star

Mon Mar 07 2022 16:56:00 GMT+0000 (Coordinated Universal Time) https://devhints.io/css-tricks

#css
star

Mon Mar 07 2022 16:55:58 GMT+0000 (Coordinated Universal Time) https://devhints.io/css-tricks

#css
star

Mon Mar 07 2022 16:55:54 GMT+0000 (Coordinated Universal Time) https://devhints.io/css-tricks

#css
star

Mon Mar 07 2022 12:17:16 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Mar 03 2022 00:01:01 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Mar 01 2022 01:06:42 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas

#css #grid #areas #tempaltes
star

Mon Feb 28 2022 13:26:26 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Feb 28 2022 11:20:02 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/13550541/media-min-width-max-width

#css
star

Mon Feb 28 2022 08:43:28 GMT+0000 (Coordinated Universal Time) https://oxygen4fun.supadezign.com/tutorials/block-reveal-animations/

#css
star

Sat Feb 26 2022 04:37:33 GMT+0000 (Coordinated Universal Time) web.Roblox.com

#java #actionscript3 #dart #css #bash
star

Fri Feb 25 2022 18:57:58 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Feb 25 2022 18:26:13 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Feb 23 2022 17:58:25 GMT+0000 (Coordinated Universal Time) https://gomakethings.com/responsive-iframes-with-the-css-aspect-ratio-property/

#html #css #iframe #responsive
star

Wed Feb 23 2022 17:11:51 GMT+0000 (Coordinated Universal Time) https://gomakethings.com/smooth-scrolling-links-with-only-css/

#html #css #scroll #animation
star

Wed Feb 23 2022 12:36:00 GMT+0000 (Coordinated Universal Time) https://www.aleksandrhovhannisyan.com/blog/respecting-font-size-preferences-rems-62-5-percent/

#css
star

Wed Feb 23 2022 05:51:17 GMT+0000 (Coordinated Universal Time) https://www.codecademy.com/learn/learn-css/modules/learn-css-display-positioning/cheatsheet

#css
star

Wed Feb 23 2022 05:48:25 GMT+0000 (Coordinated Universal Time) https://www.codecademy.com/article/glossary-css

#css
star

Tue Feb 22 2022 19:30:31 GMT+0000 (Coordinated Universal Time)

#css #divi #wordpress
star

Mon Feb 21 2022 18:03:09 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 21 2022 11:03:50 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 22:43:22 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 22:42:50 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 22:12:10 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 22:09:19 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 17:33:03 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 20 2022 14:01:05 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Feb 19 2022 06:52:43 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 17 2022 23:00:01 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/a-handy-little-system-for-animated-entrances-in-css/?utm_source

#css
star

Thu Feb 17 2022 22:16:10 GMT+0000 (Coordinated Universal Time)

#html #css #email #tables
star

Thu Feb 17 2022 17:00:02 GMT+0000 (Coordinated Universal Time) https://digitalambition.co/watch/game-changing-global-color-management-in-oxygen/

#css
star

Thu Feb 17 2022 15:24:21 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 17 2022 08:12:35 GMT+0000 (Coordinated Universal Time) https://digitalambition.co/watch/add-these-max-width-utility-classes-to-every-oxygen-site/

#css #oxygenbuilder
star

Thu Feb 17 2022 07:46:57 GMT+0000 (Coordinated Universal Time) https://digitalambition.co/watch/perfectly-space-all-elements-in-oxygen-with-one-css-class-aka-owl-spacing/

#css #oxygenbuilder
star

Wed Feb 16 2022 22:35:26 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:33:57 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:32:25 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:30:52 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:29:30 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:27:45 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 22:25:37 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 16 2022 20:19:26 GMT+0000 (Coordinated Universal Time) https://codeconvey.com/horizontal-news-ticker-css/

#css
star

Mon Feb 14 2022 01:17:26 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #svg
star

Sun Feb 13 2022 12:44:35 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 13 2022 06:24:54 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 06:22:00 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 06:15:24 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 06:14:11 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 06:12:56 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 05:32:32 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 05:30:49 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 05:29:10 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 04:21:11 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 04:19:33 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Sun Feb 13 2022 01:49:16 GMT+0000 (Coordinated Universal Time) https://es.stackoverflow.com/questions/514611/c%c3%b3mo-difuminar-el-borde-de-clip-path-en-un-enmascaramiento

#html #css #javascript #svg
star

Sat Feb 12 2022 17:51:23 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 12 2022 09:33:36 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Feb 12 2022 05:45:29 GMT+0000 (Coordinated Universal Time) https://snipit.io

#css
star

Fri Feb 11 2022 14:45:10 GMT+0000 (Coordinated Universal Time)

#javascript #html #css
star

Fri Feb 11 2022 11:39:57 GMT+0000 (Coordinated Universal Time)

#htm #css
star

Fri Feb 11 2022 03:59:17 GMT+0000 (Coordinated Universal Time) https://www.youtube.com/watch?v=H_8XBIElZlg

#css #elementor
star

Thu Feb 10 2022 15:04:43 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Feb 09 2022 07:44:26 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 09 2022 07:28:05 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 09 2022 07:11:45 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/codeeditor/jquery-welcome.html

#jquery #css #html #javascript #java #python
star

Wed Feb 09 2022 06:28:43 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-important.html

#css
star

Wed Feb 09 2022 06:27:48 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-flexbox.html

#css
star

Wed Feb 09 2022 06:27:24 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-mediaqueries.html

#css
star

Wed Feb 09 2022 06:26:47 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-animatios.html

#css
star

Wed Feb 09 2022 06:26:02 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-3dtransforms.html

#css
star

Wed Feb 09 2022 06:25:24 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-2dtransforms.html

#css
star

Wed Feb 09 2022 06:24:47 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-shadows.html

#css
star

Wed Feb 09 2022 06:24:12 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-gradients.html

#css
star

Wed Feb 09 2022 06:23:56 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-pseudo-elements.html

#css
star

Wed Feb 09 2022 06:23:18 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-pseudo-classes.html

#css
star

Wed Feb 09 2022 06:22:55 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-forms.html

#css
star

Wed Feb 09 2022 06:22:17 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-cursors.html

#css
star

Wed Feb 09 2022 06:21:20 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-dropdowns.html

#css
star

Wed Feb 09 2022 06:20:38 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-navigation.html

#css
star

Wed Feb 09 2022 05:39:52 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-image-gallery.html

#css
star

Wed Feb 09 2022 05:39:14 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-opacity.html

#css
star

Wed Feb 09 2022 05:38:33 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-inline-block.html

#css
star

Wed Feb 09 2022 05:37:47 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-float.html

#css
star

Wed Feb 09 2022 05:37:09 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-align.html

#css
star

Wed Feb 09 2022 05:36:28 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-overflow.html

#css
star

Wed Feb 09 2022 05:35:44 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-position.html

#css
star

Wed Feb 09 2022 05:30:49 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-tables.html

#css
star

Wed Feb 09 2022 05:30:16 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-display.html

#css
star

Wed Feb 09 2022 05:28:52 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-links.html

#css
star

Wed Feb 09 2022 05:28:19 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-icons.html

#css
star

Wed Feb 09 2022 05:27:40 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-heightandwidth.html

#css
star

Wed Feb 09 2022 05:27:20 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-boxmodel.html

#css
star

Wed Feb 09 2022 05:26:22 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-outline.html

#css
star

Wed Feb 09 2022 05:25:52 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-text.html

#css
star

Wed Feb 09 2022 05:24:37 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-margin.html

#css
star

Wed Feb 09 2022 05:23:55 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-padding.html

#css
star

Tue Feb 08 2022 20:40:49 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 08 2022 19:26:22 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

#css
star

Tue Feb 08 2022 18:52:22 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Tue Feb 08 2022 15:05:36 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/2436749/how-to-add-multiple-font-files-for-the-same-font

#javascript #css
star

Tue Feb 08 2022 13:43:15 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 08 2022 13:37:53 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 08 2022 12:31:43 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/java/java-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:31:09 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/php/php-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:30:12 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/bootstrap/bootstrap.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:28:58 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/jquery/jquery-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:28:18 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/js/javascript-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:26:42 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 12:25:56 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-tutorial.html

#html #css #javascript #java #python #jquery
star

Tue Feb 08 2022 11:14:00 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/table.html

#html #css #javascript #java #python #sass
star

Tue Feb 08 2022 11:10:45 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/sub.html

#html #css #java #javascript #php #sass #bootstrap
star

Tue Feb 08 2022 11:06:55 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/style.html

#html #css #javascript #php #python #sass
star

Tue Feb 08 2022 10:42:06 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/input.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 10:41:10 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/img.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 10:40:18 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/iframe.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 10:39:04 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/i.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 10:34:37 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Tue Feb 08 2022 09:25:14 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/html.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:24:36 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/hr.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:24:00 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/h.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:23:29 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/header.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:22:55 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/head.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:22:25 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/form.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:21:56 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/footer.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:21:28 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/figure.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:20:56 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/fieldset.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:20:18 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/embed.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:19:43 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/em.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:19:13 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/dt.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:18:32 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/dl.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:17:49 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/div.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:17:19 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/dialog.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:16:43 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/dfn.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:16:10 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/details.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:15:40 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/del.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:15:05 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/dd.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:14:36 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/data.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:14:05 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/colgroup.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:13:24 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/code.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:12:48 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/cite.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:12:21 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/caption.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:11:32 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/canvas.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:11:01 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/button.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:10:21 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/br.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:09:47 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/body.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:09:22 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/blockquote.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:08:49 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/bdo.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:08:18 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/bdi.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:07:39 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/base.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:06:58 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/b.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:06:10 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/audio.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 09:05:24 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/aside.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 08:57:04 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/ref/article.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 08:56:01 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/html/html-tutorial.html/ref/area.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 08:40:32 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/area.html

#html #css #javasc #java #php #sass
star

Tue Feb 08 2022 08:39:50 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/abbr.html

#html #css #java #javascript #php #sass
star

Tue Feb 08 2022 08:38:47 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/address.html

#html #css #java #javasc #php #sass
star

Tue Feb 08 2022 07:58:53 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/abbr.html

#html #css #java #javasc #php #sass
star

Tue Feb 08 2022 07:56:50 GMT+0000 (Coordinated Universal Time) http://www.elementtutorials.com//ref/abbr.html

#html #css #java #javasc #php #sass
star

Tue Feb 08 2022 07:49:56 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/

#elementtutorials #ht #css #java #javascript #php #sass #jquery #python
star

Mon Feb 07 2022 19:26:16 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 07 2022 19:25:17 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 07 2022 12:20:51 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 07 2022 10:02:22 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Feb 07 2022 10:01:06 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Mon Feb 07 2022 09:56:53 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Mon Feb 07 2022 08:21:55 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/how-to-center-an-image-in-css/

#css
star

Mon Feb 07 2022 06:46:38 GMT+0000 (Coordinated Universal Time) https://elementtutorials.com/css/css-tutorial.html

#css #csstutorial
star

Fri Feb 04 2022 08:59:02 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Feb 04 2022 06:28:51 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Feb 04 2022 05:43:37 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Fri Feb 04 2022 05:41:44 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Thu Feb 03 2022 15:07:28 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Thu Feb 03 2022 13:04:19 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:58:44 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:58:05 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:57:21 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:55:38 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:54:47 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Feb 03 2022 12:50:14 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 02 2022 17:42:13 GMT+0000 (Coordinated Universal Time) https://medium.com/@jekamabu/la-verdadera-diferencia-entre-comillas-simples-y-dobles-comillas-en-javascript-508a4a572190

#html #css #javascript
star

Wed Feb 02 2022 09:51:57 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Feb 02 2022 09:25:21 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 01 2022 19:41:45 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 01 2022 19:26:05 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 01 2022 19:22:10 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 01 2022 19:01:17 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Feb 01 2022 17:33:50 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Tue Feb 01 2022 13:09:23 GMT+0000 (Coordinated Universal Time) My Own

#html #css
star

Wed Jan 26 2022 21:14:23 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jan 25 2022 12:38:12 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jan 25 2022 10:55:06 GMT+0000 (Coordinated Universal Time)

#javascript #css
star

Fri Jan 21 2022 17:48:36 GMT+0000 (Coordinated Universal Time) https://www.kodetop.com/efecto-smooth-scroll-con-css-o-javascript/#:~:text=Se%20le%20denomina%20Smooth%20Scroll,evitando%20cambios%20bruscos%20entre%20secciones.

#html #css #javas
star

Fri Jan 21 2022 14:59:29 GMT+0000 (Coordinated Universal Time) https://tutorialzine.com/2016/01/learn-sass-in-15-minutes

#css #sass
star

Fri Jan 21 2022 14:57:49 GMT+0000 (Coordinated Universal Time) https://tutorialzine.com/2016/01/learn-sass-in-15-minutes

#css #sass
star

Fri Jan 21 2022 14:56:09 GMT+0000 (Coordinated Universal Time) https://tutorialzine.com/2016/01/learn-sass-in-15-minutes

#css #sass
star

Fri Jan 21 2022 14:54:18 GMT+0000 (Coordinated Universal Time) https://tutorialzine.com/2016/01/learn-sass-in-15-minutes

#css #sass
star

Thu Jan 20 2022 22:54:34 GMT+0000 (Coordinated Universal Time) https://dev.to/juanbelieni/how-to-create-horizontal-scroll-with-mouse-wheel-using-javascript-4cm5

#html #css #javas
star

Thu Jan 20 2022 18:50:17 GMT+0000 (Coordinated Universal Time) https://moderncss.dev/totally-custom-list-styles/

#css #ul
star

Wed Jan 19 2022 03:15:45 GMT+0000 (Coordinated Universal Time) https://www.thetinygirl.com/wp-admin/post.php?post

#css
star

Wed Jan 19 2022 03:13:56 GMT+0000 (Coordinated Universal Time) https://www.thetinygirl.com/wp-admin/post.php?post

#css
star

Tue Jan 18 2022 14:58:18 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#css
star

Tue Jan 18 2022 14:58:14 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#css
star

Tue Jan 18 2022 13:15:35 GMT+0000 (Coordinated Universal Time)

#javascript #css
star

Tue Jan 11 2022 21:41:16 GMT+0000 (Coordinated Universal Time)

#wordpress #css
star

Tue Jan 11 2022 17:29:30 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-92

#css
star

Tue Jan 11 2022 16:19:23 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-90

#css
star

Tue Jan 11 2022 13:09:03 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Jan 11 2022 09:11:22 GMT+0000 (Coordinated Universal Time) javascripttutorial.net/javascript-dom/javascript-siblings/

#css #html
star

Tue Jan 11 2022 09:08:37 GMT+0000 (Coordinated Universal Time) https://www.youtube.com/watch?v=rw3eZ6XodN8

#css #html
star

Tue Jan 11 2022 08:32:22 GMT+0000 (Coordinated Universal Time) file:///C:/Users/Win10/Desktop/card.html

#html #css #javascript
star

Mon Jan 10 2022 07:16:36 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sat Jan 08 2022 04:07:02 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Jan 08 2022 04:06:33 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Jan 08 2022 04:05:17 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Jan 08 2022 04:03:48 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Jan 08 2022 03:53:11 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Jan 08 2022 03:49:33 GMT+0000 (Coordinated Universal Time)

#javascript #css
star

Sat Jan 08 2022 03:46:23 GMT+0000 (Coordinated Universal Time)

#javascript #css
star

Sat Jan 08 2022 01:45:06 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/css-box-shadow/

#css #shadow
star

Sat Jan 08 2022 01:44:47 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/css-box-shadow/

#css #.shadow
star

Thu Jan 06 2022 19:48:34 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jan 06 2022 19:40:25 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jan 06 2022 18:41:58 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jan 06 2022 18:41:26 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jan 06 2022 18:39:01 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jan 06 2022 17:45:09 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jan 06 2022 12:48:03 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jan 05 2022 09:32:59 GMT+0000 (Coordinated Universal Time) https://dev.to/bharathvajganesan/focus-vs-focus-within-vs-focus-visible-14e4

#css #a11y
star

Tue Jan 04 2022 00:39:10 GMT+0000 (Coordinated Universal Time) https://www.webmobilefirst.com/en/devices/apple-iphone-13-pro-2021/

#css #iphone
star

Sat Jan 01 2022 04:13:20 GMT+0000 (Coordinated Universal Time) https://catalin.red/css3-ordered-list-styles/

#css
star

Sat Jan 01 2022 04:13:06 GMT+0000 (Coordinated Universal Time) https://catalin.red/css3-ordered-list-styles/

#css
star

Sat Jan 01 2022 04:12:55 GMT+0000 (Coordinated Universal Time) https://catalin.red/css3-ordered-list-styles/

#css #list
star

Thu Dec 30 2021 16:46:28 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Dec 28 2021 16:29:59 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Dec 21 2021 21:42:35 GMT+0000 (Coordinated Universal Time)

#normalize #css #reset
star

Fri Dec 10 2021 13:04:31 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #borders
star

Fri Dec 10 2021 12:58:08 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #animations
star

Fri Dec 10 2021 12:53:39 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #typography
star

Fri Dec 10 2021 12:51:07 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #typography
star

Fri Dec 10 2021 12:43:57 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #shadows
star

Fri Dec 10 2021 12:35:51 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props
star

Fri Dec 10 2021 12:28:54 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props
star

Fri Dec 10 2021 12:28:41 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css
star

Fri Dec 10 2021 12:18:18 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props
star

Fri Dec 10 2021 12:18:06 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props
star

Fri Dec 10 2021 12:11:33 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css
star

Fri Dec 10 2021 12:06:30 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css
star

Fri Dec 10 2021 12:05:52 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css
star

Fri Dec 10 2021 12:05:45 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css
star

Fri Dec 10 2021 12:05:38 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css
star

Sun Dec 05 2021 21:45:44 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Dec 03 2021 21:47:36 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/a-clever-sticky-footer-technique/

#css
star

Wed Dec 01 2021 17:18:33 GMT+0000 (Coordinated Universal Time)

#css #html #hover
star

Wed Dec 01 2021 16:20:54 GMT+0000 (Coordinated Universal Time) https://www.youtube.com/watch?v=myEsMzsJEFg&t=62s

#css #html #z-index
star

Wed Dec 01 2021 00:27:48 GMT+0000 (Coordinated Universal Time) https://formstyler.com/

#css #contact #cf7 #wordpress
star

Mon Nov 29 2021 23:44:23 GMT+0000 (Coordinated Universal Time) https://es.stackoverflow.com/questions/499239/transici%c3%b3n-css-de-background-image/500273#500273

#css #html #z-index
star

Sun Nov 28 2021 20:37:18 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/almanac/properties/z/z-index/

#css #html #z-index
star

Sat Nov 27 2021 19:17:11 GMT+0000 (Coordinated Universal Time) https://es.stackoverflow.com/questions/499690/captura-de-evento-del-mouse-javascript

#javascript #eventos #mouse #css #html
star

Thu Nov 25 2021 20:32:00 GMT+0000 (Coordinated Universal Time)

#elementor #css
star

Thu Nov 25 2021 06:56:02 GMT+0000 (Coordinated Universal Time)

#typescript #react #css
star

Wed Nov 24 2021 15:56:10 GMT+0000 (Coordinated Universal Time) https://www.madeup.studio/home

#css #html
star

Tue Nov 23 2021 17:44:45 GMT+0000 (Coordinated Universal Time) https://www.madeup.studio/work/belward-tree-films

#css #html
star

Tue Nov 23 2021 17:01:18 GMT+0000 (Coordinated Universal Time) https://www.joshwcomeau.com/css/custom-css-reset/

#css
star

Sun Nov 21 2021 11:37:33 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Nov 17 2021 17:57:20 GMT+0000 (Coordinated Universal Time) https://desarrollowp.com/blog/tutoriales/mover-los-scripts-al-footer-wordpress/

#javascript #css #wordpress
star

Wed Nov 17 2021 10:42:22 GMT+0000 (Coordinated Universal Time) https://piccalil.li/blog/a-modern-css-reset/

#html #css
star

Tue Nov 16 2021 19:54:24 GMT+0000 (Coordinated Universal Time) https://tpec05.blogspot.com/2019/05/contador-de-clicks-operaciones-y.html

#javascript #css #html
star

Tue Nov 16 2021 08:30:41 GMT+0000 (Coordinated Universal Time) https://piccalil.li/blog/a-modern-css-reset/

#css #reset #styling
star

Fri Nov 12 2021 13:51:39 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/37754621/how-to-vertically-center-text-in-a-span/37754674

#css
star

Fri Nov 12 2021 11:31:34 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border

#css
star

Wed Nov 10 2021 20:59:21 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Nov 10 2021 14:57:18 GMT+0000 (Coordinated Universal Time) https://atelierhephaistos.fr/wp-admin/post.php?post

#css
star

Wed Nov 03 2021 13:43:52 GMT+0000 (Coordinated Universal Time) https://html-css-js.com/css/generator/box-shadow/

#css
star

Sun Oct 31 2021 10:53:55 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Oct 31 2021 10:47:08 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Oct 31 2021 10:21:52 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Oct 31 2021 10:19:02 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Oct 31 2021 10:10:39 GMT+0000 (Coordinated Universal Time) https://github.com/patriciamolnar/tutorials/blob/master/Input%20Focus%20Animation/style.css

#css
star

Fri Oct 29 2021 03:10:45 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Oct 28 2021 10:21:11 GMT+0000 (Coordinated Universal Time)

#html #liquid #css
star

Wed Oct 27 2021 14:02:47 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/39574070/making-an-s-shape-with-flexbox

#css
star

Tue Oct 26 2021 12:05:34 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Oct 25 2021 21:56:08 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 25 2021 17:02:23 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 25 2021 04:49:03 GMT+0000 (Coordinated Universal Time) https://www.wordstamped.com/1022/full-width-oxygen-block/

#wordpress #oxygen #css #gutenberg
star

Fri Oct 22 2021 21:56:03 GMT+0000 (Coordinated Universal Time)

#html #css
star

Fri Oct 22 2021 12:01:12 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/css-responsive-image-tutorial/

#css
star

Wed Oct 20 2021 20:46:52 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Oct 20 2021 12:16:25 GMT+0000 (Coordinated Universal Time) https://workflowy.com/

#css
star

Tue Oct 19 2021 05:17:43 GMT+0000 (Coordinated Universal Time) https://cybmeta.com/font-face-como-utilizar-cualquier-fuentetipografia-en-tu-web

#css
star

Mon Oct 18 2021 22:06:46 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Oct 18 2021 15:55:54 GMT+0000 (Coordinated Universal Time) https://stackblitz.com/edit/angular-6iwq2i?file=src%2Fapp%2Fapp.component.css

#html #css
star

Sun Oct 10 2021 14:19:48 GMT+0000 (Coordinated Universal Time) https://www.codecademy.com/practice/tracks/learn-css/modules/learn-css-display-positioning

#css #display #box
star

Sun Oct 10 2021 14:16:53 GMT+0000 (Coordinated Universal Time) https://www.codecademy.com/practice/tracks/learn-css/modules/learn-css-display-positioning

#css #display #box
star

Thu Oct 07 2021 08:16:43 GMT+0000 (Coordinated Universal Time) https://www.smashingmagazine.com/2021/10/guide-debugging-css/

#css
star

Tue Oct 05 2021 08:34:22 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/54087544/how-to-have-a-css-outline-on-a-button-tag-only-by-tab-but-not-on-click

#css
star

Sun Oct 03 2021 12:19:38 GMT+0000 (Coordinated Universal Time)

#css #javascript
star

Thu Sep 23 2021 14:46:24 GMT+0000 (Coordinated Universal Time)

#css #design #center
star

Wed Sep 22 2021 17:26:32 GMT+0000 (Coordinated Universal Time) https://cssbuttons.app/buttons/42

#css
star

Tue Sep 21 2021 13:09:06 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Sep 21 2021 12:05:53 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Sep 21 2021 01:48:17 GMT+0000 (Coordinated Universal Time)

#css #html
star

Mon Sep 20 2021 18:47:24 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/howto/howto_js_accordion.asp

#accordion #css
star

Sun Sep 19 2021 20:49:23 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Sep 18 2021 20:46:52 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Sep 17 2021 00:25:01 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Sep 16 2021 13:27:51 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Sep 15 2021 08:18:46 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Sep 15 2021 04:44:12 GMT+0000 (Coordinated Universal Time) https://www.30secondsofcode.org/css/p/1

#css
star

Mon Sep 13 2021 21:18:42 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property

#css
star

Fri Sep 10 2021 12:29:54 GMT+0000 (Coordinated Universal Time)

#css #design #center
star

Wed Sep 08 2021 14:47:57 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/keyboard-only-focus-styles/

#css #a11y #form #button
star

Sun Sep 05 2021 21:35:24 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Sep 04 2021 14:16:04 GMT+0000 (Coordinated Universal Time) https://www.thiscodeworks.com/5f97b1080c7c1200148d470b

#css #design #colors
star

Sat Sep 04 2021 14:13:57 GMT+0000 (Coordinated Universal Time)

#css #design #colors
star

Fri Sep 03 2021 16:01:56 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Sep 03 2021 15:58:52 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Sep 03 2021 10:54:39 GMT+0000 (Coordinated Universal Time)

#css #design #div #center #imp
star

Fri Sep 03 2021 10:53:06 GMT+0000 (Coordinated Universal Time)

#css #design #forms
star

Fri Sep 03 2021 10:50:58 GMT+0000 (Coordinated Universal Time)

#css #footer #design
star

Fri Sep 03 2021 08:50:14 GMT+0000 (Coordinated Universal Time) https://www.matuzo.at/blog/element-diversity/

#css
star

Wed Aug 18 2021 14:56:44 GMT+0000 (Coordinated Universal Time) https://sjorswijsman.medium.com/3-easy-css-tricks-for-responsive-websites-i-use-in-every-project-68ec334a1522

#css
star

Tue Aug 17 2021 20:52:10 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 17 2021 20:51:45 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 17 2021 20:51:26 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 17 2021 20:51:07 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 17 2021 20:50:43 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 17 2021 10:24:49 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Aug 13 2021 20:23:21 GMT+0000 (Coordinated Universal Time)

#css #sitefarm
star

Fri Aug 13 2021 20:18:43 GMT+0000 (Coordinated Universal Time)

#css #sitefarm
star

Fri Aug 13 2021 19:58:32 GMT+0000 (Coordinated Universal Time)

#css #sitefarm
star

Fri Aug 13 2021 02:31:10 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Aug 12 2021 19:01:51 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Aug 12 2021 10:54:38 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Aug 10 2021 13:11:48 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Aug 01 2021 20:51:19 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jul 29 2021 05:35:28 GMT+0000 (Coordinated Universal Time) https://yashaswipatil.hashnode.dev/10-most-used-css-frameworks-by-web-developers

#css #framework
star

Tue Jul 27 2021 01:35:38 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/23695090/spin-or-rotate-an-image-on-hover

#css #hover #rotation
star

Fri Jul 23 2021 16:55:46 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #udacity #course
star

Fri Jul 23 2021 14:06:04 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jul 22 2021 23:17:06 GMT+0000 (Coordinated Universal Time) https://flexbox.malven.co/

#css #display #container
star

Thu Jul 22 2021 23:16:22 GMT+0000 (Coordinated Universal Time) https://grid.malven.co/

#css #grid
star

Wed Jul 21 2021 11:38:00 GMT+0000 (Coordinated Universal Time) https://codepen.io/team/css-tricks/pen/EKEYob

#flexbox #css
star

Sun Jul 18 2021 10:21:16 GMT+0000 (Coordinated Universal Time) https://piccalil.li/blog/a-modern-css-reset/

#css
star

Tue Jul 06 2021 14:49:45 GMT+0000 (Coordinated Universal Time)

#css #accessibility #html
star

Fri Jul 02 2021 20:00:39 GMT+0000 (Coordinated Universal Time)

#css #styledcomponents #react.js #reactnative
star

Wed Jun 30 2021 08:18:15 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 30 2021 08:16:21 GMT+0000 (Coordinated Universal Time)

#css #hover
star

Tue Jun 29 2021 11:33:36 GMT+0000 (Coordinated Universal Time)

#react.js #css
star

Fri Jun 25 2021 08:21:56 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/almanac/properties/a/animation/

#css
star

Thu Jun 24 2021 17:16:27 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #udacity #course
star

Wed Jun 23 2021 12:18:05 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/howto/howto_css_center_button.asp

#css
star

Wed Jun 23 2021 06:04:02 GMT+0000 (Coordinated Universal Time)

#css #styling
star

Wed Jun 23 2021 06:02:59 GMT+0000 (Coordinated Universal Time)

#css #styling
star

Wed Jun 23 2021 06:00:38 GMT+0000 (Coordinated Universal Time)

#css #styling #transform #transition
star

Wed Jun 23 2021 04:31:38 GMT+0000 (Coordinated Universal Time)

#css #styling #fonts
star

Mon Jun 21 2021 22:34:53 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Jun 21 2021 22:34:16 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Jun 19 2021 00:10:27 GMT+0000 (Coordinated Universal Time)

#react.js #react-feather #css #clamp #html
star

Fri Jun 18 2021 11:50:26 GMT+0000 (Coordinated Universal Time) https://codex-themes.com/thegem/sites/delicious-restaurant/

#html #css #javascript
star

Thu Jun 17 2021 12:02:43 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jun 17 2021 11:47:33 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Jun 17 2021 11:45:19 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Jun 06 2021 15:36:50 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Jun 05 2021 19:58:23 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Jun 05 2021 15:13:03 GMT+0000 (Coordinated Universal Time)

#css
star

Sun May 30 2021 10:52:07 GMT+0000 (Coordinated Universal Time)

#html #jquery #css #navbar
star

Sat May 22 2021 07:00:42 GMT+0000 (Coordinated Universal Time)

#css #flexbox #horizontal-center
star

Fri May 21 2021 20:01:42 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css #flexbox
star

Tue May 18 2021 03:23:16 GMT+0000 (Coordinated Universal Time)

#css
star

Sun May 16 2021 18:29:11 GMT+0000 (Coordinated Universal Time) https://materializecss.com/getting-started.html

#css
star

Wed May 12 2021 14:26:14 GMT+0000 (Coordinated Universal Time)

#css
star

Wed May 12 2021 11:54:09 GMT+0000 (Coordinated Universal Time)

#css
star

Tue May 11 2021 16:55:41 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/64323678/stretch-image-input-and-then-fit-to-its-containers-width

#css
star

Tue May 11 2021 11:50:46 GMT+0000 (Coordinated Universal Time)

#css
star

Tue May 11 2021 09:33:01 GMT+0000 (Coordinated Universal Time)

#css
star

Mon May 10 2021 12:34:15 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/

#bootstrap #js #css #html
star

Mon May 10 2021 12:31:48 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/

#bootstrap #css #html #webdev
star

Mon May 10 2021 04:47:08 GMT+0000 (Coordinated Universal Time) https://www.internetingishard.com/html-and-css/floats/

#css
star

Mon May 10 2021 04:45:24 GMT+0000 (Coordinated Universal Time)

#css
star

Mon May 10 2021 04:44:52 GMT+0000 (Coordinated Universal Time) https://www.altcademy.com/classroom/courses/webdesignium/book/positioning-with-floats

#css
star

Sat May 08 2021 13:25:00 GMT+0000 (Coordinated Universal Time) https://www.altcademy.com/classroom/courses/webdesignium/book/combining-and-layering-selectors

#css
star

Sat May 08 2021 13:16:54 GMT+0000 (Coordinated Universal Time)

#css
star

Fri May 07 2021 21:16:16 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/howto/howto_css_hero_image.asp

#css
star

Thu May 06 2021 14:54:45 GMT+0000 (Coordinated Universal Time)

#css
star

Thu May 06 2021 13:51:56 GMT+0000 (Coordinated Universal Time)

#css
star

Thu May 06 2021 12:23:54 GMT+0000 (Coordinated Universal Time)

#css
star

Thu May 06 2021 06:38:42 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/11333624/float-right-and-position-absolute-doesnt-work-together

#css
star

Tue May 04 2021 15:58:31 GMT+0000 (Coordinated Universal Time)

#css
star

Tue May 04 2021 15:40:32 GMT+0000 (Coordinated Universal Time) https://medium.com/pragmatic-programmers/styling-buttons-and-links-ed4e8c354369

#css
star

Sun May 02 2021 20:47:26 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/27874354/lemon-shape-css-and-html

#css
star

Thu Apr 29 2021 13:07:06 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Apr 29 2021 07:28:06 GMT+0000 (Coordinated Universal Time) https://github.com/chokcoco/iCSS/issues/103

#css
star

Wed Apr 28 2021 07:36:02 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Apr 26 2021 09:44:25 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Apr 26 2021 09:36:21 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Apr 26 2021 09:18:20 GMT+0000 (Coordinated Universal Time) https://www.hdwsj.org/htmln/n/n679.htm

#css #html
star

Fri Apr 23 2021 22:28:38 GMT+0000 (Coordinated Universal Time) https://getcssscan.com/css-box-shadow-examples

#css
star

Fri Apr 23 2021 11:50:05 GMT+0000 (Coordinated Universal Time)

#media #queries #css
star

Thu Apr 22 2021 11:54:21 GMT+0000 (Coordinated Universal Time)

#css #scss
star

Thu Apr 22 2021 10:00:44 GMT+0000 (Coordinated Universal Time)

#css #browser
star

Thu Apr 22 2021 08:29:19 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Apr 20 2021 11:07:50 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Apr 19 2021 09:48:27 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Apr 18 2021 17:22:36 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/5703552/how-can-i-center-text-horizontally-and-vertically-inside-a-div-block#:~:text=For%20vertical%20alignment%2C%20set%20the,any%20other%20inline%20children%20elements.

#css
star

Fri Apr 16 2021 20:15:33 GMT+0000 (Coordinated Universal Time) https://tobireif.com/posts/ensuring_the_correct_vertical_position_of_large_text/

#css #font #@font-face
star

Fri Apr 16 2021 04:29:19 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Thu Apr 15 2021 12:35:55 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Apr 14 2021 11:34:12 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Apr 14 2021 07:40:10 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Apr 13 2021 12:34:33 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Apr 12 2021 14:48:16 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Apr 12 2021 09:08:48 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Apr 12 2021 07:46:58 GMT+0000 (Coordinated Universal Time)

#css #html
star

Thu Apr 08 2021 07:24:12 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Apr 08 2021 06:10:11 GMT+0000 (Coordinated Universal Time)

#html #css #javascript
star

Wed Apr 07 2021 19:54:00 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Apr 06 2021 13:54:14 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/did-you-know-about-the-has-css-selector/

#css
star

Tue Apr 06 2021 13:49:08 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/did-you-know-about-the-has-css-selector/

#css
star

Fri Apr 02 2021 16:31:47 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Thu Apr 01 2021 13:00:44 GMT+0000 (Coordinated Universal Time)

#php #css
star

Wed Mar 31 2021 00:28:57 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Mon Mar 29 2021 22:26:41 GMT+0000 (Coordinated Universal Time) https://codepen.io/daveredfern/pen/qVJgRo

#html #css #jquery
star

Mon Mar 29 2021 22:25:48 GMT+0000 (Coordinated Universal Time) https://jsfiddle.net/5h5evjpw/

#html #css #javascript
star

Mon Mar 29 2021 12:42:35 GMT+0000 (Coordinated Universal Time) https://webdesign.tutsplus.com/tutorials/text-overflow-with-css-ellipsis--cms-36634?ref=webdesignernews.com

#css
star

Thu Mar 25 2021 13:26:40 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Mar 25 2021 08:52:44 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Mar 24 2021 18:00:36 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/howto/howto_css_text_selection.asp

#css
star

Wed Mar 24 2021 02:45:15 GMT+0000 (Coordinated Universal Time) https://kitt.lewagon.com/camps/545/challenges?path

#css
star

Tue Mar 23 2021 21:55:11 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Tue Mar 23 2021 16:30:44 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Tue Mar 23 2021 00:52:13 GMT+0000 (Coordinated Universal Time) https://doothemes.com/forums/topic/3455-dooplay-251-stable/

#css
star

Sun Mar 21 2021 17:06:11 GMT+0000 (Coordinated Universal Time)

#css #background #borders
star

Sun Mar 21 2021 17:03:58 GMT+0000 (Coordinated Universal Time)

#css #css_colors #color
star

Sun Mar 21 2021 17:02:45 GMT+0000 (Coordinated Universal Time)

#css #font #fonts
star

Sun Mar 21 2021 17:00:32 GMT+0000 (Coordinated Universal Time)

#css #cssselectors
star

Fri Mar 19 2021 17:27:08 GMT+0000 (Coordinated Universal Time)

#css #bootstrap #html
star

Thu Mar 18 2021 07:58:29 GMT+0000 (Coordinated Universal Time) https://gist.github.com/vicradon/ea3c5bd9c7a614861c2ee81fb80e31e0

#css
star

Thu Mar 18 2021 03:38:32 GMT+0000 (Coordinated Universal Time)

#css #bootstrap
star

Wed Mar 17 2021 09:25:58 GMT+0000 (Coordinated Universal Time)

#css #absolute #position #center
star

Tue Mar 16 2021 02:06:01 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/centering-css-complete-guide/

#css
star

Mon Mar 15 2021 14:01:15 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp

#css #bootstrap
star

Mon Mar 15 2021 13:53:55 GMT+0000 (Coordinated Universal Time)

#css #accessibility
star

Sun Mar 14 2021 01:16:13 GMT+0000 (Coordinated Universal Time) https://betterprogramming.pub/how-to-create-an-aurora-ui-using-css-eb27d674b69

#css #html
star

Sat Mar 13 2021 17:40:37 GMT+0000 (Coordinated Universal Time) https://gist.github.com/lweiss01/7a6c60843b64236b018e7398fb0d5f40#file-darkmodeswitcher-js

#javascript #js #bookmarklet #css
star

Sat Mar 13 2021 17:02:38 GMT+0000 (Coordinated Universal Time) https://neumorphism.io/

#css
star

Fri Mar 12 2021 09:33:33 GMT+0000 (Coordinated Universal Time)

#css
star

Thu Mar 11 2021 22:32:14 GMT+0000 (Coordinated Universal Time)

#html #css #vue.js
star

Thu Mar 11 2021 21:48:22 GMT+0000 (Coordinated Universal Time)

#html #css
star

Thu Mar 11 2021 16:17:14 GMT+0000 (Coordinated Universal Time) https://codeanywhere.com/editor/

#php #css #javascript
star

Thu Mar 11 2021 16:03:49 GMT+0000 (Coordinated Universal Time)

#php #css
star

Tue Mar 09 2021 17:06:44 GMT+0000 (Coordinated Universal Time) https://codepen.io/suez/pen/ZYwJpa

#css
star

Tue Mar 09 2021 17:03:29 GMT+0000 (Coordinated Universal Time) https://codepen.io/suez/pen/gPRjBo

#css
star

Tue Mar 09 2021 17:01:20 GMT+0000 (Coordinated Universal Time) https://codepen.io/suez/pen/rrraYb

#css
star

Tue Mar 09 2021 09:44:53 GMT+0000 (Coordinated Universal Time) https://developers.google.com/fonts/docs/material_icons

#html #css
star

Tue Mar 09 2021 05:09:59 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Mar 09 2021 02:57:44 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css
star

Mon Mar 08 2021 20:24:00 GMT+0000 (Coordinated Universal Time) https://codepen.io/alphardex/pen/YzPKENd

#css
star

Mon Mar 08 2021 20:22:10 GMT+0000 (Coordinated Universal Time) https://codepen.io/chriscoyier/pen/PgXRRM

#css
star

Mon Mar 08 2021 20:21:12 GMT+0000 (Coordinated Universal Time) https://codepen.io/aaroniker/pen/qBdZEjQ

#css #toggle #button
star

Mon Mar 08 2021 20:05:32 GMT+0000 (Coordinated Universal Time) https://codepen.io/chriscoyier/pen/YXgWam

#css
star

Mon Mar 08 2021 17:27:43 GMT+0000 (Coordinated Universal Time)

#css #html
star

Mon Mar 08 2021 17:27:14 GMT+0000 (Coordinated Universal Time) https://www.smashingmagazine.com/2021/02/responsive-image-effects-css-gradients-aspect-ratio/

#css #html
star

Tue Mar 02 2021 13:42:08 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

#css
star

Sat Feb 27 2021 03:34:09 GMT+0000 (Coordinated Universal Time) https://codelauradima.now.site/home

#html #css
star

Fri Feb 26 2021 19:33:52 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/2717127/gradient-borders

#css
star

Wed Feb 24 2021 20:50:38 GMT+0000 (Coordinated Universal Time)

#html #css #texto_grandes
star

Tue Feb 23 2021 23:25:20 GMT+0000 (Coordinated Universal Time)

#css
star

Mon Feb 22 2021 22:36:40 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Feb 07 2021 18:14:07 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Feb 07 2021 13:05:46 GMT+0000 (Coordinated Universal Time)

#css #html #highlight
star

Sun Feb 07 2021 12:09:11 GMT+0000 (Coordinated Universal Time) https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today/

#css
star

Fri Jan 22 2021 13:06:08 GMT+0000 (Coordinated Universal Time) https://codepen.io/abxlfazl/pen/VwKzaEm

#css #javascript
star

Fri Jan 22 2021 13:05:25 GMT+0000 (Coordinated Universal Time) https://codepen.io/marcobiedermann/pen/WNGWzYR

#css #react.js
star

Tue Jan 19 2021 12:27:29 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Jan 15 2021 13:08:26 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Jan 15 2021 13:04:53 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Jan 15 2021 13:02:23 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Jan 15 2021 12:11:04 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jan 13 2021 20:23:26 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jan 13 2021 07:08:42 GMT+0000 (Coordinated Universal Time) https://medium.com/codyhouse/create-your-design-system-part-4-spacing-895c9213e2b9

#css
star

Tue Jan 12 2021 07:52:47 GMT+0000 (Coordinated Universal Time)

#html #css
star

Tue Jan 12 2021 02:03:57 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

#css
star

Tue Jan 12 2021 01:42:43 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

#css
star

Sun Jan 10 2021 01:00:29 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Jan 03 2021 16:29:59 GMT+0000 (Coordinated Universal Time)

#css,javascript #css
star

Wed Dec 30 2020 20:35:55 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Dec 30 2020 19:33:23 GMT+0000 (Coordinated Universal Time)

#css #javascript
star

Wed Dec 30 2020 19:26:44 GMT+0000 (Coordinated Universal Time)

#css
star

Tue Dec 29 2020 02:38:06 GMT+0000 (Coordinated Universal Time) https://oxygen4fun.supadezign.com/tips/how-to-change-the-code-block-theme/?fbclid

#css
star

Tue Dec 22 2020 01:00:16 GMT+0000 (Coordinated Universal Time)

#css #html
star

Fri Dec 18 2020 17:20:06 GMT+0000 (Coordinated Universal Time) https://medium.com/better-programming/understanding-css-combinators-a36e013b1bed

#css #combinators
star

Fri Dec 18 2020 17:19:39 GMT+0000 (Coordinated Universal Time) https://www.javatpoint.com/css-combinators

#css #combinators
star

Fri Dec 18 2020 17:18:08 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators

#css #combinators
star

Fri Dec 18 2020 17:17:17 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/css/css_combinators.asp

#css #combinators
star

Fri Dec 18 2020 17:14:00 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

#css
star

Thu Dec 17 2020 00:32:33 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/slow-movement/

#css
star

Wed Dec 16 2020 23:45:56 GMT+0000 (Coordinated Universal Time) https://dev.to/eevajonnapanula/you-make-my-head-spin-reducing-the-motion-on-web-328b

#css
star

Wed Dec 16 2020 23:39:45 GMT+0000 (Coordinated Universal Time) https://web.dev/centering-in-css/

#css
star

Tue Dec 15 2020 22:41:51 GMT+0000 (Coordinated Universal Time) https://www.ampleforth.org/

#html #css
star

Sun Dec 13 2020 19:33:28 GMT+0000 (Coordinated Universal Time)

#html #css #tab #footer
star

Tue Dec 08 2020 13:46:23 GMT+0000 (Coordinated Universal Time)

#css #framework
star

Tue Dec 08 2020 10:40:18 GMT+0000 (Coordinated Universal Time) https://www.youtube.com/watch?v=4PStxeSIL9I&ab_channel=WebDevSimplified

#css
star

Tue Dec 08 2020 06:39:17 GMT+0000 (Coordinated Universal Time) https://www.youtube.com/watch?v=YszONjKpgg4&ab_channel=WebDevSimplified

#css
star

Fri Dec 04 2020 16:43:38 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/33497827/why-is-word-wrap-not-working

#css #tables
star

Tue Nov 24 2020 19:39:37 GMT+0000 (Coordinated Universal Time) https://confva.com/

#typescript #javascript #html #css
star

Mon Nov 09 2020 17:42:36 GMT+0000 (Coordinated Universal Time)

#html #css
star

Mon Nov 09 2020 03:01:47 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/31860157/css3-transform-translate-on-hover-with-transition

#css
star

Tue Nov 03 2020 07:41:04 GMT+0000 (Coordinated Universal Time)

#html #css
star

Wed Oct 28 2020 08:18:26 GMT+0000 (Coordinated Universal Time) https://medium.com/@gemma.stiles/breaking-down-the-dom-dd197e4f7154

#javascript #html #css
star

Tue Oct 27 2020 05:31:31 GMT+0000 (Coordinated Universal Time)

#css
star

Sun Oct 25 2020 08:40:39 GMT+0000 (Coordinated Universal Time)

#css
star

Sat Oct 24 2020 21:36:38 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/40463542/how-to-make-vertical-lines-between-list-items-using-css

#css
star

Sat Oct 24 2020 21:21:10 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/cssref/tryit.asp?filename

#css #before
star

Wed Oct 21 2020 11:42:38 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/59611088/is-it-good-practice-to-use-vh-and-vw-for-applying-padding-margin-width-and-heigh

#html5 #css
star

Mon Oct 19 2020 15:10:26 GMT+0000 (Coordinated Universal Time) https://www.matuzo.at/blog/writing-even-more-css-with-accessibility-in-mind-progressive-enhancement/?

#css
star

Sun Oct 11 2020 03:08:29 GMT+0000 (Coordinated Universal Time) https://github.com/Zilleali/Menu-Page

#html #css
star

Wed Oct 07 2020 12:44:50 GMT+0000 (Coordinated Universal Time) teste.com.br

#css
star

Fri Oct 02 2020 17:48:13 GMT+0000 (Coordinated Universal Time) https://csspl.us/

#javascript #css
star

Thu Oct 01 2020 13:27:07 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/13337646/scroll-inside-of-a-fixed-sidebar

#css
star

Thu Oct 01 2020 06:29:28 GMT+0000 (Coordinated Universal Time)

#javascript #css #html #php
star

Mon Sep 21 2020 20:34:33 GMT+0000 (Coordinated Universal Time)

#html #css
star

Sun Sep 20 2020 11:56:04 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_width2

#css
star

Wed Sep 16 2020 04:46:31 GMT+0000 (Coordinated Universal Time) https://www.webfx.com/blog/web-design/10-random-css-tricks-you-might-want-to-know-about/

#css
star

Wed Sep 09 2020 14:54:43 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/10699343/using-after-to-clear-floating-elements#10699376

#css
star

Mon Sep 07 2020 12:40:19 GMT+0000 (Coordinated Universal Time)

#css
star

Fri Sep 04 2020 18:49:03 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Aug 26 2020 15:08:55 GMT+0000 (Coordinated Universal Time) https://fonts.google.com/specimen/Poppins?query=popp&sidebar.open=true&selection.family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900

#css
star

Wed Aug 26 2020 06:37:34 GMT+0000 (Coordinated Universal Time) https://codepen.io/khadkamhn/pen/ZGvPLo

#html #css
star

Sun Aug 02 2020 02:24:12 GMT+0000 (Coordinated Universal Time)

#django #css #html
star

Wed Jul 01 2020 08:52:19 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/centering-css-complete-guide/

#css
star

Wed Jul 01 2020 07:54:44 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/centering-css-complete-guide/#center-horizontally

#css #css3
star

Mon Jun 22 2020 12:58:16 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/corner-ribbon/

#css
star

Mon Jun 22 2020 12:57:16 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/drop-caps/

#css
star

Mon Jun 22 2020 12:55:43 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/ribbon/

#css
star

Mon Jun 22 2020 12:54:35 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/force-vertical-scrollbar/

#css
star

Mon Jun 22 2020 12:28:17 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/top-shadow/

#css
star

Mon Jun 22 2020 12:27:26 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/non-form-fieldset-look/

#css
star

Wed Jun 17 2020 17:29:32 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 10 2020 16:28:32 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 10 2020 11:16:01 GMT+0000 (Coordinated Universal Time) https://codepen.io/sdthornton/pen/wBZdXq

#css #materialdesign #boxshadows
star

Sun Jun 07 2020 08:08:07 GMT+0000 (Coordinated Universal Time) https://www.zappos.com/general-questions#return

#css #html #javascript
star

Sun Jun 07 2020 08:02:46 GMT+0000 (Coordinated Universal Time) https://www.zappos.com/general-questions

#css #html #javascript
star

Sat Jun 06 2020 16:08:47 GMT+0000 (Coordinated Universal Time)

#css
star

Wed Jun 03 2020 16:35:21 GMT+0000 (Coordinated Universal Time) https://theme-fusion.com/forums/topic/sticky-header-height/

#css
star

Wed Jun 03 2020 10:28:04 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/fixed-footer/

#css
star

Wed Jun 03 2020 10:27:04 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/compress-css-with-php/

#css
star

Wed Jun 03 2020 10:25:52 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/css-text-shadow/

#css
star

Fri May 29 2020 12:36:12 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/javascript/print-object-screen/

#css
star

Fri May 29 2020 12:35:11 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/comments-in-css/

#css
star

Fri May 29 2020 12:33:56 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/print-url-after-links/

#css
star

Wed May 27 2020 07:31:50 GMT+0000 (Coordinated Universal Time)

#css
star

Fri May 22 2020 12:25:14 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#css
star

Tue May 19 2020 05:03:37 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/55767086/how-to-use-css-order-with-materialize

#css
star

Sun May 17 2020 06:15:19 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

#css
star

Sat May 16 2020 19:36:39 GMT+0000 (Coordinated Universal Time) https://codepen.io/sdthornton/pen/wBZdXq

#css #html
star

Mon May 11 2020 22:00:28 GMT+0000 (Coordinated Universal Time) https://www.w3schools.com/css/css_grid.asp

#css
star

Mon May 11 2020 21:33:40 GMT+0000 (Coordinated Universal Time) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

#css
star

Sat May 02 2020 22:07:47 GMT+0000 (Coordinated Universal Time) https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275

#css
star

Fri May 01 2020 11:04:04 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/wordpress/removing-jetpack-css/

#css
star

Wed Apr 29 2020 11:36:23 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/html/start-a-web-server-with-one-terminal-command-on-os-x/

#css
star

Wed Apr 29 2020 11:26:35 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/text-rotation/

#css
star

Wed Apr 29 2020 11:11:47 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/change-text-selection-color/

#css
star

Wed Apr 29 2020 10:55:39 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/print-url-after-links/

#css
star

Wed Apr 29 2020 10:52:30 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/fluid-typography/

#css
star

Tue Apr 28 2020 20:08:07 GMT+0000 (Coordinated Universal Time) https://codepen.io/cssparadise/pen/PoqQwxg

#css
star

Tue Apr 28 2020 19:41:37 GMT+0000 (Coordinated Universal Time) https://twitter.com/Duiker101/status/1253341244492664837

#css
star

Tue Apr 28 2020 19:30:47 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/using-formik-to-handle-forms-in-react/

#css
star

Fri Apr 24 2020 11:55:55 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/css-conic-gradient/

#css #css #conic #gradient
star

Fri Apr 24 2020 11:44:23 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/javascript/getting-first-and-last-items-in-array-and-splitting-all-the-rest/

#css #css #items #array
star

Mon Mar 02 2020 22:07:43 GMT+0000 (Coordinated Universal Time)

#css #shapes
star

Sun Feb 09 2020 19:35:52 GMT+0000 (Coordinated Universal Time) https://love2dev.com/blog/absolute-centering-css/

#css #layout #flex
star

Wed Jan 22 2020 08:08:03 GMT+0000 (Coordinated Universal Time)

#css #changingdefault #lists
star

Sat Jan 18 2020 20:39:59 GMT+0000 (Coordinated Universal Time) https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/

#css #layout
star

Fri Jan 10 2020 19:00:00 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/css-radial-gradient/

#css #design #gradient #webdev
star

Wed Jan 08 2020 19:00:00 GMT+0000 (Coordinated Universal Time)

#css #design #gradient
star

Wed Jan 08 2020 19:00:00 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/css-repeating-gradients/

#css #webdev #design #gradients
star

Sun Jan 05 2020 18:59:56 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

#css #webdev #text
star

https://www.w3schools.com/CSSref/pr_background-attachment.asp

#css #html
star

https://www.creativebloq.com/features/css-tricks-to-revolutionise-your-layouts

#css
star

https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134

#css
star

https://www.w3schools.com/,

#css
star

https://codepen.io/ananyaneogi/pen/WNerMbE

#css
star

https://www.w3schools.com/howto/howto_js_lightbox.asp,

#css #html #javascript

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension