From cf1e0af7405bbd8ab1b01d686c5d223b7f511b80 Mon Sep 17 00:00:00 2001 From: Udham Singh <116259376+udham31@users.noreply.github.com> Date: Sat, 24 Jun 2023 09:44:29 +0530 Subject: [PATCH] job applicaton --- project2.html | 100 +++++++++++++++++++ style.css | 259 ++++++++++++-------------------------------------- 2 files changed, 160 insertions(+), 199 deletions(-) create mode 100644 project2.html diff --git a/project2.html b/project2.html new file mode 100644 index 00000000..9fada7d1 --- /dev/null +++ b/project2.html @@ -0,0 +1,100 @@ + + + + + + + JOB APPLICATION FORM + + + +
+
+

+ Job Application + (WEB) +

+
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+
+ + diff --git a/style.css b/style.css index 87c51369..db2d5117 100644 --- a/style.css +++ b/style.css @@ -1,228 +1,89 @@ *{ margin: 0; padding: 0; + box-sizing: border-box; } - - -:root{ - --navbar-height: 59px; -} - -#navbar{ - display: flex; - align-items: center; - position: relative; - top: 0px; -} - -#pic1{ - margin: 10px 35px; -} - -#pic1 img{ - height : 56px; - margin : 13px 15px; - +body{ + background-color: #e4bebe; } +.container{ + margin: 0 auto; + max-width: 900px; - -#navbar ul{ - display: flex; -} - -#navbar::before{ - content: ""; - background-color: black; - position: absolute; - top: 0px; - left: 0px; - height: 100%; - width: 100%; - z-index: -1; } - -#navbar ul li{ - list-style: none; - font-size: 1.3rem; +.apply_box{ + max-width: 600px; + padding:20px; + background-color: aliceblue; + margin: 0 auto; + margin-top: 50px; + + box-shadow: 4px 3px 5pc rgb(1,1,1); + border-radius: 10px; } - -#navbar ul li a{ - color: white; - display: block; - padding: 3px 22px; - border-radius: 20px; - text-decoration: none; +.title_small{ + font-size: 20px; } +.form_container{ + margin-top: 20px; + display: grid; + grid-template-columns: repeat(auto-fit,minmax(200px, 1fr)); + gap: 20px; -#navbar ul li a:hover{ - color: yellow; - background-color: rgb(5, 5, 5); - } - -#home{ +.form_control{ display: flex; flex-direction: column; - padding: 3px 200px; - height: 650px; - justify-content: center; - align-items: center; } - -#home::before{ - content: ""; - background: url('../PIC_1.jpg') no-repeat center center/cover; - position: absolute; - top: 0px; - left: 0px; - height: 80%; - width: 100%; - z-index: -1; - opacity: 0.89; -} - -#home.h1{ - color: black; - text-align: center; - font-size: 3.5rem; - font-family: 'Noto Sans', sans-serif; +label{ + font-size: 15px; + margin-bottom: 5px; } +.size_control{ + margin-left: 100px; -/* services*/ - - -#services{ - margin: 30px; - display: flex; } - -#services .box{ - border: 5px solid yellow; - padding: 34px; - margin: 3px 6px; - border-radius: 29px; - background: rgb(10, 10, 6); +input,select,textarea{ + padding: 6px 10px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 10px; } - -#services .box img{ - height: 120px; - margin: auto; - display: block; +.button_container{ + margin-top: 10px; + margin-left: 170px; } - - -#client-section{ - position: relative; - height: 344px; -} - -#client-section::before{ - content: ""; - position: absolute; - background: url('../bg1.jpg') no-repeat center center/cover; - width: 100%; - height: 200%; - z-index: -1; - opacity: 0.89;; -} - -#clients{ - display: flex; - justify-content: center; - align-items: center; - -} - -.client-item{ - padding: 34px; +input:focus{ + outline-color:red; } - -#client img{ - height: 60px; -} - -#contact{ - position: relative; -} - -#contact::before{ - content:""; - position: absolute; - width: 100%; - height: 100%; - z-index: -1; - opacity: 0.7; - background: rgb(240, 241, 241); -} - -#contact-box{ - display: flex; - justify-content: center; - align-items: center; - padding-bottom: 34px; -} - -#contact-box input,#contact-box textarea{ - width: 100%; - padding: 9px 20px; - border-radius: 9px; - font-size: 1.1rem; -} - -#contact-box form{ - width: 40%; -} - -#contact-box label{ - font-size: 1.5rem; - font-family: 'Noto Sans', sans-serif; - -} - -footer{ - background: black; +button{ + background-color: rgb(232, 146, 84); + border: transparent solid 2px; + border-radius: 4px; color: white; - padding: 10px 20px; + padding: 6px 8px; + transition: 0.3sec ease-in; } -.h-primary{ - font-size: 3.4rem; - padding: 50px; - -} - -.h-secondary{ - font-size: 2.8rem; - padding: 45px; - font-family: 'Noto Sans', sans-serif; - color:azure - -} - -.btn{ - padding: 6px 20px; - border: 2px solid white; - background-color: black; - color: white; - margin: 25px; - font-size: 1.2rem; - border-radius: 20px; +button:hover{ + background-color: #ccc; + border: 2px solid red; + color: black; + transition: 0.3sec ease-out; cursor: pointer; -} -.center{ - text-align: center; - color: azure; } +.textarea_control{ + grid-column: 1 /span 2; -.c1{ - text-align: center; } +.textarea_control textarea{ + width: 100%; +} +@media(max-width:460px){ + .textarea_control{ + grid-column: 1 /span 1; + + } - - - - - - - +} \ No newline at end of file