Added egypt

egypt/Explore.css

@@ -0,0 +1,197 @@
+*{
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+html{
+background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed;
+}
+
+.container{
+  width: 100%;
+  height: auto;
+  padding-left: 8%;
+  padding-right: 8%;
+  box-sizing: border-box;
+  
+}
+
+
+.navbar{
+height: 12%;
+display: flex;
+align-items: center;
+}
+
+.logo{
+width: 50px;
+cursor: pointer;
+color: white;
+font-size: 20px;
+}
+
+.navbar i{
+width: 30px;
+cursor: pointer;
+margin-left: 40px;
+}
+
+nav{
+flex: 1;
+text-align: right;
+}
+
+nav ul li{
+list-style: none;
+display: inline-block;
+margin-left: 60px;
+color: white;
+font-size: 13px;
+}
+
+/* Information boxes */
+
+.wrapper{
+display: grid;
+margin: 200px 90px auto;
+grid-gap: 20px;
+grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+}
+@media (max-width: 700px) {
+.wrapper{
+  margin: 200px auto;
+}
+}
+.wrapper .box{
+width: 350px;
+margin: 0 auto;
+position: relative;
+perspective: 1000px;
+border: #000000;
+border-radius: 2px;
+-webkit-border-radius: 2px;
+-moz-border-radius: 2px;
+-ms-border-radius: 2px;
+-o-border-radius: 2px;
+padding-bottom: 75px;
+padding-right: 75px;
+}
+.wrapper .box .front-face{
+background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg);
+background-size: cover;
+height: 220px;
+width: 100%;
+display: flex;
+flex-direction: column;
+justify-content: center;
+border-radius: 2px;
+border-color: #000000;
+box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
+transition: all 0.5s ease;
+-webkit-border-radius: 2px;
+-moz-border-radius: 2px;
+-ms-border-radius: 2px;
+-o-border-radius: 2px;
+}
+
+.box .front-face span,
+.box .back-face span{
+font-size: 22px;
+font-weight: 600;
+text-transform: uppercase;
+}
+
+.box .front-face span{
+background: linear-gradient(-135deg, #000000, #000000);
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+text-align: center;
+}
+
+
+.box .back-face{
+position: absolute;
+top: 0;
+left: 0;
+z-index: 1;
+height: 220px;
+width: 100%;
+padding: 30px;
+color: #fff;
+opacity: 0;
+transform-style: preserve-3d;
+backface-visibility: hidden;
+background: linear-gradient(-135deg, #000000, #000000);
+transform: translateY(110px) rotateX(-90deg);
+box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
+transition: all 0.5s ease;
+}
+
+.box .back-face p{
+margin-top: 10px;
+text-align: justify;
+}
+
+.box:hover .back-face{
+opacity: 1;
+transform: rotateX(0deg);
+}
+
+.box:hover .front-face{
+opacity: 0;
+transform: translateY(-110px) rotateX(90deg);
+}
+
+           
+/*Boxes Backgrounds*/
+
+.box .front-face.face1{
+  background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Egypt-Valley-of-the-kings.jpg);
+  }
+  
+  .box .front-face.face2{
+  background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-mosque-cairo.jpg);
+  }
+  
+  .box .front-face.face3{
+  background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(egypt-temples.jpg);
+  }
+  
+  .box .front-face.face4{
+  background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(gouna.jpg);
+  }
+  
+  .box .front-face.face5{
+  background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(sharm.jpg);
+  }
+  
+  .box .front-face.face6{
+    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(saint-catherines-monastery.jpg);
+  }
+  
+  .box .front-face.face7{
+      background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(alexandria-egypt-library.jpg);
+  }
+
+  .box .front-face.face{
+    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg);
+  }
+
+  .box .back-face button{
+    height: 60px;
+    width: 100%;
+    margin-top: 55px;
+    background-color: rgb(52, 52, 255);
+    border-radius: 30px;
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    -ms-border-radius: 30px;
+    -o-border-radius: 30px;
+    text-align: center;
+    font-size: xx-large;
+}
+
+.box .back-face a{
+  text-decoration: none;
+}

egypt/Explore.html

@@ -0,0 +1,116 @@
+<!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">
+    <title>Explore Egypt</title>
+    <link rel="stylesheet" href="Explore.css">
+</head>
+<body>
+    <div class="container">
+    <div class="navbar">
+        <h2 class="logo">EGYPT</h2>
+        <nav>
+            <ul>
+                <li id="li1">Home</li>
+                <li id="li2">History</li>
+                <li id="li3">Explore</li>
+            </ul>    
+        </nav>
+        <i class="fa-solid fa-bars"></i>
+    </div>
+    <div class="wrapper">
+        <div class="box">
+          <div class="front-face face1">
+            <span> Valley of the Kings</span>
+         </div>
+         <div class="back-face">
+            <span> Valley of the Kings</span>
+            <p>
+               We all know about King Tut and it is here that you can visit his tomb. In fact, you can visit all of the Kings of the Pharaoh’s tombs. Ramses, I-V, and everyone in between was entombed in extravagant tombs filled with riches and jewels on the West Bank of the Nile.
+            </p>
+          </div>
+        </div>
+       <div class="box">
+          <div class="front-face face2">
+            <span>Islamic Cairo</span>
+         </div>
+         <div class="back-face">
+            <span>Islamic Cairo</span>
+            <p>
+               Islamic Cairo is known as the “City of Citadels” with many mosques to visit including the Sultan Hussan Mosque and the Alabaster Mosque aka, The Mosque of Muhammad Ali. It is the most visited mosque in all of Egypt and with good reason.
+             </p>
+          </div>
+       </div>
+       <div class="box">
+        <div class="front-face face3">
+            <span>Egyptian Museum</span>
+         </div>
+         <div class="back-face">
+            <span>Egyptian Museum</span>
+            <p>
+               Other museums around the world have Egyptian artifacts but this takes it to the next level.
+
+It is worth touring the museum because when visiting the temples of Egypt, there is nothing inside they have all been moved to the safety of the museum where you can see them with your own eyes. 
+            </p>
+             </div>
+          </div>
+          <div class="box">
+            <div class="front-face face4">
+                <span>El Gouna</span>
+             </div>
+             <div class="back-face">
+                <span>El Gouna</span>
+                <p>
+                 For a luxury escape in Egypt, El Gouna is a popular holiday destination. It’s popular spot for diving in the Red Sea, chilling out at the beach, and dolphin spotting.
+                </p>
+       </div>
+        </div>
+        <div class="box">
+            <div class="front-face face5">
+                <span>Sharm El Sheik</span>
+             </div>
+             <div class="back-face">
+                <span>Sharm El Sheik</span>
+                <p>
+                 Sharm El Sheik is Egypt’s most popular resort destinations located on the Sinai Peninsula. It is yet another excellent spot for scuba diving, but with its convenient location, it is also a great spot for adventure. You can climb Mount Sinai or take a trip to the desert to experience one of the Bedouin camps
+                </p>
+       </div>
+        </div>
+        <div class="box">
+            <div class="front-face face6">
+                <span>Saint Catherine’s Monastery</span>
+             </div>
+             <div class="back-face">
+                <span>Saint Catherine’s Monastery</span>
+                <p>
+                 Located at the foot of Mount Sinai, a visit to Saint Catherine’s Monastery is a must visit when in the Sinai Peninsula. It is the very place where God spoke to Moses as a burning bush. Dating back to the 500s AD, this is the oldest continuously working Christian monastery in the world.
+                </p>
+       </div>
+        </div>
+        <div class="box">
+            <div class="front-face face7">
+                <span>Alexandria</span>
+             </div>
+             <div class="back-face">
+                <span>Alexandria</span>
+                <p>
+                 Located on the Mediterranean Sea, Alexandria is where East meets West. Alexandrea was founded by Alexander the Great and housed one of the seven ancient wonders of the world, the Alexandria Lighthouse. Psst: The Great Pyramids are another ancient wonder.
+                </p>
+       </div>
+        </div>
+        <div class="box">
+            <div class="front-face face">
+                <span>Visit Egyptian Ministry of tourism</span>
+             </div>
+             <div class="back-face">
+                <span>Visit Egyptian Ministry of tourism</span>
+<a href="https://egypt.travel/"><button>Ministry of tourism</button></a>
+       </div>
+        </div>
+       </div>
+     </div>
+    <script src="script.js"></script>
+</body>
+</html>

egypt/History.css

@@ -0,0 +1,166 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+  }
+  
+html{
+  background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg) no-repeat center center fixed;
+}
+
+.container{
+    width: 100%;
+    height: auto;
+    padding-left: 8%;
+    padding-right: 8%;
+    box-sizing: border-box;
+    
+}
+
+
+.navbar{
+  height: 12%;
+  display: flex;
+  align-items: center;
+}
+
+.logo{
+  width: 50px;
+  cursor: pointer;
+  color: white;
+  font-size: 20px;
+}
+
+.navbar i{
+  width: 30px;
+  cursor: pointer;
+  margin-left: 40px;
+}
+
+nav{
+  flex: 1;
+  text-align: right;
+}
+
+nav ul li{
+  list-style: none;
+  display: inline-block;
+  margin-left: 60px;
+  color: white;
+  font-size: 13px;
+}
+
+/* Information boxes */
+
+.wrapper{
+  display: grid;
+  margin: 200px 90px auto;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+}
+@media (max-width: 700px) {
+  .wrapper{
+    margin: 200px auto;
+  }
+}
+.wrapper .box{
+  width: 350px;
+  margin: 0 auto;
+  position: relative;
+  perspective: 1000px;
+  border: #000000;
+  border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  -ms-border-radius: 2px;
+  -o-border-radius: 2px;
+  padding-bottom: 75px;
+  padding-right: 75px;
+}
+.wrapper .box .front-face{
+  background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg);
+  background-size: cover;
+  height: 220px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 2px;
+  border-color: #000000;
+  box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
+  transition: all 0.5s ease;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  -ms-border-radius: 2px;
+  -o-border-radius: 2px;
+}
+
+.box .front-face span,
+.box .back-face span{
+  font-size: 22px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.box .front-face span{
+  background: linear-gradient(-135deg, #000000, #000000);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-align: center;
+}
+
+
+.box .back-face{
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  height: 220px;
+  width: 100%;
+  padding: 30px;
+  color: #fff;
+  opacity: 0;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  background: linear-gradient(-135deg, #000000, #000000);
+  transform: translateY(110px) rotateX(-90deg);
+  box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
+  transition: all 0.5s ease;
+}
+
+.box .back-face p{
+  margin-top: 10px;
+  text-align: justify;
+}
+
+.box:hover .back-face{
+  opacity: 1;
+  transform: rotateX(0deg);
+}
+
+.box:hover .front-face{
+  opacity: 0;
+  transform: translateY(-110px) rotateX(90deg);
+}
+
+/*Boxes Backgrounds*/
+
+.box .front-face.face1{
+  background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(info-box1.jpg);
+}
+
+.box .front-face.face2{
+  background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box2.jpg);
+}
+
+.box .front-face.face3{
+  background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box3.jpg);
+}
+
+.box .front-face.face4{
+  background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(info-box4.jpg);
+}
+
+.box .front-face.face5{
+  background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(flag.jpg);
+}

egypt/History.html

@@ -0,0 +1,85 @@
+<!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">
+    <title>Egypt's History</title>
+    <link rel="stylesheet" href="History.css">
+</head>
+<body>
+    <div class="container">
+    <div class="navbar">
+        <h2 class="logo">EGYPT</h2>
+        <nav>
+            <ul>
+                <li id="li1">Home</li>
+                <li id="li2">History</li>
+                <li id="li3">Explore</li>
+            </ul>    
+        </nav>
+        <i class="fa-solid fa-bars"></i>
+    </div>
+    <div class="wrapper">
+         <div class="box">
+           <div class="front-face face1">
+              <span>Ancient Egypt</span>
+           </div>
+           <div class="back-face">
+              <span>Ancient Egypt</span>
+              <p>
+                Ancient Egypt is divided into three “kingdom” periods—Old, Middle, and New—with shorter intermediate periods separating the kingdoms. Even before the Old Kingdom period, the foundations of Egyptian civilization were being laid for thousands of years, as people living near the Nile increasingly focused on sedentary agriculture, which led to urbanization and specialized, non-agricultural economic activity.
+              </p>
+           </div>
+         </div>
+        <div class="box">
+           <div class="front-face face2">
+              <span>OLD Ancient Egypt Kingdom</span>
+           </div>
+           <div class="back-face">
+              <span>OLD Ancient Egypt Kingdom</span>
+              <p>
+                Evidence of human habitation in Egypt stretches back tens of thousands of years. It was only in about 6000 BCE, however, that widespread settlement began in the region. Around this time, the Sahara Desert expanded. Some scientists think this expansion was caused by a slight shift in the tilt of the Earth. Others have explored changing rainfall patterns, but the specific causes are not entirely clear. <br>The most important result of this expansion of the Sahara for human civilization was that it pushed humans closer to the Nile River in search of reliable water sources.
+              </p>
+           </div>
+        </div>
+        <div class="box">
+           <div class="front-face face3">
+              <span>MIDDLE Ancient Egypt Kingdom</span>
+           </div>
+           <div class="back-face">
+              <span>MIDDLE Ancient Egypt Kingdom</span>
+              <p>
+                The Middle Kingdom saw Egypt unified again as kings found ways to take back power from regional governors. From the Middle Kingdom era forward, Egyptian kings often kept well-trained standing armies. The ability of the Egyptian state to create and maintain a standing military force and to build fortifications showed that it had regained control of substantial resources.
+                Political fragmentation led to the Second Intermediate Period. The precise dates are unclear; even though writing allowed for more events to be recorded, most things still were not, and many more records have been lost or destroyed.
+              </p>
+              </div>
+           </div>
+           <div class="box">
+           <div class="front-face face4">
+            <span>NEW Ancient Egypt Kingdom</span>
+         </div>
+         <div class="back-face">
+            <span>NEW Ancient Egypt Kingdom</span>
+            <p>
+                Around 1550 BCE, the New Kingdom period of Egyptian history began with the expulsion of the Hyksos from Egypt and the restoration of centralized political control. This period was Egypt's most prosperous time and marked the peak of its power.
+                Also in this period, Hatshepsut, Egypt’s most famous female ruler, established trade networks that helped build the wealth of Egypt and commissioned hundreds of construction projects and pieces of statuary, as well as an impressive mortuary temple at Deir el-Bahri. She also ordered repairs to temples that had been neglected or damaged during the period of Hyksos rule.
+            </p>
+        </div>
+         </div>
+         <div class="box">
+         <div class="front-face face5">
+            <span>Egypt now</span>
+         </div>
+         <div class="back-face">
+            <span>Egypt now</span>
+            <p>
+              Nowadays Egypt's currency, people, goverment, land changed & Egypt became one of the important countries in Africa & the middle east, Now Egypt is ruled by military ruling,  Islam became the major religion after christianity, Egypt’s capital is now Cairo but goverment is trying to change it to the New Administrative Capital
+            </p>
+        </div>
+         </div>
+        </div>
+     </div>
+    <script src="script.js"></script>
+</body>
+</html>

egypt/index.html

@@ -0,0 +1,53 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+    <div class="container">
+        <div class="navbar">
+            <h2 class="logo">EGYPT</h2>
+            <nav>
+                <ul>
+                    <li id="li1">Home</li>
+                    <li id="li2">History</li>
+                    <li id="li3">Explore</li>
+                </ul>    
+            </nav>
+            <i class="fa-solid fa-bars"></i>
+        </div>
+        <div class="row">
+            <div class="col">
+                <h1>Egypt</h1>
+                <p>The Mother of the world & the start Civilization</p>
+                <button type="button" class="explore" id="btn1">Explore</button>
+            </div>
+            <div class="col">
+                <div class="card card1">
+                    <h5>Abu Simbel</h5>
+                    <p>Abu Simbel is an archaeological site comprising two massive rock-cut temples in southern Egypt on the western bank of Lake Nasser. The twin temples were originally carved out of the mountainside during the reign of Pharaoh Ramesses The Great in the 13th century BC</p>
+                </div>
+                <div class="card card2">
+                    <h5>Siwa Oasis</h5>
+                    <p>Siwa Oasis is one of Egypt’s isolated settlements,Located on an old date trade route, Siwa was an oasis vital to the trade route, as the natural springs and shade giving palm trees gave travelers respite from the desert.</p>
+                </div>
+                <div class="card card3">
+                    <h5>Giza Necropolis</h5>
+                    <p>The Pyramids of Giza, situated in the immediate vicinity of the southwestern suburbs of Cairo are the undisputable top attractions in Egypt. The pyramids at Giza were built over the span of three generations by Khufu, his second reigning son Khafre, and Menkaure</p>
+                </div>
+                <div class="card card4">
+                    <h5>Red Sea Reef</h5>
+                    <p>The Red Sea, off the coast of Egypt, is one of the most beautiful places in the world to go diving. The waters of the Red Sea are renowned for their spectacular visibility and features some of the most exotic seascapes. With its wide expanse of coral formation on the reefs, it is home to thousands of different sea creatures.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

egypt/script.js

@@ -0,0 +1,32 @@
+//Nav li
+var button = document.getElementById("li1");
+
+button.addEventListener("click", function(){
+    document.location.href = 'index.html';
+});
+
+var button = document.getElementById("li2");
+
+button.addEventListener("click", function(){
+    document.location.href = 'History.html';
+});
+
+var button = document.getElementById("li3");
+
+button.addEventListener("click", function(){
+    document.location.href = 'Explore.html';
+});
+
+
+//btns
+var button = document.getElementById("btn1");
+
+button.addEventListener("click", function(){
+    document.location.href = '/Explore.html';
+});
+
+var button = document.getElementById("btn2");
+
+button.addEventListener("click", function(){
+    document.location.href = "www.google.com/maps/place/Egypt";
+});

egypt/style.css

@@ -0,0 +1,122 @@
+*{
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+.container{
+  width: 100%;
+  height: 100vh;
+  background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(background.jpg);
+  background-position: center;
+  background-size: cover;
+  padding-left: 8%;
+  padding-right: 8%;
+  box-sizing: border-box;
+}
+
+.navbar{
+  height: 12%;
+  display: flex;
+  align-items: center;
+}
+
+.logo{
+  width: 50px;
+  cursor: pointer;
+  color: white;
+  font-size: 20px;
+}
+
+.navbar i{
+  width: 30px;
+  cursor: pointer;
+  margin-left: 40px;
+}
+
+nav{
+  flex: 1;
+  text-align: right;
+}
+
+nav ul li{
+  list-style: none;
+  display: inline-block;
+  margin-left: 60px;
+  color: white;
+  font-size: 13px;
+}
+
+.row{
+  display: flex;
+  height: 88%;
+  align-items: center;
+}
+
+.col {
+  flex-basis: 50%;
+}
+
+h1{
+  color: white;
+  font-size: 100px;
+}
+
+p{
+  color: white;
+  font-size: 11px;
+  line-height: 15px;
+}
+
+button{
+  width: 180px;
+  color: #000;
+  font-size: 12px;
+  padding: 12px 0;
+  background: whitesmoke;
+  border: 0;
+  border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+  outline: none;
+  margin-top: 30px;
+}
+
+.card {
+  width: 200px;
+  height: 230px;
+  display: inline-block;
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+  padding: 15px 25px;
+  box-sizing: border-box;
+  margin: 10px 15px;
+  background-position: center;
+  background-size: cover;
+}
+
+.card h5{
+  color: white;
+  text-decoration: bold;
+}
+
+.card1{
+  background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card1.jpg);
+}
+
+.card2{
+  background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card2.jpg);
+}
+
+.card3{
+  background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card3.jpg);
+}
+
+.card4{
+  background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(card4.jpg);
+}