dennis/Website-Templates
1
0
Fork 0
mirror of https://github.com/dawidolko/Website-Templates.git synced 2026-02-04 01:30:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Website templates

Browse Source
This commit is contained in:
Dawid Olko
2023-07-26 19:33:39 +02:00
commit 0d2d73a034
10339 changed files with 2002333 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
theme-changer-template/index.css Normal file
View File

@@ -0,0 +1,79 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300&display=swap');
* {
font-family: 'Nunito', sans-serif;
}
body {
background: #ff5349;
}
.blur {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(90deg, #ff5349 14%, #add8e6 47%, #ffc87c 100%);
filter: blur(1) opacity(0.1);
}
.main {
border-radius: 2vw;
width: 40vw;
height: 45vh;
filter: drop-shadow(0px 0px 10px #00000054);
background: #ffdab948;
}
.main h1 {
color: #ffffff;
font-size: 2vw;
}
.main div {
display: flex;
align-items: center;
flex-direction: column;
}
.main div div h1 {
font-size: 1.5vw;
}
.main div div button {
background: linear-gradient(90deg, #ffc87c6b 14%, #ff52496b 100%);
color: #ffffff;
font-size: 1.2vw;
border-radius: 2vw;
border: none;
padding: 0.75vw 1.75vw;
}
@media only screen and (max-width: 600px) {
.main {
width: 80vw;
height: 70vw;
}
.main h1 {
font-size: 7vw;
}
.main div div h1 {
font-size: 4.3vw;
}
.main div div button {
font-size: 4vw;
border-radius: 7vw;
border: none;
padding: 2vw 3.75vw;
background: linear-gradient(180deg, #ffc87c6b 14%, #ff52496b 100%);
}
.blur {
background: linear-gradient(0deg, #ff5349 14%, #add8e6 47%, #ffc87c 100%);
}
}

33
theme-changer-template/index.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="index.css">
<title>Light/Dark Theme</title>
</head>
<body>
<div class="blur">
<section class="main container">
<h1 class="text-center">Theme Changer</h1>
<div>
<div>
<h1>Select Background-Color</h1>
<input type="color" id="bgColor-1" name="favcolor" value="#ff0000">
<input type="color" id="bgColor-2" name="favcolor" value="#ff0000">
<input type="color" id="bgColor-3" name="favcolor" value="#ff0000">
<button class="text-center" id="bgChange">Save Background-Color</button>
</div>
</div>
</section>
</div>
<script src="index.js"></script>
</body>
</html>

12
theme-changer-template/index.js Normal file
View File

@@ -0,0 +1,12 @@
const bg1 = document.getElementById('bgColor-1');
const bg2 = document.getElementById('bgColor-2');
const bg3 = document.getElementById('bgColor-3');
const blur = document.querySelector('.blur');
document.querySelector('#bgChange').addEventListener('click', function() {
blur.style.background = `linear-gradient(90deg, ${bg1.value} 14%, ${bg2.value} 47%, ${bg3.value} 100%)`;
})
if ($(window).width() <= 650) {
document.querySelector('#bgChange').addEventListener('click', function() {
blur.style.background = `linear-gradient(180deg, ${bg1.value} 14%, ${bg2.value} 47%, ${bg3.value} 100%)`;
})
}