├── CSS └── style.css ├── HTML ├── about.html ├── index.html └── register.html ├── IMAGE ├── SochPrinciple.svg ├── abc.png ├── add.jpg ├── add2.jpg ├── add3.jpg ├── front.jpg ├── image (1).webp ├── image.webp ├── orientation.jpg └── sochlogo.png ├── JS ├── formvalidation.js ├── imageslider.js └── javascript.js └── README.md /CSS/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: wheat; 3 | color: white; 4 | font-size: 87.5%; 5 | /*Font Size is 14 */ 6 | font-family: Arial, "Comic Sans Ms"; 7 | line-height: 1.5; 8 | text-align: left; 9 | } 10 | h2{ 11 | background-color: #FEFFED; 12 | padding: 30px 35px; 13 | margin: -10px -50px; 14 | text-align:center; 15 | border-radius: 10px 10px 0 0; 16 | } 17 | 18 | hr{ 19 | margin: 10px -50px; 20 | border: 0; 21 | border-top: 1px solid #ccc; 22 | margin-bottom: 40px; 23 | } 24 | 25 | div.container{ 26 | width: 900px; 27 | height: 610px; 28 | margin:35px auto; 29 | font-family: 'Raleway', sans-serif; 30 | } 31 | 32 | div.main{ 33 | width: 300px; 34 | padding: 10px 50px 25px; 35 | border: 2px solid gray; 36 | border-radius: 10px; 37 | font-family: raleway; 38 | float:left; 39 | margin-top:50px; 40 | } 41 | 42 | input[type=text],input[type=password]{ 43 | width: 100%; 44 | height: 40px; 45 | padding: 5px; 46 | margin-bottom: 25px; 47 | margin-top: 5px; 48 | border: 2px solid #ccc; 49 | color: #4f4f4f; 50 | font-size: 16px; 51 | border-radius: 5px; 52 | } 53 | 54 | label{ 55 | color: #464646; 56 | text-shadow: 0 1px 0 #fff; 57 | font-size: 14px; 58 | font-weight: bold; 59 | } 60 | 61 | center{ 62 | font-size:32px; 63 | } 64 | 65 | .note{ 66 | color:red; 67 | } 68 | 69 | .valid{ 70 | color:green; 71 | } 72 | 73 | .back{ 74 | text-decoration: none; 75 | border: 1px solid rgb(0, 143, 255); 76 | background-color: rgb(0, 214, 255); 77 | padding: 3px 20px; 78 | border-radius: 2px; 79 | color: black; 80 | } 81 | 82 | input[type=button]{ 83 | font-size: 16px; 84 | background: linear-gradient(#ffbc00 5%, #ffdd7f 100%); 85 | border: 1px solid #e5a900; 86 | color: #4E4D4B; 87 | font-weight: bold; 88 | cursor: pointer; 89 | width: 100%; 90 | border-radius: 5px; 91 | padding: 10px 0; 92 | outline:none; 93 | } 94 | 95 | input[type=button]:hover{ 96 | background: linear-gradient(#ffdd7f 5%, #ffbc00 100%); 97 | } 98 | 99 | .fugo{ 100 | float:right; 101 | } 102 | 103 | div.gallery { 104 | margin: 5px; 105 | border: 1px solid #ccc; 106 | float: left; 107 | width: 180px; 108 | } 109 | 110 | div.gallery:hover { 111 | border: 1px solid #777; 112 | } 113 | 114 | div.gallery img { 115 | width: 100%; 116 | height: auto; 117 | } 118 | #fix{ 119 | clear: both; 120 | } 121 | div.desc { 122 | padding: 15px; 123 | text-align: center; 124 | } 125 | iframe{ 126 | float: right; 127 | } 128 | a{ 129 | text-decoration: none; 130 | color: white; 131 | } 132 | a:link, a:visited{ 133 | color: #CF5C3F; 134 | } 135 | a:hover, a:active{ 136 | background-color: #CF5C3F; 137 | color:#fff; 138 | } 139 | 140 | .body{ 141 | margin: 0 auto; 142 | width: 70%; 143 | clear: both; 144 | } 145 | .mainheader img{ 146 | width: 30%; 147 | height: auto; 148 | margin: 2% 0; 149 | } 150 | .mainheader nav{ 151 | background-color: #666; 152 | height: 40px; 153 | line-height: 40px; 154 | border-radius: 5px; 155 | -moz-border-radius: 5px; 156 | -webkit-border-radius: 5px; 157 | } 158 | .mainheader nav ul { 159 | list-style-type: none; 160 | margin: 0 auto; 161 | } 162 | .mainheader nav ul li { 163 | list-style-type: none; 164 | margin: 0 auto; 165 | float: left; 166 | display: inline-block; 167 | } 168 | .mainheader nav a:link, .mainheader nav a:visited{ 169 | color: #fff; 170 | 171 | padding: 10px 25px; 172 | height: 20px; 173 | } 174 | .mainheader nav a:hover, .mainheader nav a:active, 175 | .mainheader nav .active a:link, .mainHeader nav .active a:visited 176 | { 177 | background-color: #cf5c3F; 178 | text-shadow: none; 179 | } 180 | .mainheader nav ul li a{ 181 | border-radius: 5px; 182 | -moz-border-radius: 5px; 183 | -webkit-border-radius: 5px; 184 | 185 | } 186 | .mainContent{ 187 | line-height: 25px; 188 | border-radius: 5px; 189 | -moz-border-radius: 5px; 190 | -webkit-border-radius: 5px; 191 | 192 | } 193 | .Content{ 194 | width: 70%; 195 | float: left; 196 | border-radius: 5px; 197 | -moz-border-radius: 5px; 198 | -webkit-border-radius: 5px; 199 | 200 | } 201 | .topContent{ 202 | background-color: rgb(0,0,60); 203 | line-height: 25px; 204 | border-radius: 5px; 205 | -moz-border-radius: 5px; 206 | -webkit-border-radius: 5px; 207 | padding: 3% 5%; 208 | margin-top: 2%; 209 | 210 | 211 | } 212 | .bottomContent{ 213 | background-color: rgb(0,0,60); 214 | line-height: 25px; 215 | border-radius: 5px; 216 | -moz-border-radius: 5px; 217 | -webkit-border-radius: 5px; 218 | padding: 3% 5%; 219 | margin-top: 2%; 220 | 221 | } 222 | .top-sidebar{ 223 | width: 21%; 224 | float: left; 225 | background-color: #cab; 226 | border-radius: 5px; 227 | -moz-border-radius: 5px; 228 | -webkit-border-radius: 5px; 229 | 230 | padding: 2% 3%; 231 | 232 | margin: 2% 0 2% 3%; 233 | } 234 | .middle-sidebar{ 235 | width: 21%; 236 | float: left; 237 | background-color: #cab; 238 | border-radius: 5px; 239 | -moz-border-radius: 5px; 240 | -webkit-border-radius: 5px; 241 | margin-left: 3%; 242 | padding: 2% 3%; 243 | margin-bottom: 2%; 244 | 245 | 246 | } 247 | .buttom-sidebar{ 248 | width: 21%; 249 | float: left; 250 | background-color: #cab; 251 | border-radius: 5px; 252 | -moz-border-radius: 5px; 253 | -webkit-border-radius: 5px; 254 | margin-left: 3%; 255 | padding: 2% 3%; 256 | margin-bottom: 2%; 257 | } 258 | .mainFooter{ 259 | width: 100%; 260 | float: left; 261 | border-radius: 5px; 262 | -moz-border-radius: 5px; 263 | -webkit-border-radius: 5px; 264 | background-color: #666; 265 | margin-top: 6%; 266 | margin-bottom: 2%; 267 | } 268 | .mainFooter p{ 269 | width: 92% 270 | margin: 10px auto; 271 | color: #fff; 272 | padding: 2px; 273 | height: 40px; 274 | text-align: center; 275 | } 276 | #search{ 277 | float: right; 278 | } 279 | #search input[type=text] { 280 | width: 100%; 281 | box-sizing: border-box; 282 | border: 2px solid #ccc; 283 | border-radius: 4px; 284 | font-size: 16px; 285 | background-color: white; 286 | background-image: url('../images/searchicon.png'); 287 | background-position: 10px 10px; 288 | background-repeat: no-repeat; 289 | padding: 10px 40px 12px 40px; 290 | } 291 | .post-info{ 292 | font-style: italic; 293 | color: #999; 294 | font-size: 90%; 295 | } 296 | 297 | 298 | * {box-sizing:border-box} 299 | body {font-family: Verdana,sans-serif;} 300 | .iambrpslides {display:none} 301 | 302 | /* Slideshow container */ 303 | .slideshow-container { 304 | max-width: 1000px; 305 | position: relative; 306 | margin: auto; 307 | } 308 | 309 | 310 | /* Number text (1/3 etc) */ 311 | .numbertext { 312 | color: #f2f2f2; 313 | font-size: 12px; 314 | padding: 8px 12px; 315 | position: absolute; 316 | top: 0; 317 | } 318 | 319 | /* The dots/bullets/indicators */ 320 | .dot { 321 | height: 13px; 322 | width: 13px; 323 | margin: 0 2px; 324 | background-color: #bbb; 325 | border-radius: 50%; 326 | display: inline-block; 327 | transition: background-color 0.6s ease; 328 | } 329 | 330 | .active { 331 | background-color: #717171; 332 | } 333 | 334 | /* Fading animation */ 335 | .fade { 336 | -webkit-animation-name: fade; 337 | -webkit-animation-duration: 1.5s; 338 | animation-name: fade; 339 | animation-duration: 1.5s; 340 | } 341 | 342 | @-webkit-keyframes fade { 343 | from {opacity: .4} 344 | to {opacity: 1} 345 | } 346 | 347 | @keyframes fade { 348 | from {opacity: .4} 349 | to {opacity: 1} 350 | } 351 | 352 | /* On smaller screens, decrease text size */ 353 | @media only screen and (max-width: 300px) { 354 | .text {font-size: 11px} 355 | 356 | } 357 | img{ 358 | width: 100%; 359 | height: 350px; 360 | 361 | } -------------------------------------------------------------------------------- /HTML/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About 8 | 9 | 10 | 11 | 12 | 32 |
33 |
34 | 35 |
36 | 37 |
38 | 39 |
40 |
41 |

About ME

42 |

I am DYE aka Bipin.I am Nepal based rapper who rap in nepali language.I strated rapping since 2019 A.D.

43 | 44 |
45 | 46 | 47 |
48 | 49 | -------------------------------------------------------------------------------- /HTML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Soch College Of IT 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 27 |
28 |
29 |
30 | 31 |
32 |
01 / 06
33 | 34 |
35 | 36 |
37 |
02 / 06
38 | 39 |
40 | 41 |
42 |
03 / 06
43 | 44 |
45 | 46 |
47 |
04 / 06
48 | 49 |
50 | 51 |
52 |
05 / 06
53 | 54 |
55 | 56 |
57 |
06 / 06
58 | 59 |
60 | 61 |
62 | 83 | 84 | 85 |
86 | 87 | 88 | 89 | 90 | 91 | 92 |
93 | 94 |
95 | 96 | 99 | 100 | 101 | 102 |
103 |
104 |
105 |
106 |

Principle Message

107 |
108 |
109 |

Sushil Adhikari

110 |

M.Sc.Computer Science
111 | (Technical University - Berlin, Germany)

112 |
113 | 114 |

As principal of this college, I am pleased to welcome students, lecturers, visitors, staff and parents. I encourage you to explore this website to learn more about this college.

115 | 116 | We deliver courses that ensure that our students are getting the 21st century education they need. Active participation in an education that challenges critical thinking, provides career preparation, instills values, and inspires lifelong learning is encouraged in our college.

117 | 118 | The dedicated lecturer and staff in our college are supportive because they see students as an investment in the future.

119 | 120 | College is about so much more than academic success and at SOCH you will find much more. You will make friends for a lifetime, establish networks that will ease your transition into your working life and come to think of college as your home at SOCH.

121 | 122 | The future of this college is very bright, and I am honored to be part of this institution. 123 | 124 |

125 | 126 |
127 | 128 |
129 |
130 |

B.SC. CSIT

131 |
132 |
133 |

Affiliated to Tribhuvan University

134 |
135 | 136 |

B.Sc.CSIT offered by Institute of Science and Technology, Tribhuvan University, Nepal is a four years – 8 semesters – academic program.

137 | 138 | This program ensures that graduates have a broad basic knowledge and creative skills to conceive, design, build and exploit Information Processing Systems. In addition to this, the program also stimulates development of soft skills such as team work, effective communication, technology management etc. These skills are acquired through the execution of various projects, lab works, presentations, case studies and seminars throughout the entire program.

139 | 140 | It is a challenging and demanding program. Nevertheless it is also rewarding and fun. Thus it is the right program for students who are passionate about Technology and Communication. 141 |

142 | 143 |
144 | 145 | 146 |
147 |
148 | 154 | 155 | 161 | 162 | 168 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /HTML/register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Soch College Of IT 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 28 |
29 | 30 |
31 |
32 | 33 |

Login

34 | 35 |
36 | User Name :
37 |
38 | 39 | Password :
40 |
41 | 42 | 43 |
44 |
45 | 46 |
47 | 48 |
49 |
50 | 51 | 57 | 60 | 61 | -------------------------------------------------------------------------------- /IMAGE/abc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dyells07/WebtechnologyProject/b25a042b80363f19906b8b9e7ef955123e472112/IMAGE/abc.png -------------------------------------------------------------------------------- /IMAGE/add.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dyells07/WebtechnologyProject/b25a042b80363f19906b8b9e7ef955123e472112/IMAGE/add.jpg -------------------------------------------------------------------------------- /IMAGE/add2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dyells07/WebtechnologyProject/b25a042b80363f19906b8b9e7ef955123e472112/IMAGE/add2.jpg -------------------------------------------------------------------------------- /IMAGE/add3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dyells07/WebtechnologyProject/b25a042b80363f19906b8b9e7ef955123e472112/IMAGE/add3.jpg -------------------------------------------------------------------------------- /IMAGE/front.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dyells07/WebtechnologyProject/b25a042b80363f19906b8b9e7ef955123e472112/IMAGE/front.jpg -------------------------------------------------------------------------------- /IMAGE/image (1).webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dyells07/WebtechnologyProject/b25a042b80363f19906b8b9e7ef955123e472112/IMAGE/image (1).webp -------------------------------------------------------------------------------- /IMAGE/image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dyells07/WebtechnologyProject/b25a042b80363f19906b8b9e7ef955123e472112/IMAGE/image.webp -------------------------------------------------------------------------------- /IMAGE/orientation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dyells07/WebtechnologyProject/b25a042b80363f19906b8b9e7ef955123e472112/IMAGE/orientation.jpg -------------------------------------------------------------------------------- /IMAGE/sochlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dyells07/WebtechnologyProject/b25a042b80363f19906b8b9e7ef955123e472112/IMAGE/sochlogo.png -------------------------------------------------------------------------------- /JS/formvalidation.js: -------------------------------------------------------------------------------- 1 | // Defining a function to display error message 2 | function printError(elemId, hintMsg) { 3 | document.getElementById(elemId).innerHTML = hintMsg; 4 | } 5 | 6 | // Defining a function to validate form 7 | function validateForm() { 8 | // Retrieving the values of form elements 9 | var name = document.contactForm.name.value; 10 | var email = document.contactForm.email.value; 11 | var mobile = document.contactForm.mobile.value; 12 | var country = document.contactForm.country.value; 13 | var gender = document.contactForm.gender.value; 14 | var hobbies = []; 15 | var checkboxes = document.getElementsByName("hobbies[]"); 16 | for(var i=0; i < checkboxes.length; i++) { 17 | if(checkboxes[i].checked) { 18 | // Populate hobbies array with selected values 19 | hobbies.push(checkboxes[i].value); 20 | } 21 | } 22 | 23 | // Defining error variables with a default value 24 | var nameErr = emailErr = mobileErr = countryErr = genderErr = true; 25 | 26 | // Validate name 27 | if(name == "") { 28 | printError("nameErr", "Please enter your name"); 29 | } else { 30 | var regex = /^[a-zA-Z\s]+$/; 31 | if(regex.test(name) === false) { 32 | printError("nameErr", "Please enter a valid name"); 33 | } else { 34 | printError("nameErr", ""); 35 | nameErr = false; 36 | } 37 | } 38 | 39 | // Validate email address 40 | if(email == "") { 41 | printError("emailErr", "Please enter your email address"); 42 | } else { 43 | // Regular expression for basic email validation 44 | var regex = /^\S+@\S+\.\S+$/; 45 | if(regex.test(email) === false) { 46 | printError("emailErr", "Please enter a valid email address"); 47 | } else{ 48 | printError("emailErr", ""); 49 | emailErr = false; 50 | } 51 | } 52 | 53 | // Validate mobile number 54 | if(mobile == "") { 55 | printError("mobileErr", "Please enter your mobile number"); 56 | } else { 57 | var regex = /^[1-9]\d{9}$/; 58 | if(regex.test(mobile) === false) { 59 | printError("mobileErr", "Please enter a valid 10 digit mobile number"); 60 | } else{ 61 | printError("mobileErr", ""); 62 | mobileErr = false; 63 | } 64 | } 65 | 66 | // Validate country 67 | if(country == "Select") { 68 | printError("countryErr", "Please select your country"); 69 | } else { 70 | printError("countryErr", ""); 71 | countryErr = false; 72 | } 73 | 74 | // Validate gender 75 | if(gender == "") { 76 | printError("genderErr", "Please select your gender"); 77 | } else { 78 | printError("genderErr", ""); 79 | genderErr = false; 80 | } 81 | 82 | // Prevent the form from being submitted if there are any errors 83 | if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) { 84 | return false; 85 | } else { 86 | // Creating a string from input data for preview 87 | var dataPreview = "You've entered the following details: \n" + 88 | "Full Name: " + name + "\n" + 89 | "Email Address: " + email + "\n" + 90 | "Mobile Number: " + mobile + "\n" + 91 | "Country: " + country + "\n" + 92 | "Gender: " + gender + "\n"; 93 | if(hobbies.length) { 94 | dataPreview += "Hobbies: " + hobbies.join(", "); 95 | } 96 | // Display input data in a dialog box before submitting the form 97 | alert(dataPreview); 98 | } 99 | }; -------------------------------------------------------------------------------- /JS/imageslider.js: -------------------------------------------------------------------------------- 1 | var slideIndex = 0; 2 | showSlides(); 3 | 4 | function showSlides() { 5 | var i; 6 | var slides = document.getElementsByClassName("imageslider"); 7 | var dots = document.getElementsByClassName("dot"); 8 | for (i = 0; i < slides.length; i++) { 9 | slides[i].style.display = "none"; 10 | } 11 | slideIndex++; 12 | if (slideIndex> slides.length) {slideIndex = 1} 13 | for (i = 0; i < dots.length; i++) { 14 | dots[i].className = dots[i].className.replace(" active", ""); 15 | } 16 | slides[slideIndex-1].style.display = "block"; 17 | dots[slideIndex-1].className += " active"; 18 | setTimeout(showSlides, 2500); // This is for Changing image every 2.5 seconds 19 | } -------------------------------------------------------------------------------- /JS/javascript.js: -------------------------------------------------------------------------------- 1 | //thisis for slideshow of images 2 | var slideIndex = 0; 3 | showSlides(); 4 | 5 | function showSlides() { 6 | var i; 7 | var slides = document.getElementsByClassName("mySlides"); 8 | var dots = document.getElementsByClassName("dot"); 9 | for (i = 0; i < slides.length; i++) { 10 | slides[i].style.display = "none"; 11 | } 12 | slideIndex++; 13 | if (slideIndex> slides.length) {slideIndex = 1} 14 | for (i = 0; i < dots.length; i++) { 15 | dots[i].className = dots[i].className.replace(" active", ""); 16 | } 17 | slides[slideIndex-1].style.display = "block"; 18 | dots[slideIndex-1].className += " active"; 19 | setTimeout(showSlides, 3000); // Change image every 2 seconds 20 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # College Website 2 | 3 | This is a college website project developed using HTML, CSS, JavaScript, PHP, and Bootstrap. 4 | 5 | ## Description 6 | 7 | The college website serves as a platform for students, faculty members, and visitors to access information about the college. The website provides various features such as: 8 | 9 | - Information about the college, its history, and mission 10 | - Details about the courses offered and faculty members 11 | - Access to student and faculty portals 12 | - Latest news and events happening in the college 13 | - Contact information for the college 14 | 15 | ## Installation 16 | 17 | To use this website, simply clone the repository and host the files on a web server. The website is built using HTML, CSS, JavaScript, PHP, and Bootstrap, so make sure your server is configured to handle these technologies. 18 | 19 | ## Usage 20 | 21 | To access the website, open the index.html file in a web browser. The website is designed to be responsive and can be viewed on desktop and mobile devices. 22 | 23 | ## Credits 24 | 25 | This project was developed by [Your Name] as a college project. The website template was created using [Bootstrap](https://getbootstrap.com/) and the icons were sourced from [Font Awesome](https://fontawesome.com/). 26 | 27 | ## License 28 | 29 | This project is licensed under the [MIT License](https://opensource.org/licenses/MIT). 30 | --------------------------------------------------------------------------------