capstone-html-css/about.html at master · MiguelDP4/capstone-html-css · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Yin Yang Minecraft Server - About</title>
  <link href="styles/reset.css" rel="stylesheet">
  <link href="styles/style.css" rel="stylesheet">
  <link href="styles/fonts.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <header>
    <div class="black-nav">
      <div class="page-max-width black-nav-selectors">
        <a href="#">Logout</a>
        <a href="#">My Page</a>
        <a href="#">English</a>
        <a href="#">
          <div class="fa fa-twitter"></div>
        </a>
        <a href="#">
          <div class="fa fa-facebook"></div>
        </a>
      </div>
    </div>
    <nav>
      <div class="page-max-width white-nav">
        <div class="nav-logo">
          <a href="index.html">
            <img src="img/yinyang.svg" alt="logo">
            YIN-YANG <br> SERVER
          </a>
        </div>
        <div class="white-nav-selectors">
          <a href="about.html">About</a>
          <a href="#">Server</a>
          <a href="join.html">Join</a>
          <a href="#">Members</a>
          <a href="#">New Builds</a>
          <a href="#">Donate</a>
          <div class="menu-icon">
            <button class="menu-button">
              <svg class="css-1fe7a5q" viewBox="0 0 16 16">
                <rect x="1" y="3" fill="#333333" width="14" height="2"></rect>
                <rect x="1" y="7" fill="#333333" width="14" height="2"></rect>
                <rect x="1" y="11" fill="#333333" width="14" height="2"></rect>
              </svg>
            </button>
            <div class="dropdown-content">
              <a href="about.html">About</a>
              <a href="#">Server</a>
              <a href="join.html">Join</a>
              <a href="#">Members</a>
              <a href="#">New Builds</a>
              <a href="#">Donate</a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </header>

  <main class="page-max-width">
    <section class="about-page">
      <div>
        <h1>THIS IS THE YIN-YANG SERVER</h1>
        <p>This is a private server just for friends. The reason why I'm making this website is just for fun, to learn
          and practice HTML and CSS and have a little fun with my friends when they look at it. This website is just
          part of an online course called microverse in which I'm studying right now and this is my final project for
          the HTML and CSS part. I'm filling space in this part with whatever comes to mind as "Lorem Ipsum" looks and
          sounds too boring.</p>

        <p>Please contact us per Email for any question about this server <a
            href="#">server@yinyang.notarealdomain.com</a></p>

        <h2>Microverse</h2>
        <p>I'm very grateful to microverse, which is making this learning opportunity possible, and all the microverse
          staff who are helping us students advance in our carreer.</p>

        <img class="microverse-logo" src="img/microverse-logo.png" alt="microverse-logo">

        <h2>See past constructions done in the server</h2>
        <p>These are two of the old constructions done in the server. Look how far we've come.</p>
        <div class="previous-constructions">
          <div class="construction-container">
            <h2>September 2012</h2>
            <img src="img/sep-2012.jpg" alt="september 2012">
          </div>

          <div class="construction-container">
            <h2>September 2012</h2>
            <img src="img/jan-2015.jpg" alt="september 2012">
          </div>
        </div>
      </div>

    </section>
  </main>

  <footer class="page-max-width">
    <div class="creative-commons-gray">
      <div class="cc-logo">
        <a href="https://creativecommons.org/licenses/by-nc/4.0/">
          <img src="img/cc-logo-white.svg" alt="creative-commons"></a>
      </div>

      <div class="creative-licence">
        <p>2015 Creative Commons Korea. Some Rights Reserved</p>
      </div>
    </div>
  </footer>
</body>

</html>