Skip to content

Commit f3a008a

Browse files
BolajiAyodejiBolajiAyodeji
authored
Merge pull request #11 from BolajiAyodeji/BolajiAyodeji-patch-1
Modified UI
2 parents d4ec1fa + 35f9787 commit f3a008a

File tree

4 files changed

+229
-71
lines changed

4 files changed

+229
-71
lines changed

‎css/app.css

+103-5
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,19 @@ body {
66

77
* {
88
box-sizing: border-box;
9+
border: 1px;
10+
}
11+
12+
h2,
13+
h3,
14+
h4,
15+
h5,
16+
h6 {
17+
color: #fff;
18+
}
19+
20+
a {
21+
text-decoration: none;
922
}
1023

1124
header {
@@ -37,9 +50,14 @@ svg {
3750
}
3851
}
3952

53+
.container {
54+
margin: 0;
55+
width: 100%
56+
}
57+
4058
.ml1 {
4159
font-weight: 200;
42-
font-size: 1.1em;
60+
font-size: 0.9em;
4361
}
4462

4563
.ml1 .letter {
@@ -103,7 +121,7 @@ svg {
103121
.shareButton {
104122
overflow: hidden;
105123
margin: 0 auto;
106-
padding-top: 75px;
124+
padding-top: 10px;
107125
}
108126

109127
.shareButton iframe {
@@ -125,7 +143,8 @@ svg {
125143
box-shadow: 0 0 0 3.0px #e9ecef;
126144
}
127145

128-
#userInput input, #userInput select {
146+
#userInput input,
147+
#userInput select {
129148
height: 60px;
130149
}
131150

@@ -161,10 +180,89 @@ svg {
161180

162181
#userInput button[type='reset']:hover {
163182
box-shadow: inset 0 0 0 2px #e9ecef;
164-
background:#11cdef;
183+
background: #11cdef;
165184
color: #000;
166185
}
167186

168187
footer {
169-
padding-top: 0;
188+
background: #000;
189+
position: relative;
190+
padding-top: 40px;
191+
padding-bottom: 20px
192+
}
193+
194+
footer h2 {
195+
color: #fff;
196+
}
197+
198+
footer h3 {
199+
color: #fff;
200+
}
201+
202+
.footer-link {
203+
margin: 0;
204+
padding: 0;
205+
}
206+
207+
.footer-link li {
208+
display: block;
209+
list-style: none;
210+
margin: 5px 10px 5px 0;
211+
}
212+
213+
footer p,
214+
footer span,
215+
.footer-link li a {
216+
color: #fff;
217+
}
218+
219+
.footer-link li a:hover {
220+
color: #2dce89;
221+
}
222+
223+
.copyright-text p,
224+
.footer-bottom .phone-contact p {
225+
font-size: 14px;
226+
}
227+
228+
.footer-bottom {
229+
border-top: 1px solid rgba(255, 255, 255, 0.1);
230+
margin-top: 5em;
231+
padding-top: 3em;
232+
}
233+
234+
.footer-bottom .phone-contact,
235+
.footer-bottom .social-icon {
236+
display: inline-block;
237+
vertical-align: top;
238+
}
239+
240+
.footer-bottom .phone-contact span {
241+
font-weight: 500;
242+
display: inline-block;
243+
margin-left: 10px;
244+
}
245+
246+
.social-icon {
247+
position: relative;
248+
padding: 0;
249+
margin: 0;
250+
}
251+
252+
.social-icon li {
253+
display: inline-block;
254+
list-style: none;
255+
}
256+
257+
.social-icon li a {
258+
border-radius: 100px;
259+
color: #d9d9d9;
260+
font-size: 15px;
261+
text-decoration: none;
262+
position: relative;
263+
margin: 5px 10px;
264+
}
265+
266+
.social-icon li a:hover {
267+
color: #2dce89;
170268
}

‎img/MIT-License-transparent.png

3.78 KB
Loading

‎index.html

+123-65
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,19 @@
2626

2727
<!-- Google Knowledge Graph card -->
2828
<script type='application/ld+json'>
29-
{
30-
"@context": "http://www.schema.org",
31-
"@type": "NettyFinder",
32-
"name": "NettyFinder",
33-
"url": "https://bolajiayodeji.github.io/netty-finder",
34-
"logo": "https://bolajiayodeji.github.io/netty-finder/img/logo.png",
35-
"description": "This script checks a Nigerian Telephone number and detects which network it belongs to."
36-
}
37-
</script>
29+
{
30+
"@context": "http://www.schema.org",
31+
"@type": "NettyFinder",
32+
"name": "NettyFinder",
33+
"url": "https://bolajiayodeji.github.io/netty-finder",
34+
"logo": "https://bolajiayodeji.github.io/netty-finder/img/logo.png",
35+
"description": "This script checks a Nigerian Telephone number and detects which network it belongs to."
36+
}
37+
</script>
3838
<!--Bootstrap CDN-->
3939
<link rel="stylesheet" href="css/bootstrap.min.css">
40+
<!--FontAwesome CDN-->
41+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
4042
<!--Main Stylesheet-->
4143
<link rel="stylesheet" type="text/css" media="screen" href="css/app.css" />
4244
<!--logo-->
@@ -46,55 +48,48 @@
4648
<body>
4749
<header>
4850
<h1>NettyFinder 🚀</h1>
51+
4952
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
5053
<polygon class="svg--sm" fill="white" points="0,0 30,100 65,21 90,100 100,75 100,100 0,100" />
51-
<polygon class="svg--lg" fill="white" points="0,0 15,100 33,21 45,100 50,75 55,100 72,20 85,100 95,50 100,80 100,100 0,100" />
54+
<polygon class="svg--lg" fill="white" points="0,0 15,100 33,21 45,100 50,75 55,100 72,20 85,100 95,50 100,80 100,100 0,100"
55+
/>
5256
</svg>
5357
</header>
5458

55-
<div class="col-md-12 col-sm-12">
56-
<div class="container">
57-
58-
<h1 class="ml1">
59-
<span class="text-wrapper">
60-
<span class="line line1"></span>
61-
<span class="letters">
62-
This script checks a Nigerian <img src="https://cdn3.iconfinder.com/data/icons/world-flags-square-vol-2/48/Nigeria-512.png"
63-
class="flag" alt="Nigeria Flag">
64-
Telephone number and detects which network it belongs to.
65-
</span>
66-
<span class="line line2"></span>
67-
</span>
68-
</h1>
69-
</div>
70-
</div>
71-
<hr />
72-
7359
<section id="userInput">
7460
<div class="container">
7561
<div class="row">
76-
<br /><br />
77-
<div class="col-md-6">
78-
<div class="alert alert-danger text-center" role="alert">
79-
Enter number without (+234), e.g 08109445504
80-
</div>
81-
</div>
82-
83-
<div class="col-md-6">
84-
<div class="alert alert-danger text-center" role="alert">
85-
Number must be 11 digits and not less than or greather than
86-
</div>
87-
</div>
88-
8962
<div class="col-md-6 col-sm-6">
9063

9164
<!-- NettyFinder Form -->
9265
<form>
93-
<br /><br /><br />
66+
<br />
67+
<br />
68+
<br />
9469
<div class="form-group">
70+
<div class="col-md-12">
71+
<div class="alert alert-danger text-center" role="alert">
72+
<p class="ml1">
73+
<span class="text-wrapper">
74+
<span class="line line1"></span>
75+
<span class="letters">
76+
This script checks a Nigerian
77+
<img src="https://cdn3.iconfinder.com/data/icons/world-flags-square-vol-2/48/Nigeria-512.png"
78+
class="flag" alt="Nigeria Flag"> Telephone number and detects which network it belongs to.
79+
</span>
80+
<span class="line line2"></span>
81+
</span>
82+
</p>
83+
</div>
84+
</div>
85+
86+
<div class="col-md-12">
87+
<div class="alert alert-danger text-center" role="alert">
88+
Enter number without [+234] e.g 08109445504
89+
</div>
90+
</div>
9591
<div class="col-md-12 col-sm-12">
96-
<input type="text" name="telephone" class="form-control" placeholder="Enter Telephone number"
97-
id="cf-name">
92+
<input type="text" name="telephone" class="form-control" placeholder="Enter Telephone number" id="cf-name">
9893
</div>
9994
<div class="col-md-3 col-sm-3">
10095
<button type="button" class="form-control" onclick="compute(form)">Submit</button>
@@ -104,8 +99,7 @@ <h1 class="ml1">
10499
</div>
105100

106101
<div class="col-md-12 col-sm-12">
107-
<input id="result" type="text" name="nettyResult" class="form-control" placeholder="NettyFinder Result"
108-
readonly>
102+
<input id="result" type="text" name="nettyResult" class="form-control" placeholder="NettyFinder Result" readonly>
109103
</div>
110104
</div>
111105
</form>
@@ -115,35 +109,99 @@ <h1 class="ml1">
115109

116110
<div class="col-md-6 col-sm-6">
117111
<div class="container">
118-
<div class="shareButton">
119-
<a href="https://twitter.com/intent/tweet?&ref_src=twsrc%5Etfw" class="twitter-mention-button"
120-
data-size="large" data-text="Hello there! I just tried out #NettyFinder and it got the network of my Nigerian Telephone number right. Some cool app developed by @iambolajiayo, check it out https://bolajiayodeji.github.io/netty-finder/"
121-
data-show-count="false">Tweet to @iambolajiayo</a>
122-
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
123-
&nbsp;&nbsp;
124-
<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbolajiayodeji.github.io%2Fnetty-finder%2F&layout=button_count&size=large&mobile_iframe=true&appId=1638690196224226&width=84&height=28"
125-
width="90" height="28" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
126-
allowTransparency="true" allow="encrypted-media"></iframe>
112+
<img src="img/logo.png" class="img-responsive" alt="nettyfinder spaceship">
127113
</div>
128114
</div>
129115
</div>
130116
</div>
131-
</div>
132117
</section>
133118

119+
120+
121+
<!-- FOOTER -->
134122
<footer>
135-
<div style="background-color:#ddd;" role="alert">
136-
<hr>
137-
<p class="text-center">Developed by; <a href="https://bolajiayodeji.github.io" target="_blank">Bolaji
138-
Ayodeji</a></p>
139-
<p class="mb-0 text-center">Source code: <a href="https://github.com/BolajiAyodeji/netty-finder" target="_blank">Github</a>
140-
|| <a href="https://codepen.io/iambolajiayo/pen/xyBVGx" target="_blank">Codepen</a></p>
123+
<div class="container">
124+
<div class="row">
125+
126+
<div class="col-md-6 col-sm-12">
127+
<div class="footer-thumb ">
128+
<h4>
129+
Made with
130+
<i class="fas fa-heart"></i> by
131+
<a href="https://bolajiayodeji.github.io">Bolaji Ayodeji</a> and
132+
<a href="https://github.com/BolajiAyodeji/netty-finder/graphs/contributors">this awesome people</a>
133+
</p>
134+
</div>
135+
</div>
136+
137+
<div class=" col-md-4 col-sm-12 ">
138+
<div class="footer-thumb">
139+
<div class="shareButton">
140+
<a href="https://twitter.com/intent/tweet?&ref_src=twsrc%5Etfw" class="twitter-mention-button" data-size="large" data-text="Hello there! I just tried out #NettyFinder and it got the network of my Nigerian Telephone number right. Some cool app developed by @iambolajiayo, check it out https://bolajiayodeji.github.io/netty-finder/"
141+
data-show-count="false">Tweet to @iambolajiayo</a>
142+
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
143+
&nbsp;&nbsp;
144+
<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbolajiayodeji.github.io%2Fnetty-finder%2F&layout=button_count&size=large&mobile_iframe=true&appId=1638690196224226&width=84&height=28" width="90" height="28" style="border:none;overflow:hidden"
145+
scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
146+
</div>
147+
</div>
148+
</div>
149+
150+
<div class="col-md-2 col-sm-12 ">
151+
<div class="footer-thumb ">
152+
<a class="github-button " href="https://github.com/BolajiAyodeji/netty-finder " data-icon="octicon-star " data-size="large " data-show-count="true " aria-label="Star BolajiAyodeji/netty-finder on GitHub ">Star</a>
153+
<a class="github-button " href="https://github.com/BolajiAyodeji/netty-finder/fork " data-icon="octicon-repo-forked " data-size="large " data-show-count="true " aria-label="Fork BolajiAyodeji/netty-finder on GitHub ">Fork</a>
154+
<a class="github-button" href="https://github.com/BolajiAyodeji/netty-finder/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch BolajiAyodeji/netty-finder on GitHub">Watch</a>
155+
</div>
156+
</div>
157+
</div>
158+
159+
160+
161+
<div class="col-md-12 col-sm-12 ">
162+
<div class="footer-bottom ">
163+
<div class="col-md-6 col-sm-5 ">
164+
<div class="copyright-text ">
165+
<p>Copyright &copy;
166+
<script>
167+
document.write(new Date().getFullYear());
168+
</script>
169+
</p>
170+
</div>
171+
</div>
172+
173+
<ul class="social-icon ">
174+
<li>
175+
<a href="https://facebook.com/iambolajiayo " class="fab fa-facebook-square " attr="facebook icon "></a>
176+
</li>
177+
<li>
178+
<a href="https://twitter.com/iambolajiayo " class="fab fa-twitter "></a>
179+
</li>
180+
<li>
181+
<a href="https://instagram.com/iambolajiayo " class="fab fa-instagram "></a>
182+
</li>
183+
<li>
184+
<a href="https://linkedin/in/iambolajiayo " class="fab fa-linkedin "></a>
185+
</li>
186+
<li>
187+
<a href="https://github.com/bolajiayodeji " class="fab fa-github "></a>
188+
</li>
189+
<li>
190+
<a href="https://codepen.io/iambolajiayo " class="fab fa-codepen "></a>
191+
</li>
192+
</ul>
193+
</div>
194+
</div>
195+
</div>
196+
197+
</div>
141198
</div>
142199
</footer>
143200

144-
<script src="js/jquery.js"></script>
145-
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
146-
<script src="js/app.js"></script>
201+
<script src="js/jquery.js "></script>
202+
<script async defer src="https://buttons.github.io/buttons.js "></script>
203+
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js "></script>
204+
<script src="js/app.js "></script>
147205
</body>
148206

149207
</html>

0 commit comments

Comments
 (0)