fcc-test-suite-template-1/index.html at master · AlejoCode/fcc-test-suite-template-1 · GitHub

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
136
137
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fork Me! FCC: Test Suite Template</title>
    <link rel="stylesheet" href="css/style.css" />
    <style>
      /* For mobile phones: */
      [class*='col-'] {
        width: 100%;
      }

      @media only screen and (min-width: 768px) {
        /* For desktop: */
        .col-1 {
          width: 8.33%;
        }
        .col-2 {
          width: 16.66%;
        }
        .col-3 {
          width: 25%;
        }
        .col-4 {
          width: 33.33%;
        }
        .col-5 {
          width: 41.66%;
        }
        .col-6 {
          width: 50%;
        }
        .col-7 {
          width: 58.33%;
        }
        .col-8 {
          width: 66.66%;
        }
        .col-9 {
          width: 75%;
        }
        .col-10 {
          width: 83.33%;
        }
        .col-11 {
          width: 91.66%;
        }
        .col-12 {
          width: 100%;
        }
      }
      .container {
        display: flex; /* or inline-flex */
      }
    </style>
  </head>
  <body>
    <header id="header" style="position:fixed; top:0px;left:0px; height: 300px;display: flex" class="col-12">
      <div class="container">
        <nav  id="nav-bar">
          <div class="col-3">
            <br />
            <a href="#home" class="nav-link"
              ><h3>&nbsp;&nbsp;&nbsp; Home</h3></a
            >
          </div>
          <div class="col-3">
            <a href="#component" class="nav-link col-3"
              ><h3>&nbsp;&nbsp;&nbsp; Component</h3></a
            >
          </div>

          <div class="col-3">
            <a href="#pricing" class="nav-link col-3"
              ><h3>&nbsp;&nbsp;&nbsp; Pricing</h3></a
            >
          </div>

          <div class="col-3">
            <a href="#contact" class="nav-link col-3"
              ><h3>&nbsp;&nbsp;&nbsp; Contact</h3></a
            >
          </div>
        </nav>
      </div>

        <img
          style="margin-left: auto; display: block"
          src="https://www.import.io/wp-content/uploads/2017/10/React-logo.png"
          alt="react-logo"
          id="header-img"
          width="500px"
        />

    </header>
    <iframe
     id="video"
      style="position:absolute ; left:50%; top:320px"
      width="420"
      height="315"
      src="https://www.youtube.com/embed/J7Tw1hlK41E"
    >
    </iframe>


    <div id="home" style="margin-top: 320px"><h3>Home</h3></div>
    <form action="http://www.freecodecamp.com/email-submit" id="form">
      <input
        type="email"
        name="email"
        id="email"
        placeholder="Enter your email"
        required
      />
      <input type="submit" id="submit" />
    </form>
    <div id="component"><h3>Components</h3></div>
    <div id="pricing"><h3>Pricing</h3></div>
    <div id="contact"><h3>Contact</h3></div>
    <br />

    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <!--

    Hello Camper!

    For now, the test suite only works in Chrome!
    Please read the README below in the JS Editor before beginning.
    Feel free to delete this message once you have read it.
    Good luck and Happy Coding!

    - The freeCodeCamp Team

    -->
    <script src="js/index.js"></script>
  </body>
</html>