github-search-users-design/index.html at master · mohammed-esi/github-search-users-design · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="icon" href="./public/github.svg" />
    <link rel="apple-touch-icon" href="./public//github.svg" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/style.css">
    <title>Github Search</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
      <a class="navbar-brand" href="#home">Loop<b style="color: #cd5c5c;">Med</b></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="./NotFoound.html">
                  <button type="button" class="btn my-btn "><i class="fab fa-github" style="margin-right: 5px;font-size: 16px;"></i>Sign In</button>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="./search.html">
                  <button type="button" class="btn my-btn">
                    <i class="far fa-arrow-alt-circle-right" style="margin-right: 5px;font-size: 16px;"></i>Go to Serach Users
                  </button>
                </a>
              </li>
          </ul>
      </div>
    </div>
  </div>
</nav>

<!-- Home Section -->
<div class="my-home-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-12">
        <img src="./img/six.svg.svg" class="img-fluid mb-3" >
      </div>
      <div class="col-lg-6 col-md-6 col-sm-12">
        <div class="my-form-section text-center">
          <h1><i class="fab fa-github my-github"></i></h1>
          <h3 class="display-4"><b>Git</b>hub Search Users</h3>
          <p>You can find people in this app they are users in Github</p>
        </div>
      </div>
    </div>
  </div>
  </div>

<!-- Explore Head -->
<section id="explore-head-section">
  <div class="container">
    <div class="row">
      <div class="col text-center py-5">
        <h1 class="display-4">
          Description
        </h1>
        <p class="lead">
          The content of this is to website enable the use of Github data on the site users search and show information about them if you want to read click
        </p>
        <a href="./about.html" class="btn btn-outline-secondary">Find out More</a>
      </div>
    </div>
  </div>
</section>

<!-- Explore Section -->
<section id="explore-section" class="bg-light text-muted py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <img src="./img/theer.svg.svg" class="img-fluid mb-3">
      </div>
      <div class="col-md-6">
        <h3>Responity & Grid</h3>
        <p>This simple site is one of the goals of ease of use and enabling the user to operate it on phones, tablets and computers : </p>
        <div class="d-flex">
          <div class="p-4 align-self-start">
            <i class="fas fa-check fa-2x"></i>
          </div>
          <div class="p-4 align-self-start">
            You will not find any difference between using them on phones or computers, as if they were made for both phones, and it supports even the latest newer phones
          </div>
        </div>
        <div class="d-flex">
          <div class="p-4 align-self-start">
            <i class="fas fa-check fa-2x"></i>
          </div>
          <div class="p-4 align-self-start">
            You are suffering from slow internet only. Don't be afraid of this, because it is free of many tools, and it will not delay downloading
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- Create Head -->
<section id="create-head-section" class="create-head-section">
  <div class="container">
    <div class="row">
      <div class="col text-center py-5">
        <h1 class="display-4">
          Create
        </h1>
        <p class="lead">
          It was created with very simple things Bootstrap and React and is based on Github data
        </p>
        <a href="#" class="btn btn-outline-light">Find out More</a>
      </div>
    </div>
  </div>
</section>

<!-- Create Section -->
<section id="create-section" class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-6 order-2">
        <img src="./img/happy-music.svg" class="img-fluid mb-3">
      </div>
      <div class="col-md-6 order-1">
        <h3>Create & Content</h3>
        <p>This site can meet the needs of the developer or any worker who makes his work easier for such a site has a display of his work for his ease of use</p>
        <div class="d-flex">
          <div class="p-4 align-self-start">
            <i class="fas fa-check fa-2x"></i>
          </div>
          <div class="p-4 align-self-start">
            You are a lawyer and you need a special site that is easy to use and easy to reach for customers. This is just for you
          </div>
        </div>
        <div class="d-flex">
          <div class="p-4 align-self-start">
            <i class="fas fa-check fa-2x"></i>
          </div>
          <div class="p-4 align-self-start">
            You are a beginner web developer who needs anything that helps you show off your skills. This can help you
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- Share Head -->
<section id="share-head-section" class="share-head-section">
  <div class="container">
    <div class="row">
      <div class="col text-center py-5">
        <h1 class="display-4">
          Share
        </h1>
        <p class="lead">
          We'll talk about what Github does. You can see it in more depth just follow the path
        </p>
        <a href="#" class="btn btn-outline-light">Find out More</a>
      </div>
    </div>
  </div>
</section>

<!-- Share Section -->
<section id="share-section" class="bg-light text-muted py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <img src="./img/fore.svg.svg" class="img-fluid mb-3">
      </div>
      <div class="col-md-6">
        <h3>Share Your Content</h3>
        <p>You are a developer and you are looking to publish your business. Github can be hired to help you a lot</p>
        <div class="d-flex">
          <div class="p-4 align-self-start">
            <i class="fas fa-check fa-2x"></i>
          </div>
          <div class="p-4 align-self-start">
            You can receive codes safely and with great experience, and you can also find great content
          </div>
        </div>
        <div class="d-flex">
          <div class="p-4 align-self-start">
            <i class="fas fa-check fa-2x"></i>
          </div>
          <div class="p-4 align-self-start">
            You can work with it, deliver your customer's request, or easily receive your order from the customer
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- Footer -->
<footer id="main-footer" class="bg-dark">
  <div class="container">
    <div class="row">
      <div class="col text-center pt-4">
        <h3>Loop<b style="color: #cd5c5c;">Med</b></h3>
        <h5>Copyright &copy; 2020</h5>
        <p>Zighed Mohammed Elamine</p>
      </div>
    </div>
  </div>
</footer>


<!-- Bootstrap and Jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/b4ad2faa56.js"></script>
</body>
</html>