Revert "Revert "emma's work""

This reverts commit 315be15.
Connor-Bernard · Dec 9, 2024 · f630fd2 · f630fd2
1 parent 315be15
commit f630fd2
Show file tree

Hide file tree

Showing 11 changed files with 166 additions and 0 deletions.
diff --git a/frontend/public/background.png b/frontend/public/background.png
diff --git a/frontend/public/emma_photo_1.png b/frontend/public/emma_photo_1.png
diff --git a/frontend/public/emma_photo_2.png b/frontend/public/emma_photo_2.png
diff --git a/frontend/public/emma_photo_3.png b/frontend/public/emma_photo_3.png
diff --git a/frontend/public/emma_photo_4.png b/frontend/public/emma_photo_4.png
diff --git a/frontend/public/emma_photo_5.png b/frontend/public/emma_photo_5.png
diff --git a/frontend/public/emma_photo_6.png b/frontend/public/emma_photo_6.png
diff --git a/frontend/public/emma_photo_7.png b/frontend/public/emma_photo_7.png
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -5,9 +5,82 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: black;
+
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.emma{
+  font-size: 18px;
+  color: #9E9E9E;
+}
+
+.inside{
+  margin:25px;
+}
+#header1{
+  text-indent: 10px;
+}
+#description{
+  width: 686px;
+  height: 66px;
+}
+
+.row{
+  text-align: center;
+  display: flex;
+  gap: 20px;
+  justify-content: space-evenly;
+}
+.row_item{
+  width: 325px;
+  height: 325px;
+  flex-shrink: 0;
+  background-color: #18181C;
+  border-radius: 20px;
+  font-size: 14px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  padding: 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.column{
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+
+.top{
+  border: 30px solid #222228;
+  background-color: #222228;
+  border-radius: 20px;
+}
+
+.image_box{
+  border-radius: 15px;
+}
+.row_title{
+  color: white;
+  font-size: 20px;
+}
+.header{
+  color:white;
+  font-size:48px;
+  font-weight:600;
+  line-height:80px;
+}
+a{
+  border-radius:5px;
+  padding: 5px;
+  background-image: linear-gradient(to right, pink, rgb(119, 40, 194));
+  color: white;
+
+}
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="index.css">
+    <title>Checkpoint</title>
+</head>
+<body>
+    <div class = 'emma'>
+        <h1 class="header" id = "header1">What is Checkpoint</h1>
+        <div class = 'inside'>
+            <div id = description>
+                <p>Checkpoint is a software that leverages Capture the Flage (CTF) style games to let students learn using the same platforms they would use in industry.</p>
+            </div>
+            <div class = "column"></div>
+                <div class="row">
+                    <div class = "row_item">
+                        <div class = image_box>
+                            <img class = "top" src = "../public/emma_photo_1.png"/>
+                        </div>
+                        <p class = row_title>Student Focused</p>
+                        <p>The platform focuses on ensuring students can make the most out of their college education using our platform.</p>
+                    </div>
+                    <div class = "row_item">
+                        <div class = image_box>
+                            <img class = "top" src = "../public/emma_photo_2.png"/>
+                        </div>
+                        <p class = row_title>Practical</p>
+                        <p>This platform engages students with practical challenges that simulate the student's experience.</p>
+                    </div>
+                    <div class = "row_item">
+                        <div class = "image_box">
+                            <img src = "../public/emma_photo_3.png"/>
+                        </div>
+                        <p class = row_title>Accessable</p>
+                        <p>Checkpoint leverage instructor-provided feedback to lead students down the correct path, ensuring they never get stuck.</p>
+                    </div>
+                </div>
+                <div class = "row">
+                    <div class = "row_item">
+                        <div class = image_box>
+                            <img class = "top" src = "../public/emma_photo_4.png"/>
+                        </div>
+                        <p class = row_title>Fully Customizable</p>
+                        <p>Instructors can customize the challenges using an easy-to-use config file or our customizer command-line utility.</p>
+                    </div>
+                    <div class = "row_item">
+                        <div class = image_box>
+                            <img class = "top" src = "../public/emma_photo_5.png"/>
+                        </div>
+                        <p class = row_title>Research Driven</p>
+                        <p>This project is backed with extensive research and user studies to prove just how impactful this teaching style is.</p>
+                    </div>
+                    <div class = "row_item">
+                        <div class = "image_box">
+                            <img class = "top" src = "../public/emma_photo_6.png"/>
+                        </div>
+                        <p class = row_title>Analytics Engine</p>
+                        <p>Our platform provides instructors detailed anaytics data to ensure assignments are accessible and clearly worded.</p>
+                    </div>
+                </div>
+                <div class = "row">
+                    <div class = 'picture'>
+                        <img src = "../public/emma_photo_7.png"
+                        width = "510.114px"
+                        height = "510.114px"/>
+                    </div>
+                    <div class = 'desc'>
+                        <h2 class="header">We've done the Research! Now its your turn</h2>
+                        <p>Finish your first checkpoint by booking a demo of our platform to see if it is right for your class.</p>
+                        <p><a href = "signup.html">Sign up for a demo </a></p>
+                    </div>
+                </div>
+            </div>
+        </div>    
+    </div>
+</body>
+</html>
diff --git a/frontend/src/signup.html b/frontend/src/signup.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up</title>
+</head>
+<body>
+    <h1>Sign up for Cubstart</h1>
+    <p>name:</p>
+    <p>email:</p>
+    <p>password:</p>
+</body>
+</html>