Snippets Collections
<link rel="stylesheet" href="https://speed-cl.netlify.app/main.css" />
<div>
    <input type="email" class="input-validation" placeholder="email">
    <div class="input-validation-text">Invalid email address!</div>
</div>
<input type="text" class="input" placeholder="Name"/>
<img class="#" src="#" alt="#" />
<img src="#" alt="#" class="img-res"/>
<div id="basic-hr-shadow">
    <div id="main-hr">
        <img src="4.jpg" alt="beautiful pic" id="img-hr" />
        <div id="text">
            <h3 id="text-title">High Coast Bridge</h3>
            <h4 id="author">by Anders Jildén</h4>
        </div>
    </div>
    <div id="btns btns-hr">
        <button class="btn">
            <p>READ</p>
        </button>
        <button class="btn">
            <p>BOOKMARK</p>
        </button>
        <button class="btn" id="icons-btn">
            <i class="far fa-heart"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-share-alt"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
</div>
<div id="basic-hr">
    <div id="main-hr">
        <img src="4.jpg" alt="beautiful pic" id="img-hr" />
        <div id="text">
            <h3 id="text-title">High Coast Bridge</h3>
            <h4 id="author">by Anders Jildén</h4>
        </div>
    </div>
    <div id="btns btns-hr">
        <button class="btn">
            <p>READ</p>
        </button>
        <button class="btn">
            <p>BOOKMARK</p>
        </button>
        <button class="btn" id="icons-btn">
            <i class="far fa-heart"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-share-alt"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
</div>
<div id="tom-basic-textonly">
    <div id="main-textonly">
        <div id="text-textonly">
            <div id="tom">
                <h3 id="tom-text-textonly">High Coast Bridge</h3>
                <h4 id="tom-author-textonly">by Anders Jildén</h4>
            </div>
            <h4 id="text-cont-textonly">
                High Coast bridge also known as Höga Kusten Bridge is located in
                Sweden
            </h4>
        </div>
    </div>
</div>
<div id="tom-basic-overlay">
    <div id="main-overlay">
        <img src="4.jpg" alt="beautiful pic" id="img-basic" />
        <div id="text-overlay">
            <div id="tom">
                <h3 id="tom-text">High Coast Bridge</h3>
                <h4 id="tom-author">by Anders Jildén</h4>
            </div>
            <h4 id="text-cont-overlay">
                High Coast bridge also known as Höga Kusten Bridge is located in
                Sweden
            </h4>
        </div>
    </div>
    <div id="btns-overlay">
        <button class="btn">
            <p>READ</p>
        </button>
        <button class="btn">
            <p>BOOKMARK</p>
        </button>
        <button class="btn" id="icons-btn">
            <i class="far fa-heart"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-share-alt"></i>
        </button>
        <button class="btn" id="icons-btn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
</div>
 <div id="tom-basic">
     <img src="#" alt="mail" class="badge-icon">
     <div id="discount">70%</div>
     <div id="main-close">
         <img src="#" alt="beautiful pic" id="img-basic" />
         <div id="text">
             <div id="tom">
                 <h3 id="tom-text">#</h3>
                 <h4 id="tom-author">#</h4>
             </div>
             <h4 id="text-cont">
             </h4>
         </div>
     </div>
     <div id="btns-close">
         <button class="btn">
             <p>READ</p>
         </button>
         <button class="btn">
             <p>BOOKMARK</p>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
     </div>
 </div>
 <div id="tom-basic">
     <img src="bookmark_black_24dp.svg" alt="mail" class="badge-icon">
     <div id="discount">70%</div>
     <div id="main">
         <img src="#" alt="beautiful pic" id="img-basic" />
         <div id="text">
             <div id="tom">
                 <h3 id="tom-text">#</h3>
                 <h4 id="tom-author">#</h4>
             </div>
             <h4 id="text-cont">
             </h4>
         </div>
     </div>
     <div id="btns">
         <button class="btn">
             <p>READ</p>
         </button>
         <button class="btn">
             <p>BOOKMARK</p>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
         <button class="btn" id="#">
             <i class="#"></i>
         </button>
     </div>
 </div>
<button class="btn btn-float-primary"><img src="#"></button>
<button class="btn btn-float-secondary"><img src="#"></button>
<button class="btn btn-float-primary"><img src="#"></button>
<button class="btn btn-icon-primary"><img class="icon" src="#">send</button>
<button class="btn btn-icon-secondary"><img class="icon "src="#">download</button>
<button class="btn btn-text">Text</button>
<button class="btn btn-outline">Normal</button>
<button class="btn btn-outline-small">Small</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-disabled">Disabled</button>
<div class="badge-wrapper">  
<img src="#" alt="mail" class="badge-icon"><div class="badge badge-number">2</div>
</div>
<div class="badge-wrapper"> 
<img src="#" alt="avatar" class="badge-icon"><div class="badge badge-number">9</div>
</div>
<div class="badge-wrapper">
    <img src="#" alt="avatar" class="avatar avatar-lg">
    <div class="badge badge-online"></div>
</div>

<div class="badge-wrapper">
    <img src="#" alt="avatar" class="avatar avatar-lg">
    <div class="badge badge-offline"></div>
</div>

<div class="badge-wrapper">
    <img src="#" alt="avatar" class="avatar avatar-md">
    <div class="badge badge-away"></div>

    <div class="badge-wrapper">
        <img src="#" alt="avatar" class="avatar avatar-sm">
        <div class="badge badge-busy"></div>
    </div>
<div class="alert" id="alert-close">This is an alert with close button <button id="close"><img src="#"></button></div>
<div class="alert" id="alert-primary">This is a primary alert<img id="icon-primary" src="#"></div>
<div class="alert" id="alert-success">This is a success alert<img id="icon-success" src="#"></div>
<div class="alert" id="alert-warning">This is a warning alert<img id="icon-warning" src="#" /> </div>
<div class="alert" id="alert-error">This is an error alert<img id="icon-error" src="#"></div>
<div role="img" alt="avatar" class="avatar avatar-lg avatar-txt">AA</div>
<div role="img" alt="avatar" class="avatar avatar-md avatar-txt">Aa</div>
<div role="img" alt="avatar" class="avatar avatar-sm avatar-txt">a</div>
<img src="img-avatar/user.png" alt="avatar" class="avatar avatar-lg">
<img src="img-avatar/female.png" alt="avatar" class="avatar avatar-md">
<img src="img-avatar/male.png" alt="avatar" class="avatar avatar-sm">
<div class="grid-container-3">
    <div class="grid-cell">1</div>
    <div class="grid-cell">2</div>
    <div class="grid-cell">3</div>
    <div class="grid-cell">4</div>
    <div class="grid-cell">5</div>
    <div class="grid-cell">6</div>
    <div class="grid-cell">7</div>
    <div class="grid-cell">8</div>
    <div class="grid-cell">9</div>
</div>
<div class="grid-container-2">
    <div class="grid-cell grid-item-1">1</div>
    <div class="grid-cell grid-item-2">2</div>
    <div class="grid-cell grid-item-3">3</div>
    <div class="grid-cell grid-item-4">4</div>
</div>
<input type="range" min="0" max="100" value="50" class="vertical-sldier" id="range" />
<img src="volume_up_black_24dp.svg" id="volume-icon" />
<div id="range-value"></div>

<script>
    var slider = document.querySelector("#range");
    var output = document.querySelector("#range-value");
    
    output.innerHTML = slider.value;
    
    slider.oninput = function () {
    	output.innerHTML = this.value;
    	if (slider.value === "0") {
    		document.querySelector("#volume-icon").src = "volume_off_black_24dp.svg";
            document.querySelector("#range").style.opacity = "0.5";
    	} else {
    		document.querySelector("#volume-icon").src = "volume_up_black_24dp.svg";
            document.querySelector("#range").style.opacity = "1";
    	}
    };
    
</script>
<input type="range" min="0" max="100" value="50" class="vertical-sldier" id="range" />
<img src="volume_up_black_24dp.svg" id="volume-icon" />
<div id="range-value"></div>

<script>
    var slider = document.querySelector("#range");
    var output = document.querySelector("#range-value");
    
    output.innerHTML = slider.value;
    
    slider.oninput = function () {
    	output.innerHTML = this.value;
    	if (slider.value === "0") {
    		document.querySelector("#volume-icon").src = "volume_off_black_24dp.svg";
    	} else {
    		document.querySelector("#volume-icon").src = "volume_up_black_24dp.svg";
    	}
    };
    
</script>
<input type="range" min="1" max="100" value="50" class="slider" />
<input type="range" min="1" max="100" value="50" />
<div class="toast-btn-wrapper">
    <div class="toast-btn">tost btn</div>
</div>
<div class="toast-wrapper left">This is a toast</div>
<div class="star-container">
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star-active">
        <img src="#" />
    </div>
    <div class="star">
        <img src="#" />
    </div>
</div>
<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>
<div class="modal">
    <div class="modal-header">
        Example modal
        <button class="modal-close">
            <img src="close-white24.svg" />
        </button>
    </div>
    <div class="modal-content">
        <!-- content -->
    </div>
    <div class="action-btn">
        <button class="action">Action 1</button>
        <button class="action">Action 2</button>
    </div>
</div>

javascript code:

const modalInitialise = document.querySelector(".modal-initialise");
const modalClose = document.querySelector(".modal-close");
const modal = document.querySelector(".modal");

modalInitialise.addEventListener("click", () => {
	document.querySelector(".modal").style.display = "block";
	document.querySelector(".modal-initialise").style.opacity = "0.5";
	document.querySelector("#overlay").style.backgroundColor =
		"rgba(0, 0, 0, 0.5)";
});

modalClose.addEventListener("click", () => {
	document.querySelector(".modal").style.display = "none";
	document.querySelector("#overlay").style.backgroundColor = "transparent";
	document.querySelector(".modal-initialise").style.opacity = "1";
});

document.addEventListener("mouseup", function (e) {
	var container = document.querySelector(".modal");
	if (!container.contains(e.target)) {
		container.style.display = "none";
		document.querySelector("#overlay").style.backgroundColor = "transparent";
		document.querySelector(".modal-initialise").style.opacity = "1";
	}
});
<div class="subnav">
    <button class="link">
        <i class="fas fa-bars"></i>
    </button>
    <div class="subnav-content-hamburger">
        <div>Link1</div>
        <div>Link2</div>
        <div>Link2</div>
    </div>
</div>
<div class="subnav">
    <button class="link">
        More <i class="fa fa-caret-down"></i>
    </button>
    <div class="subnav-content">
        <div>Link1</div>
        <div>Link2</div>
        <div>Link2</div>
    </div>
</div>
<nav class="header-component">
    <div class="branding">
        <div class="header-component-logo">Logo</div>
        <div>Name</div>
    </div>
    <div class="header-component-more">
        <div class="more">Home</div>
        <div class="more">About</div>
        <div class="more">More</div>
    </div>
</nav>
<ul>
    <li class="primary stacked-item">
        This is a primary notification<img src="close-light-border.svg" />
    </li>
    <li class="success stacked-item">
        This is a success notification
        <img src="close-light-border.svg" />
    </li>
    <li class="warning stacked-item">
        This is a warning notification
        <img src="close-dark-border.svg" />
    </li>
    <li class="error stacked-item">
        This is an error notification
        <img src="close-light-border.svg" />
    </li>
</ul>
<ul class="list-default">
	<li class="list-item">List Item</li>
</ul>

<ul class="list-numbers">
	<li class="list-item">List Item</li>
</ul>

<ul class="list-roman">
	<li class="list-item">List Item</li>
</ul>

<ul class="list-alphabet">
	<li class="list-item">List Item</li>
</ul>

<ul class="list-none">
	<li class="list-item">List Item</li>
</ul>
<div class="warning-text">Example of warning text</div>
<div class="error-text">Example of error text</div>
<div class="wgt-900">font weight 900</div>
<div class="wgt-500">font weight 500</div>
<div class="wgt-200">font weight 200</div>
<div class="left-text">Left</div>
<div class="center-text">Center</div>
<div class="right-text">Right</div>
<div class="grey-text">This is an example of grey text</div>
<div class="small-text">Example of small text</div>
<div class="heading-1">Heading-1</div>
<div class="heading-2">Heading-2</div>
<div class="heading-3">Heading-3</div>
<label
					aria-label="password"
					class="form-label"
					for="password"
				>Password</label>
				<p><small>6 - 12 characters, one number, one symbol, one uppercase and
						one lowercase letter.</small></p>
				<input
					class="form-control"
					title="Must be 6 - 12 characters and contain at least one number, one symbol, one uppercase and one lowercase letter."
					type="password"
					id="password"
					name="password"
					required
					pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{6,12}$"
				/>
star

Tue Feb 22 2022 14:18:25 GMT+0000 (UTC)

#htm
star

Mon Feb 21 2022 11:28:30 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 17:52:34 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 17:51:59 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 17:37:42 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 17:36:59 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 15:11:34 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 15:10:45 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 15:09:00 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 15:08:21 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 15:06:58 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 15:06:00 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 14:41:49 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 14:40:53 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 14:40:10 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 14:39:24 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 14:38:13 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 13:29:15 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 13:28:34 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 12:44:41 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 12:44:00 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 09:42:23 GMT+0000 (UTC)

#htm
star

Tue Feb 15 2022 09:23:31 GMT+0000 (UTC)

#htm
star

Mon Feb 14 2022 14:05:40 GMT+0000 (UTC)

#htm
star

Mon Feb 14 2022 13:57:09 GMT+0000 (UTC)

#htm
star

Sat Feb 12 2022 06:10:07 GMT+0000 (UTC)

#htm
star

Sat Feb 12 2022 06:10:07 GMT+0000 (UTC)

#htm
star

Sat Feb 12 2022 05:42:06 GMT+0000 (UTC)

#htm
star

Sat Feb 12 2022 05:16:05 GMT+0000 (UTC)

#htm
star

Sat Feb 12 2022 04:59:30 GMT+0000 (UTC)

#htm
star

Fri Feb 11 2022 16:26:37 GMT+0000 (UTC)

#htm
star

Fri Feb 11 2022 11:39:57 GMT+0000 (UTC)

#htm #css
star

Fri Feb 11 2022 05:00:46 GMT+0000 (UTC)

#htm
star

Thu Feb 10 2022 07:06:57 GMT+0000 (UTC)

#htm
star

Thu Feb 10 2022 06:59:06 GMT+0000 (UTC)

#htm
star

Thu Feb 10 2022 05:36:13 GMT+0000 (UTC)

#htm
star

Wed Feb 09 2022 09:47:22 GMT+0000 (UTC)

#htm
star

Wed Feb 09 2022 08:06:29 GMT+0000 (UTC)

#htm
star

Wed Feb 09 2022 06:54:06 GMT+0000 (UTC)

#htm
star

Wed Feb 09 2022 06:30:12 GMT+0000 (UTC)

#htm
star

Wed Feb 09 2022 06:15:56 GMT+0000 (UTC)

#htm
star

Wed Feb 09 2022 06:09:55 GMT+0000 (UTC)

#htm
star

Wed Feb 09 2022 05:23:19 GMT+0000 (UTC)

#htm

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension