Journfolio/index.html at master · Jawahir01/Journfolio · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!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">
  <!-- Font Awesome CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    type="text/css">
  <!-- BootStrap CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Cardo:ital@0;1&family=Exo:ital,wght@1,200&family=Oswald&family=Roboto:ital,wght@0,400;0,500;1,500&display=swap"
    rel="stylesheet">
  <!-- Main CSS Files -->
  <link rel="stylesheet" href="assets/css/style.css">
  <title>Mathew Allen</title>
</head>

<body>
  <!-- ======= Header Section======= -->
  <!--header is from https://www.w3schools.com/bootstrap5/bootstrap_navbar.php-->
  <nav class="navbar navbar-expand-sm  navbar-dark">
    <div class="container-fluid">
      <!-- Logo -->
      <a class="navbar-brand  logo" href="index.html"><img class="img-fluid" src="assets/images/logo2.png"
          alt="logo"></a>
      <button class=" navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"
        aria-label="button">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Navegation menu -->
      <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
        <ul class="navbar-nav justify-content-end">
          <li class="nav-item">
            <a class="nav-link active" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="experience.html">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- ======= Hero Section ======= -->
  <div class="hero-container container">
    <div class="hero-image img-fluid"> <!-- Hero Image -->
      <div class="row justify-content-center">
        <div class="col-lg-6 hero-text text-center"> <!-- Name/title -->
          <h1 class="h1">Hi, I'm <span>Mathew Allen</span> from London</h1>
          <p>A Highly-professional Online digital Journalist</p>
        </div>
      </div>
    </div>
  </div>

  <div class="btn"> <!-- Avaliable button -->
    <a href="contact.html" class="btn-get-started">Available for hire</a>
  </div>

  <!-- ======= About Section ======= -->
  <div class="row about-outer">
    <div class="col-8  about-contect">
      <h2 class="about-me">About Me</h2> <!-- title/paragraph -->
      <p class="content lead">Highly-professional and talented Digital Journalist with a solid experience in researching
        and writing compelling news
        as well as distributing or delivering information using multiple digital platforms to engage readers.
        Possess solid knowledge of using social media platforms and analytics tools along with the effective writing,
        editing, team-working, organizational and communication skills.
      </p>
    </div>
  </div>

  <!-- ======= Testimonial Section ======= -->
  <div class="testimonial">
    <h3 class="testimonial-title lead ">What They Say:</h3> <!-- Title -->
  </div>

  <div class="slideshow-container"> <!-- testimonial slideshow -->
    <div class="mySlides">
      <img src="assets/images/avatar6.jpg" alt="" class="Avatar">
      <q>I recently had the good fortune of reading your article regarding investment strategies. It was well-written and contained sound, practical advice. In fact, I have already benefited from your discussion on risk versus return. You pointed out several things that I will remember for years to come.
         I look forward to reading your next informative work. Thank you.</q>
      <p class="author">- John Keats</p>
    </div>

    <div class="mySlides">
      <img src="assets/images/avatar2.jpg" alt="" class="Avatar">
      <q>I always enjoy your column in our local newsletter. You have a gift for discussing family interactions in truthful yet amusing ways. It seems I can always identify experiences in my own family with those you describe. Your articles
        help us realize that our problems are typical, and we can solve them in constructive ways.
        Thank you and keep these good articles coming.</q>
      <p class="author">- Tefany Hemingway</p>
    </div>

    <div class="mySlides">
      <img src="assets/images/avatar3.jpg" alt="" class="Avatar">
      <q>I compliment you on the way you handled that difficult interview with John Doe.</q>
      <p class="author">- Thomas Edward</p>
    </div>

    <div class="mySlides">
      <img src="assets/images/avatar4.jpg" alt="" class="Avatar">
      <q>You deserve thanks for your commitment to bringing the public such vital information.</q>
      <p class="author">- Anna Mark</p>
    </div>

    <div class="mySlides">
      <img src="assets/images/avatar5.jpg" alt="" class="Avatar">
      <q>The report was well documented, so no one can claim that it was just one person's opinion.</q>
      <p class="author">- Sam Geoffrey</p>
    </div>

    <div class="mySlides">
      <img src="assets/images/avatar1.jpg" alt="" class="Avatar">
      <q>I commend you for your excellent report on the homeless in our city.</q>
      <p class="author">- Eric Noah</p>
    </div>

    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

  </div>

  <div class="dot-container">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>

  <script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      if (n > slides.length) { slideIndex = 1 }
      if (n < 1) { slideIndex = slides.length }
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className += " active";
    }
  </script>


  <!-- ======= Footer Section =======  -->
  <footer id="footer" class="footer ">
    <div class="container-fluid ">
      <div class="footer-social-links">
        <a href="http://www.twitter.com" class="twitter" target="_blank" aria-label="Link to twitter"><i
            class="fa fa-twitter" aria-hidden="true"></i></a>
        <a href="http://www.facebook.com" class="facebook" target="_blank" aria-label="Link to facebook"><i
            class="fa fa-facebook" aria-hidden="true"></i></a>
        <a href="http://www.instagram.com" class="instagram" target="_blank" aria-label="Link to instagram"><i
            class="fa fa-instagram" aria-hidden="true"></i></a>
        <a href="http://www.linkedin.com" class="linkedin" target="_blank" aria-label="Link to linkedin"><i
            class="fa fa-linkedin" aria-hidden="true"></i></a>
      </div>
    </div>
  </footer>
</body>

</html>