forked from Rasheedatj/Skriper-Project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (117 loc) · 4.96 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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 href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- html code for the home page -->
<header>
<main id="homemain">
<div id="skriperlogohome">
<a href="#" ><img src="IMAGES/just-logo.svg" alt="skriper logo" /></a>
</div>
<div id="headingiconshome">
<a href="trends.html" ><p id="flamehome"><img src="IMAGES/flame.svg" alt="trends">Trends</p></a>
<a href="featured.html" ><p id="starhome"><img src="IMAGES/star-filled.svg" alt="Featured">Featured</p></a>
<a href="lastest.html" > <p id="watchhome"><img src="IMAGES/watch.svg" alt="latest">Latest</p></a>
<p id="startcodinghome"><img src="IMAGES/just-menu-item-logo.svg" alt=""> Start coding</p>
<p id="homeloginhome"><img src="IMAGES/login(1).svg" alt="ogin logo"> Login</p>
<p id="homesearchhome"><img src="IMAGES/zoom.svg" alt="search bar"></p>
</div>
</main>
</header>
<main id="body">
<div>
<p id="topimg"><img src="IMAGES/logo-text.svg" alt="skrippertext" id="topimg"></p>
</div>
<h1 id="gradientheading"> The place where your ideas come true</h1>
<h2 id="subgradientheading">THE PLAYGROUND FOR DEVELOPERS WITH COOL STUFF</h2>
<img src="IMAGES/code.png" alt="code playground" id="codeplayground" width="800px">
<p id="article">Explore and experiment with HTML, Javascript and CSS visualise your ideas and get instant feedback</p>
<section id="container1">
<div id="htmltext">
<h1 id="htmlheading">HTML</h1>
<p id="htmlparahragph">
Write your html code fast and preview it in real time</p>
<h1 id="cssheading" >CSS</h1>
<p id="cssparagraph">POwerful css editor with autocomplete module and many tools as gradient generator, color utils and more
</p>
<h1 id="jshead">JAVAScript</h1>
<p id="jsparagraph">Write cool js code quickly and get instant feedback in real time with our sandbox,
you can run your code in the sanbox and get result.
</p>
</div>
<div id="htmlimg">
<img src="IMAGES/html-css-js.png" alt="html css and js image" width="350px">
</div>
</section>
<section id="container2">
<div id="codetoimage">
<img src="IMAGES/share-code.png" alt="share code img" width="300px">
</div>
<div id="codetoimgtext">
<h1>CODE TO IMAGE</h1>
<p>Create and share beautiful images of your source code. Only select your code and share it. You can customize the image with your own text, background color, font color, font size, font family and more...</p>
</div>
</section>
<section id="container3">
<div id="snippetimg">
<img src="IMAGES/snippets(1).png" alt="snippet image" width="300px">
</div>
<div id="snippettext">
<h1>SNIPPETS</h1>
<p>Create your own snippets and share them with the community. You can use them in your code in autocomplete module.</p>
</div>
</section>
<section id="container4">
<div id="videoimg">
<img src="IMAGES/tutorials(1).png" alt="tutorials image" width="300px">
</div>
<div id="tutorialtext">
<h1>VIDEO ATTACHED TO YOUR CODE</h1>
<p>Add your video tutorial in your code and help to yours users to get a better experience.</p>
</div>
</section>
<section id="container5">
<div id="markdownimg">
<img src="IMAGES/markdown(1).png" alt="markdownimg" width="300px">
</div>
<div id="markdowntext">
<h1>START WRITING</h1>
<p>Document your code or write something for your users. Publishing content has never been easier.</p>
</div>
</section>
</main>
<!-- html code for footer -->
<footer>
<div class="box1">
<div class="logo">
<img src="IMAGES/just-skripper-text.svg" alt="skriper logo text">
</div>
<div class="icons">
<img src="IMAGES/twitter.svg" alt="twitter icon">
<img src="IMAGES/youtube.svg" alt="youtube icon">
<img src="IMAGES/facebook.svg" alt="facebook icon">
</div>
</div>
<div class="box2">
<ul>
<li><h2>Links of interest</h2></li>
<li><a href="FAQ.html">FAQ</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>
<div class="box3">
<p>Copyright Skriper.dev © 2022</p>
<img src="IMAGES/contact-skriper-text.svg" alt="">
</div>
</footer>
</body>
</html>