Learning/index.html at main · 2Toucans-com/Learning · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="static/css/style.css">
    <title>2Toucons Lab</title>
</head>

<body class="d-flex flex-column h-100 main-bg">
    <!-- Navbar  -->

    <nav class="navbar navbar-dark navbar-expand-lg shadow py-3">

        <div class="container">
            <div class="d-flex flex-row d-md-none w-100 d-flex justify-content-between navbar__contain-logo-toggle">
                <a class="navbar__logo" href="#">
                    <img class="navbar__logo__img" src="static/images/2toucons.jpg"
                        alt="nags with notions logo">
                </a>
                <button class="navbar__toggler toggler bg-dark Btn navbar-toggler align-self-center ml-auto" title="button"
                    type="button" data-toggle="collapse" data-target=".navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse w-100 order-1 order-md-0 navbarNav">
                <ul class="navbar-nav mr-auto collapse__list mx-auto">
                    <li class="collapse__list__item">
                        <a class="nav-link collapse__content nav-link
                            {% if request.path == home_url %}active{% endif %}" aria-current="page"
                            href="#">Home</a>
                    </li>
                    <li class="collapse__list__item">
                        <a class="collapse__content nav-link" href="/templates/scss.html">SCSS</a>
                    </li>
                    <li class="collapse__list__item">
                        <a class="collapse__content nav-link" href="#">Docker</a>
                    </li>
            </div>
        </div>
    </nav>


<!-- Hero -->
<div class="p-5 text-center bg-image rounded-3" style="
    background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
    height: 400px;
  ">
  <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
    <div class="d-flex justify-content-center align-items-center h-100">
      <div class="text-white">
        <h1 class="mb-3">2Toucons Learning Hub</h1>
        <h4 class="mb-3">Listen, Learn, Contribute</h4>
        <a class="btn btn-outline-light btn-lg" href="#!" role="button">Learn Something</a>
      </div>
    </div>
  </div>
</div>
<!-- Hero -->

    </main>


    <!-- footer -->

    <footer>
        <div class="footer-top">
            <div class="container-fluid">
                <div class="row no-gutter">
                    <div class="col-lg-4 mx-auto">
                        <div class="col-lg-4">
                            <img class="col-lg-4__logo__img mb-3" src="/static/images/2toucons.jpg"
                                alt="pink horse with Nags logo">
                            <p><i>xxxxxxxx</i></p>
                        </div>
                        <div class="col-lg-4__social-links mx-auto">
                            <a href="#"><i class="ri-facebook-circle-fill"></i></a>
                            <a href="#"><i class="ri-instagram-fill"></i></a>
                            <a href="#"><i class="ri-github-fill"></i></a>
                            <a href="#"><i class="ri-linkedin-box-fill"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-4 mx-auto">
                        <h6 class="mt-4">CONTACT</h6>
                        <p class="mb-1">xxxxx</p>
                        <p class="mb-1">xxxxxxxxx</p>
                        <p class="mb-1">0xxxxxxxxx</p>
                        <p class="mb-0">xxxxxxxxxx </p>
                    </div>
                    <div class="col-lg-2 mx-auto">
                        <h6 class="mx-auto mt-4">xxxx</h6>
                        <p class="mb-1">xxxxxxxxxx</p>
                        <p class="mb-1">xxxxxxxxxxxxxx</p>
                        <p>xxxxxxxxxxxxxx</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-auto">
                        <p class="mb-0">Copyrights all rights reserved</p>
                    </div>
                </div>
            </div>
        </div>


    </footer>

    <!-- /.footer -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">
        </script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="{% static '/js/script.js'%}"></script>
</body>

</html>