Search the Community
Showing results for tags 'codes'.
Found 10 results
-
<nav> <div class="theme-switch-wrapper"> <label class="theme-switch" for="checkbox"> <input type="checkbox" id="checkbox" /> <div class="slider round"></div> </label> <em>Enable Dark Mode!</em> </div> </nav> <section> <article class="post"> <h1>GAMELIFE</h1> <p class="post-meta">2021 <span>by </span>Alexandru</> <p><strong>Comunitatea GAMELIFE.RO</strong> a fost infiintata in anul<strong class="sevenhundred"> 2012 </strong> si reprezinta una din cele mai vechi comunitati din tara!.</p> <p>Deoarece comunitatea a avut un impact major in gaming in ultimii 10 ani am decis sa reinviem proiectul si sa il ducem inapoi unde e locul!</p> <a href="#">Read More</a> </article> </section> @import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One); :root { --primary-color: #302AE6; --secondary-color: #536390; --font-color: #424242; --bg-color: #fff; --heading-color: #292922; } [data-theme="dark"] { --primary-color: #9A97F3; --secondary-color: #818cab; --font-color: #e1e1ff; --bg-color: #161625; --heading-color: #818cab; } body { font-family: "Lato", sans-serif; background-color: var(--bg-color); color: var(--font-color); max-width: 90%; margin: 0 auto; font-size: calc(1rem + 0.25vh); } h1 { color: var(--heading-color); font-family: "Sansita One", serif; font-size: 2rem; margin-bottom: 1vh; } p { font-size: 1.1rem; line-height: 1.6rem; } a { color: var(--primary-color); text-decoration: none; border-bottom: 3px solid transparent; font-weight: bold; &:hover, &:focus { border-bottom: 3px solid currentColor; } } section { max-width: 68%; margin: 0 auto; } .post-meta { font-size: 1rem; font-style: italic; display: block; margin-bottom: 4vh; color: var(--secondary-color); } nav { display: flex; justify-content: flex-end; padding: 20px 0; } /*slider switch css */ .theme-switch-wrapper { display: flex; align-items: center; em { margin-left: 10px; font-size: 1rem; } } .theme-switch { display: inline-block; height: 34px; position: relative; width: 60px; } .theme-switch input { display:none; } .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .slider:before { background-color: #fff; bottom: 4px; content: ""; height: 26px; left: 4px; position: absolute; transition: .4s; width: 26px; } input:checked + .slider { background-color: #66bb6a; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); const currentTheme = localStorage.getItem('theme'); if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); } else { document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('theme', 'light'); } } toggleSwitch.addEventListener('change', switchTheme, false);
-
HTML: <body> <div class="light"> <ul class="line"> <li class="red"></li> <li class="yellow"></li> <li class="blue"></li> <li class="pink"></li> <li class="red"></li> <li class="green"></li> <li class="blue"></li> <li class="yellow"></li> <li class="red"></li> <li class="pink"></li> <li class="blue"></li> <li class="yellow"></li> <li class="red"></li> <li class="green"></li> <li class="blue"></li> <li class="yellow"></li> <li class="red"></li> <li class="pink"></li> <li class="green"></li> <li class="blue"></li> <li class="pink"></li> <li class="red"></li> <li class="green"></li> <li class="blue"></li> </ul> </div> <h1>Merry Christmas ! </h1> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> </body> CSS: $green: #24D024; $yellow: #fff952; $pink: #f53896; $red: #fb4545; $blue: #0A53DE; @import url('https://fonts.googleapis.com/css?family=Cookie'); body { background-color: #000000; } h1 { font-family: 'Cookie', cursive; font-size: 80px; text-align: center; color: white; letter-spacing: 3px; } .drop { position: absolute; top: 0; z-index: 1; border-radius: 100%; background-color: #fff; box-shadow: 0 0 10px #FFF } .animate { animation: falling 5.5s infinite ease-in; } @keyframes falling { 0% { top: -10px; // opacity: 1; } 10% { transform: translateX(-5px) } 20% { transform: translateX(5px) } 30% { transform: translateX(-5px) } 40% { transform: translateX(5px) } 60% { transform: translateX(-5px) } 70% { transform: translateX(5px) } 80% { transform: translateX(-5px) } 90% { transform: translateX(5px) } 95% { opacity: 1 } 100% { top: 95vh; opacity: 0; } } .line{ text-align: center; } li { position: relative; margin: 0 15px; list-style: none; padding: 0; display: inline-block; width: 12px; height: 28px; border-radius: 50%; top: 35px; background: #fff; &:before { content: ""; position: absolute; background: #222; width: 10px; height: 9px; border-radius: 3px; top: -4px; left: 1px; } &:after { content: ""; top: -14px; left: 9px; position: absolute; width: 52px; height: 19px; border-bottom: solid #222 2px; border-radius: 30%; } } .red { background-color: $red; animation: lightningRed 1s infinite; } .green { background-color: $green; animation: lightningGreen 0.8s infinite; } .yellow { background-color: $yellow; animation: lightningYellow 0.9s infinite; } .blue { background-color: $blue; animation: lightningBlue 1.1s infinite; } .pink { background-color: $pink; animation: lightningPink 1.2s infinite; } @keyframes lightningRed { 0% { box-shadow: 5px 10px 35px 10px $red; } 50% { box-shadow: none; } 100% { box-shadow: 5px 10px 35px 10px $red; } } @keyframes lightningGreen { 0% { box-shadow: 5px 0 35px 10px $green; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $green; } } @keyframes lightningYellow { 0% { box-shadow: 5px 0 35px 10px $yellow; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $yellow; } } @keyframes lightningBlue { 0% { box-shadow: 5px 0 35px 10px $blue; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $blue; } } @keyframes lightningPink { 0% { box-shadow: 5px 0 35px 10px $pink; } 50% { box-shadow: none; } 100% { box-shadow: 5px 0 35px 10px $pink; } } @media (max-width: 1024px) { .line{ padding: 0; } li { margin: 0 15px 20px 15px; } } Javascript : $(function() { function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; var limit_flake = 50; setInterval(function() { let dimension = randomInt(3, 9) + "px"; var flake = "<div class='drop animate' style='left:" + randomInt(10, window.innerWidth - 20) + "px;width:" + dimension + ";height:" + dimension + "'></div>"; $('body').append(flake); var list_flake = $('.drop'); if (list_flake.length > limit_flake) list_flake[list_flake.length - 1].remove(); }, 200); })
-
Script: <script type="text/javascript"> today = new Date(); BigDay= new Date("December 25, 2020"); msPerDay = 24 * 60 * 60 * 1000; timeLeft = (BigDay.getTime() - today.getTime()); e_daysLeft = timeLeft / msPerDay; daysLeft = Math.floor(e_daysLeft); e_hrsLeft = (e_daysLeft - daysLeft)*24; hrsLeft = Math.floor(e_hrsLeft); minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60); document.write("There are only <BR> <H4>" + daysLeft + " days " + hrsLeft + " hours and " + minsLeft + " minutes left </H4> Until Christmas<P>"); </script>
-
- 1
-
-
- scripts
- tehnologie
- (and 2 more)
-
Script: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { color: darkblue; } </style> </head> <body> <p>Click on the icon to toggle between thumbs-up and thumbs-down (like/dislike):</p> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <script> function myFunction(x) { x.classList.toggle("fa-thumbs-down"); } </script> </body> </html>
-
Script: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } body { font: 16px Arial; } /*the container must be positioned relative:*/ .autocomplete { position: relative; display: inline-block; } input { border: 1px solid transparent; background-color: #f1f1f1; padding: 10px; font-size: 16px; } input[type=text] { background-color: #f1f1f1; width: 100%; } input[type=submit] { background-color: DodgerBlue; color: #fff; cursor: pointer; } .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; /*position the autocomplete items to be the same width as the container:*/ top: 100%; left: 0; right: 0; } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } /*when hovering an item:*/ .autocomplete-items div:hover { background-color: #e9e9e9; } /*when navigating through the items using the arrow keys:*/ .autocomplete-active { background-color: DodgerBlue !important; color: #ffffff; } </style> </head> <body> <h2>Autocomplete</h2> <p>Start typing:</p> <!--Make sure the form has the autocomplete function switched off:--> <form autocomplete="off" action="/action_page.php"> <div class="autocomplete" style="width:300px;"> <input id="myInput" type="text" name="myCountry" placeholder="Country"> </div> <input type="submit"> </form> <script> function autocomplete(inp, arr) { /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/ var currentFocus; /*execute a function when someone writes in the text field:*/ inp.addEventListener("input", function(e) { var a, b, i, val = this.value; /*close any already open lists of autocompleted values*/ closeAllLists(); if (!val) { return false;} currentFocus = -1; /*create a DIV element that will contain the items (values):*/ a = document.createElement("DIV"); a.setAttribute("id", this.id + "autocomplete-list"); a.setAttribute("class", "autocomplete-items"); /*append the DIV element as a child of the autocomplete container:*/ this.parentNode.appendChild(a); /*for each item in the array...*/ for (i = 0; i < arr.length; i++) { /*check if the item starts with the same letters as the text field value:*/ if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { /*create a DIV element for each matching element:*/ b = document.createElement("DIV"); /*make the matching letters bold:*/ b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>"; b.innerHTML += arr[i].substr(val.length); /*insert a input field that will hold the current array item's value:*/ b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>"; /*execute a function when someone clicks on the item value (DIV element):*/ b.addEventListener("click", function(e) { /*insert the value for the autocomplete text field:*/ inp.value = this.getElementsByTagName("input")[0].value; /*close the list of autocompleted values, (or any other open lists of autocompleted values:*/ closeAllLists(); }); a.appendChild(b); } } }); /*execute a function presses a key on the keyboard:*/ inp.addEventListener("keydown", function(e) { var x = document.getElementById(this.id + "autocomplete-list"); if (x) x = x.getElementsByTagName("div"); if (e.keyCode == 40) { /*If the arrow DOWN key is pressed, increase the currentFocus variable:*/ currentFocus++; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 38) { //up /*If the arrow UP key is pressed, decrease the currentFocus variable:*/ currentFocus--; /*and and make the current item more visible:*/ addActive(x); } else if (e.keyCode == 13) { /*If the ENTER key is pressed, prevent the form from being submitted,*/ e.preventDefault(); if (currentFocus > -1) { /*and simulate a click on the "active" item:*/ if (x) x[currentFocus].click(); } } }); function addActive(x) { /*a function to classify an item as "active":*/ if (!x) return false; /*start by removing the "active" class on all items:*/ removeActive(x); if (currentFocus >= x.length) currentFocus = 0; if (currentFocus < 0) currentFocus = (x.length - 1); /*add class "autocomplete-active":*/ x[currentFocus].classList.add("autocomplete-active"); } function removeActive(x) { /*a function to remove the "active" class from all autocomplete items:*/ for (var i = 0; i < x.length; i++) { x[i].classList.remove("autocomplete-active"); } } function closeAllLists(elmnt) { /*close all autocomplete lists in the document, except the one passed as an argument:*/ var x = document.getElementsByClassName("autocomplete-items"); for (var i = 0; i < x.length; i++) { if (elmnt != x[i] && elmnt != inp) { x[i].parentNode.removeChild(x[i]); } } } /*execute a function when someone clicks in the document:*/ document.addEventListener("click", function (e) { closeAllLists(e.target); }); } /*An array containing all the country names in the world:*/ var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"]; /*initiate the autocomplete function on the "myInput" element, and pass along the countries array as possible autocomplete values:*/ autocomplete(document.getElementById("myInput"), countries); </script> </body> </html>
-
Script: 1.Html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Neon Light Button Hover</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <script src="main.js"></script> </head> <body> <a href="#"> <span></span> <span></span> <span></span> <span></span> Neon Button </a> </body> </html> 2.CSS body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #031321; font-family: consolas; } a{ position: relative; display: inline-block; padding: 15px 30px; color: #2196f3; text-transform: uppercase; letter-spacing: 4px; text-decoration: none; font-size: 24px; overflow: hidden; transition: 0.2s; } a:hover{ color: #255784; background: #2196f3; box-shadow: 0 0 10px #2196f3,0 0 40px #2196f3,0 0 80px #2196f3; transition-delay: 1s; } a span{ position: absolute; display: block; } a span:nth-child(1){ top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg,transparent,#2196f3); } a:hover span:nth-child(1){ left: 100%; transition: 1s; } a span:nth-child(3){ bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg,transparent,#2196f3); } a:hover span:nth-child(3){ right: 100%; transition: 1s; transition-delay: 0.5s; } a span:nth-child(2){ top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg,transparent,#2196f3); } a:hover span:nth-child(2){ top: 100%; transition: 1s; transition-delay: 0.25s; } a span:nth-child(4){ bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg,transparent,#2196f3); } a:hover span:nth-child(4){ bottom: 100%; transition: 1s; transition-delay: 0.75s; }
-
- 1
-
-
- tehnologie
- www.gamelife.ro
- (and 3 more)
-
Creați un buton care va duce utilizatorul în partea de sus a paginii atunci când faceți clic pe el."Scroll Back To Top Button" Pasul 1. Add HTML: Exemplu: <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> Pasul 2: Pasul 2. Add CSS: #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } #myBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ } Pasul 3. Add JavaScript: //Get the button: mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera }
-
- 1
-
-
- tehnologie
- html
- (and 4 more)
-
Demo: Script: <!DOCTYPE html> <html> <body> <p>Click on the "Choose File" button to upload a file:</p> <form action="/action_page.php"> <input type="file" id="myFile" name="filename"> <input type="submit"> </form> </body> </html>
-
Script: <!DOCTYPE html> <html> <body> <p>Click the radio button to toggle between password visibility:</p> Password: <input type="password" value="FakePSW" id="myInput"><br><br> <input type="checkbox" onclick="myFunction()">Show Password <script> function myFunction() { var x = document.getElementById("myInput"); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } } </script> </body> </html>
-
Saalutare, mai jos o sa va pun cod-ul pentru un Analog Clock. HTML <!DOCTYPE html> <html> <head> <title>Analog Clock - GameLife Romania</title> </head> <body bgcolor="yellow"> <div id="cont"> <h id="twelve"></h> <h id="six"></h> <h id="nine"></h> <h id="three"></h> <div id="hour"></div> <div id="min"></div> <div id="sec"></div> <div id="cir"></div> </div> </body> </html> CSS #cont{ height:270px; width:270px; border-radius:50%; background-color:#000; position:absolute; overflow:hidden; left:0;right:0;top:0;bottom:0; margin:auto; box-shadow:0 0 9px 5px red; } #hour{ height:60px; width:5px; background-color:white; position:absolute ; top:-60px; left:0; right:0; bottom:0; margin:auto; transform:rotate(90deg); transform-origin: bottom; box-shadow:0 0 9px 5px orange; border-radius:30%; } #min{ height:80px; width:5px; background-color:white; position:absolute ; top:-80px; left:0; right:0; bottom:0; margin:auto; transform:rotate(0deg); transform-origin: bottom; box-shadow:0 0 9px 5px orange; border-radius:30%; opacity:1; } #sec{ height:110px; width:5px; background-color:white; position:absolute ; top:-110px; left:0; right:0; bottom:0; margin:auto; transform:rotate(-45deg); box-shadow:0 0 9px 5px orange; transform-origin:bottom; border-radius:30%; } #cir{ height:15px; width:15px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background-color:white; box-shadow:0 0 9px 5px deeppink; border-radius:50%; opacity:1; } h{ position:absolute ; height:20px; width:5px; margin:auto; background:white; box-shadow:0 0 9px 5px deeppink; } #twelve{ right:0; left:0; top:0; } #six{ right:0; left:0; bottom:0; } #nine{ top:0; bottom:0; left:0; height:5px; width:20px; } #three{ top:0; bottom:0; right:0; height:5px; width:20px; } JAVASCRIPT function setDeg(){ var date= new Date(); var hours = ( date.getHours() + date.getMinutes()/60) / 12 * 360; var mins = date.getMinutes() / 60 * 360; var secs = ( date.getSeconds() + date.getMilliseconds()/1000) /60 * 360; document.getElementById('hour').style.transform = 'rotate('+hours+'deg)'; document.getElementById('min').style.transform = 'rotate('+mins+'deg)'; document.getElementById('sec').style.transform = 'rotate('+secs+'deg)'; } setInterval(setDeg,1); DOVADA
