diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c419263 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-cayman \ No newline at end of file diff --git a/web-dev task/css/main.css b/web-dev task/css/main.css new file mode 100644 index 0000000..5735f72 --- /dev/null +++ b/web-dev task/css/main.css @@ -0,0 +1,184 @@ +@import url('https://fonts.googleapis.com/css?family=Lato'); +@import url('https://fonts.googleapis.com/css?family=Lato|Raleway'); +*{ + transition: 0.5s; +} +body{ + background: rgb(38, 147, 190); +} +.topnav{ + position: absolute; + display: flex; + z-index: 2; + flex-direction: row; + background: rgb(25, 162, 216); + width: 100%; + height: 40px; + top:0; + left:0; + color: #fff; + text-transform: uppercase; +} +.topelmt{ + text-align: center; + vertical-align: middle; + line-height: 40px; + position: relative; + height: 35px; + border-right: 1px solid black; + width: 150px; + font-size: 20px; + display: inline-table; + transition: 0.3s; +} +a{ + text-decoration: none; + color: white; +} +.topelmt:hover{ + background: rgb(77, 192, 238); + cursor: pointer; + transform:scale(1.1); + z-index: 10; + box-shadow: 1px 1px 10px 0.5px black; +} +.topelmt:hover a{ + color: #000; +} +.active{ + background: rgb(24, 117, 153) !important; +} +.active:hover{ + transform: scale(1.1); + z-index: 10; +} +.active a{ + color: #fff; +} +.active:hover a{ + color: #fff; +} +.main_container{ + position: relative; + display: grid; + grid-template-columns: 1fr 1fr; + top: 100px; + height: auto; + width: 90%; + grid-gap: 30px; + left: 5%; + padding: 1%; + background: rgb(16, 123, 165); +} +#add_header{ + font-family: 'Lato', sans-serif; + color: white; + margin: 20px; + font-size: 25px; +} +#add_logo{ + font-family: 'Raleway', sans-serif; + color: white; + margin: 20px; + font-size: 15px; +} +input[type='text']{ + padding: 10px; + width: 300px; +} +button{ + position: relative; + top: 5px; + width: 200px; + cursor: pointer; + background: #4aec9b; + border: 0; + -webkit-appearance: none; +} +#at_time{ + position: relative; + padding: 10px; + top: 5px; + height: 50px; + line-height: 50px; + vertical-align: middle; + width: auto; + border: 1px dotted black; +} +.new{ + position: relative; + top: 10px; + min-height: 20px; + width: auto; + line-height: 50px; + opacity: 0; + vertical-align: middle; + text-align: center; + border: 1px dotted black; + border-radius: 5px; + font-size: 25px; + margin-bottom: 10px; + color: white; + background: rgb(11, 98, 133); + font-family: 'Lato', sans-serif; + animation: anim 1s ease forwards; +} +@keyframes anim{ + 0%{ + top: 0px; + opacity: 0; + } + 25%{ + opacity: 0.6; + top: 30px; + } + 100%{ + top: 0; + opacity: 1; + } +} +.n1{ + animation-delay: 0.3s; +} +#main_container_2{ + position: absolute; + top: 100px; + left: 0; + height: 100%; + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + padding: 50px; + color: white; +} +.back_page{ + position: absolute; + top: 50px; + height: auto; + left: 1%; + width: auto; + line-height: auto; + vertical-align: middle; + text-align: center; + z-index:2; + cursor: pointer; + font-weight: bold; +} +.page_1{ + position: absolute; + top: 30px; + left: 0; + width: 100%; + height: auto; + opacity:1; + z-index: 10; +} +.page_2{ + position: absolute; + top: 20px; + left: 0; + width: 100%; + height: auto; + opacity:0; +} \ No newline at end of file diff --git a/web-dev task/index.html b/web-dev task/index.html new file mode 100644 index 0000000..715f1b6 --- /dev/null +++ b/web-dev task/index.html @@ -0,0 +1,64 @@ + + + + + + Web-dev task + + + + + +
+
home
+
about
+
+ + +
+ +
+
+
+ Add New Things......... +
+ +
+ +
+
Get you list of (2) here...
+
+
Example_1
+
Example_2
+
+
+
+ +
+ + + +
+ +
+

Back To Home-Page <

+
+
+
Example_1
+
Example_2
+
+ +
+ + + + + \ No newline at end of file diff --git a/web-dev task/js/nav.js b/web-dev task/js/nav.js new file mode 100644 index 0000000..ac33763 --- /dev/null +++ b/web-dev task/js/nav.js @@ -0,0 +1,70 @@ +// Nav_Bar //////////////////////////////////////////////////// +const pg_1 = document.getElementById('pg_1'); +const pg_2 = document.getElementById('pg_2'); +var x=1; +const pg_1_click = () => { + pg_1.style.opacity=1; + pg_1.style.zIndex=10; + pg_2.style.opacity=0; + pg_2.style.zIndex=1; + document.getElementById('btn_1').className='topelmt active'; + document.getElementById('btn_2').className='topelmt'; +} +const pg_2_click = () => { + pg_1.style.opacity=0; + pg_1.style.zIndex=1; + pg_2.style.opacity=1; + pg_2.style.zIndex=10; + add_2(); + document.getElementById('btn_1').className='topelmt'; + document.getElementById('btn_2').className='topelmt active'; +} +/////////////////////////////////////////////////////////////// + +const txt = document.getElementById('text_field'); +const txt_at_time = document.getElementById('at_time'); +const counting = document.getElementById('number'); +var arr = ['Example_1','Example_2']; +txt.onkeyup = () => { + txt_at_time.innerHTML = txt.value; +} +txt.onkeydown = () => { + txt_at_time.innerHTML = txt.value; +} +const count = () => { + var num = arr.length; + counting.innerHTML = num; +} +const iterate = () => { + var i = arr.length-1; + var new_elmt = document.createElement('div'); + new_elmt.id=arr[i]; + new_elmt.className='new'; + new_elmt.innerHTML=arr[i]; + document.getElementById('new_element').appendChild(new_elmt); +} +const clear_1 = () => { + txt.value=''; + txt_at_time.innerHTML=''; +} +const add = () => { + arr.push(txt.value); + count(); + clear_1(); + x+=1; + iterate(); +} +const add_2 = () => { + if (x>=2){ + document.getElementById('main_container_2').innerHTML=''; + var i; + for (i=0;i