html-css-studio/index.html at main · yuimusha/html-css-studio · 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
  <!-- TO RUN IN BROWSER:
    1. Install vscode extension Name: open in `browser open-in-browser` by TechER
    2. Right click html file and either run in default browser or another browser
  -->


  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>HTML/CSS Studio</title>
      <!-- import CSS styles -->
      <link rel="stylesheet" href="styles.css" />
    </head>

    <!-- page content goes into <body> -->
    <body style="background-color:skyblue;">
    </body>
    <body>
      <div id="logoBar">
        <h1 style="color:aliceblue">Welcome to 100 Acre Wood!</h1>
        <img id="siteLogo" alt="Pooh-bear site logo" src="./assets/Header.png"/>
        <h3 style="font-family:sans-serif">We're glad you're here :D</h3>
      </div>
      <hr/>
      <div id="staffGallery">
        <div class="flex-container">
          <div class="card">
            <img class="galleryImage" src="./assets/Eeyore-Eh.png"/ style="width:100%">
            <div class="container">
              <h4><b>Eeyore</b></h4>
            </div>
          </div>
          <div class="card">
            <img class="galleryImage" src="./assets/Eeyore-Zz.png"/ style="width:100%">
            <div class="container">
              <h4><b>Eeyore-Zz</b></h4>
            </div>
          </div>
          <div class="card">
            <img class="galleryImage" src="./assets/Kanga-Roo.png"/ style="width:100%">
            <div class="container">
              <h4><b>Kangaroo</b></h4>
            </div>
          </div>
          <div class="card">
            <img class="galleryImage" src="./assets/Owl-Phone.png"/ style="width:100%">
            <div class="container">
              <h4><b>Owl</b></h4>
            </div>
          </div>
        </div>
      </div>
    </body>

  </html>