<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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=Karla:wght@300&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<script type="module" src="script.js"></script>
<style>
body {
background-color: #f0efda;
}
</style>
</head>
<body>
<nav class="navbar navbar-light bg-light" id="navbar">
<div class="container-fluid" id="navbar">
<a class="navbar-brand" href="index.html" id="">
<img src="Logo.png" alt="" width="100" height="100" class="d-inline-block align-text-top">
</a>
<a class="navbar-brand" href="index.html" id="navv">Care4Plants</a>
</div>
</nav>
<br><br>
<div class="container">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img id="cardt" src="cactus.png" class="card-img-top" alt="...">
<div class="card-body" id="cardt">
<h3 id="cardt" bold><b>Cactus</b></h3>
<p class="card-text" id="cardt">Sustainability: ️⭐️⭐️⭐️⭐️⭐</p>
<p class="card-text" id="cardt">Environment: Desert 🌵</p>
<p class="card-text" id="cardt">Water Every: Summer ☀️ - 7-10 Days Winter ❄️ - 4-6 Weeks</p>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img id="cardt" src="rose.png" class="card-img-top" alt="...">
<div class="card-body" id="cardt">
<h3 id="cardt" bold><b>Rose</b></h3>
<p class="card-text" id="cardt">Sustainability: ️⭐️⭐️⭐️️⭐</p>
<p class="card-text" id="cardt">Environment: Warm and Moist 🌇</p>
<p class="card-text" id="cardt">Water Every: Newly Planted️ - 2-3 Days Established️ - 1-2 Times Per Week</p>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img id="cardt" src="tulip.png" class="card-img-top" alt="...">
<div class="card-body" id="cardt">
<h3 id="cardt" bold><b>Tulip</b></h3>
<p class="card-text" id="cardt">Sustainability: ️⭐️⭐️⭐️⭐️️⭐</p>
<p class="card-text" id="cardt">Environment: Full Sun ☀</p>
<p class="card-text" id="cardt">Water Every: Week</p>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img id="cardt" src="lily.png" class="card-img-top" alt="...">
<div class="card-body" id="cardt">
<h3 id="cardt" bold><b>Lily</b></h3>
<p class="card-text" id="cardt">Sustainability: ️⭐️⭐️⭐⭐️⭐</p>
<p class="card-text" id="cardt">Environment: Sunny</p>
<p class="card-text" id="cardt">Water Every: Week</p>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img id="cardt" src="daisy.png" class="card-img-top" alt="...">
<div class="card-body" id="cardt">
<h3 id="cardt" bold><b>Daisy</b></h3>
<p class="card-text" id="cardt">Sustainability: ️⭐️⭐️⭐⭐️️⭐</p>
<p class="card-text" id="cardt">Environment: Full Sun or Part Shade</p>
<p class="card-text" id="cardt">Water Every: 1-2 inches Per Week</p>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img id="cardt" src="rosemary.png" class="card-img-top" alt="...">
<div class="card-body" id="cardt">
<h3 id="cardt" bold><b>Rosemary</b></h3>
<p class="card-text" id="cardt">Sustainability: ️⭐️⭐️️⭐️️⭐</p>
<p class="card-text" id="cardt">Environment: Well Drained, Slightly Acidic Soil</p>
<p class="card-text" id="cardt">Water Every: 1-2 Weeks</p>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img id="cardt" src="sage.png" class="card-img-top" alt="...">
<div class="card-body" id="cardt">
<h3 id="cardt" bold><b>Sage</b></h3>
<p class="card-text" id="cardt">Sustainability: ️⭐️⭐⭐️⭐</p>
<p class="card-text" id="cardt">Environment: Medium to Full Sun</p>
<p class="card-text" id="cardt">Water Every: 1-2 Per Week, After Grown: 1-2 Weeks</p>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img id="cardt" src="mint.png" class="card-img-top" alt="...">
<div class="card-body" id="cardt">
<h3 id="cardt" bold><b>Mint</b></h3>
<p class="card-text" id="cardt">Sustainability: 🌟🌟🌟🌟🌟️</p>
<p class="card-text" id="cardt">Environment: Full Sun</p>
<p class="card-text" id="cardt">Water Every: 1-2 Per Week</p>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img id="cardt" src="cilantro.png" class="card-img-top" alt="...">
<div class="card-body" id="cardt">
<h3 id="cardt" bold><b>Cilantro</b></h3>
<p class="card-text" id="cardt">Sustainability: ️⭐️⭐️️⭐️️⭐</p>
<p class="card-text" id="cardt">Environment: Full Sun or Light Shade in South</p>
<p class="card-text" id="cardt">Water Every: 1 Inch Per Week</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>