|
1 | | -<!DOCTYPE html> |
2 | | -<html lang="en"> |
3 | | - <head> |
4 | | - <meta charset="UTF-8" /> |
5 | | - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 | | - <title>Texpose - About Us</title> |
7 | | - <link rel="stylesheet" href="/styles.css" /> |
8 | | - <link href="/responsive.css" /> |
9 | | - <link rel="stylesheet" href="/responsive.css" /> |
10 | | - <link |
11 | | - rel="stylesheet" |
12 | | - href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" |
13 | | - /> |
14 | | - <style> |
15 | | - .header { |
16 | | - background: none; |
17 | | - } |
18 | | - * { |
19 | | - margin: 0; |
20 | | - padding: 0; |
21 | | - box-sizing: border-box; |
22 | | - } |
23 | | - |
24 | | - body { |
25 | | - overflow: hidden; |
26 | | - } |
27 | | - |
28 | | - .scroll-container { |
29 | | - display: flex; |
30 | | - overflow-x: hidden; |
31 | | - scroll-snap-type: x mandatory; |
32 | | - scroll-behavior: smooth; |
33 | | - width: 100vw; |
34 | | - height: 100vh; |
35 | | - font-family: "Futura Cyrillic Light"; |
36 | | - } |
37 | | - |
38 | | - .section { |
39 | | - flex: 0 0 50vw; |
40 | | - height: 100vh; |
41 | | - display: flex; |
42 | | - align-items: center; |
43 | | - justify-content: center; |
44 | | - scroll-snap-align: start; |
45 | | - font-weight: bold; |
46 | | - color: white; |
47 | | - } |
48 | | - |
49 | | - .one { |
50 | | - background-color: black; |
51 | | - } |
52 | | - .two { |
53 | | - background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_ICDzdvfaL8e4OtlV86xrO7iVLrDbHU_mMphDvXJpif6S2PbbzTw92GTEPzUQY4mIWpQ&usqp=CAU"); |
54 | | - } /* Blue */ |
55 | | - .three { |
56 | | - background-color: black; |
57 | | - } |
58 | | - .four { |
59 | | - background: url("https://png.pngtree.com/thumb_back/fh260/background/20220127/pngtree-gold-silver-soundwave-with-black-background-gradient-backdrop-technology-photo-image_21201810.jpg"); |
60 | | - background-repeat: none; |
61 | | - background-size: cover; |
62 | | - background-position: center; |
63 | | - } /* Yellow */ |
64 | | - </style> |
65 | | - </head> |
66 | | - <body> |
67 | | - <header class="header"> |
68 | | - <ul class="header-items"> |
69 | | - <li> |
70 | | - <a |
71 | | - href="/index.html" |
72 | | - style=" |
73 | | - cursor: pointer; |
74 | | - text-decoration: none; |
75 | | - color: white; |
76 | | - background: none; |
77 | | - -webkit-tap-highlight-color: transparent; |
78 | | - font-family: 'Goudy Old Style'; |
79 | | - " |
80 | | - > |
81 | | - <div class="subtitle">TEXPOSE</div></a |
82 | | - > |
83 | | - </li> |
84 | | - <li><a style=" |
85 | | - cursor: pointer; |
86 | | - text-decoration: none; |
87 | | - color: white; |
88 | | - background: none; |
89 | | - -webkit-tap-highlight-color: transparent; |
90 | | - " href="/story.html">Our Story</a></li> |
91 | | - <li> |
92 | | - <a |
93 | | - style=" |
94 | | - cursor: pointer; |
95 | | - text-decoration: none; |
96 | | - color: white; |
97 | | - background: none; |
98 | | - -webkit-tap-highlight-color: transparent; |
99 | | - |
100 | | - " |
101 | | - href="/about.html" |
102 | | - > |
103 | | - About Us</a |
104 | | - > |
105 | | - </li> |
106 | | - <li><a style=" |
107 | | - cursor: pointer; |
108 | | - text-decoration: none; |
109 | | - color: white; |
110 | | - background: none; |
111 | | - -webkit-tap-highlight-color: transparent; |
112 | | - |
113 | | - " href="/contact.html">Contact Us</a></li> |
114 | | - </ul> |
115 | | - </header> |
116 | | - <div class="scroll-container" id="scrollContainer"> |
117 | | - <div class="section one " > |
118 | | - TEXPOSE is here to bridge the gap between human creativity and machine |
119 | | - intelligence. |
120 | | - </div> |
121 | | - <div class="section two"></div> |
122 | | - <div class="section three"> |
123 | | - Our mission is to promote authenticity, prevent misinformation, and |
124 | | - support fair content evaluation. |
125 | | - </div> |
126 | | - <div class="section four"></div> |
127 | | - <div class="section one"> |
128 | | - Whether you're a researcher, educator, or content creator, our tool |
129 | | - helps ensure authenticity in scholarly communication. |
130 | | - </div> |
131 | | - </div> |
132 | | - |
133 | | - <script> |
134 | | - const scrollContainer = document.getElementById("scrollContainer"); |
135 | | - let scrollAmount = window.innerWidth / 2; // Half of the viewport width |
136 | | - |
137 | | - document.addEventListener("keydown", (event) => { |
138 | | - if (event.key === "ArrowRight") { |
139 | | - scrollContainer.scrollBy({ left: scrollAmount, behavior: "smooth" }); |
140 | | - } else if (event.key === "ArrowLeft") { |
141 | | - scrollContainer.scrollBy({ left: -scrollAmount, behavior: "smooth" }); |
142 | | - } |
143 | | - }); |
144 | | - |
145 | | - </script> |
146 | | - </body> |
147 | | -</html> |
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <meta charset="UTF-8" /> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | + <title>Texpose - About Us</title> |
| 7 | + <link rel="stylesheet" href="/static/styles.css" /> |
| 8 | + <link href="/static/responsive.css" /> |
| 9 | + <link rel="stylesheet" href="/static/responsive.css" /> |
| 10 | + <link |
| 11 | + rel="stylesheet" |
| 12 | + href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" |
| 13 | + /> |
| 14 | + <style> |
| 15 | + .header { |
| 16 | + background: none; |
| 17 | + } |
| 18 | + * { |
| 19 | + margin: 0; |
| 20 | + padding: 0; |
| 21 | + box-sizing: border-box; |
| 22 | + } |
| 23 | + |
| 24 | + body { |
| 25 | + overflow: hidden; |
| 26 | + } |
| 27 | + |
| 28 | + .scroll-container { |
| 29 | + display: flex; |
| 30 | + overflow-x: hidden; |
| 31 | + scroll-snap-type: x mandatory; |
| 32 | + scroll-behavior: smooth; |
| 33 | + width: 100vw; |
| 34 | + height: 100vh; |
| 35 | + font-family: "Futura Cyrillic Light"; |
| 36 | + } |
| 37 | + |
| 38 | + .section { |
| 39 | + flex: 0 0 50vw; |
| 40 | + height: 100vh; |
| 41 | + display: flex; |
| 42 | + align-items: center; |
| 43 | + justify-content: center; |
| 44 | + scroll-snap-align: start; |
| 45 | + font-weight: bold; |
| 46 | + color: white; |
| 47 | + } |
| 48 | + |
| 49 | + .one { |
| 50 | + background-color: black; |
| 51 | + } |
| 52 | + .two { |
| 53 | + background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_ICDzdvfaL8e4OtlV86xrO7iVLrDbHU_mMphDvXJpif6S2PbbzTw92GTEPzUQY4mIWpQ&usqp=CAU"); |
| 54 | + } /* Blue */ |
| 55 | + .three { |
| 56 | + background-color: black; |
| 57 | + } |
| 58 | + .four { |
| 59 | + background: url("https://png.pngtree.com/thumb_back/fh260/background/20220127/pngtree-gold-silver-soundwave-with-black-background-gradient-backdrop-technology-photo-image_21201810.jpg"); |
| 60 | + background-repeat: none; |
| 61 | + background-size: cover; |
| 62 | + background-position: center; |
| 63 | + } /* Yellow */ |
| 64 | + </style> |
| 65 | + </head> |
| 66 | + <body> |
| 67 | + <header class="header"> |
| 68 | + <ul class="header-items"> |
| 69 | + <li> |
| 70 | + <a |
| 71 | + href="/" |
| 72 | + style=" |
| 73 | + cursor: pointer; |
| 74 | + text-decoration: none; |
| 75 | + color: white; |
| 76 | + background: none; |
| 77 | + -webkit-tap-highlight-color: transparent; |
| 78 | + font-family: 'Goudy Old Style'; |
| 79 | + " |
| 80 | + > |
| 81 | + <div class="subtitle">TEXPOSE</div></a |
| 82 | + > |
| 83 | + </li> |
| 84 | + <li><a style=" |
| 85 | + cursor: pointer; |
| 86 | + text-decoration: none; |
| 87 | + color: white; |
| 88 | + background: none; |
| 89 | + -webkit-tap-highlight-color: transparent; |
| 90 | + " href="/static/story.html">Our Story</a></li> |
| 91 | + <li> |
| 92 | + <a |
| 93 | + style=" |
| 94 | + cursor: pointer; |
| 95 | + text-decoration: none; |
| 96 | + color: white; |
| 97 | + background: none; |
| 98 | + -webkit-tap-highlight-color: transparent; |
| 99 | + |
| 100 | + " |
| 101 | + href="/static/about.html" |
| 102 | + > |
| 103 | + About Us</a |
| 104 | + > |
| 105 | + </li> |
| 106 | + <li><a style=" |
| 107 | + cursor: pointer; |
| 108 | + text-decoration: none; |
| 109 | + color: white; |
| 110 | + background: none; |
| 111 | + -webkit-tap-highlight-color: transparent; |
| 112 | + |
| 113 | + " href="/static/contact.html">Contact Us</a></li> |
| 114 | + </ul> |
| 115 | + </header> |
| 116 | + <div class="scroll-container" id="scrollContainer"> |
| 117 | + <div class="section one " > |
| 118 | + TEXPOSE is here to bridge the gap between human creativity and machine |
| 119 | + intelligence. |
| 120 | + </div> |
| 121 | + <div class="section two"></div> |
| 122 | + <div class="section three"> |
| 123 | + Our mission is to promote authenticity, prevent misinformation, and |
| 124 | + support fair content evaluation. |
| 125 | + </div> |
| 126 | + <div class="section four"></div> |
| 127 | + <div class="section one"> |
| 128 | + Whether you're a researcher, educator, or content creator, our tool |
| 129 | + helps ensure authenticity in scholarly communication. |
| 130 | + </div> |
| 131 | + </div> |
| 132 | + |
| 133 | + <script> |
| 134 | + const scrollContainer = document.getElementById("scrollContainer"); |
| 135 | + let scrollAmount = window.innerWidth / 2; // Half of the viewport width |
| 136 | + |
| 137 | + document.addEventListener("keydown", (event) => { |
| 138 | + if (event.key === "ArrowRight") { |
| 139 | + scrollContainer.scrollBy({ left: scrollAmount, behavior: "smooth" }); |
| 140 | + } else if (event.key === "ArrowLeft") { |
| 141 | + scrollContainer.scrollBy({ left: -scrollAmount, behavior: "smooth" }); |
| 142 | + } |
| 143 | + }); |
| 144 | + |
| 145 | + </script> |
| 146 | + </body> |
| 147 | +</html> |
0 commit comments