-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (128 loc) · 5.61 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
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">
<title>Codepencil</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.3.2/mdb.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/style.css">
<link rel="shortcut icon" href="assets/img/favicon.ico">
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top bg-dark navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"><img id="MDB-logo" src="assets/img/codepencil.png" alt="Codepencil Logo" draggable="false"
height="45" /></a>
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent fonted">
<ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item">
<a class="nav-link mx-2 fonted langnav" href="./editor/html"><i
class="fa-brands fa-html5 pe-2"></i>HTML</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2 fonted langnav" href="./editor/py"><i
class="fa-brands fa-python pe-2"></i>PYTHON</a>
</li>
<li class="nav-item">
<a class="nav-link mx-2 fonted langnav" href="./editor/nodejs"><i
class="fa-brands fa-node-js pe-2"></i>NODEJS</a>
</li>
</ul>
</div>
</div>
</nav>
<br><br><br><br><br><br>
<div class="flexbox center mainstart">
<div class="maintext-start">
<!-- <h1 class="roboto">CodePen but <br><i>Faster</i></h1><br> -->
<h1 class="roboto">Writing Code <br><i>Fast</i></h1><br>
<p class="roboto">Codepencil is an online coding app for <br>writing code fast and reliably.</p>
<!-- <p class="roboto">Codepencil is Codepen with more languages<br>and faster.</p> -->
<br><br>
<div class="flexbox center">
<button type="button" class="btn btn-success" data-mdb-ripple-init><a href="./editor/nodejs" class="s" target="_blank">Get started</a></button>
<!-- <button type="button" class="btn btn-info" data-mdb-ripple-init>About</button> -->
</div>
</div>
<div class="editparent1">
<div class="tab"><span>index.js</span></div>
<div class="edit">
<pre>const express = require("express")();
const app = express();
app.get("/", (req, res) => {
res.send("Hello World!");
});
app.get("/hello", (req, res) => {
res.send("Hello!");
});
app.listen(8080, () => {
console.log("Started Server!")
})</pre>
</div>
</div>
</div>
<div class="down circle center"><i class="fa-solid fa-arrow-down"></i></div>
<!-- Part 2 -->
<br><br><br><br><br><br><br><br><br><br><br><br>
<div class="circle numbermrg center">1</div>
<div class="flexbox section2 center">
<div>
<h1 class="roboto">Start a Project</h1><br>
<p class="roboto">Start a project by choosing one of 3<br> coding languages in the Navigation Bar</p>
</div>
<div>
<img src="assets/img/ex1.png" width="500" class="ex1">
<div class="ex1rect"></div>
</div>
</div>
<div class="circle numbermrg center">2</div>
<div class="flexbox section3 center">
<div>
<div class="editparent2">
<div class="tab"><span>index.html</span></div>
<div class="edit2">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Join Codepencil</title>
<link rel="stylesheet" href="/css.css">
</head>
<body style="text-align: center">
<h1>Join Codepencil!</h1>
<br>
<button>Join!</button>
</body>
</html></pre>
</div>
</div>
</div>
<div>
<h1 class="roboto">Start Coding</h1><br>
<p class="roboto">Start programming, and code your project<br>with your chosen coding language.</p>
</div>
</div>
<div class="circle numbermrg center">3</div>
<div class="center">
<div>
<h1 class="roboto">Run your Program</h1><br>
<p class="roboto">Save, finalize, and run your new program.</p></div>
</div><br><br>
<div class="center">
<div class="output" style="text-align: center">
<h1 class="fonted">Join Codepencil!</h1><br>
<button type="button" class="btn btn-success" data-mdb-ripple-init onclick="location.href=('./editor/html.html')">Join!</button>
</div></div>
<br>
<script src="assets/js/script.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.3.2/mdb.umd.min.js"></script>
</body>
</html>