From 4c5fe65446d57b371714372464996d63c4f3fb8f Mon Sep 17 00:00:00 2001 From: meronabebe <120124392+meronabebe@users.noreply.github.com> Date: Tue, 17 Jan 2023 08:57:29 -0800 Subject: [PATCH 1/3] Create jghb.html --- jghb.html | 1 + 1 file changed, 1 insertion(+) create mode 100644 jghb.html diff --git a/jghb.html b/jghb.html new file mode 100644 index 0000000..18ecdcb --- /dev/null +++ b/jghb.html @@ -0,0 +1 @@ + From 13ffa8df7457480b045e8c9980441c2034e90f44 Mon Sep 17 00:00:00 2001 From: meronabebe <120124392+meronabebe@users.noreply.github.com> Date: Tue, 17 Jan 2023 22:13:32 -0800 Subject: [PATCH 2/3] Delete jghb.html --- jghb.html | 1 - 1 file changed, 1 deletion(-) delete mode 100644 jghb.html diff --git a/jghb.html b/jghb.html deleted file mode 100644 index 18ecdcb..0000000 --- a/jghb.html +++ /dev/null @@ -1 +0,0 @@ - From 97bbda196a1eb019c7cfcbf3eaeb3ad2e4353ecf Mon Sep 17 00:00:00 2001 From: meronabebe <120124392+meronabebe@users.noreply.github.com> Date: Wed, 18 Jan 2023 09:14:30 +0300 Subject: [PATCH 3/3] Add files via upload --- cssjs/aboutus.css | 39 +++++++++++++++++ cssjs/contact.css | 71 ++++++++++++++++++++++++++++++ cssjs/courses.css | 101 +++++++++++++++++++++++++++++++++++++++++++ cssjs/feedback.js | 21 +++++++++ cssjs/footer.css | 50 +++++++++++++++++++++ cssjs/home.css | 31 +++++++++++++ cssjs/login.css | 65 ++++++++++++++++++++++++++++ cssjs/login.js | 24 ++++++++++ cssjs/navigation.css | 93 +++++++++++++++++++++++++++++++++++++++ cssjs/navigation.js | 7 +++ cssjs/register.css | 50 +++++++++++++++++++++ cssjs/register.js | 29 +++++++++++++ cssjs/signup.css | 65 ++++++++++++++++++++++++++++ cssjs/signup.js | 27 ++++++++++++ cssjs/tutorial.css | 21 +++++++++ 15 files changed, 694 insertions(+) create mode 100644 cssjs/aboutus.css create mode 100644 cssjs/contact.css create mode 100644 cssjs/courses.css create mode 100644 cssjs/feedback.js create mode 100644 cssjs/footer.css create mode 100644 cssjs/home.css create mode 100644 cssjs/login.css create mode 100644 cssjs/login.js create mode 100644 cssjs/navigation.css create mode 100644 cssjs/navigation.js create mode 100644 cssjs/register.css create mode 100644 cssjs/register.js create mode 100644 cssjs/signup.css create mode 100644 cssjs/signup.js create mode 100644 cssjs/tutorial.css diff --git a/cssjs/aboutus.css b/cssjs/aboutus.css new file mode 100644 index 0000000..1f58d5e --- /dev/null +++ b/cssjs/aboutus.css @@ -0,0 +1,39 @@ +.aboutus-container{ + display:grid; + gap:50px; +} +.aboutus-container .p1{ + display:flex; + + +} +.aboutus-container .p2{ + display:flex; + gap:2%; + padding-left: 20px; + padding-right: 20px; +} +.aboutus-container .p1 section{ + padding-top: 100px; +} +.table{ + padding-left: 20px; + +} +.table table{ + + border:1px solid gainsboro; + border-collapse:collapse; + padding:8px; + width:50%; +} +.table tr:nth-child(odd){ + background-color: #e3e3e3; + } +.table th { + padding-top: 12px; + padding-bottom: 12px; + text-align:left; + background-color:darkcyan; + color: white; + } \ No newline at end of file diff --git a/cssjs/contact.css b/cssjs/contact.css new file mode 100644 index 0000000..08a50ea --- /dev/null +++ b/cssjs/contact.css @@ -0,0 +1,71 @@ +body{ + display:grid; + gap:100px; +} +.body-container{ + display:flex; + gap:10px; + +} + + +.body-container aside{ + border:1px solid white; + border-left-color:black ; + width:50%; + background-color:white; + text-align: center; + + +} +.body-container p{ + border:1px solid white; + width:50%; + background-color: white; + padding-left:10%; +} +aside{ + background-color: blanchedalmond; + +} +#form h1{ + color: #0f2027; + text-align: center; + font-size:25px; +} +#form button{ + padding: 10px; + margin-top: 20px; + width:fit-content; + color:white; + background-color: darkcyan; + border:none; + border-radius: 4px; +} +.form-control{ + display:flex; + flex-direction: column; + gap:10px; +} +.form-control label{ + font-size:15px; +} + +.form-control input{ + border:2px solid #f0f0f0; + border-radius: 4px; + display:block; + font-size:12px; + padding:10px; + width:50%; + align-self: center; +} + +#error{ + color:red; + font-size: 15px; + height:13px; + font-weight:bold; +} + + diff --git a/cssjs/courses.css b/cssjs/courses.css new file mode 100644 index 0000000..e928e2d --- /dev/null +++ b/cssjs/courses.css @@ -0,0 +1,101 @@ +.container-courses{ + box-sizing: border-box; +} +.arrow { + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 6px; +} +.right { + transform: rotate(-45deg);} +.container-body h1{ + float:right; + position:sticky; + top:0; + border:2px solid cyan; + padding-right:9px; + padding-top:15px; + padding:10px; + background-color:cyan; +} +.container-body h1 a{ + color:black; + text-decoration:none; + text-transform:capitalize; +} +.container-body h1:hover{ + border:outset white; + text-decoration:underline; +} +.courses1{ + display:grid; + gap:50px; +} +.courses2{ + display:flex; + gap:150px; +} + +.courses1 section{ + display:grid; + gap:30px; + border: 2px solid white; + padding:40px; + width: fit-content; + height:400px; + +} +.courses2 section{ + display:grid; + gap:0px; + border: 2px solid white; + padding:40px; + width: fit-content; + height:400px; + +} +.container-body .h3{ + padding-left:20px; + padding-top:40px; +} + +.container-courses a{ + text-align: center; + color:black; + text-transform: capitalize; + text-decoration: none; +} + +.courses1 section:hover{ + background-color:powderblue; +} +.courses2 section:hover{ + background-color:powderblue; +} +.container-courses img{ + width:200px; + height:250px; +} +.container-courses{ + display:flex; + gap:150px; + padding-left:20px; + padding-top:60px; + padding-bottom:40px; + width:100%; +} +@media only screen and (max-width:1180px){ + .courses2{ + display:grid; + gap:50px; + } + +} +@media only screen and (max-width:750px){ + .container-courses{ + display:grid; + gap:50px; + } + +} \ No newline at end of file diff --git a/cssjs/feedback.js b/cssjs/feedback.js new file mode 100644 index 0000000..1b255c0 --- /dev/null +++ b/cssjs/feedback.js @@ -0,0 +1,21 @@ +const email=document.getElementById('email') +const feedback=document.getElementById('feedback') +const form=document.getElementById('form') +const errorelement=document.getElementById('error') + + + + +form.addEventListener('submit' , (e) => { + let messages =[] + if (email.value === '' || email.value == null){ + messages.push('email is required') + } + else if (feedback.value === '' || feedback.value == null){ + messages.push('please write your feedback') + } + if (messages.length > 0){ + e.preventDefault() + errorelement.innerText = messages.join(', ') + } +}) \ No newline at end of file diff --git a/cssjs/footer.css b/cssjs/footer.css new file mode 100644 index 0000000..d710a6b --- /dev/null +++ b/cssjs/footer.css @@ -0,0 +1,50 @@ +*{ + padding:0; + margin:0; + box-sizing:border-box ; +} + +.footer h3{ + padding-left:25px; + color:purple; + padding-top: 10px; +} +.footer{ + display:grid; + gap:0px; + width:100%; + + background-color:gainsboro; +} +.footer a{ + text-decoration:none; + background-color: gainsboro; + border:2px solid gainsboro; + padding:15px; + text-transform: capitalize; + font-weight: bold; + color:black; +} +.footer a:hover{ + background:gray; +} +.footer .p1{ + display:flex; + justify-content: center; + gap:3%; + +} +.footer .p2{ + display:flex; + justify-content: center; + gap:2%; + +} +.footer .p3{ + display:flex; + justify-content: center; + gap:3%; + +} + + diff --git a/cssjs/home.css b/cssjs/home.css new file mode 100644 index 0000000..3518900 --- /dev/null +++ b/cssjs/home.css @@ -0,0 +1,31 @@ +.right-home{ + display:grid; + height:350px; + padding-block-start: 100px; + +} + + + +.right-home li{ + list-style-type: square; +} + +.right-home a{ + width:fit-content; + color:black; + text-decoration: none; +} +.right-home a:hover{ + color:cyan; + text-decoration: underline; +} +.arrow { + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; +} + +.right { + transform: rotate(-45deg);} \ No newline at end of file diff --git a/cssjs/login.css b/cssjs/login.css new file mode 100644 index 0000000..064787a --- /dev/null +++ b/cssjs/login.css @@ -0,0 +1,65 @@ +body{ + background: linear-gradient(to right, gray ,gray, gray) +} +.container-login{ + + width: 300px; + margin: 15vh auto 0 auto; + padding: 20px; + background-color: whitesmoke; + border-radius: 4px; + font-size: 12px; +} +#form h1{ + color: #0f2027; + text-align: center; + font-size:25px; +} +#form button{ + padding: 10px; + margin-top: 20px; + width:100%; + color:white; + background-color: darkcyan; + border:none; + border-radius: 4px; +} +.form-control{ + display:flex; + flex-direction: column; + gap:10px; +} +.form-control label{ + font-size:15px; +} + +.form-control input{ + border:2px solid #f0f0f0; + border-radius: 4px; + display:block; + font-size:12px; + padding:10px; + width:100%; +} + +#error{ + color:red; + font-size: 15px; + height:13px; + font-weight:bold; +} +.bottom{ + text-align: center; + margin-top: 70px; + font-size:13px; +} +.arrow { + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 2px; +} + +.right { + transform: rotate(-45deg); +} \ No newline at end of file diff --git a/cssjs/login.js b/cssjs/login.js new file mode 100644 index 0000000..c91fcd3 --- /dev/null +++ b/cssjs/login.js @@ -0,0 +1,24 @@ +const email=document.getElementById('email') +const password=document.getElementById('password') +const form=document.getElementById('form') +const errorelement=document.getElementById('error') + + + + +form.addEventListener('submit' , (e) => { + let messages =[] + if (email.value === '' || email.value == null){ + messages.push('email is required') + } + if (password.value === '' || password.value == null){ + messages.push('password is required') + } else if (password.value.length <=8 ){ + messages.push('password must be longer than 8 characters') + } + + if (messages.length > 0){ + e.preventDefault() + errorelement.innerText = messages.join(', ') + } +}) \ No newline at end of file diff --git a/cssjs/navigation.css b/cssjs/navigation.css new file mode 100644 index 0000000..95f0ab5 --- /dev/null +++ b/cssjs/navigation.css @@ -0,0 +1,93 @@ + +.header{ + display:flex; + justify-content:space-between; + align-items: center; + background-color: gainsboro; + color:purple; +} +.logo{ + font-size:2rem; + margin:.5rem; +} +.nav ul{ + margin: 0; + padding-right:0; + display:flex; +} +.nav li{ + list-style:none; +} +.nav li a{ + text-decoration: none; + color:black; + padding:1rem; + display:block; + text-transform: capitalize; + border: 2px solid gainsboro; + background-color: powderblue; + border-radius:20px; +} +.nav a:hover{ + background-color: cyan; +} +@media only screen and (max-width:1320px){ + .header{ + padding: 0 50px; + } +} +@media only screen and (max-width:1100px){ + .header{ + padding: 0 30px; + } +} +.toggle-button{ + position:absolute; + top:.75rem; + right:1rem; + display:none; + flex-direction: column; + justify-content: space-between; + width:30px; + height:21px; +} +.toggle-button .bar{ + height:3px; + width:100%; + background-color: black; + border-radius: 10px; +} +@media only screen and (max-width:900px){ + .toggle-button{ + display:flex; + } + .nav{ + display:none; + width:100%; + } + .header{ + flex-direction: column; + align-items:flex-start; + } + .nav ul{ + width:100%; + flex-direction:column; + padding:0; + + } + .nav li{ + text-align: center; + + } + .nav li a{ + padding: .5rem 1rem; + border:none; + background-color: gainsboro; + border-radius: 0; + + } + .nav.active{ + display:flex; + } +} + diff --git a/cssjs/navigation.js b/cssjs/navigation.js new file mode 100644 index 0000000..76e0912 --- /dev/null +++ b/cssjs/navigation.js @@ -0,0 +1,7 @@ +const togglebutton = document.getElementsByClassName('toggle-button')[0] +const nav = document.getElementsByClassName('nav')[0] + +togglebutton.addEventListener('click', () => { + nav.classList.toggle('active') +}) + diff --git a/cssjs/register.css b/cssjs/register.css new file mode 100644 index 0000000..52debc9 --- /dev/null +++ b/cssjs/register.css @@ -0,0 +1,50 @@ +body{ + background: linear-gradient(to right, gray ,gray, gray) +} +.container-register{ + + width: 300px; + margin: 10vh auto 0 auto; + padding: 20px; + background-color: whitesmoke; + border-radius: 4px; + font-size: 12px; +} +#form h1{ + color: #0f2027; + text-align: center; + font-size:25px; +} +#form button{ + padding: 10px; + margin-top: 20px; + width:100%; + color:white; + background-color: darkcyan; + border:none; + border-radius: 4px; +} +.form-control{ + display:flex; + flex-direction: column; + gap:10px; +} +.form-control label{ + font-size:15px; +} + +.form-control input{ + border:2px solid #f0f0f0; + border-radius: 4px; + display:block; + font-size:12px; + padding:10px; + width:100%; +} + +#error{ + color:red; + font-size: 15px; + height:13px; + font-weight:bold; +} diff --git a/cssjs/register.js b/cssjs/register.js new file mode 100644 index 0000000..7640b38 --- /dev/null +++ b/cssjs/register.js @@ -0,0 +1,29 @@ +const email=document.getElementById('email') +const course=document.getElementById('course') +const form=document.getElementById('form') +const errorelement=document.getElementById('error') +const fname=document.getElementById('fname') +const lname=document.getElementById('lname') + + + +form.addEventListener('submit' , (e) => { + let messages =[] + if (fname.value === '' || fname.value == null){ + messages.push('please enter your firstname') + } + else if (lname.value === '' || lname.value == null){ + messages.push('please enter your lastname') + } + else if (email.value === '' || email.value == null){ + messages.push('email is required') + } + else if (course.value === '' || course.value == null){ + messages.push('please enter your the course you want to register') + } + + if (messages.length > 0){ + e.preventDefault() + errorelement.innerText = messages.join(', ') + } +}) \ No newline at end of file diff --git a/cssjs/signup.css b/cssjs/signup.css new file mode 100644 index 0000000..f52a38c --- /dev/null +++ b/cssjs/signup.css @@ -0,0 +1,65 @@ +body{ + background: linear-gradient(to right, gray ,gray, gray) +} +.container-signup{ + + width: 300px; + margin: 15vh auto 0 auto; + padding: 20px; + background-color: whitesmoke; + border-radius: 4px; + font-size: 12px; +} +#form h1{ + color: #0f2027; + text-align: center; + font-size:25px; +} +#form button{ + padding: 10px; + margin-top: 20px; + width:100%; + color:white; + background-color: darkcyan; + border:none; + border-radius: 4px; +} +.form-control{ + display:flex; + flex-direction: column; + gap:10px; +} +.form-control label{ + font-size:15px; +} + +.form-control input{ + border:2px solid #f0f0f0; + border-radius: 4px; + display:block; + font-size:12px; + padding:10px; + width:100%; +} + +#error{ + color:red; + font-size: 15px; + height:13px; + font-weight:bold; +} +.bottom{ + text-align: center; + margin-top: 70px; + font-size:13px; +} +.arrow { + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 2px; +} + +.right { + transform: rotate(-45deg); +} \ No newline at end of file diff --git a/cssjs/signup.js b/cssjs/signup.js new file mode 100644 index 0000000..e672156 --- /dev/null +++ b/cssjs/signup.js @@ -0,0 +1,27 @@ +const email=document.getElementById('email') +const password=document.getElementById('password') +const form=document.getElementById('form') +const errorelement=document.getElementById('error') +const names=document.getElementById('names') + + + +form.addEventListener('submit' , (e) => { + let messages =[] + if (names.value === '' || names.value == null){ + messages.push('name is required') + } + if (email.value === '' || email.value == null){ + messages.push('email is required') + } + if (password.value === '' || password.value == null){ + messages.push('password is required') + } else if (password.value.length <=8 ){ + messages.push('password must be longer than 8 characters') + } + + if (messages.length > 0){ + e.preventDefault() + errorelement.innerText = messages.join(', ') + } +}) \ No newline at end of file diff --git a/cssjs/tutorial.css b/cssjs/tutorial.css new file mode 100644 index 0000000..76693a9 --- /dev/null +++ b/cssjs/tutorial.css @@ -0,0 +1,21 @@ +.container-tutorial{ + display:grid; + gap:30px; + padding:30px 20px 70px 20px ; +} +.container-tutorial h2{ + text-transform: capitalize; +} +.audio{ + padding-top:30px; +} +.audio section{ + padding-top:30px; + padding-left:10px; +} +.audio section p{ + padding-left:30px; +} + + +