Hi everybody! Using HTML, CSS, and JavaScript, you will learn

how to create a responsive, multi-page education or school website. Using html5, CSS3, and ES6 JavaScript, this beginner web development project tutorial shows you how to create a cutting-edge educational website.

You will learn how to create a responsive multipage website from the ground up in this comprehensive website tutorial. There will be a Home page, an About page, a Courses page, and a Contact page with a Contact Form that works properly on this website.

You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.

Index.html

				
					<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University Website Design - DailyWebDesign   </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

<section class="header">
    <nav>
        <a href="index.html"><img decoding="async" src="img/logo.png"></a>
        <div class="nav-links" id="navLinks">
            <i class="fa fa-times" onclick="hideMenu()"></i>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="course.html">Course</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>

    <div class="text-box">
        <h1>World's Biggest University</h1>
        <p>In terms of campus area, the Berry College, an American private, liberal arts college in Mount Berry on the northern-most boundary of Rome, Georgia is arguably the largest university in the world. It has approximately 2,100 students on 28,000 acres of north Georgia hill country.Farhan</p>

        <a href="" class="hi-btn">Visit Us To Know More</a>

    </div>
</section>

<!-- Course -->

<section class="course">
    <h1>Course We Offer</h1>
    <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>
    <div class="row">
        <div class="course-col">
            <h3>Intermediate</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
        </div>
        <div class="course-col">
            <h3>Degree</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
        </div>
        <div class="course-col">
            <h3>Post Gradution</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
        </div>
        
    </div>
</section>

<!-- campus -->

<section class="campus">
    <h1>Our Global Campus</h1>
    <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>

    <div class="row">
        <div class="campus-col">
            <img decoding="async" src="img/london.png">
            <div class="layer">
                <h3>LONDON</h3>
            </div>
        </div>
        <div class="campus-col">
            <img decoding="async" src="img/newyork.png">
            <div class="layer">
                <h3>NEW YORK</h3>
            </div>
        </div>
        <div class="campus-col">
            <img decoding="async" src="img/washington.png">
            <div class="layer">
                <h3>WASHINGTON</h3>
            </div>
        </div>
    </div>
</section>

<!-- Facilities -->

<section class="facilities">
    <h1>Our Facilities</h1>
    <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>

    <div class="row">
        <div class="facilities-col">
            <img decoding="async" src="img/library.png">
            <h3>World Class Library</h3>
            <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>
        </div>
        <div class="facilities-col">
            <img decoding="async" src="img/basketball.png">
            <h3>Largest Play Ground</h3>
            <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>
        </div>
        <div class="facilities-col">
            <img decoding="async" src="img/cafeteria.png">
            <h3>Tasty and Healthy Food</h3>
            <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>
        </div>
    </div>
</section>


<!-- testimonials -->

<section class="testimonials">
    <h1>What Our Student Says</h1>
    <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>

    <div class="row">
        <div class="testimonials-col">
            <img decoding="async" src="img/user2.jpg">
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
                <h3>Edward Bay</h3>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-o"></i>
            </div>
        </div>
        <div class="testimonials-col">
            <img decoding="async" src="img/user1.jpg">
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
                <h3>Chirstine Berkley</h3>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
            </div>
        </div>
    </div>
</section>

<!-- call To Action -->

<section class="cta">
    <h1>Enroll for our various online courses <br> Anywhere from The World</h1>
    <a href="" class="hi-btn">CONTACT US</a>
</section>


<!-- Footer -->

<section class="footer">
    <h4>About Us</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
    <div class="icons">
        <i class="fa fa-facebook"></i>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-instagram"></i>
        <i class="fa fa-linkedin"></i>
    </div>
    <p>Made with <i class="fa fa-heart-o"></i> by Daily Web Design</p>
</section>

















<!-- javascript for toggle Menu -->

<script type="text/javascript">
    
    var navLinks = document.getElementById("navLinks");
    function showMenu(){
        navLinks.style.right = "0";
    }

    function hideMenu(){
        navLinks.style.right = "-200px";
    }
</script>



</body>
</html>

about.html

				
					<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University Website Design - DailyWebDesign   </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

<section class="sub-header">
    <nav>
        <a href="index.html"><img decoding="async" src="img/logo.png"></a>
        <div class="nav-links" id="navLinks">
            <i class="fa fa-times" onclick="hideMenu()"></i>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="course.html">Course</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>
    <h1>About Us</h1>
</section>



<!-- about us content -->

<section class="about-us">
    <div class="row">
        <div class="about-col">
            <h1>We are the world's largst univerty</h1>
            <p>In terms of campus area, the Berry College, an American private, liberal arts college in Mount Berry on the northern-most boundary of Rome, Georgia is arguably the largest university in the world. It has approximately 2,100 students on 28,000 acres of north Georgia hill country.FarhanIn terms of campus area, the Berry College, an American private, liberal arts college in Mount Berry on the northern-most boundary of Rome, Georgia is arguably the largest university in the world. It has approximately 2,100 students on 28,000 acres of north Georgia hill country.Farhan</p>
            <a href="" class="hi-btn red-btn">EXPLORE NOW</a>
        </div>
        <div class="about-col">
            <img decoding="async" src="img/about.jpg">
        </div>
    </div>
</section>

<!-- footer -->
<section class="footer">
    <h4>About Us</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
    <div class="icons">
        <i class="fa fa-facebook"></i>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-instagram"></i>
        <i class="fa fa-linkedin"></i>
    </div>
    <p>Made with <i class="fa fa-heart-o"></i> by Daily Web Design</p>
</section>

<!-- javascript -->

<script type="text/javascript">
    
    var navLinks = document.getElementById("navLinks");
    function showMenu(){
        navLinks.style.right = "0";
    }

    function hideMenu(){
        navLinks.style.right = "-200px";
    }
</script>
</body>
</html>

course.html

				
					<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University Website Design - DailyWebDesign   </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

<section class="sub-header">
    <nav>
        <a href="index.html"><img decoding="async" src="img/logo.png"></a>
        <div class="nav-links" id="navLinks">
            <i class="fa fa-times" onclick="hideMenu()"></i>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="course.html">Course</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>
    <h1>Our Course</h1>
</section>

<!-- course -->
<section class="course">
    <h1>Course We Offer</h1>
    <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>
    <div class="row">
        <div class="course-col">
            <h3>Intermediate</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
        </div>
        <div class="course-col">
            <h3>Degree</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
        </div>
        <div class="course-col">
            <h3>Post Gradution</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
        </div>
        
    </div>
</section>

<!-- facilities -->

<section class="facilities">
    <h1>Our Facilities</h1>
    <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>

    <div class="row">
        <div class="facilities-col">
            <img decoding="async" src="img/library.png">
            <h3>World Class Library</h3>
            <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>
        </div>
        <div class="facilities-col">
            <img decoding="async" src="img/basketball.png">
            <h3>Largest Play Ground</h3>
            <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>
        </div>
        <div class="facilities-col">
            <img decoding="async" src="img/cafeteria.png">
            <h3>Tasty and Healthy Food</h3>
            <p>publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a farhan</p>
        </div>
    </div>
</section>

<!-- footer -->
<section class="footer">
    <h4>Course</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
    <div class="icons">
        <i class="fa fa-facebook"></i>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-instagram"></i>
        <i class="fa fa-linkedin"></i>
    </div>
    <p>Made with <i class="fa fa-heart-o"></i> by Daily Web Design</p>
</section>

<!-- javascript -->

<script type="text/javascript">
    
    var navLinks = document.getElementById("navLinks");
    function showMenu(){
        navLinks.style.right = "0";
    }

    function hideMenu(){
        navLinks.style.right = "-200px";
    }
</script>
</body>
</html>

blog.html

				
					<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University Website Design - DailyWebDesign   </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

<section class="sub-header">
    <nav>
        <a href="index.html"><img decoding="async" src="img/logo.png"></a>
        <div class="nav-links" id="navLinks">
            <i class="fa fa-times" onclick="hideMenu()"></i>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="course.html">Course</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>
    <h1>Our Certificate & online Programs For 2021</h1>
</section>

<!-- blog page content -->

<section class="blog-content">
    <div class="row">
        <div class="blog-left">
            <img decoding="async" src="img/certificate.jpg">
            <h2>Our Certificate & online Programs For 2021</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>



            <div class="comment-box">
                <h3>Leave a comment</h3>

                <form class="comment-form">
                    <input type="text" placeholder="Enter Name">
                    <input type="email" placeholder="Enter Email">
                    <textarea rows="5" placeholder="Your Comment"></textarea>
                    <button type="submit" class="hi-btn red-btn">POST COMMENT</button>
                </form>
            </div>

        </div>
        <div class="blog-right">
            <h3>Post Categories</h3>
            <div>
                <span>Business Analytics</span>
                <span>21</span>
            </div>
            <div>
                <span>Data Science</span>
                <span>28</span>
            </div>
            <div>
                <span>Machine Learning</span>
                <span>20</span>
            </div>
            <div>
                <span>Computer Science</span>
                <span>34</span>
            </div>
            <div>
                <span>AutoCAD</span>
                <span>42</span>
            </div>
            <div>
                <span>Journalism</span>
                <span>22</span>
            </div>
            <div>
                <span>Science</span>
                <span>44</span>
            </div>
        </div>
    </div>
</section>



<!-- footer -->
<section class="footer">
    <h4>Blog</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
    <div class="icons">
        <i class="fa fa-facebook"></i>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-instagram"></i>
        <i class="fa fa-linkedin"></i>
    </div>
    <p>Made with <i class="fa fa-heart-o"></i> by Daily Web Design</p>
</section>

<!-- javascript -->

<script type="text/javascript">
    
    var navLinks = document.getElementById("navLinks");
    function showMenu(){
        navLinks.style.right = "0";
    }

    function hideMenu(){
        navLinks.style.right = "-200px";
    }
</script>
</body>
</html>

contact.html

				
					<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University Website Design - DailyWebDesign   </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

<section class="sub-header">
    <nav>
        <a href="index.html"><img decoding="async" src="img/logo.png"></a>
        <div class="nav-links" id="navLinks">
            <i class="fa fa-times" onclick="hideMenu()"></i>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="course.html">Course</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>
    <h1>Contact Us</h1>
</section>

<!-- contact us -->

<section class="location">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d241316.64332144568!2d72.74109713631994!3d19.08252232482484!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c6306644edc1%3A0x5da4ed8f8d648c69!2sMumbai%2C%20Maharashtra!5e0!3m2!1sen!2sin!4v1637580302288!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</section>


<section class="contact-us">
    <div class="row">
        <div class="contact-col">
            <div>
                <i class="fa fa-home"></i>
                <span>
                    <h5>XYZ Road, B Building</h5>
                    <p>Mumbai, Maharashtra, INDIA</p>
                </span>
            </div>
            <div>
                <i class="fa fa-phone"></i>
                <span>
                    <h5>+1 0123 45679</h5>
                    <p>Monday to Saturday, 10AM to 6PM</p>
                </span>
            </div>
            <div>
                <i class="fa fa-envelope-o"></i>
                <span>
                    <h5>info@dailywebdesign.com</h5>
                    <p>Email us your query</p>
                </span>
            </div>
        </div>
        <div class="contact-col">
            
            <form action="form-handler.php" method="post">
                <input type="text" name="name" placeholder="Enter Your Name" required>
                <input type="email" name="email" placeholder="Enter Email Address" required>
                <input type="text" name="subject" placeholder="Enter Your Subject" required>
                <textarea rows="8" name="message" placeholder="Message" required></textarea>
                <button type="submit" class="hi-btn red-btn">Send Message</button>
            </form>
        </div>
    </div>
    
</section>



<!-- footer -->
<section class="footer">
    <h4>Contact Us</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut farhan.</p>
    <div class="icons">
        <i class="fa fa-facebook"></i>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-instagram"></i>
        <i class="fa fa-linkedin"></i>
    </div>
    <p>Made with <i class="fa fa-heart-o"></i> by Daily Web Design</p>
</section>

<!-- javascript -->

<script type="text/javascript">
    
    var navLinks = document.getElementById("navLinks");
    function showMenu(){
        navLinks.style.right = "0";
    }

    function hideMenu(){
        navLinks.style.right = "-200px";
    }
</script>
</body>
</html>

style.css

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');


*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.4),rgba(4,9,30,0.4)),url(img/banner.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
nav img{
    width: 150px;
}
.nav-links{
    flex: 1;
    text-align: right;
}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}
.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.nav-links ul li:hover::after{
    width: 100%;
}
.text-box{
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.text-box h1{
    font-size: 62px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 17px;
    color: #fff;
}
.hi-btn{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.hi-btn:hover{
    border: 1px solid #f44335;
    background: #f44335;
    transition: 1s;
}

nav .fa{
    display: none;
}












/*Responsive*/
@media(max-width: 700px){
    .text-box h1{
        font-size: 20px
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: fixed;
        background: #f44335;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul{
        padding: 30px;
    }
}

/*course*/

.course{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
h1{
    font-size: 36px;
    font-weight: 600;
}
p{
    color: #000;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}
.row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
    
}
.course-col{
    flex-basis: 31%;
    background: #fff3f4;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}
h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}
.course-col:hover{
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}

/*responsive for course*/
@media(max-width: 700px){
    .row{
        flex-direction: column;
    }
}

/*campus*/
.campus{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}
.campus-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.campus-col img{
    width: 100%;
    display: block;
}
.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.layer:hover{
    background: rgba(226,0,0,0.7);
}
.layer h3{
    width: 100%;
    font-weight: 5000;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;
}

/*facilities*/

.facilities{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
.facilities-col{
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
}
.facilities-col img{
    width: 100%;
    border-radius: 10px;

}
.facilities-col p{
   padding: 0;
}
.facilities-col h3{
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: left;
}

/*testimonials*/

.testimonials{
    width: 80%;
    margin: auto;
    padding-top: 100px;
    text-align: center;
}
.testimonials-col{
    flex-basis: 44%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
    background: #fff3f4;
    padding: 25ox;
    cursor: pointer;
    display: flex;
}
.testimonials-col img{
    height: 40px;
    margin-left: 5px;
    margin-right: 30px;
    border-radius: 50%;
}
.testimonials-col p{
    padding: 0;
}
.testimonials-col h3{
    margin-top: 15px;
    text-align: left;
}
.testimonials-col .fa{
    color: #f44334;
}

/*responsive testimonial*/
@media(max-width: 700px){
    .testimonials-col img{
    margin-left: 0px;
    margin-right: 15px;
    
}
}

/*call to action*/

.cta{
    margin: 100px auto;
    width: 80%;
    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(img/banner2.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
}

.cta h1{
    color: #fff;
    margin-bottom: 40px;
    padding: 0;
}

/*responsive for cta*/

@media(max-width: 700px){
    .cta h1{
       font-size: 24px;
    }
}

/*footer*/

.footer{
    width: 100%;
    text-align: center;
    padding: 30px 0;

}
.footer h4{
    margin-bottom: 25px;
    margin-top: 20px;
    font-weight: 600;
}

.icons .fa{
    color: #f44334;
    margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;

}
.fa-heart-o{
    color: #f44334;
}


/*about us page*/
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(img/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.about-us{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}
.about-col{
    flex-basis: 48%;
    padding: 30px 2px;
}
.about-col img{
    width: 100%;
}
.about-col h1{
    padding-top: 0;
}
.about-col p{
    padding: 15px 0 25px;
}
.red-btn{
    border: 1px solid #f44334;
    background: transparent;
    color: #f44334;
}
.red-btn:hover{
    color: #fff;
}

/*blog-content*/
.blog-content{
    width: 80%;
    margin: auto;
    padding: 60px 0;
}
.blog-left{
    flex-basis: 65%;
}
.blog-left img{
    width: 100%;
}
.blog-left h2{
    color: #222;
    font-weight: 600;
    margin: 30px 0;
}
.blog-left p{
    color: #999;
    padding: 0;
}
.blog-right{
    flex-basis: 32%;
}
.blog-right h3{
    background: #f44334;
    color: #fff;
    padding: 7px 0;
    font-size: 16px;
    margin-bottom: 20px;
}
.blog-right div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #555;
    padding: 8px;
    box-sizing: border-box;
}

.comment-box{
    border: 1px solid #ccc;
    margin: 50px 0;
    padding: 10px 20px;
}
.comment-box h3{
    text-align: left;
}

.comment-form input,
.comment-form textarea{
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: #f0f0f0;
}
.comment-form button{
    margin: 10px 0;
}

/*reponsive blog*/
@media(max-width: 700px){
    .sub-header h1{
        font-size: 24px;
    }
}

/*contact us*/

.location{
    width: 80%;
    margin: auto;
    padding: 80px 0;
}

.location iframe{
    width: 100%;
}

.contact-us{
    width: 80%;
    margin: auto;
}
.contact-col{
    flex-basis: 48%;
    margin-bottom: 30px;
}
.contact-col div{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.contact-col div .fa{
    font-size: 20px;
    color: #f44334;
    margin: 10px;
    margin-right: 30px;
}
.contact-col div p{
    padding: 0;
}
.contact-col div h5{
    font-size: 20px;
    margin-bottom: 5px;
    color: #555;
    font-weight: 400;
}

.contact-col input,
.contact-col textarea{
    width: 100%;
    padding: 15px;
    margin-bottom: 17px;
    box-sizing: border-box;
    border: none;
    outline: none;
    border: 1px solid #ccc;
}