├── sagay.png ├── suyac.png ├── vito.png ├── vito2.png ├── vito3.png ├── bulanon.png ├── sagay2.png ├── sagay3.png ├── suyac2.png ├── suyaccc.png ├── bulanon2.png ├── bulanon3.png ├── cabinreef1.png ├── cabinreef2.png ├── cabinreef3.png ├── discovery.png ├── location.png ├── style.css └── index.html /sagay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/sagay.png -------------------------------------------------------------------------------- /suyac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/suyac.png -------------------------------------------------------------------------------- /vito.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/vito.png -------------------------------------------------------------------------------- /vito2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/vito2.png -------------------------------------------------------------------------------- /vito3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/vito3.png -------------------------------------------------------------------------------- /bulanon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/bulanon.png -------------------------------------------------------------------------------- /sagay2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/sagay2.png -------------------------------------------------------------------------------- /sagay3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/sagay3.png -------------------------------------------------------------------------------- /suyac2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/suyac2.png -------------------------------------------------------------------------------- /suyaccc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/suyaccc.png -------------------------------------------------------------------------------- /bulanon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/bulanon2.png -------------------------------------------------------------------------------- /bulanon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/bulanon3.png -------------------------------------------------------------------------------- /cabinreef1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/cabinreef1.png -------------------------------------------------------------------------------- /cabinreef2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/cabinreef2.png -------------------------------------------------------------------------------- /cabinreef3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/cabinreef3.png -------------------------------------------------------------------------------- /discovery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/discovery.png -------------------------------------------------------------------------------- /location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reezicyb/Sagay/HEAD/location.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | body { 9 | line-height: 1.6; 10 | background-color: #f4f8fb; 11 | color: #333; 12 | } 13 | 14 | nav { 15 | background: linear-gradient(90deg, #0077cc, #00c3ff); 16 | padding: 15px 20px; 17 | display: flex; 18 | justify-content: center; 19 | gap: 30px; 20 | position: sticky; 21 | top: 0; 22 | z-index: 999; 23 | box-shadow: 0 2px 5px rgba(0,0,0,0.2); 24 | } 25 | 26 | nav a { 27 | color: white; 28 | text-decoration: none; 29 | font-weight: 600; 30 | font-size: 1.1rem; 31 | transition: color 0.3s; 32 | } 33 | 34 | nav a:hover { 35 | color: #ffd700; 36 | } 37 | 38 | header { 39 | background: url('../img/discovery.png') no-repeat center center/cover; 40 | background-attachment: fixed; 41 | height: 100vh; 42 | display: flex; 43 | flex-direction: column; 44 | justify-content: center; 45 | align-items: center; 46 | text-align: center; 47 | padding: 20px; 48 | color: white; 49 | } 50 | 51 | header h1 { 52 | font-size: 3.5rem; 53 | margin-bottom: 15px; 54 | text-shadow: 2px 2px 8px rgba(0,0,0,0.6); 55 | } 56 | 57 | header p { 58 | font-size: 1.5rem; 59 | margin-bottom: 25px; 60 | text-shadow: 1px 1px 5px rgba(0,0,0,0.6); 61 | } 62 | 63 | header a { 64 | background: #00aaff; 65 | color: white; 66 | padding: 14px 36px; 67 | border-radius: 30px; 68 | text-decoration: none; 69 | font-size: 1.2rem; 70 | transition: background 0.3s; 71 | box-shadow: 0 4px 10px rgba(0,0,0,0.3); 72 | } 73 | 74 | header a:hover { 75 | background: #005f99; 76 | } 77 | 78 | section { 79 | padding: 80px 20px; 80 | max-width: 1300px; 81 | margin: auto; 82 | } 83 | 84 | h2 { 85 | text-align: center; 86 | margin-bottom: 50px; 87 | font-size: 2.5rem; 88 | color: #0077cc; 89 | position: relative; 90 | } 91 | 92 | h2::after { 93 | content: ''; 94 | display: block; 95 | width: 80px; 96 | height: 4px; 97 | background: #00c3ff; 98 | margin: 10px auto 0; 99 | border-radius: 2px; 100 | } 101 | h3 { 102 | text-align: center; 103 | margin-bottom: 20px; 104 | font-size: 25px; 105 | color: #121213; 106 | position: relative; 107 | padding: 10px; 108 | background-color: #f0e9e9; 109 | border-radius: 8px; 110 | } 111 | .card { 112 | display: flex; 113 | background: white; 114 | border-radius: 15px; 115 | overflow: hidden; 116 | box-shadow: 0 4px 15px rgba(0,0,0,0.1); 117 | margin-bottom: 50px; 118 | transition: transform 0.4s, box-shadow 0.4s; 119 | } 120 | 121 | .card:hover { 122 | transform: translateY(-8px); 123 | box-shadow: 0 8px 20px rgba(0,0,0,0.2); 124 | } 125 | 126 | .card img { 127 | width: 350px; 128 | height: auto; 129 | object-fit: cover; 130 | } 131 | 132 | .card-content { 133 | padding: 30px; 134 | flex: 1; 135 | } 136 | 137 | .card-content h3 { 138 | margin-bottom: 20px; 139 | color: #00aaff; 140 | font-size: 1.8rem; 141 | } 142 | 143 | .gallery { 144 | display: grid; 145 | grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 146 | gap: 20px; 147 | margin-bottom: 50px; 148 | } 149 | 150 | .gallery img { 151 | width: 100%; 152 | height: 700px; 153 | object-fit: cover; 154 | border-radius: 15px; 155 | transition: transform 0.4s, box-shadow 0.4s; 156 | box-shadow: 0 4px 10px rgba(0,0,0,0.1); 157 | } 158 | 159 | .gallery img:hover { 160 | transform: scale(1.05); 161 | box-shadow: 0 8px 20px rgba(0,0,0,0.2); 162 | } 163 | 164 | .about, .contact { 165 | text-align: center; 166 | } 167 | 168 | form { 169 | max-width: 700px; 170 | margin: 40px auto 0; 171 | } 172 | 173 | form input, form textarea { 174 | width: 100%; 175 | padding: 14px; 176 | margin: 12px 0; 177 | border: 1px solid #ccc; 178 | border-radius: 8px; 179 | font-size: 1.1rem; 180 | } 181 | 182 | form button { 183 | background: #0077cc; 184 | color: white; 185 | border: none; 186 | padding: 14px 36px; 187 | border-radius: 30px; 188 | font-size: 1.1rem; 189 | cursor: pointer; 190 | transition: background 0.3s; 191 | } 192 | 193 | form button:hover { 194 | background: #005f99; 195 | } 196 | 197 | footer { 198 | background: #222; 199 | color: white; 200 | text-align: center; 201 | padding: 25px; 202 | font-size: 1rem; 203 | margin-top: 50px; 204 | } 205 | 206 | #locations { 207 | background: url('../img/your-location-image.png') no-repeat center center/cover; 208 | background-attachment: fixed; 209 | } 210 | 211 | @keyframes fadeIn { 212 | 0% { opacity: 0; transform: translateY(20px);} 213 | 100% { opacity: 1; transform: translateY(0);} 214 | } 215 | 216 | @media (max-width: 768px) { 217 | header { 218 | background-size: contain; 219 | background-repeat: no-repeat; 220 | background-position: center; 221 | background-attachment: scroll; 222 | } 223 | header h1 { 224 | font-size: 2.2rem; 225 | } 226 | 227 | .card { 228 | flex-direction: column; 229 | } 230 | 231 | .card img { 232 | width: 100%; 233 | height: 200px; 234 | } 235 | #locations { 236 | background-size: contain; 237 | background-repeat: no-repeat; 238 | background-position: center; 239 | background-attachment: scroll; 240 | } 241 | #locations h2 { 242 | font-size: 2rem; 243 | } 244 | } 245 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |20 | Discover Sagay’s top eco-tourism gems — from vibrant marine sanctuaries and pristine sandbars to rich mangrove forests and cultural traditions, all nurtured by the local community 21 |
22 | Explore Now 23 |
29 | The Suyac Island Mangrove Eco-park is a community-based ecotourism site just offshore from Sagay City, Negros. It is managed by Suyac Island Ecotourism Attendants Association in which all of the members are residents of the island. The park is home to one of the oldest and largest Sonneratia Alba mangrove on Negros Island, and includes other mangrove species. 32 | It is located in the center of the 32,000-hectare Sagay Marine 33 | Reserve, the first of its kind in the country and established sometime in the 80s. It is now recognized nationally and 34 | internationally as one of the most successful marine conservation programs in the Philippines and has won the prestigious Gawad Galing Pook award in 1997. The Suyac Island Mangrove Eco-park is a community-based ecotourism site just offshore from Sagay City, Negros. It is managed by Suyac Island Ecotourism Attendants Association in which all of the members are residents of the island. The park is home to one of the oldest and largest Sonneratia Alba mangrove on Negros Island, and includes other mangrove species. 35 | It is located in the center of the 32,000-hectare Sagay Marine 36 | Reserve, the first of its kind in the country and established sometime in the 80s. It is now recognized nationally and 37 | internationally as one of the most successful marine conservation programs in the Philippines and has won the prestigious Gawad Galing Pook award in 1997. 38 | The Mangro forest itself covers 500 hectares (100 hectares reforested), 33 species of true mangroves with 10 mangrove-associate species, 10 species of sea grass in around 3,000 hectares of sea grass beds, 78 species of Macro Benthic Algae, 60 Genera of hard, black & soft corals, 5 species of Giant Clams, more than 250 species of Reef & Pelagic fishes, 4 species of Marine Turtles and 5 species of endangered Dugong (sea cow). Giant Fruit Bats may be found in the mangrove areas (Suyac Island). 39 |
40 |
44 | The Carbin Reef is a spotless white sandbar that sits off the shore of Sagay town in the Negros Occidental province. It is also part of the Sagay Marine Reserve, a 32,000-hectare protected seascape. 47 | Aside from its beautiful white sand, the reef's surrounding waters are teeming with wildlife so make sure to bring some snorkeling gear during your visit here. Underneath the waves, you will find a vibrant aquatic ecosystem filled with colorful schools of fish and other marine animals. 48 | Since the area is well protected, you may also get to spot a sea turtle gliding through the water if you're lucky! 49 |
50 |
54 | The local community did not treasure its beautiful mangrove forest and its wildlife, which is why the destination decided to introduce ecotourism. Through social media marketing campaigns the community first realised how important the environment is, that they should be proud of their island and how important it is to protect these assets. This made the awareness in biodiversity increase drastically. The local community then also got directly included in the scientific counting if the species in the mangrove forest and was able to report on a high increase in flying foxes in the area this year. 57 | The beauty of the destination further got displayed in an international movie being filmed there and the accomplishments of the good practice acknowledged through several recognitions. 58 |
59 |
63 | This week was the celebration of the feast and Marcelina brings with her a bag filled with a rosary, personal belongings, and around five to six novena booklets for different saints, including St. 66 | Vincent. While the devotees filled the votive stands with colored candles, you can hear Marcelina and the other elders chanting prayers for the Pabasa rites. 67 | "Pabasa has been my way to show my devotion to Señor San Vicente," Marcelina said, adding "For almost 20 years, I have been consistently praying for good health not just of mine and my husband but of those people who ask me to do the Pabasa for them. 68 |
69 |
73 | Lapus-Lapus Conservation Area in Brgy. Bulanon, Sagay City is a community-driven eco-tourism site within the Sagay Marine Reserve, promoting marine conservation and sustainable livelihoods. 76 | Managed by the local community, it offers boating, birdwatching, and kayaking through the mangroves, along with floating cottages serving fresh seafoods. 77 | Visitors can also learn about environmental conservation and efforts to protect the seascape and its ecosystem. 78 |
79 |
88 |
89 |
90 |
95 |
96 |
97 |
102 |
103 |
104 |
109 |
110 |
111 |
116 |
117 |
118 |