Foundation Installation Guide
1
Create a new HTML file
1Step 1
Create a new file, for example: index.html
2Step 2
Paste the following code into it:
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>Foundation Page</title>
7 <!-- Foundation CSS CDN -->
8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
9
10 <style>
11 html, body {
12 margin: 0;
13 padding: 0;
14 height: 100vh;
15 width: 100vw;
16 overflow: hidden;
17 font-family: 'Inter', sans-serif;
18 }
19
20 .container {
21 display: flex;
22 flex-direction: column;
23 height: 100%;
24 width: 100%;
25 }
26
27 iframe {
28 width: 100%;
29 height: 100%;
30 border: none;
31 border-radius: 0.5rem;
32 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
33 }
34
35 h2 {
36 margin: 1rem 0;
37 text-align: center;
38 color: #333;
39 }
40 </style>
41</head>
42<body>
43 <div class="container">
44 <h2>Tetrons Editor</h2>
45 <iframe
46 src="http://staging.tetrons.com/editor/dist/editor-host.html"
47 allowfullscreen>
48 </iframe>
49 </div>
50
51 <!-- jQuery and Foundation JS -->
52 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
53 <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
54 <script>
55 $(document).foundation();
56 </script>
57</body>
58</html>2
Open in Browser
1Step 1
Open the HTML file using Live Server in VS Code
2Step 2
Or open it directly from file explorer
Output Preview
