Incredible/3rd.html at master · rohansh1997/Incredible · 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family:  Papyrus,sans-serif;}  a
.mySlides {display:none}
.mySlide{display:none}
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
 {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body>
<h2>ROSE GARDEN</h2>
<p><b><font size="4">Zakir Hussain Rose Garden, is a botanical garden located in Chandigarh, India and spread over 30 acres (120,000 m2) of land,with 50,000 rose-bushes of 1600 different species.Named after India's former president, Zakir Hussain and created in 1967 under the guidance of Dr Dr M.S.Randhawa, Chandigarh's first chief commissioner, the garden has the distinction of being Asia's largest.The garden has not only roses, but also trees of medicinal value. Some of the medicinal plants that can be spotted here are bel, bahera, harar, camphor and yellow gulmohar. The rose plants have been planted in carved-out lawns and flower beds.Although roses have been selected and grown in China for over 1,000 years,[1] the forerunner of the rose garden as we know it today was planted by empress Joséphine de Beauharnais at Malmaison, France in the years between 1799-1814.[2] Joséphine imported both leading gardening talent and scores of roses, financing many plant collecting trips. At her death in 1814, the garden included more than 250 varieties of rose. It is said that her plant hunters also introduced some 200 other plants to France, among them the dahlia.
Jules Gravereaux in Roseraie de L'Haÿ, 1900
One of the oldest still existing public rose gardens is Jules Gravereaux's Roseraie de L'Haÿ south of Paris in L'Haÿ-les-Roses, which was laid out in 1899 and remains the biggest rose garden in France.</font></b>
</p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
<center>
  <img src="rose.png" style="width:50%">
</center>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
<center>
  <img src="rose1.png" style="width:50%" >
</center>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
<center>
  <img src="rose3.png" style="width:50%">
  </center>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>


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

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    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";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}
var slideIndex = 0;
showSlides();


</script>
</body>
</html>