forcc-forreadit/news2.html at master · ze0ss/forcc-forreadit · 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
<!DOCTYPE html>
<html>
<title>Mobiles Defeat Tanks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="fontface.css">
    <style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
    opacity: 0.7;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url('skype-logo.png');
    min-height: 100%;
}


.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}


/* Turn off parallax scrolling for tablets and mobiles */
@media only screen and (max-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}
</style>
<body>

<!-- Navbar (sit on top) -->
<div class="w3-top">
  <ul class="w3-navbar" id="myNavbar">
     <li><a href="index.html" class="w3-padding-large">HOME</a></li>
      <li><a href="weather.html" class="w3-padding-large">WEATHER</a></li>
      <li><button onclick="document.getElementById('id01').style.display='block'" class="w3-btn w3-padding-large">REVIEW</button></li>
    <li class="w3-hide-small w3-right">
      <a href="#" class="w3-padding-large w3-hover-red"><img src="arrow.png">&nbsp; Top</a>
    </li>
  </ul>
    <div id="id01" class="w3-modal">
  <div class="w3-modal-content w3-animate-zoom w3-card-8">
    <header class="w3-container w3-teal">
      <span onclick="document.getElementById('id01').style.display='none'"
      class="w3-closebtn">&times;</span>
      <h2>REVIEW</h2>
    </header>
    <div class="w3-container">
      <form name="reviewform" action="thanks.php" method="post">
          <p>How was your experience with the site...</p>
          <div class="w3-row">
              <div class="w3-col m3 w3-center w3-green">
                  <input type="radio" name="formDoor[]" id="revrad[]" value="Excellent">&nbsp;Excellent
              </div>
              <div class="w3-col m3 w3-center w3-lime">
                  <input type="radio" name="formDoor[]" id="revrad[]" value="Good">&nbsp;Good
              </div>
              <div class="w3-col m3 w3-center w3-yellow">
                  <input type="radio" name="formDoor[]" id="revrad[]" value="Average">&nbsp;Average
              </div>
              <div class="w3-col m3 w3-center w3-red">
                  <input type="radio" name="formDoor[]" id="revrad[]" value="Bad">&nbsp;Bad
              </div>
          </div>
          <b><p>Comments :</p></b>
          <textarea name="revcomm" id="revcomm" rows="4" cols="105"></textarea>
          <input type="submit" class="w3-btn w3-teal" id="sub">
        </form>
    </div>
    <footer class="w3-container w3-teal">
      <p>Thanks</p>
    </footer>
  </div>
    </div>
</div>

<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-opacity w3-display-container">
  <div class="w3-display-middle" style="white-space:nowrap;">
    <span class="w3-center w3-padding-xlarge w3-black w3-xlarge w3-wide w3-animate-opacity">MOBILES <span class="w3-hide-small">DEFEAT</span> TANKS    </span>
  </div>
</div>

<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
  <h3 class="w3-center">ABOUT THE NEWS</h3>
    <h5 class="w3-center">Turkey :</h5>

  <p>But when President Recep Tayyip Erdogan addressed the nation as events unfolded on Friday, he did not do it from the back of a tank, but from a smartphone held up to the camera of broadcaster CNN Turk.
It was an extraordinary moment on an extraordinary night, but one that tells us much about why Mr Erdogan is still in power, and why thousands of soldiers are now in jail.
The coup failed for a number of reasons. Chiefly, the organisers lacked broader military backing and failed to gain public and political support.</p>
  <div class="w3-row">
    <div class="w3-col m6 w3-center w3-section">
      <p><b>The Tank</b></p><br>
      <img src="tank.jpg" class="w3-circle w3-hover-opacity" alt="Photo of Me" style="width:45%" onclick="document.getElementById('modal01').style.display='block'">
        <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  <span class="w3-closebtn w3-hover-red w3-container w3-padding-16 w3-display-topright">&times;</span>
  <div class="w3-modal-content w3-animate-zoom">
    <img src="tank.jpg" style="width:100%">
  </div>
</div>
    </div>

    <!-- Hide this text on small devices -->
    <div class="w3-col m6 w3-hide-small w3-section">
      <p>But another explanation may lie in the very different ideas the two sides had about how to get their message across.
Late on Friday evening, the scheme seemed well-planned, with rebel troops sealing off Istanbul's bridges over the Bosphorus, surrounding the city's Ataturk airport and stationing tanks outside the presidential palace in Ankara.
But while they also raided major news organisations, the rebels failed to control the narrative and fundamentally misunderstood the significance of social media.
A statement from the group, read on state broadcaster TRT by a journalist reportedly being held at gunpoint, announced that a "Peace at Home Council" was running the country and a curfew and martial law would be declared.</p>
    </div>
  </div>
</div>


<!-- Footer -->
<footer class="w3-container w3-dark-grey w3-padding-32 w3-margin-top">
  <a href="news.html" class="w3-btn w3-padding-large w3-margin-bottom">Previous</a>
  <a href="news3.html" class="w3-btn w3-padding-large w3-margin-bottom">Next</a>
    <br> <ul class="w3-pagination">
    <li><a href="news.html">1</a></li>
    <li><a class="w3-disabled">2</a></li>
    <li><a href="news3.html">3</a></li>
    <li><a href="news4.html">4</a></li>
    <li><a href="news5.html">5</a></li>
    <li><a href="news6.html">6</a></li>
  </ul>
  <p>Made by Akshit Garg</p>
</footer>

<!--Scripts-->
<script>


// Modal Image Gallery
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}

// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
    var navbar = document.getElementById("myNavbar");
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        navbar.className = "w3-navbar" + " w3-card-2" + " w3-animate-top" + " w3-white";
    } else {
        navbar.className = navbar.className.replace(" w3-card-2 w3-animate-top w3-white", "");
    }
}
</script>

</body>
</html>