From 5d4e12b3a1de854247b4b4f8a4039afbf7d71525 Mon Sep 17 00:00:00 2001 From: Rohit Mandhyan Date: Tue, 4 Jun 2024 02:46:54 +0530 Subject: [PATCH] added till contact form and slider images --- docs/assets/css/style.css | 349 ++++++++++++++++++-------------- docs/assets/js script/script.js | 63 +++++- docs/index.html | 54 ++++- docs/modal.html | 131 ++++++++++++ 4 files changed, 434 insertions(+), 163 deletions(-) create mode 100644 docs/modal.html diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css index 2b193db..58f196f 100644 --- a/docs/assets/css/style.css +++ b/docs/assets/css/style.css @@ -4,9 +4,9 @@ box-sizing: border-box; } body{ - font-family: "Cormorant SC", serif; - font-style: normal; - + /* font-family: "Cormorant SC", serif; */ + /* font-style: normal; */ + } .left-text, .right-img, img{ display: inline-block; @@ -77,6 +77,91 @@ img{ letter-spacing: 1.4px; color: #FFFFFF; } + +input{ + /* overflow: visible; */ + width: 100% ; + text-align: left; + box-shadow: none; + /* font-weight: 300; */ + background: transparent; + border: none; + border-bottom: 1px solid #b5b6c6; + /* font-size: 18px; */ + height: 45px; + padding: 0px; + margin-bottom: 20px; + color: #a9aabc; + font-size: 16px; + + /* REmoving border form input box https://www.youtube.com/watch?v=NC7sC-6d828 */ + +} +.modal-title{ + margin-left: 15px; + margin-top: 25px; +} +input:focus{ + outline: none; +} +/* .form-check-input { + display: inline; + padding-left: 10px; + margin-bottom: 0px; +} +input[type=checkbox] { + display: inline; +} +https://jsfiddle.net/t5dwp7pg/1/ + + +.formThirdrow{ + margin: 0; + padding: 0; + /* line-height: 1vw; */ + */ +.formThirdrow{ + display: grid; + grid-template-columns: 1fr 5fr; + position: relative; +} +.form-check-label{ + position: absolute; + left: 47px; +} +.btn-submit{ + width: 100%; + height: 60px; + background: #FF3147 0% 0% no-repeat padding-box; + border-radius: 5px ; + border-color: #FF3147; + border: 2px solid #FF3147; + opacity: 1; + font: normal normal 600 20px/26px Poppins; + letter-spacing: 1.4px; + color: #FFFFFF; + margin-top: 25px; + +} +.form-check-input{ + border: 2px solid #FF3147; +} +.form-check-input:checked{ + background-color: #FF3147; + /* color: #FF3147; */ + border: 2px solid #FF3147; +} +.formsecondrow{ + display: inline-block; + grid-template-columns: 1fr 1fr 1fr ; +} +/* #firstName{ + +} */ +#lastName{ + margin-left: 50px; +} + .l4{ position: absolute; top: 1037px; @@ -118,23 +203,54 @@ img{ .slider-container { position: absolute; - overflow: hidden; + /* overflow: hidden; */ width: 100%; height: 526px; - position: absolute; + margin: 50px auto; /* Max width for better visibility */ left: 373px; top: 1271px; + max-width: 1200px; + } .slider { display: flex; transition: transform 0.5s ease; - + /* position: relative; */ + width: calc(370px * 4); /* Width of all images combined */ +} +.webd { + /* position: absolute; */ + /* top: 209.58px; */ + /* left: 64px; */ + margin-top: 209.58px; + margin-left: 64px; + width: 242px; + height: 24px; + /* UI Properties */ + text-align: center; + font: normal normal 600 24px/26px Cormorant SC; + letter-spacing: 0px; + color: #FFFFFF; + opacity: 1; +} +.text-1{ + margin-top: 21px; + margin-left: 25px; + width: 320px; + height: 54px; + /* UI Properties */ + text-align: center; + font: normal normal normal 16px/30px Poppins; + letter-spacing: 0px; + color: #FFFFFF; + opacity: 1; } .slider img { width: 370px; height: 526px; + margin-right: 30px; } .redDiv{ width: 370px; @@ -143,6 +259,12 @@ img{ background: #FF3147 0% 0% no-repeat padding-box; border-radius: 5px; opacity: 0.86; + background-image: url('/docs/assets/images/iconConsole/icon@2x.png'); + background-size: 57px 57px; + background-position: 156px 116px; + margin-right: 30px; + padding-right: 25px; + } .read{ width: 185px; @@ -157,12 +279,15 @@ img{ vertical-align: middle; font: normal normal 600 14px/26px Poppins; letter-spacing: 1.4px; color: #FF3147; + border-color: #FF3147; opacity: 1; /* background-image: url('assets/images/Arrow/arrow@2x.png'); */ - background-image: url(/docs/assets/images/Arrow/arrow@2x.png); + background-image: url('/docs/assets/images/Arrow/arrow@2x.png'); background-position: 127px center; background-size: 37px 10px; padding-left: 21px; + margin-top: 53.92px; + margin-left: 93px; } .arrow{ position: relative; @@ -178,7 +303,7 @@ img{ width: 57px; height: 57px; } -.radio-buttons { +/* .radio-buttons { display: flex; justify-content: center; margin-top: 10px; @@ -188,144 +313,72 @@ img{ width: 20px; height: 20px; margin: 0 5px; - fill: #333; + /* fill: #333; */ + /* cursor: pointer; } -/* .cormorant-sc-light { - font-family: "Cormorant SC", serif; - font-weight: 300; - font-style: normal; - } - - .cormorant-sc-regular { - font-family: "Cormorant SC", serif; - font-weight: 400; - font-style: normal; - } - - .cormorant-sc-medium { - font-family: "Cormorant SC", serif; - font-weight: 500; - font-style: normal; - } - - .cormorant-sc-semibold { - font-family: "Cormorant SC", serif; - font-weight: 600; - font-style: normal; - } - - .cormorant-sc-bold { - font-family: "Cormorant SC", serif; - font-weight: 700; - font-style: normal; - } - */ - - /* .poppins-thin { - font-family: "Poppins", sans-serif; - font-weight: 100; - font-style: normal; - } - - .poppins-extralight { - font-family: "Poppins", sans-serif; - font-weight: 200; - font-style: normal; - } - - .poppins-light { - font-family: "Poppins", sans-serif; - font-weight: 300; - font-style: normal; - } - - .poppins-regular { - font-family: "Poppins", sans-serif; - font-weight: 400; - font-style: normal; - } - - .poppins-medium { - font-family: "Poppins", sans-serif; - font-weight: 500; - font-style: normal; - } - - .poppins-semibold { - font-family: "Poppins", sans-serif; - font-weight: 600; - font-style: normal; - } - - .poppins-bold { - font-family: "Poppins", sans-serif; - font-weight: 700; - font-style: normal; - } - - .poppins-extrabold { - font-family: "Poppins", sans-serif; - font-weight: 800; - font-style: normal; - } - - .poppins-black { - font-family: "Poppins", sans-serif; - font-weight: 900; - font-style: normal; - } - - .poppins-thin-italic { - font-family: "Poppins", sans-serif; - font-weight: 100; - font-style: italic; - } - - .poppins-extralight-italic { - font-family: "Poppins", sans-serif; - font-weight: 200; - font-style: italic; - } - - .poppins-light-italic { - font-family: "Poppins", sans-serif; - font-weight: 300; - font-style: italic; - } - - .poppins-regular-italic { - font-family: "Poppins", sans-serif; - font-weight: 400; - font-style: italic; - } - - .poppins-medium-italic { - font-family: "Poppins", sans-serif; - font-weight: 500; - font-style: italic; - } - - .poppins-semibold-italic { - font-family: "Poppins", sans-serif; - font-weight: 600; - font-style: italic; - } - - .poppins-bold-italic { - font-family: "Poppins", sans-serif; - font-weight: 700; - font-style: italic; - } - - .poppins-extrabold-italic { - font-family: "Poppins", sans-serif; - font-weight: 800; - font-style: italic; - } - - .poppins-black-italic { - font-family: "Poppins", sans-serif; - font-weight: 900; - font-style: italic; - } */ - \ No newline at end of file +.radio-buttons img.active { + border: 2px solid #FF3147; + border-radius: 50%; +} */ +.active{ + display: inline-block; + position: absolute; + top: 596px; + left: 0px; + width: 30px; + height: 30px; + /* UI Properties */ + background-image: url('/docs/assets/images/1sideScrollRadio/1.svg'); + opacity: 1; + /* z-index: 2; */ +} +.inactive{ + display: inline-block; + position: absolute; + top: 608px; + left: 54px; + width: 8px; + height: 8px; + /* UI Properties */ + background: transparent url('/docs/assets/images/2blackRadio/2.svg') 0% 0% no-repeat padding-box; + opacity: 1; + z-index: 2; +} +.inactive-copy{ + display: inline-block; + position: absolute; + top: 608px; + left: 88px; + width: 8px; + height: 8px; + /* UI Properties */ + background: transparent url('/docs/assets/images/2blackRadio/2.svg') 0% 0% no-repeat padding-box; + opacity: 1; + z-index: 2; +} +.l7{ + position: absolute; + top: 2067px; + left: 857px; + width: 206px; + height: 24px; + /* UI Properties */ + text-align: center; + font: normal normal 600 24px/26px Cormorant SC; + letter-spacing: 0px; + color: #FF3147; + opacity: 1; +} +.l8{ + position: absolute; + top: 2131px; + left: 746px; + width: 428px; + height: 45px; + text-align: center; + font: normal normal bold 45px/65px Cormorant SC; + letter-spacing: 0px; + color: #000000; + text-transform: uppercase; + opacity: 1 +} \ No newline at end of file diff --git a/docs/assets/js script/script.js b/docs/assets/js script/script.js index d3420a1..d29c023 100644 --- a/docs/assets/js script/script.js +++ b/docs/assets/js script/script.js @@ -1,19 +1,60 @@ +// const slider = document.querySelector('.slider'); +// const radioButtons = document.querySelectorAll('.radio-buttons img'); + +// let currentIndex = 0; + +// function updateSlider() { +// const translateX = -currentIndex * 370; // Adjust based on image width +// slider.style.transform = `translateX(${translateX}px)`; +// } + +// radioButtons.forEach((button, index) => { +// button.addEventListener('click', () => { +// currentIndex = index; +// updateSlider(); +// }); +// }); + +// // Initialize slider +// updateSlider(); + const slider = document.querySelector('.slider'); -const radioButtons = document.querySelectorAll('.radio-buttons img'); + const radioButtons = document.querySelectorAll('.radio-buttons img'); -let currentIndex = 0; + let currentIndex = 0; -function updateSlider() { - const translateX = -currentIndex * 370; // Adjust based on image width + function updateSlider() { + const translateX = -currentIndex * 400; // Adjust based on image width + margin slider.style.transform = `translateX(${translateX}px)`; -} -radioButtons.forEach((button, index) => { + // Update active class on radio buttons + radioButtons.forEach((button, index) => { + if (index === currentIndex) { + button.classList.add('active'); + } else { + button.classList.remove('active'); + } + }); + } + + radioButtons.forEach((button, index) => { button.addEventListener('click', () => { - currentIndex = index; - updateSlider(); + currentIndex = index; + updateSlider(); }); -}); + }); + + // Initialize slider + updateSlider(); + + // checkbox checked or not for submit button + // https://www.kodyaz.com/articles/javascript-enable-disable-button-by-values-of-checkboxes-checked.aspx -// Initialize slider -updateSlider(); \ No newline at end of file + // https://codepen.io/jasonnarciso/pen/JdVPOW + $('#checkbox').click(function() { + if ($(this).is(':checked')) { + $('#submit').removeAttr('disabled'); + } else { + $('#submit').attr('disabled', 'disabled'); + } + }); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 380472a..f5f3e89 100644 --- a/docs/index.html +++ b/docs/index.html @@ -21,7 +21,46 @@
- + + + +
@@ -35,23 +74,30 @@ Image 1 Image 2
- +

WEB DEVELOPMENT

Morbi sed lacus nec risus finibus feugiat et fermentum nibh. Pellentesque

- + + +
- Image 3 + Image 3
+
+
+
WHY CHOOSE US
+
Why We Are Best
+
diff --git a/docs/modal.html b/docs/modal.html new file mode 100644 index 0000000..1a41310 --- /dev/null +++ b/docs/modal.html @@ -0,0 +1,131 @@ + + + + + + Modal Experimentation to make a contactUs form + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + +
+ + + + + \ No newline at end of file