Create jghb.html

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;
+  }

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;
+}
+
+

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;
+    }
+
+}

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(', ')
+    }
+})

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%;
+
+}
+
+

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);}

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);
+}