Advertisement
ERENARD63

Eduford-COURSE

Dec 8th, 2021
1,677
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.26 KB | None | 0 0
  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <title>University Website Design - Easy Tutorials</title>
  5. <link rel="stylesheet" href="style.css">
  6. <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,600,700&display=swap" rel="stylesheet">
  7. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. </head>
  9. <body>
  10.     <section class="sub-header">
  11.         <nav>
  12.             <a href="index.html"><img src="images/logo.png"></a>
  13.             <div class="nav-links" id="navLinks">  
  14.                 <i class="fa fa-close" onclick="hideMenu()"></i>
  15.                 <ul>
  16.                     <li><a href="index.html">HOME</a></li>
  17.                     <li><a href="about.html">ABOUT</a></li>
  18.                     <li><a href="course.html">COURSE</a></li>
  19.                     <li><a href="blog.html">BLOG</a></li>
  20.                     <li><a href="contact.html">CONTACT</a></li>
  21.                 </ul>
  22.             </div>
  23.             <i class="fa fa-bars" onclick="showMenu()"></i>
  24.         </nav>
  25.             <h1>Our Courses</h1>
  26.     </section>
  27.    
  28.    
  29. <!---------- course ----------->
  30.    
  31.     <section class="course">
  32.         <h1>Courses We Offer</h1>
  33.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  34.         <div class="row">
  35.             <div class="course-col">
  36.                 <h3>Intermediate</h3>
  37.                 <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.</p>
  38.             </div>
  39.             <div class="course-col">
  40.                 <h3>Degree</h3>
  41.                 <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.</p>
  42.             </div>
  43.             <div class="course-col">
  44.                 <h3>Post Graduation</h3>
  45.                 <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.</p>
  46.             </div>
  47.         </div>
  48.     </section>
  49.    
  50. <!---------- Facilities ---------->
  51.    
  52.     <section class="facility">
  53.         <h1>Our Facilities</h1>
  54.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  55.             <div class="row">
  56.                 <div class="facility-col">
  57.                     <img src="images/library.png">
  58.                     <h3>World Class Library</h3>
  59.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet turpis nulla.</p>
  60.                 </div>
  61.                 <div class="facility-col">
  62.                     <img src="images/basketball.png">
  63.                     <h3>Largest Play Ground</h3>
  64.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet turpis nulla.</p>
  65.                 </div>
  66.                 <div class="facility-col">
  67.                     <img src="images/cafeteria.png">
  68.                     <h3>Tasty and Healthy Food</h3>
  69.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet turpis nulla.</p>
  70.                 </div>
  71.             </div>
  72.     </section>
  73.    
  74. <!-------- footer ---------->
  75.  
  76. <section class="footer">
  77.         <h4>About Us</h4>
  78.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet turpis nulla, eleifend faucibus est<br>sollicitudin ut. Maecenas ut venenatis ex, et dapibus purus.</p>
  79.         <div class="icons">
  80.             <i class="fa fa-facebook"></i>
  81.             <i class="fa fa-twitter"></i>
  82.             <i class="fa fa-instagram"></i>
  83.             <i class="fa fa-linkedin"></i>
  84.         </div>
  85.         <p>made with <i class="fa fa-heart-o"></i> by Easy Tutorials</p>
  86. </section>    
  87.  
  88.  
  89. <!----JavaScript for toggle menu---->
  90. <script>
  91.     var navLinks = document.getElementById("navLinks");
  92.  
  93.     function showMenu() {
  94.         navLinks.style.right = "0";
  95.     }
  96.  
  97.     function hideMenu() {
  98.         navLinks.style.right = "-200px";
  99.     }
  100. </script>  
  101.    
  102. </body>
  103. </html>    
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement