├── form-handler.php
├── .DS_Store
├── img
    ├── about.jpg
    ├── logo.png
    ├── user1.jpg
    ├── user2.jpg
    ├── banner.png
    ├── banner2.jpg
    ├── library.png
    ├── london.png
    ├── newyork.png
    ├── background.jpg
    ├── basketball.png
    ├── cafeteria.png
    ├── washington.png
    └── certificate.jpg
├── about.html
├── contact.html
├── course.html
├── blog.html
├── index.html
└── style.css


/form-handler.php:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/.DS_Store


--------------------------------------------------------------------------------
/img/about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/about.jpg


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/logo.png


--------------------------------------------------------------------------------
/img/user1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/user1.jpg


--------------------------------------------------------------------------------
/img/user2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/user2.jpg


--------------------------------------------------------------------------------
/img/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/banner.png


--------------------------------------------------------------------------------
/img/banner2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/banner2.jpg


--------------------------------------------------------------------------------
/img/library.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/library.png


--------------------------------------------------------------------------------
/img/london.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/london.png


--------------------------------------------------------------------------------
/img/newyork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/newyork.png


--------------------------------------------------------------------------------
/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/background.jpg


--------------------------------------------------------------------------------
/img/basketball.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/basketball.png


--------------------------------------------------------------------------------
/img/cafeteria.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/cafeteria.png


--------------------------------------------------------------------------------
/img/washington.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/washington.png


--------------------------------------------------------------------------------
/img/certificate.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/certificate.jpg


--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>University Website Design - Oracle Brain</title>
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;600;700&family=Poppins:wght@100;200;400;600;700&display=swap" rel="stylesheet">
 11 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
 12 | </head>
 13 | <body>
 14 |     <section class="sub-header">
 15 |         <nav>
 16 |             <a href="index.html"><img src="img/logo.png" alt="University Logo"></a>
 17 |             <div class="nav-links" id="navLinks">
 18 |                 <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
 19 |                 <ul>
 20 |                     <li><a href="index.html">HOME</a></li>
 21 |                     <li><a href="about.html">ABOUT</a></li>
 22 |                     <li><a href="course.html">COURSES</a></li>
 23 |                     <li><a href="blog.html">BLOG</a></li>
 24 |                     <li><a href="contact.html">CONTACT</a></li>
 25 |                 </ul>
 26 |             </div>
 27 |             <i class="fa-solid fa-bars" onclick="showMenu()"></i>
 28 |         </nav>
 29 |         <h1>About Us</h1>
 30 |     </section>
 31 | 
 32 |     <section class="about-us">
 33 |         <div class="about-col">
 34 |             <h1>We are the world's largest university</h1>
 35 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet turpis nulla, eleifend faucibus est sollicitudin ut. Maecenas ut venenatis ex, et dapibus purus. Donec sit amet nisl non justo malesuada fermentum. Donec eget felis dolor. Suspendisse condimentum vestibulum ex ac cursus. Nam pharetra viverra efficitur. Sed pellentesque luctus arcu, quis finibus nibh luctus</p>
 36 |             <a href="#" class="hero-btn red-btn">EXPLORE NOW</a>
 37 |         </div>
 38 |         <div class="about-col">
 39 |             <img src="img/about.jpg" alt="About Us Image">
 40 |         </div>
 41 |     </section>
 42 | 
 43 |     <script>
 44 |         function hideMenu() {
 45 |             // Implement hide menu functionality
 46 |         }
 47 | 
 48 |         function showMenu() {
 49 |             // Implement show menu functionality
 50 |         }
 51 |     </script>
 52 | </body>
 53 | </html>
 54 | 
 55 | 
 56 |     <section class="footer">
 57 |         <div class="footer-content">
 58 |             <h4>About Us</h4>
 59 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
 60 |             <!-- Social Icons -->
 61 |             <div class="icons">
 62 |                 <i class="fa fa-facebook"></i>
 63 |                 <i class="fa fa-twitter"></i>
 64 |                 <i class="fa fa-instagram"></i>
 65 |                 <i class="fa fa-linkedin"></i>
 66 |             </div>
 67 |             <p>Made with <i class="fa fa-heart-o"></i> by Oracle Brain</p>
 68 |         </div>
 69 |     </section>
 70 | 
 71 | 
 72 |     <!-- Your other sections go here -->
 73 | 
 74 |     <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script> <!-- Font Awesome CDN -->
 75 | </body>
 76 | </html>
 77 | 
 78 | 
 79 |     
 80 | <!---------- JavaScript for Toggle Menu ---------------------------------->
 81 |     <script>
 82 |         // Get the navigation links element
 83 | const navLinks = document.getElementById("navLinks");
 84 | 
 85 | // Function to show the menu
 86 | function showMenu() {
 87 |   navLinks.style.right = "0";
 88 | }
 89 | 
 90 | // Function to hide the menu
 91 | function hideMenu() {
 92 |   navLinks.style.right = "-20px";
 93 | }
 94 | 
 95 |     </script>
 96 |     
 97 | </body>
 98 | </html>
 99 | 
100 |    
101 | 


--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5 |     <title>University Website Design - Oracle Brain</title>
  6 |     <link rel="stylesheet" href="style.css">
  7 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  8 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  9 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;600;700&family=Poppins:wght@100;200;400;600;700&display=swap" rel="stylesheet">
 10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
 11 | </head>
 12 | <body>
 13 |     <section class="sub-header">
 14 |         <nav>
 15 |             <a href="index.html"><img src="img/logo.png" alt="University Logo"></a>
 16 |             <div class="nav-links" id="navLinks">
 17 |                 <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
 18 |                 <ul>
 19 |                     <li><a href="index.html">HOME</a></li>
 20 |                     <li><a href="about.html">ABOUT</a></li>
 21 |                     <li><a href="course.html">COURSES</a></li>
 22 |                     <li><a href="blog.html">BLOG</a></li>
 23 |                     <li><a href="contact.html">CONTACT</a></li>
 24 |                 </ul>
 25 |             </div>
 26 |             <i class="fa-solid fa-bars" onclick="showMenu()"></i>
 27 |         </nav>
 28 |         <h1>Contact Us</h1>
 29 |     </section>
 30 | 
 31 |     <!-- -------------- Contact Us Content -------------- -->
 32 | 
 33 |     <section class="location">
 34 | 
 35 |         <iframe src="https://www.google.com/maps/d/embed?mid=1B1lAsUpYFg82Je7XN1_cxRPf1UU&hl=en_US&ehbc=2E312F" width="640" height="480"></iframe>
 36 | 
 37 |     </section>
 38 | 
 39 |     <section class="contact-us">
 40 | 
 41 |         <div class="row">
 42 |             <div class="contact-col">
 43 |                 <i class="fa fa-home"></i>
 44 |                 <span>
 45 |                     <h5>XYZ Road, ABC Building</h5>
 46 |                     <p>Pool Chowk, Janakpur, Nepal</p>
 47 |                 </span>
 48 |             </div>
 49 |             <div class="fa fa-phone"></div>
 50 |             <span>
 51 |                 <h5>+977 1234567890</h5>
 52 |                 <p>Monday to Friday, 9AM to 5PM</p>
 53 |             </span>
 54 |         </div>
 55 |         <div>
 56 |             <i class="fa fa-envelope-o"></i>
 57 |                 <span>
 58 |                     <h5>info@gmail.com</h5>
 59 |                     <p>Email us your query</p>
 60 |                 </span>
 61 |         </div>
 62 |         </div>
 63 |  <div class="contact-col">
 64 | 
 65 |     <form action="form-handler.php" method="post">
 66 |          <input type="text" name="name" placeholder="Enter your name" required>
 67 |          <input type="email" name="email" placeholder="Enter email address" required>
 68 |          <input type="text" name="subject" placeholder="Enter your subject" required>
 69 |          <textarea rows="8" name="Message" required></textarea>
 70 |         <button type="submit" class="hero-btn red-btn">Send Message</button>
 71 |     </form>
 72 |         </div>
 73 |     </section>
 74 | 
 75 | 
 76 | 
 77 |     <section class="footer">
 78 |         <div class="footer-content">
 79 |             <h4>About Us</h4>
 80 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
 81 |             <!-- Social Icons -->
 82 |             <div class="icons">
 83 |                 <i class="fa fa-facebook"></i>
 84 |                 <i class="fa fa-twitter"></i>
 85 |                 <i class="fa fa-instagram"></i>
 86 |                 <i class="fa fa-linkedin"></i>
 87 |             </div>
 88 |             <p>Made with <i class="fa fa-heart-o"></i> by Oracle Brain</p>
 89 |         </div>
 90 |     </section>
 91 | 
 92 | 
 93 |     <!-- Your other sections go here -->
 94 | 
 95 |     <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script> <!-- Font Awesome CDN -->
 96 | </body>
 97 | </html>
 98 | 
 99 | 
100 |     
101 | <!---------- JavaScript for Toggle Menu ---------------------------------->
102 |     <script>
103 |         // Get the navigation links element
104 | const navLinks = document.getElementById("navLinks");
105 | 
106 | // Function to show the menu
107 | function showMenu() {
108 |   navLinks.style.right = "0";
109 | }
110 | 
111 | // Function to hide the menu
112 | function hideMenu() {
113 |   navLinks.style.right = "-20px";
114 | }
115 | 
116 |     </script>
117 |     
118 | </body>
119 | </html>
120 | 
121 |    
122 | 


--------------------------------------------------------------------------------
/course.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>University Website Design - Oracle Brain</title>
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;600;700&family=Poppins:wght@100;200;400;600;700&display=swap" rel="stylesheet">
 11 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
 12 | </head>
 13 | <body>
 14 |     <section class="sub-header">
 15 |         <nav>
 16 |             <a href="index.html"><img src="img/logo.png" alt="University Logo"></a>
 17 |             <div class="nav-links" id="navLinks">
 18 |                 <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
 19 |                 <ul>
 20 |                     <li><a href="index.html">HOME</a></li>
 21 |                     <li><a href="about.html">ABOUT</a></li>
 22 |                     <li><a href="course.html">COURSES</a></li>
 23 |                     <li><a href="blog.html">BLOG</a></li>
 24 |                     <li><a href="contact.html">CONTACT</a></li>
 25 |                 </ul>
 26 |             </div>
 27 |             <i class="fa-solid fa-bars" onclick="showMenu()"></i>
 28 |         </nav>
 29 |         <h1>Our Courses</h1>
 30 |     </section>
 31 | 
 32 |     <!----------- Course ----------------->
 33 | 
 34 |     <section class="course">
 35 |         <h1>Courses We Offer</h1>
 36 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tempora totam, optio illum dolores ea iure dignissimos illo <br> commodi velit, qui ut, dolorem a dolore possimus?</p>
 37 | 
 38 |         <div class="row">
 39 |             <div class="course-col">
 40 |                 <h3>Intermediate</h3>
 41 |                 <p>Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...</p>
 42 |             </div>
 43 |             <div class="course-col">
 44 |                 <h3>Post Graduation</h3>
 45 |                 <p>Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...</p>
 46 |             </div>
 47 |             <div class="course-col">
 48 |                 <h3>Doctorate</h3>
 49 |                 <p>Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...</p>
 50 |             </div>
 51 |         </div>
 52 |     </section>
 53 | 
 54 |     <!----------- facilites ----------------->
 55 | 
 56 |     <section class="facilities">
 57 |         <h1>Our Facilities</h1>
 58 |         <p>Lorem impum dolor site amet, consectetur adipisicing elit.</p>
 59 | 
 60 |         <div class="row">
 61 |             <div class="facilities-col">
 62 |                 <img src="img/library.png" alt="World Class Library">
 63 |                 <h3>World Class Library</h3>
 64 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.</p>
 65 |             </div>
 66 |             <div class="facilities-col">
 67 |                 <img src="img/basketball.png" alt="Largest Play Ground">
 68 |                 <h3>Largest Play Ground</h3>
 69 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.</p>
 70 |             </div>
 71 |             <div class="facilities-col">
 72 |                 <img src="img/cafeteria.png" alt="Tasty and Healthy Food">
 73 |                 <h3>Tasty and Healthy Food</h3>
 74 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.</p>
 75 |             </div>
 76 |         </div>
 77 |     </section>
 78 | 
 79 | <!---- ---- Footer-------------------->
 80 | 
 81 |     <section class="footer">
 82 |         <div class="footer-content">
 83 |             <h4>About Us</h4>
 84 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
 85 |             <!-- Social Icons -->
 86 |             <div class="icons">
 87 |                 <i class="fa fa-facebook"></i>
 88 |                 <i class="fa fa-twitter"></i>
 89 |                 <i class="fa fa-instagram"></i>
 90 |                 <i class="fa fa-linkedin"></i>
 91 |             </div>
 92 |             <p>Made with <i class="fa fa-heart-o"></i> by Oracle Brain</p>
 93 |         </div>
 94 |     </section>
 95 | 
 96 | 
 97 |     <!-- Your other sections go here -->
 98 | 
 99 |     <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script> <!-- Font Awesome CDN -->
100 | </body>
101 | </html>
102 | 
103 | 
104 |     
105 | <!---------- JavaScript for Toggle Menu ---------------------------------->
106 |     <script>
107 |         // Get the navigation links element
108 | const navLinks = document.getElementById("navLinks");
109 | 
110 | // Function to show the menu
111 | function showMenu() {
112 |   navLinks.style.right = "0";
113 | }
114 | 
115 | // Function to hide the menu
116 | function hideMenu() {
117 |   navLinks.style.right = "-20px";
118 | }
119 | 
120 |     </script>
121 |     
122 | </body>
123 | </html>
124 | 
125 |    
126 | 


--------------------------------------------------------------------------------
/blog.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>University Website Design - Oracle Brain</title>
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;600;700&family=Poppins:wght@100;200;400;600;700&display=swap" rel="stylesheet">
 11 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
 12 | </head>
 13 | <body>
 14 |     <section class="sub-header">
 15 |         <nav>
 16 |             <a href="index.html"><img src="img/logo.png" alt="University Logo"></a>
 17 |             <div class="nav-links" id="navLinks">
 18 |                 <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
 19 |                 <ul>
 20 |                     <li><a href="index.html">HOME</a></li>
 21 |                     <li><a href="about.html">ABOUT</a></li>
 22 |                     <li><a href="course.html">COURSES</a></li>
 23 |                     <li><a href="blog.html">BLOG</a></li>
 24 |                     <li><a href="contact.html">CONTACT</a></li>
 25 |                 </ul>
 26 |             </div>
 27 |             <i class="fa-solid fa-bars" onclick="showMenu()"></i>
 28 |         </nav>
 29 |         <h1>Our Certificate & Online Programs For 2024</h1>
 30 |     </section>
 31 | 
 32 |     <!----------- blog page content ----------------->
 33 | 
 34 |     <section class="blog-content">
 35 | 
 36 |         <div class="row">
 37 |             < class="blog-left">
 38 |                 <img src="img/certificate.jpg">
 39 |                 <h2>Our Certificate & Online Programs For 2024</h2>
 40 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat eum ad autem accusantium quaerat saepe eos excepturi, rem vitae quasi dolores perferendis, enim eveniet magnam voluptatibus dolorem hic maiores voluptatem!</p>
 41 |                 <br>
 42 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat eum ad autem accusantium quaerat saepe eos excepturi, rem vitae quasi dolores perferendis, enim eveniet magnam voluptatibus dolorem hic maiores voluptatem!</p>
 43 |                 <br>
 44 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat eum ad autem accusantium quaerat saepe eos excepturi, rem vitae quasi dolores perferendis, enim eveniet magnam voluptatibus dolorem hic maiores voluptatem!</p>
 45 |                 <br>
 46 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat eum ad autem accusantium quaerat saepe eos excepturi, rem vitae quasi dolores perferendis, enim eveniet magnam voluptatibus dolorem hic maiores voluptatem!</p>
 47 | 
 48 |             <div class="comment-box">
 49 |                 <h3>Leave a comment</h3>
 50 |                 <form class="comment-form">
 51 |                     <input type="text" placeholder="Enter name"
 52 |                     <input type="email" placeholder="Enter Email"
 53 |                     <textarea rows="5" placeholder="Your comment">
 54 |                     </textarea>
 55 |                     <button type="submit" class="hero-btn red-btn">Post Comment</button>
 56 |                 </form>
 57 |             </div>
 58 | 
 59 |             </div>
 60 |             <div class="blog-right"></div>
 61 |             <h3>Post Categories</h3>
 62 |             <div>
 63 |                 <span>Business Analytics</span>
 64 |                 <span>21</span>
 65 |             </div>
 66 |             <div>
 67 |                 <span>Business Analytics</span>
 68 |                 <span>21</span>
 69 |             </div>
 70 |             <div>
 71 |                 <span>Business Analytics</span>
 72 |                 <span>21</span>
 73 |             </div>
 74 |             <div>
 75 |                 <span>Business Analytics</span>
 76 |                 <span>21</span>
 77 |             </div>
 78 |             <div>
 79 |                 <span>Business Analytics</span>
 80 |                 <span>21</span>
 81 |             </div>
 82 |         </div>
 83 |     </section>
 84 | 
 85 | 
 86 | <!---- ---- Footer-------------------->
 87 | 
 88 |     <section class="footer">
 89 |         <div class="footer-content">
 90 |             <h4>About Us</h4>
 91 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
 92 |             <!-- Social Icons -->
 93 |             <div class="icons">
 94 |                 <i class="fa fa-facebook"></i>
 95 |                 <i class="fa fa-twitter"></i>
 96 |                 <i class="fa fa-instagram"></i>
 97 |                 <i class="fa fa-linkedin"></i>
 98 |             </div>
 99 |             <p>Made with <i class="fa fa-heart-o"></i> by Oracle Brain</p>
100 |         </div>
101 |     </section>
102 | 
103 | 
104 |     <!-- Your other sections go here -->
105 | 
106 |     <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script> <!-- Font Awesome CDN -->
107 | </body>
108 | </html>
109 | 
110 | 
111 |     
112 | <!---------- JavaScript for Toggle Menu ---------------------------------->
113 |     <script>
114 |         // Get the navigation links element
115 | const navLinks = document.getElementById("navLinks");
116 | 
117 | // Function to show the menu
118 | function showMenu() {
119 |   navLinks.style.right = "0";
120 | }
121 | 
122 | // Function to hide the menu
123 | function hideMenu() {
124 |   navLinks.style.right = "-20px";
125 | }
126 | 
127 |     </script>
128 |     
129 | </body>
130 | </html>
131 | 
132 |    
133 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>University Website Design - Oracle Brain</title>
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |     <link href="https://fonts.googleapis.com/css2?family=Inter&family=Poppins:wght@100;200;400;600;700&display=swap" rel="stylesheet">
 11 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
 12 | </head>
 13 | <body>
 14 |     <section class="header">
 15 |         <nav>
 16 |             <a href="index.html"><img src="img/logo.png" alt=""></a>
 17 |             <div class="nav-links" id="navLinks">
 18 |                 <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
 19 |                 <ul>
 20 |                     <li><a href="index.html">HOME</a></li>
 21 |                     <li><a href="about.html">ABOUT</a></li>
 22 |                     <li><a href="course.html">COURSES</a></li>
 23 |                     <li><a href="blog.html">BLOG</a></li>
 24 |                     <li><a href="contact.html">CONTACT</a></li>
 25 |                 </ul>
 26 |             </div>
 27 |             <i class="fa-solid fa-bars" onclick="showMenu()"></i>
 28 |         </nav>
 29 |         <div class="text-box">
 30 |             <h1>World's Biggest University</h1>
 31 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tempora totam, optio illum dolores ea iure dignissimos illo <br> commodi velit, qui ut, dolorem a dolore possimus?</p>
 32 |             <a href="" class="hero-btn">Visit Us To know More</a>
 33 |         </div>
 34 |     </section>
 35 | 
 36 |     <!-- Add closing tags for the sections -->
 37 | 
 38 |     <section class="course">
 39 |         <h1>Courses We Offer</h1>
 40 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tempora totam, optio illum dolores ea iure dignissimos illo <br> commodi velit, qui ut, dolorem a dolore possimus?</p>
 41 | 
 42 |         <div class="row">
 43 |             <div class="course-col">
 44 |                 <h3>Intermediate</h3>
 45 |                 <p>Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...</p>
 46 |             </div>
 47 |             <div class="course-col">
 48 |                 <h3>Post Graduation</h3>
 49 |                 <p>Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...</p>
 50 |             </div>
 51 |             <div class="course-col">
 52 |                 <h3>Doctorate</h3>
 53 |                 <p>Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...</p>
 54 |             </div>
 55 |         </div>
 56 |     </section>
 57 | 
 58 |     <!-- Add the missing closing tags and correct class names for the campus and facilities sections -->
 59 | 
 60 |     <section class="campus">
 61 |         <h1>Our Global Campus</h1>
 62 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 63 | 
 64 |         <div class="row">
 65 |             <!-- Add campus-col class for each campus -->
 66 |             <div class="campus-col">
 67 |                 <img src="img/london.png" alt="London Campus">
 68 |                 <div class="layer">
 69 |                     <h3>LONDON</h3>
 70 |                 </div>
 71 |             </div>
 72 |             <div class="campus-col">
 73 |                 <img src="img/newyork.png" alt="New York Campus">
 74 |                 <div class="layer">
 75 |                     <h3>NEW YORK</h3>
 76 |                 </div>
 77 |             </div>
 78 |             <div class="campus-col">
 79 |                 <img src="img/washington.png" alt="Washington Campus">
 80 |                 <div class="layer">
 81 |                     <h3>WASHINGTON</h3>
 82 |                 </div>
 83 |             </div>
 84 |         </div>
 85 |     </section>
 86 | 
 87 |     <section class="facilities">
 88 |         <h1>Our Facilities</h1>
 89 |         <p>Lorem impum dolor site amet, consectetur adipisicing elit.</p>
 90 | 
 91 |         <div class="row">
 92 |             <div class="facilities-col">
 93 |                 <img src="img/library.png" alt="World Class Library">
 94 |                 <h3>World Class Library</h3>
 95 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.</p>
 96 |             </div>
 97 |             <div class="facilities-col">
 98 |                 <img src="img/basketball.png" alt="Largest Play Ground">
 99 |                 <h3>Largest Play Ground</h3>
100 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.</p>
101 |             </div>
102 |             <div class="facilities-col">
103 |                 <img src="img/cafeteria.png" alt="Tasty and Healthy Food">
104 |                 <h3>Tasty and Healthy Food</h3>
105 |                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.</p>
106 |             </div>
107 |         </div>
108 |     </section>
109 | 
110 |     <section class="testimonials">
111 |         <h1>What Our Students Say</h1>
112 |         <p>Lorem impum dolor site amet, consectetur adipisicing elit.</p>
113 | 
114 |         <div class="row">
115 |             <div class="testimonial-col">
116 |                 <img src="img/user1.jpg" alt="Student 1">
117 |                 <div>
118 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
119 |                     <h3>Christine Berkley</h3>
120 |                     <i class="fa fa-star"></i>
121 |                     <i class="fa fa-star"></i>
122 |                     <i class="fa fa-star"></i>
123 |                     <i class="fa fa-star"></i>
124 |                     <i class="fa fa-star"></i>
125 |                 </div>
126 |             </div>
127 |             <div class="testimonial-col">
128 |                 <img src="img/user2.jpg" alt="Student 2">
129 |                 <div>
130 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
131 |                     <h3>David Byer</h3>
132 |                     <i class="fa fa-star"></i>
133 |                     <i class="fa fa-star"></i>
134 |                     <i class="fa fa-star"></i>
135 |                     <i class="fa fa-star"></i>
136 |                     <i class="fa fa-star"></i>
137 |                 </div>
138 |             </div>
139 |         </div>
140 |     </section>
141 | 
142 |     <!-- Call To Action Section -->
143 |     <section class="cta">
144 |         <div class="cta-content">
145 |             <h1>Enroll For Our Various Online Courses<br>Anywhere From The World</h1>
146 |             <a href="#" class="hero-btn">CONTACT US</a>
147 |         </div>
148 |     </section>
149 | 
150 |     <section class="footer">
151 |         <div class="footer-content">
152 |             <h4>About Us</h4>
153 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
154 |             <!-- Social Icons -->
155 |             <div class="icons">
156 |                 <i class="fa fa-facebook"></i>
157 |                 <i class="fa fa-twitter"></i>
158 |                 <i class="fa fa-instagram"></i>
159 |                 <i class="fa fa-linkedin"></i>
160 |             </div>
161 |             <p>Made with <i class="fa fa-heart-o"></i> by Oracle Brain</p>
162 |         </div>
163 |     </section>
164 | 
165 | 
166 |     <!-- Your other sections go here -->
167 | 
168 |     <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script> <!-- Font Awesome CDN -->
169 | </body>
170 | </html>
171 | 
172 | 
173 |     
174 | <!---------- JavaScript for Toggle Menu ---------------------------------->
175 |     <script>
176 |         // Get the navigation links element
177 | const navLinks = document.getElementById("navLinks");
178 | 
179 | // Function to show the menu
180 | function showMenu() {
181 |   navLinks.style.right = "0";
182 | }
183 | 
184 | // Function to hide the menu
185 | function hideMenu() {
186 |   navLinks.style.right = "-20px";
187 | }
188 | 
189 |     </script>
190 |     
191 | </body>
192 | </html>
193 | 
194 |    
195 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /* Reset styles and set default font */
  2 | * {
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     font-family: 'Poppins', sans-serif;
  6 | }
  7 | 
  8 | /* Header styling */
  9 | .header {
 10 |     min-height: 100vh;
 11 |     width: 100%;
 12 |     background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(img/banner.png);
 13 |     background-position: center;
 14 |     background-size: cover;
 15 |     position: relative;
 16 | }
 17 | 
 18 | /* Navigation styling */
 19 | .nav {
 20 |     display: flex;
 21 |     padding: 2% 6%;
 22 |     justify-content: space-between;
 23 |     align-items: center;
 24 | }
 25 | 
 26 | .nav img {
 27 |     width: 150px;
 28 | }
 29 | 
 30 | .nav-links {
 31 |     flex: 1;
 32 |     text-align: right;
 33 | }
 34 | 
 35 | .nav-links ul li {
 36 |     list-style: none;
 37 |     display: inline-block;
 38 |     padding: 8px 12px;
 39 |     position: relative;
 40 | }
 41 | 
 42 | .nav-links ul li a {
 43 |     color: #fff;
 44 |     text-decoration: none;
 45 |     font-size: 13px;
 46 | }
 47 | 
 48 | .nav-links ul li::after {
 49 |     content: '';
 50 |     width: 100%;
 51 |     height: 2px;
 52 |     background: #f44336;
 53 |     display: block;
 54 |     margin: auto;
 55 |     transition: 0.5s;
 56 | }
 57 | 
 58 | .nav-links ul li:hover::after {
 59 |     width: 100%;
 60 | }
 61 | 
 62 | .text-box {
 63 |     width: 90%;
 64 |     color: #fff;
 65 |     position: absolute;
 66 |     top: 50%;
 67 |     left: 50%;
 68 |     transform: translate(-50%, -50%);
 69 |     text-align: center;
 70 | }
 71 | 
 72 | .text-box h1 {
 73 |     font-size: 62px;
 74 | }
 75 | 
 76 | .text-box p {
 77 |     margin: 10px 0 40px;
 78 |     font-size: 14px;
 79 |     color: #fff;
 80 | }
 81 | 
 82 | /* Hero button styling */
 83 | .hero-btn {
 84 |     display: inline-block;
 85 |     text-decoration: none;
 86 |     color: #fff;
 87 |     border: 1px solid #fff;
 88 |     padding: 12px 34px;
 89 |     font-size: 13px;
 90 |     background: transparent;
 91 |     position: relative;
 92 |     cursor: pointer;
 93 | }
 94 | 
 95 | .hero-btn:hover {
 96 |     border: 1px solid #f44336;
 97 |     background: #f44336;
 98 |     transition: 1s;
 99 | }
100 | 
101 | /* Responsive navigation styling */
102 | @media (max-width: 700px) {
103 |     .text-box h1 {
104 |         font-size: 20px;
105 |     }
106 |     .nav-links ul li {
107 |         display: block;
108 |     }
109 |     .nav-links {
110 |         position: fixed;
111 |         background: #f44336;
112 |         height: 100vh;
113 |         width: 200px;
114 |         top: 0;
115 |         right: -200px;
116 |         text-align: left;
117 |         z-index: 2;
118 |         transition: 1s;
119 |     }
120 |     .nav .fa {
121 |         display: block;
122 |         color: #fff;
123 |         margin: 10px;
124 |         font-size: 22px;
125 |         cursor: pointer;
126 |     }
127 | 
128 |     .nav-links ul {
129 |         padding: 30px;
130 |     }
131 | }
132 | 
133 | /* Course section styling */
134 | .course {
135 |     width: 80%;
136 |     margin: auto;
137 |     text-align: center;
138 |     padding-top: 100px;
139 | }
140 | 
141 | h1 {
142 |     font-size: 36px;
143 |     font-weight: 600;
144 | }
145 | 
146 | p {
147 |     color: #777;
148 |     font-size: 14px;
149 |     font-weight: 300;
150 |     line-height: 22px;
151 |     padding: 10px;
152 | }
153 | 
154 | .row {
155 |     margin-top: 5%;
156 |     display: flex;
157 |     justify-content: space-between;
158 | }
159 | 
160 | .course-col {
161 |     flex-basis: 31%;
162 |     background: #fff3f3;
163 |     border-radius: 10px;
164 |     margin-bottom: 5%;
165 |     padding: 20px 12px;
166 |     box-sizing: border-box;
167 | }
168 | 
169 | h3 {
170 |     text-align: center;
171 |     font-weight: 600;
172 |     margin: 10px 0;
173 | }
174 | 
175 | .course-col:hover {
176 |     box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
177 | }
178 | 
179 | @media (max-width: 700px) {
180 |     .row {
181 |         flex-direction: column;
182 |     }
183 | }
184 | 
185 | /* Campus section styling */
186 | .campus {
187 |     width: 80%;
188 |     margin: auto;
189 |     text-align: center;
190 |     padding-top: 50px;
191 | }
192 | 
193 | .campus-col {
194 |     flex-basis: 32%;
195 |     border-radius: 10px;
196 |     margin-bottom: 30px;
197 |     position: relative;
198 |     overflow: hidden;
199 | }
200 | 
201 | .campus-col img {
202 |     width: 100%;
203 |     display: block;
204 | }
205 | 
206 | .layer {
207 |     background: transparent;
208 |     height: 100%;
209 |     width: 100%;
210 |     position: absolute;
211 |     top: 0;
212 |     left: 0;
213 |     transition: 0.5s;
214 | }
215 | 
216 | .layer:hover {
217 |     background: rgba(226, 0, 0, 0.7);
218 | }
219 | 
220 | .layer h3 {
221 |     width: 100%;
222 |     font-weight: 500;
223 |     color: #fff;
224 |     font-size: 26px;
225 |     bottom: 0;
226 |     left: 50%;
227 |     transform: translateX(-50%);
228 |     position: absolute;
229 |     opacity: 0;
230 |     transition: 0.5s;
231 | }
232 | 
233 | .layer:hover h3 {
234 |     bottom: 49%;
235 |     opacity: 1;
236 | }
237 | 
238 | /* Facilities section styling */
239 | .facilities {
240 |     width: 80%;
241 |     margin: auto;
242 |     text-align: center;
243 |     padding-top: 100px;
244 | }
245 | 
246 | .facilities-col {
247 |     flex-basis: 31%;
248 |     border-radius: 10px;
249 |     margin-bottom: 5%;
250 |     text-align: left;
251 | }
252 | 
253 | .facilities-col img {
254 |     width: 100%;
255 |     border-radius: 10px;
256 | }
257 | 
258 | .facilities-col p {
259 |     padding: 0;
260 | }
261 | 
262 | .facilities-col h3 {
263 |     margin-top: 16px;
264 |     margin-bottom: 15px;
265 |     text-align: left;
266 | }
267 | 
268 | /* Testimonials section styling */
269 | .testimonials {
270 |     width: 80%;
271 |     margin: auto;
272 |     padding-top: 100px;
273 |     text-align: center;
274 | }
275 | 
276 | .testimonial-col {
277 |     flex-basis: 44%;
278 |     border-radius: 10px;
279 |     margin-bottom: 5%;
280 |     text-align: left;
281 |     background: #fff3f3;
282 |     padding: 25px;
283 |     cursor: pointer;
284 |     display: flex;
285 | }
286 | 
287 | .testimonial-col img {
288 |     height: 40px;
289 |     margin-left: 5px;
290 |     margin-right: 30px;
291 |     border-radius: 50%;
292 | }
293 | 
294 | .testimonial-col p {
295 |     padding: 0;
296 | }
297 | 
298 | .testimonial-col h3 {
299 |     margin-top: 15px;
300 |     text-align: left;
301 | }
302 | 
303 | .testimonial-col .fa {
304 |     color: #f44336;
305 | }
306 | 
307 | /*--------- Testimonial Styles ---------*/
308 | 
309 | @media (max-width: 700px) {
310 |     .testimonial-col img {
311 |         margin-left: 0;
312 |         margin-right: 15px;
313 |     }
314 | }
315 | 
316 | /*--------- Call to Action Styles ---------*/
317 | 
318 | .cta {
319 |     margin: 100px auto;
320 |     width: 80%;
321 |     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
322 |                 url(img/banner.png) center/cover;
323 |     border-radius: 10px;
324 |     text-align: center;
325 |     padding: 100px 0;
326 | }
327 | 
328 | .cta h1 {
329 |     color: #fff;
330 |     margin-bottom: 40px;
331 |     padding: 0;
332 | }
333 | 
334 | @media (max-width: 700px) {
335 |     .cta h1 {
336 |         font-size: 24px;
337 |     }
338 | }
339 | 
340 | /*--------- Footer Styles ---------*/
341 | 
342 | .footer {
343 |     width: 100%;
344 |     text-align: center;
345 |     padding: 30px 0;
346 | }
347 | 
348 | .footer h4 {
349 |     margin-top: 20px;
350 |     margin-bottom: 25px;
351 |     font-weight: 600;
352 | }
353 | 
354 | .icons .fa {
355 |     color: #f44336;
356 |     margin: 0 13px;
357 |     cursor: pointer;
358 |     padding: 18px 0;
359 | }
360 | 
361 | .fa-heart-o {
362 |     color: #f44336;
363 | }
364 | 
365 | 
366 | /*--------- About Us page ---------*/
367 | 
368 | .sub-header{
369 |     height: 50vh;
370 |     width: 100%;
371 |     background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(img/background.jpg);
372 |     background-position: center;
373 |     background-size: cover;
374 |     color: #fff;
375 | }
376 | 
377 | .sub-header h1{
378 |     margin-top: 100px;
379 | }
380 | 
381 | .about-us{
382 |     width: 80%;
383 |     margin: auto;
384 |     padding-top: 80px;
385 |     padding-bottom: 50px;
386 | }
387 | 
388 | .about-col{
389 |     flex-basis: 48%;
390 |     padding: 30px 2px;
391 | }
392 | 
393 | .about-col img{
394 |     width: 100%;
395 | }
396 | 
397 | .about-col h1{
398 |     padding: 0;
399 | }
400 | 
401 | .about-col p{
402 |     padding: 15px 0 25px;
403 | }
404 | 
405 | .red-btn{
406 |     border: 1px solid #f44336;
407 |     background: transparent;
408 |     color: #f44336;
409 | }
410 | 
411 | .red-btn:hover{
412 |     background: #f44336;
413 |     color: #fff;
414 |     transition: 1s;
415 | }
416 | 
417 | /*--------- Blog-Content ---------*/
418 | 
419 | .blog-content{
420 |     width: 80%;
421 |     margin: auto;
422 |     padding: 60px 0;
423 | }
424 | 
425 | .blog-content{
426 |     flex-basis: 65%;
427 | }
428 | 
429 | .blog-content img{
430 |     width: 100%;
431 | }
432 | 
433 | .blog-left h2{
434 |     color: #222;
435 |     font-weight: 600;
436 |     margin: 30px 0;
437 | }
438 | 
439 | .blog-left p{
440 |     color: #999;
441 |     padding: 0;
442 | }
443 | 
444 | .blog-right{
445 |     flex-basis: 32%;
446 | }
447 | 
448 | .blog-right h3{
449 |     background: #f44336;
450 |     color: #fff;
451 |     padding: 7px 0;
452 |     font-size: 16px;
453 |     margin-bottom: 20px;
454 | }
455 | 
456 | .blog-right div{
457 |     display: flex;
458 |     align-items: center;
459 |     justify-content: space-between;
460 |     color: #555;
461 |     padding: 8px;
462 |     box-sizing: border-box;
463 | }
464 | 
465 | .comment-box{
466 |     border: 1px solid #ccc;
467 |     margin: 50px 0;
468 |     padding: 10px 20px;
469 | }
470 | 
471 | .comment-box h3{
472 |     text-align: left;
473 | }
474 | 
475 | .comment-form input, .comment-form textarea{
476 |     width: 100%;
477 |     padding: 10px;
478 |     margin: 15px 0;
479 |     box-sizing: border-box;
480 |     border: none;
481 |     outline: none;
482 |     background: #f0f0f0;
483 | }
484 | 
485 | .comment-form button{
486 |     margin: 10px 0;
487 | }
488 | 
489 | @media(max-width:700px){
490 |     .sub-header h1{
491 |         font-size: 24px;
492 |     }
493 | }
494 | 
495 | /*--------- Contact Us page ---------*/
496 | 
497 | .location{
498 |     width: 80%;
499 |     margin: auto;
500 |     padding: 80px 0;
501 | }
502 | 
503 | .location iframe{
504 |     width: 100%;
505 | }
506 | 
507 | .contact-us{
508 |     width: 80%;
509 |     margin: auto;
510 | }
511 | 
512 | .contact-col{
513 |     flex-basis: 48%;
514 |     margin-bottom: 30px;
515 | }
516 | 
517 | .contact-col div{
518 |     display: flex;
519 |     align-items: center;
520 |     margin: 40px;
521 | }
522 | 
523 | .contact-col div .fa{
524 |     font-size: 28px;
525 |     color: #f44336;
526 |     margin: 10px;
527 |     margin-right: 30px;
528 | }
529 | 
530 | .contact-col div p{
531 |     padding: 0;
532 | }
533 | 
534 | .contact-col div h5{
535 |     font-size: 20px;
536 |     margin-bottom: 5px;
537 |     color: #555;
538 |     font-weight: 400;
539 | }
540 | 
541 | .contact-col input, .contact-col textarea{
542 |     width: 100%;
543 |     padding: 15px;
544 |     margin-bottom: 17px;
545 |     outline: none;
546 |     border: 1px solid #ccc;
547 |     box-sizing: border-box;
548 | }


--------------------------------------------------------------------------------