learning-web-development/index.html at master · code-co-op/learning-web-development · 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
<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <title>Code Coop</title>
    <meta name="author" content="co-authored by Phil Broderick, Andrew Beattie, Artemiy Knipe and Barry Gallagher">
    <meta name="description" content="A website created by a group of people from the Belfast code coop. This site is used to apply the teachings and examples from the MDN Learn web development tutorials.">

    <link rel="stylesheet" href="assets/css/index.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet">
    <link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="assets/js/index.js"></script>
  </head>
  <body>
    <header id="header" class="header full-height-background">
      <div class="header__title container">
        <h1 id="header__title__text">Code Co-Op</h1>
      </div>
      <hr>
      <div class="header__catchphrase container">
        <p id="header__catchphrase__text" class="faded__text">Take part in our social session to talk about anything programming over a cup of tea or coffee.</p>
      </div>
      <div class="header__mainbutton container">
        <a class="header__mainbutton__style" href="#about">Find out more</a>
      </div>
    </header>
    <main>
      <nav id="header__nav">
        <a class="faded__text" id="header__nav__title" href="#">Code Co-Op</a>
          <ul id="header__nav__links">
            <li><a href="#about" class="faded__text header__nav__link" title="About page and what we do">About</a></li>
            <li><a href="#meetups" class="faded__text header__nav__link" title="Meetups">Meetups</a></li>
            <li><a href="#contact-us" class="faded__text header__nav__link" title="Contact page with contact details">Contact Us</a></li>
            <li><a href="#testimonials" class="faded__text header__nav__link" title="Testimonials about Code Co-Op">Testimonials</a></li>
          </ul>
          <button id=header__nav__button type="button">
            <span class="header__nav__button__span"></span>
            <span class="header__nav__button__span"></span>
            <span class="header__nav__button__span"></span>
          </button>
      </nav>

      <section id="about">
        <div class="about__title container">
          <header>
            <h2>About</h2>
            <hr>
          </header>
        </div>
          <div class="about__main">
            <div class="about__main__container">
              <i class="fas fa-handshake"></i>
              <h3>Social</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus dolor officia amet, cupiditate error ipsum ab eligendi placeat nobis fugiat.</p>
            </div>
            <div class="about__main__container">
              <i class="fas fa-code"></i>
              <h3>Challenge</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus dolor officia amet, cupiditate error ipsum ab eligendi placeat nobis fugiat.</p>
            </div>
            <div class="about__main__container">
              <i class="fas fa-calendar-alt"></i>
              <h3>Special Events</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus dolor officia amet, cupiditate error ipsum ab eligendi placeat nobis fugiat.</p>
            </div>
            <div class="about__main__container">
              <i class="fas fa-laptop"></i>
              <h3>Other</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus dolor officia amet, cupiditate error ipsum ab eligendi placeat nobis fugiat.</p>
            </div>
          </div>
      </section>

      <section id="meetups">
            <div class="meetups__container">
                <img src="https://secure.meetupstatic.com/photos/event/5/b/b/b/600_475943483.jpeg" alt="" class="meetups__container__image">
                <img src="https://secure.meetupstatic.com/photos/event/5/b/9/6/600_475943446.jpeg" alt="" class="meetups__container__image">
                <img src="https://secure.meetupstatic.com/photos/event/5/b/a/c/600_475943468.jpeg" alt="" class="meetups__container__image">
                <img src="https://secure.meetupstatic.com/photos/event/5/b/a/0/600_475943456.jpeg" alt="" class="meetups__container__image">
                <img src="./assets/images/meetups/kaleidico-754509-unsplash.jpg" alt="" class="meetups__container__image">
                <img src="https://secure.meetupstatic.com/photos/event/5/b/b/4/600_475943476.jpeg" alt="" class="meetups__container__image">
                <img src="https://secure.meetupstatic.com/photos/event/5/b/b/4/600_475943476.jpeg" alt="" class="meetups__container__image">
                <img src="./assets/images/meetups/neonbrand-618320-unsplash.jpg" alt="" class="meetups__container__image">
                <img src="https://secure.meetupstatic.com/photos/event/5/b/9/0/600_475943440.jpeg" alt="" class="meetups__container__image">
            </div>
      </section>

      <section id="contact-us">
        <header>
          <h2>Contact Us</h2>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed nostrum obcaecati molestias quaerat, ea recusandae explicabo ipsa accusantium fuga qui dicta atque nulla voluptatem earum, repellat vero numquam sunt similique.</p>
        </header>
          <p>This is a placeholder.</p>
      </section>

      <section id="testimonials" class="full-height-background">
        <nav id="testimonials__nav">
          <figure>
            <img id="jenny-smiths__image" class="testimonials__faces" src="./assets/images/testimonialpics/pic1.jpeg" alt="Jenny Smiths testimonial">
          </figure>
          <figure>
            <img id="andrew-beattie__image" class="testimonials__faces" src="./assets/images/testimonialpics/pic2.jpeg" alt="Andrew Beattie testimonial">
          </figure>
          <figure>
            <img id="mark-finch__image" class="testimonials__faces" src="./assets/images/testimonialpics/pic3.jpeg" alt="Mark Finch testimonial">
          </figure>
          <figure>
            <img id="ayesha-couch__image" class="testimonials__faces" src="./assets/images/testimonialpics/pic4.jpeg" alt="Ayesha Couch testimonial">
          </figure>
          <figure>
            <img id="sheep__image" class="testimonials__faces" src="./assets/images/testimonialpics/pic5.jpeg" alt="The sheep testimonial">
          </figure>
        </nav>
        <div id="testimonial__v__line"></div>
        <section id="testimonials__text">
          <hgroup id="testimonial__header">
          <h2 id="testimonial__header__1">Our members</h2>
          <h3 id="testimonial__header__2"><sup>Testimonials</sup></h3>
          </hgroup>
          <p id="testimonial__quote"></p>
          <address id="testimonial__footer"></address>
        </section>
      </section>
    </main>
    <footer></footer>
  </body>
</html>