diff --git a/100_projects/77-control-brightness/bg.jpg b/100_projects/77-control-brightness/bg.jpg
new file mode 100644
index 0000000..22f49e9
Binary files /dev/null and b/100_projects/77-control-brightness/bg.jpg differ
diff --git a/100_projects/77-control-brightness/index.html b/100_projects/77-control-brightness/index.html
new file mode 100644
index 0000000..b05a521
--- /dev/null
+++ b/100_projects/77-control-brightness/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+ document
+
+
+
+
+
+
+
+
diff --git a/100_projects/77-control-brightness/main.js b/100_projects/77-control-brightness/main.js
new file mode 100644
index 0000000..a6fedaf
--- /dev/null
+++ b/100_projects/77-control-brightness/main.js
@@ -0,0 +1,6 @@
+rangeInput = document.getElementById('range');
+container = document.getElementsByClassName('container')[0];
+
+rangeInput.addEventListener("change",function(){
+ container.style.filter = "brightness(" + rangeInput.value + "%)";
+});
\ No newline at end of file
diff --git a/100_projects/77-control-brightness/style.css b/100_projects/77-control-brightness/style.css
new file mode 100644
index 0000000..b6e2bfd
--- /dev/null
+++ b/100_projects/77-control-brightness/style.css
@@ -0,0 +1,43 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+.container{
+ background: url(bg.jpg) no-repeat center;
+ min-height: 100vh;
+ width: 100%;
+ background-size: cover;
+ background-position: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.brightness-box{
+ width: 400px;
+ height: 60px;
+ background: #f9f9f9;
+ border-radius: 8px;
+ padding: 0 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.brightness-box i{
+ margin: 0 10px;
+}
+#range{
+ width: 100%;
+ -webkit-appearance: none;
+ background: #0a85ff;
+ height: 3px;
+ outline: none;
+}
+#range::-webkit-slider-thumb{
+ -webkit-appearance: none;
+ width: 22px;
+ height: 22px;
+ background: #333;
+ border-radius: 50%;
+ cursor: pointer;
+}