University-Website/About.html at master · Tosifkankod/University-Website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="website.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap"
        rel="stylesheet">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


</head>

<body>

    <section class="sub-header">
        <nav>
            <a href="website.html"><img src="images/logo.png " alt=""></a>
            <div class="nav-links" id="navLinks">
                <i class="fa fa-times" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="website.html" style="transition:1s">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">COURSE</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="">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 Worlds best university</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias similique tempore nulla magnam modi, iure cupiditate dolorum illum eum repellendus pariatur dolorem omnis, vitae voluptate. Impedit ipsam atque quam doloribus.lor Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex, repellendus! Eos nulla ad veritatis pariatur soluta. Incidunt similique quas deleniti facere soluta ducimus ipsa eligendi, quo odit quidem, cupiditate libero.</p>
                <a href="#" class="hero-btn red-btn">EXPLORE NOW</a>
            </div>
            <div class="about-col">
                <img src="images/about.jpg" alt="">
            </div>
        </div>
    </section>


    <!-- /* ------------------- CALL TO ACTION---------------------- */ -->
    <section class="footer">
        <h4>About Us </h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla omnis voluptate illo fugit. Quisquam maiores magnam animi repellendus consectetur <br>neque ad odio impedit architecto iure? Saepe modi ad repellendus dignissimos?</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 </p>
    </section>


    <!-- Javascript for Toggle Menu -->
    <script>
        var navLinks = document.getElementById("navLinks");

        function showMenu(){
            navLinks.style.right = "0";
        }
        function hideMenu(){
            navLinks.style.right = "-200px";
        }


    </script>
</body>

</html>