diff --git a/index.html b/index.html new file mode 100644 index 0000000..ed85db7 --- /dev/null +++ b/index.html @@ -0,0 +1,125 @@ + + + + + + + + + + + CODECHEF + + + +
+
+
+
+ +
+

+ CODECHEF +

+
+
+ +
+
+
+

LOGIN

+
+ +
+ + + + +
+ +
+ + + + +
+ +
+ +
+ + + + +
+
+ +
+ +

REGISTER

+
+ +
+ + + + +
+ + +
+ + + + +
+ +
+ +
+ + + +
+ + +
+
+ +
+
+

Who are we?



+

We are a club in vitc Lorem ipsum dolor sit amet consectetur adipisicing elit. Error officiis + mollitia + nesciunt vel ea ipsa, similique magni hic nobis neque, voluptate molestiae perferendis, pariatur nam + eius! Officia rerum dolor est quo id vitae dolorem ipsum quaerat exercitationem dolorum aliquam, + aspernatur aliquid nemo eos magnam blanditiis voluptatem, eveniet temporibus! Placeat, ratione, + minus + eaque ducimus eius error tempora quae deleniti totam at amet fugiat dolorum illum assumenda! +

+ +
+
+
+ +
+ + + +
+ +
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..29b6d75 --- /dev/null +++ b/style.css @@ -0,0 +1,286 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background: linear-gradient(90deg, #751075, #751075, rgb(250, 240, 245), rgb(250, 240, 245)); + overflow: hidden; +} + +.main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100vh; + overflow: hidden; + padding: 0; +} + +.heading { + width: 100%; + margin-top: 0; + margin-bottom: 20px; + font-size: 3.5rem; + font-weight: 800; + background: linear-gradient(90deg, #751075, #751075, rgb(250, 240, 245), rgb(250, 240, 245)); + display: flex; + justify-content: center; + align-items: center; +} +.wrapper { + height: 35rem; + border-radius: 30px; + margin-bottom: 50px; + display: flex; + justify-content: space-evenly; + display: grid; + grid-template-columns: repeat(auto-fit,minmax(30%,1fr)); + padding: 10px; +} +.wrapper .form_box { + top: 0; + margin-left:7rem; + margin-right: 5rem; + height: 100%; + background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.4)); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 30px; + border: 0.3px solid rgba(255, 255, 255, 0.18); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.90); + padding: 30px; + perspective: 1000; +} +.left-section{ + width: 50%; +} +.innerbox { + position: relative; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: transform 1s; +} +.front, +.back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + margin-top: 40px; + background-position: center; + background-size: cover; + box-sizing: border-box; +} +.back { + transform: rotateY(180deg); +} +.form_box h1 { + color: white; + text-align: center; +} +.form_box .input_box { + height: 40px; + width: 100%; + margin: 50px 0; +} +.input_box input { + margin-top: 10px; + height: 100%; + width: 100%; + align-items: center; + background: transparent; + border: 2px solid white; + border-radius: 20px; + color: white; + font-size: 17px; + font-weight: 400; + padding-left: 10px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.input_box label { + color: white; +} +.input_box i { + color: white; + transform: 0.5s; +} +.buttons { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + border: 2px solid white; + border-radius: 30px; + margin-top: 25px; + height: 45px; +} +.btns{ + position: relative; + width: 100%; + align-items: center; + height: 45px; + background: linear-gradient(-90deg,rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.4)); + border: 2px solid white; + border-radius: 30px; + font-size: 17px; + margin-top: 25px; + color: white; + + cursor: pointer; + size: 15px; +} +.btn { + align-items: center; + height: 45px; + width: 70%; + background: #751075; + border: 2px solid white; + border-radius: 30px; + font-size: 17px; + color: white; + cursor: pointer; + size: 15px; +} +#disable { + background: white; + color: #751075; + border: 2px solid white; + border-radius: 30px; +} +.wrapper #info { + position: relative; + height: 100%; + background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1), rgba(250, 240, 245, 1.5) ); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 0.3px solid rgba(255, 255, 255, 0.18); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.90); + margin-top: 2px; + color: #751075; + padding-left: 35px; + padding-right: 35px; + padding-bottom: 20px; + padding-top: 30px; + border-radius: 30px; + font-size: 0.9rem; + font-weight: 750; +} +.right-section{ + width: 100%; +} +#info p{ + height: 100%; +} +@media screen and (max-width:390px){ + .scroll-bar{ + height: 100%; + width: 100%; + border: 1px solid grey; + overflow: auto; + } + .left-section{ + width:90%; + } + .right-section{ + width:100%; + height: 100%; + } + body{ + font-size: 1.1rem; + } + .heading{ + font-size: 2.8rem; + } + .wrapper .form_box { + height: 500px; + background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); + } +} +@media screen and (max-width:700px){ + .scroll-bar{ + height: 100%; + width: 100%; + border: 1px solid grey; + overflow: auto; + } + .left-section{ + width:90%; + } + .right-section{ + width:90%; + margin-left: 1.5rem; + height: 100%; + } + .wrapper{ + grid-gap: 14rem; + } + .wrapper .form_box { + margin-left:1.1rem; + margin-right: 5rem; + height: 500px; + background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); + } +} +@media screen and (max-width:768px){ + .scroll-bar{ + height: 100%; + width: 100%; + border: 1px solid grey; + overflow: auto; + } + .left-section{ + width:90%; + } + .right-section{ + width:90%; + height: 100%; + } + .wrapper{ + grid-gap: 17rem; + } + .wrapper .form_box { + margin-left:1.1rem; + margin-right: 5rem; + height: 500px; + background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); + } +} +@media screen and (max-width:1200px){ + .scroll-bar{ + height: 100%; + width: 100%; + border: 1px solid grey; + overflow: auto; + } + .left-section{ + width:90%; + } + .right-section{ + width:90%; + height: 100%; + } + .wrapper{ + grid-gap: 17rem; + } + .wrapper .form_box { + top: 0; + margin-left:1.1rem; + margin-right: 5rem; + height: 500px; + background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); + } +} + + + +