diff --git a/Registration page/display.html b/Registration page/display.html new file mode 100644 index 0000000..f889ad4 --- /dev/null +++ b/Registration page/display.html @@ -0,0 +1,33 @@ + + + + + + + + + Display Page + + +
+
+
Name:
+
+
+
+
Email:
+
+
+
+
Branch:
+
+
+
+
Birthday:
+
+
+
+ + + \ No newline at end of file diff --git a/Registration page/display_details.html b/Registration page/display_details.html new file mode 100644 index 0000000..3a22de9 --- /dev/null +++ b/Registration page/display_details.html @@ -0,0 +1,37 @@ + + + + + + + + + Display Page + + +
+
+
First Name:
+
+
+
+
Last Name:
+
+
+
+
Email:
+
+
+
+
Number:
+
+
+
+
Birth date:
+
+
+
+ + + \ No newline at end of file diff --git a/Registration page/index.html b/Registration page/index.html new file mode 100644 index 0000000..3a22de9 --- /dev/null +++ b/Registration page/index.html @@ -0,0 +1,37 @@ + + + + + + + + + Display Page + + +
+
+
First Name:
+
+
+
+
Last Name:
+
+
+
+
Email:
+
+
+
+
Number:
+
+
+
+
Birth date:
+
+
+
+ + + \ No newline at end of file diff --git a/Registration page/main.js b/Registration page/main.js new file mode 100644 index 0000000..3bb1b15 --- /dev/null +++ b/Registration page/main.js @@ -0,0 +1,21 @@ +function store() { + var inputFName = document.getElementById('fname'); + var inputLName = document.getElementById('lname'); + var inputEmail = document.getElementById('email'); + var inputNumber = document.getElementById('number'); + var inputDate = document.getElementById('date'); + localStorage.setItem('fname',inputFName.value) + localStorage.setItem('lname',inputLName.value) + localStorage.setItem('email',inputEmail.value) + localStorage.setItem('number',inputNumber.value) + localStorage.setItem('date',inputDate.value) +} + +window.addEventListener('load',()=>{ + document.getElementById('displayFName').innerHTML = localStorage.fname; + document.getElementById('displayLName').innerHTML = localStorage.lname; + document.getElementById('displayEmail').innerHTML = localStorage.email; + document.getElementById('displayNumber').innerHTML = localStorage.number; + document.getElementById('displayDate').innerHTML = localStorage.date; + +}) \ No newline at end of file diff --git a/Registration page/styles.css b/Registration page/styles.css new file mode 100644 index 0000000..da9be31 --- /dev/null +++ b/Registration page/styles.css @@ -0,0 +1,147 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins',sans-serif; +} +body{ + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + background: linear-gradient(135deg, #71b7e6, #3811c7); +} +.container{ + max-width: 700px; + width: 100%; + background-color: #fff; + padding: 25px 30px; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0,0,0,0.15); +} +.container .title{ + font-size: 25px; + font-weight: 500; + position: relative; +} +.container .title::before{ + content: ""; + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 30px; + border-radius: 5px; + background: linear-gradient(135deg, #71b7e6, #9b59b6); +} +.content form .user-details{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px 0 12px 0; +} +form .user-details .input-box{ + margin-bottom: 15px; + width: calc(100% / 2 - 20px); +} +form .input-box span.details{ + display: block; + font-weight: 500; + margin-bottom: 5px; +} +.user-details .input-box input{ + height: 45px; + width: 100%; + outline: none; + font-size: 16px; + border-radius: 5px; + padding-left: 15px; + border: 1px solid #ccc; + border-bottom-width: 2px; + transition: all 0.3s ease; +} +.user-details .input-box input:focus, +.user-details .input-box input:valid{ + border-color: #9b59b6; +} + form .gender-details .gender-title{ + font-size: 16px; + font-weight: 500; + } + form .category{ + display: flex; + width: 80%; + margin: 14px 0 ; + justify-content: space-between; + } + form .category label{ + display: flex; + align-items: center; + cursor: pointer; + } + form .category label .dot{ + height: 18px; + width: 18px; + border-radius: 50%; + margin-right: 10px; + background: #d9d9d9; + border: 5px solid transparent; + transition: all 0.3s ease; +} + #dot-1:checked ~ .category label .one, + #dot-2:checked ~ .category label .two, + #dot-3:checked ~ .category label .three{ + background: #9b59b6; + border-color: #d9d9d9; + } + form input[type="radio"]{ + display: none; + } + form .button{ + height: 50px; + margin: 35px 0 + } + form .button input{ + height: 100%; + width: 100%; + border-radius: 5px; + border: none; + color: #fff; + font-size: 18px; + font-weight: 500; + letter-spacing: 1px; + align-self: center; + cursor: pointer; + transition: all 0.3s ease; + background: linear-gradient(135deg, #090a0a, #121411); + } + form .button input:hover{ + /* transform: scale(0.99); */ + background: linear-gradient(-135deg, #71b7e6, #bde921); + } + @media(max-width: 584px){ + .container{ + max-width: 100%; +} +form .user-details .input-box{ + margin-bottom: 15px; + width: 100%; + } + form .category{ + width: 100%; + } + .content form .user-details{ + max-height: 300px; + overflow-y: scroll; + } + .user-details::-webkit-scrollbar{ + width: 5px; + } + } + @media(max-width: 459px){ + .container .content .category{ + flex-direction: column; + } +} diff --git a/Website designs/index.css b/Website designs/index.css new file mode 100644 index 0000000..0b2bddb --- /dev/null +++ b/Website designs/index.css @@ -0,0 +1,236 @@ +body{ + background-color:rgb(231, 231, 231); + font-size: 15px; +} +.container{ + margin: 30px; + padding: 10px; + height: 640px; +} +/*Stylesheet*/ +.main{ + background-color: white; +} +#menu a:link,#menu a:visited{ + color: black; + text-decoration: none; + cursor:auto; +} +#defaultmenu a:link,#defaultmenu a:visited{ + display: inline; + color: blue; + font-size: 16px; +} +/*Stylesheet 1*/ +.border{ + border-radius: 4px; +} +#top{ + background-color:rgb(45, 165, 75); + color: white; + margin: 20px; + padding: 3px 20px 20px; + line-height: 15px; +} +#left{ + float: left; + width:25%; + margin-left: 10px; +} +#left a:link,#left a:visited{ + width: 165px; + background-color: rgb(231, 231, 231); + text-decoration: none; + color: black; + display: block; + margin: 5px 0px; + padding: 4px; + border-radius: 4px; + cursor: pointer; + border: 1px rgb(180, 178, 178) solid; +} +#left a:hover{ + background-color: white; +} +#left a:first-child{ + background-color: rgb(45, 165, 75); + color: white; + font-weight: bold; +} +#mid{ + float: left; + width:40%; +} +#mid a:link,#mid a:visited{ + color: black; + display: inline; +} +#mid a:hover{ + text-decoration: none; +} + +#right{ + background-color:rgb(67, 128, 219); + color: white; + float: right; + width: 25%; + margin-right: 45px; + padding: 20px; + height: 50%; + box-sizing: border-box; +} +#bottom{ + float: right; + background-color: rgb(231, 231, 231); + font-size: 13px; + margin: 20px 40px; + padding: 15px 30px; + border: 1px rgb(180, 178, 178) solid; + height: 60px; + clear: both; +} +/*Stylesheet 2*/ +#one{ + color: white; + font-size: 20px; + padding: 0px 20px; + margin-bottom: 35px; + line-height: 20px; +} +.two{ + padding: 5px 20px 20px; +} +.two a:link,.two a:visited{ + color: rgb(201,41,41); + text-decoration: none; +} +.two a:hover{ + color: rgb(201,41,41); + text-decoration: underline; +} +#three{ + background-color: rgb(248, 210, 248); + color: rgb(201, 41, 41); + font-size: 16px; +} +#four{ + color: white; + text-align: center; + padding: 10px; + margin-top: 10px; +} +#five{ + margin: 40px; +} +#five a:link,#five a:visited{ + background-color: white; + color: rgb(201, 41, 41); + text-decoration: none; + text-align: center; + padding: 7px 30px; + margin: 10px; + font-size: 18px; + border-radius: 20px; +} +#five a:hover{ + background-color: rgb(201, 41, 41); + border: 1px solid white; + color: white; +} +#five a.active{ + background-color: rgb(201, 41, 41); + border: 1px solid white; + color: white; +} +/* Stylesheet 3*/ +#main_page{ + padding: 20px; +} +#top_link{ + margin: 40px 0; +} +#top_link a:link,#top_link a:visited{ + color: white; + background-color: rgb(94, 100, 100); + padding: 7px 30px; + margin: 0 3px; + text-decoration: none; + +} +#top_link a.activelink{ + background-color: rgb(45, 165, 75); + color: white; +} +#top_link a:hover{ + background-color: rgb(153, 150, 150); +} +#link{ + width: 80%; +} +#link a:link,#link a:visited{ + color: black; +} +#link a:hover{ + color: rgb(45, 165, 75); +} +#no-link{ + background-color: rgb(231, 231, 231); + padding: 0px 10px 15px; + margin: 20px 0 15px; + border: 1px solid rgb(184, 189, 189); + box-sizing: border-box; +} +/* Stylesheet 4*/ +#div1{ + background-color: black; + color: rgb(82, 206, 113); + font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + padding: 20px 30px ; +} +#div2{ + margin: 20px 0; + float: left; +} +#div2 a:link,#div2 a:visited{ + color: rgb(82, 206, 113); + text-decoration: none; + line-height: 10px; +} +#div2 a:hover{ + color: white; +} +#div2 a.active_link{ + color: white; +} +#div3{ + float: right; + width: 50%; + border: 1px solid white; + color: white; + padding: 10px 15px 20px; + width: 35%; + margin-right: 60px; + border-radius: 5px; +} +#div4{ + clear: both; + line-height: 25px; +} +#div4 a:link,#div4 a:visited{ + color: white; + padding: 0 10px 0 0; +} +#div4 a:hover{ + color: rgb(82, 206, 113); +} +#div5{ + color: white; + font-size: 13px; + text-align: center; + border: 1px solid white; + padding: 15px; + border-radius: 5px; + width: 80%; + margin: auto; + margin-top: 20px; +} \ No newline at end of file diff --git a/Website designs/index.html b/Website designs/index.html new file mode 100644 index 0000000..0cae234 --- /dev/null +++ b/Website designs/index.html @@ -0,0 +1,30 @@ + + + + + + + CSS + + + +
+ +
+ + \ No newline at end of file diff --git a/Website designs/style.html b/Website designs/style.html new file mode 100644 index 0000000..c471255 --- /dev/null +++ b/Website designs/style.html @@ -0,0 +1,45 @@ + + + + + + + CSS + + + +
+ +
+

+

Same Page Different Stylesheets

+ This is a demonstration of how different stylesheets can change the layout of your html page.You can change the layout of this page by selecting
different stylesheets in the menu,or by selecting one of the following links:
+ Stylesheet 1, + Stylesheet 2, + Stylesheet 3, + Stylesheet 4. +

+

+

No Styles

+ This page uses DIV elements to group different sections of the HTML page.Click here to see how page looks like with no stylesheet:
+ No Stylesheet. +

+

+

Side-Bar

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. +

+
+
+ + \ No newline at end of file diff --git a/Website designs/style1.html b/Website designs/style1.html new file mode 100644 index 0000000..b5c8bbb --- /dev/null +++ b/Website designs/style1.html @@ -0,0 +1,46 @@ + + + + + + + CSS + + + +
+
+

Welcome to My Homepage

+ Use the menu to select different Stylesheets +
+
+ +
+
+

Same Page Different StyleSheets

+ This is demonstration of how different stylesheets can change the layout of your HTML page. + You can change the layout of this page by selecting different stylesheets in the menu,or by selecting one of the following links:
+ Stylesheet1, + Stylesheet2, + Stylesheet3, + Stylesheet4. +

No Styles

+ This page uses DIV elements to group different sections of the HTML page.Click here to see how the page looks like with no stylesheet:
+ No Stylesheet. +
+ +
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. +
+
+ + \ No newline at end of file diff --git a/Website designs/style2.html b/Website designs/style2.html new file mode 100644 index 0000000..5021c89 --- /dev/null +++ b/Website designs/style2.html @@ -0,0 +1,47 @@ + + + + + + + CSS + + + +
+
+

Welcome to My Homepage

+ Use the menu to select different Stylesheets +
+
+
+

Same Page Different Stylesheets

+ This is a demonstration of how different stylesheets can change the layout of your HTML page. + You can change the layout of this page by selecting different stylesheets in the menu,or by selecting one of the following links:
+ Stylessheet1, + Stylessheet2, + Stylessheet3, + Stylessheet4. +

No Styles

+ This page uses DIV elements to group different sections of the HTML page. + Click here to see how the page looks like with no stylesheet:
+ No Stylesheet. +
+
+
+

Side-Bar

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. +
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. + +
+
+ + + \ No newline at end of file diff --git a/Website designs/style3.html b/Website designs/style3.html new file mode 100644 index 0000000..7662d1e --- /dev/null +++ b/Website designs/style3.html @@ -0,0 +1,44 @@ + + + + + + + CSS + + + +
+

Welcome to My Homepage

+
Use the menu to select Stylesheets
+ + + +
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. +
+
+ + \ No newline at end of file diff --git a/Website designs/style4.html b/Website designs/style4.html new file mode 100644 index 0000000..4a5bb39 --- /dev/null +++ b/Website designs/style4.html @@ -0,0 +1,44 @@ + + + + + + + CSS + + + +
+

Welcome to My Homepage

+
Use the menu to select different Stylesheets
+
+ +
+
+

Side-Bar

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. +
+
+

Same Page Different Stylesheets

+ This is a demonstration of how different stylesheets can change the layout of your HTML page.You can change the layout of this page by selecting different stylesheets in the menu, + or by selecting one of the following links:
+ Stylesheet1, + Stylesheet2, + Stylesheet3, + Stylesheet4. +

No Styles

+ This page uses DIV elements to group different sections of the HTML page.Click here to see how the page looks like with no stylesheet:
+ No Stylesheet. +
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. +
+
+ + \ No newline at end of file