अध्ययन रोशनी

514 AmirAliAkrami

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

8 February 2025

चमकती रोशनी लॉगिन फॉर्म

HTML

CSS

/* Style the container */
.lamp-container {
  position: relative;
  width: 400px;
  height: 400px;

background-color: #192c3d;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.lamp-container:after {
  content: "";
  position: absolute;
  background-color: #3b312a;
  width: 350px;
  height: 13px;
  top: 300px;
  left: 25px;
}

.lamp-container:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 100px;
  background-color: #2f425a;
  top: 300px;
  left: 40px;
  box-shadow:
    5px 0 #1c364d,
    20px 0 #2f425a,
    25px 0 #1c364d,
    290px 0 #1c364d,
    295px 0 #2f425a,
    310px 0 #1c364d,
    315px 0 #2f425a;
}

/* Style the window, computer, coffee and the picture   */
.computer {
  position: absolute;
  border: 8px solid #535460;
  width: 120px;
  height: 70px;
  background-color: #5b6580;
  top: 187px;
  left: 150px;
}

.computer:before {
  content: "";
  position: absolute;
  background-color: #42434f;
  width: 30px;
  height: 30px;
  top: 78px;
  left: 45px;
}

.computer:after {
  content: "";
  position: absolute;
  background-color: #31323b;
  width: 100px;
  height: 7px;
  top: 98px;
  left: 10px;
}

.window {
  position: absolute;
  width: 200px;
  height: 250px;
  border: 10px solid #243e54;
  background-color: #376ea3;
  left: 180px;
}

.window:before {
  content: "";
  position: absolute;
  height: 250px;
  width: 10px;
  background-color: #243e54;
  left: 95px;
}

.window:after {
  content: "";
  position: absolute;
  background-color: #335266;
  width: 220px;
  height: 10px;
  left: -10px;
  border-radius: 0 0 20px 20px;
  box-shadow:
    0 15px #335266,
    0 30px #335266,
    0 45px #335266,
    0 60px #335266,
    0 75px #335266,
    0 90px #335266,
    0 105px #335266,
    0 120px #335266,
    0 135px #335266,
    0 150px #335266,
    0 165px #335266,
    0 180px #335266,
    0 195px #335266,
    0 210px #335266,
    0 225px #335266,
    0 240px #335266;
}

.picture {
  position: absolute;
  width: 100px;
  height: 70px;
  border: 5px solid #2f4f67;
  background-color: #8b8c8e;
  left: 25px;
  top: 80px;
  overflow: hidden;
}

.picture:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background-color: #fff084;
  left: 15px;
  top: 7px;
}

.picture:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #3e4758;
  top: 30px;
  box-shadow:
    45px 20px #606c82,
    40px 10px #3e4758,
    80px 20px #3e4758,
    60px -10px #606c82;
}

.screen {
  position: absolute;
  width: 120px;
  height: 70px;
  overflow: hidden;
  top: 195px;
  left: 158px;
}

.screen:before {
  content: "";
  position: absolute;
  width: 40px;
  height: 20px;
  opacity: 0.3;
  background-color: #0e212f;
  top: 10px;
  left: 15px;
  box-shadow:
    0 30px #0e212f,
    50px 0 #0e212f,
    50px 20px #0e212f,
    50px 30px #0e212f;
}

.screen:after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.2);
  width: 150px;
  height: 150px;
  transform: skew(60deg);
  left: 65px;
  top: -38px;
}

.coffee {
  position: absolute;
  width: 40px;
  height: 30px;
  background-color: white;
  border-radius: 0 0 20px 20px;
  top: 270px;
  left: 295px;
}

.coffee:before {
  content: "";
  position: absolute;
  background-color: #d16d72;
  width: 60px;
  height: 5px;
  border-radius: 0 0 30px 30px;
  top: 25px;
  left: -10px;
}

.coffee:after {
  content: "";
  position: absolute;
  border: 4px solid white;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 32px;
  top: 2px;
}

/* Style the lamp */
.lamp-base {
  position: absolute;
  width: 70px;
  height: 7px;
  background-color: #0e8488;
  top: 292px;
  left: 50px;
  z-index: 2;
}

.lamp-base:before {
  content: "";
  position: absolute;
  width: 60px;
  height: 10px;
  background-color: #0b9496;
  border-radius: 10px 10px 0 0;
  top: -10px;
  left: 5px;
}

.tube {
  background-color: #979dac;
  position: absolute;
  width: 5px;
  height: 100px;
  top: 190px;
  left: 50px;
  transform: rotate(-20deg);
  z-index: 1;
  box-shadow: 10px 0 #7e8491;
}

.tube:before {
  content: "";
  position: absolute;
  background-color: #979dac;
  width: 5px;
  height: 100px;
  transform: rotate(80deg);
  top: -70px;
  left: 60px;
  box-shadow: 10px 0 #7e8491;
}

.tube:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: #1b7776;
  border: 3px solid #175961;
  outline: 3px solid #1b7776;
  top: -13px;
  left: 0;
}

.lamp-shade {
  position: absolute;
  background-color: #0f2230;
  width: 30px;
  height: 30px;
  border-radius: 30px 30px 0 0;
  top: 110px;
  left: 125px;
  z-index: 3;
  transform: rotate(-25deg);
}

.lamp-shade:before {
  content: "";
  position: absolute;
  border-radius: 50px 50px 0 0;
  background-color: #089697;
  width: 70px;
  height: 30px;
  top: 28px;
  left: -20px;
  transform: rotate(5deg);
}

.light {
  border-radius: 50%;
  position: absolute;
  background-color: #fff07c;
  width: 30px;
  height: 30px;
  top: 145px;
  left: 140px;
}

.light:before {
  content: "";
  position: absolute;
  width: 45px;
  height: 0;
  border-bottom: 150px solid rgba(255, 240, 124, 0.3);
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  transition: 0.3s;
  top: 10px;
  left: -3px;
  transform: skew(20deg);
  opacity: 0;
}

.light:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 7px;
  background-color: #1e5b63;
  top: 130px;
  left: -47px;
  border-radius: 5px 5px 0 0;
  transition: 0.2s;
  transform-origin: bottom;
  cursor: pointer;
}

/* Use the input checkbox to on/off the light */
.ps#light {
  display: none;
}

#light:checked + .light:after {
  transform: scaleY(0.5);
}

#light:checked + .light:before {
  opacity: 1;
}

अध्ययन रोशनी

अनुशंसित

बदलती रोशनी

दीपक की रोशनी

चमकती रोशनी लॉगिन फॉर्म

HTML

CSS

JS

अनुशंसित

बदलती रोशनी

दीपक की रोशनी

चमकती रोशनी लॉगिन फॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS