HTML-CSS-JavaScript-capstone-project/index.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
111
112
113
114
115
116
117
118
<!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>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="headline">
      <div class="headline-title">
        <p>"ITI-CCR KUNST Presents!"</p>
        <h1>PRAISYDRAM 2022</h1>
      </div>
      <p class="headline-details">A wonderful opportunity to witness the greatness of God in our lives as his most inportant creation.
        Fun packed activities to cherish for the rest of your live. You just can't miss this!
      </p>
      <div class="headline-bottom">
        <p class="bottom-top">
          2022.03.18(FRI) ~ 19(SAT)
        </p>
        <p>
          @ KNUST Parade Grounds
        </p>
      </div>
    </section>
    <section class="main-program">
      <h2 class="program-title">Main Programs</h2>
      <span class="border-span"></span>
      <div class="program-cards">
        <article class="card">
          <i class="fas fa-microphone-alt fa-2x"></i>
          <h3>Praises & Worship</h3>
          <p>Praise and worship songs by invited singing groups</p>
        </article>
        <article class="card">
          <i class="fas fa-theater-masks fa-2x"></i>
          <h3>Drama</h3>
          <p>A well reheased play by the drama group</p>
        </article>
        <article class="card">
          <i class="fas fa-music fa-2x"></i>
          <h3>Time with the Choir</h3>
          <p>The pax chior will serve us with some dancable tunes to shake off our worries.</p>
        </article>
        <article class="card">
          <i class="fas fa-briefcase-medical fa-2x"></i>
          <h3>Healing and Deliverance</h3>
          <p>This section will be for the spiritually endowed men of God to heal
            & deliver participants from their bondage.
          </p>
        </article>
        <article class="card">
          <i class="fas fa-video fa-2x"></i>
          <h3>Choreography</h3>
          <p>As always, the Heralds of Honour will serve us with a new dance moves we are all
            going to like.
          </p>
        </article>
      </div>
      <a href="#" class="mobile-button">JOIN PRAISYDRAM 2022</a>
      <a href="#" class="desktop-button">SEE THE WHOLE PROGRAM</a>
    </section>

    <footer class="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>