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 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Wild LIFE</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="container">
<div class="col-xs-7 col-sm-7 col-md-3 col-lg-3">
<h1>WILD LIFE</h1>
</div>
<div class="col-xs-5 col-sm-5 col-md-3 col-md-offset-6 col-lg-3 col-offset-lg-6 header_droite">
<div class="adresse">
<img src="ress/images/lct.png" alt="localisation" class="logo_lct">
<p class="texte_lct">Lorem ipsum dolor. </br> Glasgow Dr40 Fe 72 </p>
</div>
<div class="tel">
<img src="ress/images/phn.png" alt="telephone" class="logo_phn">
<p class="texte_tel">Tel : 1115550001 </p>
</div>
</div>
</header>
<div class="container-fluid fond_marron">
<nav class="container">
<div class="col-xs-2 col-sm-2 hidden-md hidden-lg">
<img src="ress/images/menu.png" alt="menu" class="menu_pe"/>
</div>
<div class="hidden-xs hidden-sm col-md-1 col-lg-1 menu_ge">
<h2>Home</h2>
</div>
<div class="hidden-xs hidden-sm col-md-1 col-lg-1 menu_ge">
<h2>About</h2>
</div>
<div class="hidden-xs hidden-sm col-md-1 col-lg-1 menu_ge">
<h2>Projects</h2>
</div>
<div class="hidden-xs hidden-sm col-md-1 col-lg-1 menu_ge">
<h2>Gallery</h2>
</div>
<div class="hidden-xs hidden-sm col-md-1 col-lg-1 menu_ge">
<h2>Typo</h2>
</div>
<div class="hidden-xs hidden-sm col-md-1 col-lg-1 menu_ge">
<h2>Contact</h2>
</div>
<div class="col-xs-10 col-sm-10 col-md-4 col-md-offset-2 col-lg-4 col-md-offset-2">
<form class="navbar-form navbar-left" role="search">
<div class="form-line barre_recherche">
<input type="text" class="form-control" placeholder="Search">
<img src="ress/images/search1.png" alt="recherche" class="loupe">
</div>
</form>
</div>
</nav>
</div>
<section class="container-fluid">
<div class="row ligne_animaux">
<div class="col-md-7 col-lg-7 col-xs-12 col-sm-12 block_animaux">
<img src="ress/images/bnr2.jpg" class="img-fluid" alt="Lion"/>
<h3>SAFARY PARK</h3>
<div class="container-fluid sous_titre">
<p class="texte_sous_titre">Donec elementum condimentum elementum phraetrea porta</p>
</div>
</div>
<div class="container-fluid">
<div class="row ligne_animaux">
<div class="col-md-5 col-lg-5 col-xs-12 col-sm-12 block_animaux">
<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 block_animaux">
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 block_animaux">
<img src="ress/images/g2.jpg" class="img-fluid1" alt="Elephants"/>
<h3> ELEPHANTS</h3>
<div class="container-fluid sous_titre2">
<p class="texte_sous_titre2">Donec elementum condimentum elementum phraetrea porta</p>
</div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 block_animaux">
<img src="ress/images/g1.jpg" class="img-fluid1" alt="Guepard"/>
<h3> WILD CATS</h3>
<div class="container-fluid sous_titre2">
<p class="texte_sous_titre2">Donec elementum condimentum elementum phraetrea porta</p>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12 block_animaux">
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 block_animaux">
<img src="ress/images/g3.jpg" class="img-fluid1" alt="Iguane"/>
<h3>REPTILES</h3>
<div class="container-fluid sous_titre2">
<p class="texte_sous_titre2">Donec elementum condimentum elementum phraetrea porta</p>
</div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6 col-lg-6 block_animaux">
<img src="ress/images/g4.jpg" class="img-fluid1" alt="Oiseaux"/>
<h3>BIRDS</h3>
<div class="container-fluid sous_titre2">
<p class="texte_sous_titre2">Donec elementum condimentum elementum phraetrea porta</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
<h4> Welcome </h4>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h6 class="panel-title">
<a class="collapsed"role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<img src="ress/images/pls.png" alt="bouton_plus" class="btn_pls"/> Assudemnda Est
</a>
</h6>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.</br></br>
Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h6 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<img src="ress/images/pls.png" alt="bouton_plus" class="btn_pls"/> Itaque eraum recum
</a>
</h6>
</div>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.</br></br>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h6 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<img src="ress/images/pls.png" alt="bouton_plus" class="btn_pls"/> Autem Quibusdam
</a>
</h6>
</div>
<div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</br></br>
Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis appellatos fabricarum culpasse tribunos ut adminicula futurae molitioni pollicitos.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h6 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<img src="ress/images/pls.png" alt="bouton_plus" class="btn_pls"/> Exceptirum sint
</a>
</h6>
</div>
<div id="collapseFour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
Procedente igitur mox tempore cum adventicium nihil inveniretur, relicta ora maritima in Lycaoniam adnexam Isauriae se contulerunt ibique densis intersaepientes itinera praetenturis provincialium et viatorum opibus pascebantur.</br></br>
E go vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h6 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
<img src="ress/images/pls.png" alt="bouton_plus" class="btn_pls"/> Voluptaum delenti
</a>
</h6>
</div>
<div id="collapseFive" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.</br></br>
Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
<div class="col-xs-12 col-sm-12 col-md-6- col-lg-6 article_featured1">
<h4> Our Features </h4>
<div class="featured">
<img src="ress/images/photo.png" alt="appareil photo" class="logo_featured"/>
<div class="texte_featured">
<h5> Vestibulus Sagittis </h5>
<p> Donect duyu velit, hendredtit id phratea nec, poseeure porta nisl. Donec magna nulla, commodo in ultrices faucibus laciqu aliquet </p>
</div>
</div>
<div class="featured">
<img src="ress/images/camera.png" alt="camera" class="logo_featured"/>
<div class="texte_featured">
<h5> Vestibulus Sagittis </h5>
<p> Donect duyu velit, hendredtit id phratea nec, poseeure porta nisl. Donec magna nulla, commodo in ultrices faucibus laciqu aliquet </p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6- col-lg-6 article_featured2">
<div class="featured">
<img src="ress/images/terre.png" alt="terre" class="logo_featured"/>
<div class="texte_featured">
<h5> Vestibulus Sagittis </h5>
<p> Donect duyu velit, hendredtit id phratea nec, poseeure porta nisl. Donec magna nulla, commodo in ultrices faucibus laciqu aliquet </p>
</div>
</div>
<div class="featured">
<img src="ress/images/loc.png" alt="localisation" class="logo_featured"/>
<div class="texte_featured">
<h5> Vestibulus Sagittis </h5>
<p> Donect duyu velit, hendredtit id phratea nec, poseeure porta nisl. Donec magna nulla, commodo in ultrices faucibus laciqu aliquet </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 class="titre_service">Services</h4>
</div>
</div>
</div>
<article class="container services">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<img src="ress/images/s1.jpg" alt="Services1" class="img-fluid2"/>
<h5 class=titre_article_service>Guidance</h5>
<p> Kuspendisse laorrettt augue ideteri wer interdum merti oremolo odio sedorolu fringilla estero libero arciwe</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<img src="ress/images/s2.jpg" alt="Services2" class="img-fluid2"/>
<h5 class=titre_article_service>Mobile Tents</h5>
<p> Kuspendisse laorrettt augue ideteri wer interdum merti oremolo odio sedorolu fringilla estero libero arciwe</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<img src="ress/images/s3.jpg" alt="Services3" class="img-fluid2"/>
<h5 class=titre_article_service>Animal Care</h5>
<p> Kuspendisse laorrettt augue ideteri wer interdum merti oremolo odio sedorolu fringilla estero libero arciwe</p>
</div>
</div>
</article>
<article class="container news">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<h4> Latest News </h4>
<img src="ress/images/new.jpg" alt="Serpent" class="img-fluid2"/>
<h5 class="titre_news"> Mauris hendredit ex id leo elementum congue</h5>
<p>Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos, et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium! ne forte paria quandoque temptentur, plus exemplis generalibus nocitura quam delictis.</p>
<button class="btn btn-default" type="submit">Read More...</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<h4> Testimonals </h4>
<div class="testimonals">
<img src="ress/images/t1.jpg" alt="tete de cul" class="photo_equipe"/>
<div class="descri_testimonals">
<p class="name"> John Deo</p>
<p class="fonction"> Program Director </p>
<p> Nullam viverra portittor est at vestibulum. Quisque sodales justo eu erat malesuada rutrum. Ut orci velit, dignissim ut dui convallis sagittis cursusm sem.</p>
</div>
</div>
<div class="testimonals">
<img src="ress/images/t2.jpg" alt="tete de cul2" class="photo_equipe"/>
<div class="descri_testimonals">
<p class="name"> John Deo</p>
<p class="fonction"> Program Director </p>
<p> Nullam viverra portittor est at vestibulum. Quisque sodales justo eu erat malesuada rutrum. Ut orci velit, dignissim ut dui convallis sagittis cursusm sem.</p>
</div>
</div>
</div>
</div>
</article>
<div class="container-fluid fond_gris_fonce">
<div class="row">
<aside class="container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="titre_aside">
<p>Lastets tweets</p>
</div>
<div class="tweet">
<p class="titre_rubrique">Num porta justo eu varius mattis</p>
<p class="url_tweet">http://www.example.com</p>
</div>
<div class="tweet">
<p class="titre_rubrique">Num porta justo eu varius mattis</p>
<p class="url_tweet">http://www.example.com</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="titre_aside">
<p>Newsletter</p>
</div>
<div class="texte_newsletter">Praesent ex lectur, luctus ut enim sed, scelerisque larorett massa. Fusce rhoncocus massa dignissim scuscipt varius. Donec vel congue libero</p></div>
<div class="abo_newsletter">
<input type="email" class="form-inline-news" placeholder="Email">
<button type="submit" class="btn btn-default-go">GO</button>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="titre_aside">
<p>Social Media</p>
</div>
<div class="reseaux_sociaux">
<img src="ress/images/facebook.png" alt="facebook" class="logo_reseaux_sociaux"/>
<img src="ress/images/twitter.png" alt="twitter" class="logo_reseaux_sociaux"/>
<img src="ress/images/ballon.png" alt="ballon" class="logo_reseaux_sociaux"/>
<img src="ress/images/google.png" alt="google" class="logo_reseaux_sociaux"/>
<img src="ress/images/youtube.png" alt="youtube" class="logo_reseaux_sociaux"/>
</div>
</div>
</aside>
</div>
</div>
<div class="container-fluid fond_gris_clair">
<div class="row">
<footer class="container footer">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 signature_wild">
<p> WILD LIFE</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 col-md-offset-2 col-lg-7 col-lg-offset-2 copyright">
<p> Copyright 2015 Wild Life. All Right reserved | Design by Julien "hollowspy" NIEDZWIECKI </p>
</div>
</footer>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function (){
$('.carousel').carousel();
});
</script>
<script type="text/javascript">
$('.collapse').collapse()
</script>
</body>
</body>
</html> |
Partager