-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (93 loc) · 3.88 KB
/
index.html
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
<!DOCTYPE html>
<html>
<!--The Head Tag-->
<head>
<!--the title of the page-->
<title>SiZillion - A Responsiveness Web-Based Testing Tool</title>
<!--META Tages-->
<meta name="description" content="
Here you can test all your responsive websites on any
device whether it's a big monitor or it's just a smart watch.
" />
<meta name="keywords" content="
mkebsi, mrkebsi, how can i test my website,
what is the best way to test the width of a web page,
how can i test the responsive of my website using
my phone, what can i do to check the width of my site,
can i use my phone to examinate a website, mohammed
alkebsi, mr.kebsi
"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#001e22"/>
<!--LINK Tages-->
<link rel="stylesheet" href="css/main.css" id="stylesheet" />
<link rel="icon" href="img/logoCubed.png" />
</head>
<!--the body of the website-->
<body onload="Start()">
<!--top animated line-->
<div class="topLine"></div>
<!--the first content-->
<div class="first content">
<img src="img/finalResult.png" class="firstImg" alt="SiZillion Logo"/>
<br/>
<h1 class="titleNo1" align="center">Where Website's Become Responsive!</h1>
</div>
<svg class="waves waves-opp" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28"
preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" style="fill:#fff0; stroke: #0ff; stroke-width: 2; opacity: 1;" />
<use xlink:href="#gentle-wave" x="48" y="3" style="fill:#fff0; stroke: #0ff; stroke-width: 2; opacity: 1;" />
<use xlink:href="#gentle-wave" x="48" y="5" style="fill:#fff0; stroke: #0ff; stroke-width: 2; opacity: 1;" />
<use xlink:href="#gentle-wave" x="48" y="7" style="fill:#fff0; stroke: #0ff; stroke-width: 2; opacity: 1;" />
</g>
</svg>
<a href="src/index.html" class="startBtn">Start Now</a>
<div class="second content">
<h1 class="titleNo2" align="center">Test your layouts professionally</h1>
<p>
Using this tool, you will be able to work on any small
device (such as mobiles) and create a responsive web
pages easily. Where you can test them using customizable
sliders, writing your own width, or choosing a device
from the given ones.
</p>
</div>
<div class="third content">
<h1 class="titleNo2" align="center">Easy to use and deal with</h1>
<p>
When it comes to use, it's just a piece of cake for
nearly anyone. It's easy to understand and useful
for the people who can't work on big devices
such huge monitors or even bigger. With some devices
available and the custom options, you can test nearly
all screens on your web page.
</p>
</div>
<a href="src/index.html" class="startBtn">Start Now</a>
<div class="fourth copyrights">
<br/><br/><br/>
<h1 class="cDate" align="center">©2021</h1>
<p>
Simplicity is our first choice so, making a simple stuff will make
the thing more useful. With no "Terms of Use & Privacy policy",
you can just download it and use it for personal and
commercial use. Do whatever you want using this tool
as it is yours, but using the trademark "e.i. SiZillion" as
yours is not allowed. Thats it! If you want to download
this project or see how I made it, click on the link shown
below to go to the project repository on github.
</p>
<a href="https://www.github.com/MrKebsi/sizillion/" class="startBtn">Github Repository</a>
<img src="img/watermark.png" id="wmark"/>
<br/><br/>
</div>
<!--the Javascript connector tag-->
<script src="js/main.js"></script>
</body>
</html>