HTML-CSS-JavaScript-capstone-project/about.html at main · Achilles-Dev/HTML-CSS-JavaScript-capstone-project · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About PraisyDram 2022</title>
  <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
  />
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <main>
    <header class="header">
      <nav class="topmost-nav">
        <ul>
          <li><i class="fab fa-facebook-f"></i></li>
          <li><i class="fab fa-twitter"></i></li>
          <li>English</li>
          <li>My Page</li>
          <li>Logout</li>
        </ul>
      </nav>
      <i class="menu-icon fas fa-bars fa-2x"></i>
      <nav class="menu-items">
        <a href="./index.html"><img src="./public/assets/icons/pd-logo.png" alt="PraisyDram Logo"></a>
        <i class="close fas fa-times"></i>
        <ul>
          <li class="first-list-child"><a href="about.html" >About</a></li>
          <li><a href="#">Program</a></li>
          <li><a href="#">Join</a></li>
          <li><a href="#">Sponsor</a></li>
          <li><a href="#">News</a></li>
          <li class="last-list-child"><a href="#">Concert Campaign</a></li>
        </ul>
      </nav>
    </header>
    <section class="about-headline">
      <div class="about-headline-title">
        <p>"ITI-CCR KUNST Presents!"</p>
        <h1>PRAISYDRAM 2022</h1>
      </div>
      <p class="about-headline-details">
        The PraisyDram concert brings students from various universities in Ghana together to give thanks
        to God, and show appreciation for the wonderful gifts He bestows on them throughout the academic year.
      </p>
      <div class="about-headline-bottom">
       <p>Please contact us via Email for any questions
         about PraisyDram 2022!
       </p>
       <span>praisydram22@gmail.com</span>
      </div>
    </section>
    <section class="about-logo">
      <h2>PraisyDram 2022 Logo</h2>
      <span class="border-span"></span>
      <p class="logo-details">This Logo of PraisyDram 2022 was decided through the logo
        competition from 7.Jan - 1.Feb.
      </p>
      <div class="logo-image">
        <img src="./public/assets/icons/pd-logo.png" alt="PraisyDram Logo">
      </div>
    </section>

    <section class="about-past-programs">
      <h2 class="past-program-title">See the past PraisyDrams</h2>
      <span class="border-span"></span>
      <p class="details">Take a look at the last two PraisyDrams which took place on Legon and UCC campuses</p>
      <div class="about-cards">
        <div class="about-card">
          <a href="#">
            <h2>2021</h2>
          <p>PraisyDram 2021 on Legon Campus</p>
          </a>
        </div>
        <div class="about-card">
          <a href="#">
            <h2>2020</h2>
            <p>PraisyDram 2021 on UCC Campus</p>
          </a>
        </div>
      </div>
    </section>

    <footer class="about-footer">
      <div class="top">
        <h2>Partners</h2>
        <span class="border-span"></span>
        <ul>
          <li>Vodafone Ghana</li>
          <li>Voltic Ghana</li>
          <li>Coca-Cola Ghana</li>
          <li>Pax Romana Ghana</li>
        </ul>
      </div>
      <div class="bottom">
        <div>
          <img src="./public/assets/icons/pd-logo.png" alt="PraisyDram logo">
        </div>
        <p>2022 PraisyDram <br> Some Rights Reserved</p>
      </div>

    </footer>
  </main>

  <script src="./public/main.js"></script>
</body>
</html>