A Pen by Shubham Jain on CodePen.
Mustafa Abdulkhaliq MustafaMta
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Input Quantity Increment</h1> | |
| <section> | |
| <form action=""> | |
| <p class="qty"> | |
| <label for="qty">Quantity:</label> | |
| <button class="qtyminus" aria-hidden="true">−</button> | |
| <input type="number" name="qty" id="qty" min="1" max="10" step="1" value="1"> | |
| <button class="qtyplus" aria-hidden="true">+</button> | |
| </p> |
MustafaMta
/ index.html
Created
January 27, 2023 13:21
Skeleton loading using only a few lines of CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <!-- code here --> | |
| <div class="card"> | |
| <div class="card-img skeleton"> | |
| <!-- waiting for img to load from javascript --> | |
| </div> | |
| <div class="card-body"> | |
| <h2 class="card-title skeleton"> | |
| <!-- wating for title to load from javascript --> | |
| </h2> |
MustafaMta
/ index.html
Created
January 27, 2023 12:44
Skeleton loading using only a few lines of CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <!-- code here --> | |
| <div class="card"> | |
| <div class="card-img skeleton"> | |
| <!-- waiting for img to load from javascript --> | |
| </div> | |
| <div class="card-body"> | |
| <h2 class="card-title skeleton"> | |
| <!-- wating for title to load from javascript --> | |
| </h2> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="wow fadeIn example no-padding no-transition slider-top"> | |
| <div style="min-height: 50px;"> | |
| <!-- Jssor Slider Begin --> | |
| <div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; | |
| top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;"> | |
| <!-- Loading Screen --> | |
| <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);"> | |
| <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="https://www.jssor.com/theme/svg/loading/static-svg/spin.svg" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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>Model Window</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <button class="open-modal">Show Model 1</button> | |
| <button class="open-modal">Show Model 2</button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Created based on Youtube [CodingLab](https://www.youtube.com/@CodingLabYT)--> | |
| <section> | |
| <button class="show-modal">Show Modal</button> | |
| <span class="overlay"></span> | |
| <div class="modal-box"> | |
| <i class="fa-regular fa-circle-check"></i> | |
| <h3>Completed</h3> | |
| <p>You have sucessfully downloaded all the source code files.</p> | |
| <div class="buttons"> | |
| <button class="close-btn">OK, Close</button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Created based on Youtube [CodingLab](https://www.youtube.com/@CodingLabYT)--> | |
| <section> | |
| <button class="show-modal">Show Modal</button> | |
| <span class="overlay"></span> | |
| <div class="modal-box"> | |
| <i class="fa-regular fa-circle-check"></i> | |
| <h3>Completed</h3> | |
| <p>You have sucessfully downloaded all the source code files.</p> | |
| <div class="buttons"> | |
| <button class="close-btn">OK, Close</button> |
MustafaMta
/ find-current-location-using-google-map.markdown
Created
January 17, 2023 18:24
Find current location using google map
MustafaMta
/ find-current-location-using-google-map.markdown
Created
January 15, 2023 20:14
Find current location using google map
A Pen by Shubham Jain on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="ld"> | |
| <div class="inside-wrapper"> | |
| <div class="container"> | |
| <div class="container-item"> | |
| <img src="https://images.unsplash.com/photo-1566558843351-b39b612160ab?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt=""> | |
| </div> | |
| <div class="container-item"> | |
| <img src="https://images.unsplash.com/photo-1566910087672-124366fda948?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt=""> | |
| </div> | |
| <div class="container-item"> |
NewerOlder