<div class="container mt-3"> <!-- Button to Open the Modal --> <div class="row"> <div class="col-3 col-md-3 col-sm-3 col-lg-3 col-xl-3"> <button type="button" class="btn modal1" data-toggle="modal" data-target="#myModal1"> <img src="https://cdn.images.express.co.uk/img/dynamic/151/590x/secondary/mercury-1262214.jpg" class="picture"> </button> </div> <div class="col-3 col-md-3 col-sm-3 col-lg-3 col-xl-3"> <button type="button" class="btn modal2" data-toggle="modal" data-target="#myModal2"> <img src="https://www.universetoday.com/wp-content/uploads/2008/10/Venus-e1489179310371.jpg" class="picture"> </button> </div> <div class="col-3 col-md-3 col-sm-3 col-lg-3 col-xl-3"> <button type="button" class="btn modal3" data-toggle="modal" data-target="#myModal3"> <img src="https://www.sciencedaily.com/images/2018/10/181019135124_1_540x360.jpg" class="picture"> </button> </div> <div class="col-3 col-md-3 col-sm-3 col-lg-3 col-xl-3"> <button type="button" class="btn modal4" data-toggle="modal" data-target="#myModal4"> <img src="https://www.nasa.gov/sites/default/files/thumbnails/image/edu_what_is_mars.jpg" class="picture"> </button> </div> </div> </div> <div class="container mt-3"> <div class="row"> <div class="col-3 col-md-3 col-sm-3 col-lg-3 col-xl-3"> <button type="button" class="btn modal5" data-toggle="modal" data-target="#myModal5"> <img src="https://news.ucsc.edu/2015/03/images/jupiter-400.jpg" class="picture"> </button> </div> <div class="col-3 col-md-3 col-sm-3 col-lg-3 col-xl-3"> <button type="button" class="btn modal6" data-toggle="modal" data-target="#myModal6"> <img src="https://cdn.mos.cms.futurecdn.net/N7HursA3AyyYVcrQV8ntF9.jpg" class="picture"> </button> </div> <div class="col-3 col-md-3 col-sm-3 col-lg-3 col-xl-3"> <button type="button" class="btn modal7" data-toggle="modal" data-target="#myModal7"> <img src="https://exoplanets.nasa.gov/system/news_items/main_images/167_Uranus_cloudscrop.jpg" class="picture"> </button> </div> <div class="col-3 col-md-3 col-sm-3 col-lg-3 col-xl-3"> <button type="button" class="btn modal8" data-toggle="modal" data-target="#myModal8"> <img src="http://asart.science.ankara.edu.tr/figure/gunes_sistemi/neptun1.jpg" class="picture"> </button> </div> </div> </div> <!--Row Bitti--> <!-- The Modal --> <div class="container mt-3"> <div class="modal fade modal1" id="myModal1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Mercury</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <div class="content"> <h2>Day</h2> <p>59 Earth days</p> <h2>Year</h2> <p>88 Earth days</p> <h2>Radius</h2> <p>1,516 miles | 2,439.7 kilometers</p> <h2>Can't Breathe It</h2> <p>Mercury's thin atmosphere, or exosphere, is composed mostly of oxygen (O2), sodium (Na), hydrogen (H2), helium (He), and potassium (K). Atoms that are blasted off the surface by the solar wind and micrometeoroid impacts create Mercury's exosphere.</p> <h2>Big Sun</h2> <p>Standing on Mercury's surface at its closest approach to the Sun, our star would appear more than three times larger than it does on Earth.</p> </div> <div class="modal-footer"> <p>Information has taken from <a class="link" href="https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/" target="_blank">NASA Science</a>.</p> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container mt-3"> <div class="modal fade modal2" id="myModal2"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Venus</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body modal2"> <h2>Day</h2> <p>243 Earth Days</p> <h2>Year</h2> <p>225 Earth Days</p> <h2>Radius</h2> <p>3,760 miles | 6,052 kilometers</p> <h2>Diverse Terrain</h2> <p>Venus' solid surface is a volcanic landscape covered with extensive plains featuring high volcanic mountains and vast ridged plateaus</p> <h2>Greenhouse Effect</h2> <p>The planet’s surface temperature is about 900 degrees Fahrenheit (465 degrees Celsius)—hot enough to melt lead.</p> </div> <div class="modal-footer"> <p>Information has taken from <a class="link" href="https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/" target="_blank">NASA Science</a>.</p> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container mt-3"> <div class="modal fade modal3" id="myModal3"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Earth</h4> <button type="button" class="close" data-dismiss="modal">x</button> </div> <div class="modal-body"> <div class="content"> <h2>Day</h2> <p>23.9 hours</p> <h2>Year</h2> <p>365.25 days</p> <h2>Radius</h2> <p>3,959 miles | 6,371 kilometers</p> <h2>Breathe Easy</h2> <p>Earth's atmosphere is 78 percent nitrogen, 21 percent oxygen and 1 percent other ingredients—the perfect balance to breathe and live.</p> <h2>Orbital Science</h2> <p>Many orbiting spacecraft study the Earth from above as a whole system—observing the atmosphere, ocean, glaciers, and the solid earth.</p> </div> <div class="modal-footer"> <p>Information has taken from <a class="link" href="https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/" target="_blank">NASA Science</a>.</p> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div class="container mt-3"> <div class="modal fade modal4" id="myModal4"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 div class="modal-title">Mars</h4> <button type="button" class="close" data-dismiss="modal">x</button> </div> <div class="modal-body"> <div class="content"> <h2>Day</h2> <p>24.6 hours</p> <h2>Year</h2> <p>669.6 sols | 687 Earth days</p> <h2>Radius</h2> <p>2,106 miles | 3,390 kilometers</p> <h2>Bring A Spacesuit</h2> <p>Mars has a thin atmosphere made up mostly of carbon dioxide (CO2), argon (Ar), nitrogen (N2), and a small amount of oxygen and water vapor.</p> <h2>Rusty Panet</h2> <p>Mars is known as the Red Planet because iron minerals in the Martian soil oxidize, or rust, causing the soil and atmosphere to look red.</p> </div> <div class="modal-footer"> <p>Information has taken from <a class="link" href="https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/" target="_blank">NASA Science</a>.</p> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="container mt-3"> <div class="modal fade modal5" id="myModal5"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Jupiter</h4> <button type="button" class="close" data-dismiss="modal">x</button> </div> <div class="modal-body"> <div class="content"> <h2>Day</h2> <p>9.92496 hours</p> <h2>Year</h2> <p>4,333 Earth days</p> <h2>Radius</h2> <p>43,440.7 miles | 69,911 kilometers</p> <h2>What's Inside</h2> <p>Jupiter is a gas giant and so lacks an Earth-like surface. If it has a solid inner core at all, it’s likely only about the size of Earth.</p> <h2>Super Storm</h2> <p>Jupiter's Great Red Spot is a gigantic storm that’s about twice the size of Earth and has raged for over a century.</p> </div> <div class="modal-footer"> <p>Information has taken from <a class="link" href="https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/" target="_blank">NASA Science</a>.</p> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="container mt-3"> <div class="modal fade modal6" id="myModal6"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Saturn</h4> <button type="button" class="close" data-dismiss="modal">x</button> </div> <div class="modal-body"> <div class="content"> <h2>Day</h2> <p>10.7 hours</p> <h2>Year</h2> <p>29 Earth years</p> <h2>Radius</h2> <p>36,183.7 miles | 58,232 kilometers</p> <h2>Mini Solar System</h2> <p>Saturn has 53 known moons with an additional nine moons awaiting confirmation of their discovery—that is a total of 62 moons.</p> <h2>Glorious Rings</h2> <p>Saturn has the most spectacular ring system, with seven rings and several gaps and divisions between them.</p> </div> <div class="modal-footer"> <p>Information has taken from <a class="link" href="https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/" target="_blank">NASA Science</a>.</p> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="container mt-3"> <div class="modal fade modal7" id="myModal7"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Uranus</h4> </div> <div class="modal-body"> <div class="content"> <h2>Day</h2> <p>17 hours 14 minutes</p> <h2>Year</h2> <p>84 Earth years</p> <h2>Radius</h2> <p>15,759.2 miles | 25,362 kilometers</p> <h2>Ice Giant</h2> <p>Uranus is an ice giant. Most of its mass is a hot, dense fluid of "icy" materials – water, methane and ammonia – above a small rocky core.</p> <h2>The Other Ringed World</h2> <p>Uranus has 13 known rings. The inner rings are narrow and dark and the outer rings are brightly colored.</p> </div> <div class="modal-footer"> <p>Information has taken from <a class="link" href="https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/" target="_blank">NASA Science</a>.</p> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="container mt-3"> <div class="modal fade modal8" id="myModal8"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Neptune</h4> <button type="button" data-dismiss="modal">x</button> </div> <div class="modal-body"> <div class="content"> <h2>Day</h2> <p>16 hours</p> <h2>Year</h2> <p>165 Earth years</p> <h2>Radius</h2> <p>15,299.4 miles | 24,622 kilometers</p> <h2>Ice Giant</h2> <p>Neptune is an ice giant. Most of its mass is a hot, dense fluid of "icy" materials – water, methane and ammonia – above a small rocky core.</p> <h2>Many Moons</h2> <p>Neptune has 13 moons (and one more awaiting confirmation of discovery), which are named after sea gods and nymphs in Greek mythology.</p> </div> <div class="modal-footer"> <p>Information has taken from <a class="link" href="https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/" target="_blank">NASA Science</a>.</p> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div>