templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  8. <meta charset="UTF-8">
  9. <title>{% block title %}{% endblock %}</title>
  10. <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
  11. <meta description="Des solutions logiciels et applications innovantes
  12. pour accompagner votre entreprise dans sa transformation numérique." />
  13. <link rel="icon" href="{{ asset('img/favicon.jpg')}}">
  15. <link href="/img/favicon.jpg" rel="icon">
  16. <link href="/assets/img/apple-touch-icon.png" rel="apple-touch-icon">
  18. {% block stylesheet %}
  20. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
  21. <link rel="stylesheet" href="{{asset('assets/vendor/bootstrap/css/bootstrap.min.css')}}">
  22. <link rel="stylesheet" href="{{asset('assets/vendor/bootstrap-icons/bootstrap-icons.css')}}">
  23. <link rel="stylesheet" href="{{asset('assets/vendor/swiper/swiper-bundle.min.css')}}">
  24. <link rel="stylesheet" href="{{asset('assets/vendor/aos/aos.css')}}">
  26. {% if produit is defined %}
  28. <link rel="stylesheet" href="{{asset('assets/riseschool/css/style.css')}}">
  29. <link rel="stylesheet" href="{{asset('assets/riseschool/css/slick.css')}}">
  31. {% endif %}
  34. {% endblock %}
  35. <!-- Template Main CSS File -->
  37. <link rel="stylesheet" href="{{asset('assets/css/style.css')}}">
  41. <style>
  43. .menu-temp{
  45. color : rgba(61,61,62,.69);
  46. font-size: 13px;
  47. font-weight: bold;
  49. }
  51. .carousel-container {
  52. display: flex;
  54. align-items: center;
  55. position: absolute;
  56. bottom: 0;
  57. top: 0;
  58. left: 0;
  59. right: 0;
  60. }
  62. .carousel-container p{
  66. }
  69. #intro h2 {
  70. color: #fff;
  71. margin-bottom: 30px;
  72. font-size: 48px;
  73. font-weight: 700;
  74. }
  76. @media (max-width: 768px) {
  77. #intro h2 {
  78. font-size: 28px;
  79. }
  80. }
  82. #intro p {
  83. width: 80%;
  84. margin: 0 auto 30px auto;
  85. color: #fff;
  86. font-weight: bold;
  87. }
  89. @media (min-width: 1024px) {
  90. #intro p {
  91. width: 60%;
  92. }
  93. }
  95. #intro .carousel-item::before {
  96. content: '';
  97. background-color: rgba(0, 0, 0, 0.7);
  99. }
  101. .text-center{
  103. text-align : justify;
  105. }
  107. .menu-temp{
  109. color : rgba(61,61,61,.69);
  110. font-size: 13px;
  111. font-weight: bold;
  113. }
  116. #intro h2 {
  117. color: #fff;
  118. margin-bottom: 30px;
  119. font-size: 48px;
  120. font-weight: 700;
  121. }
  123. @media (max-width: 768px) {
  124. #intro h2 {
  125. font-size: 28px;
  126. }
  127. }
  129. #intro p {
  130. width: 80%;
  131. margin: 0 auto 30px auto;
  132. color: #fff;
  133. font-weight: bold;
  134. }
  136. @media (min-width: 1024px) {
  137. #intro p {
  138. width: 60%;
  139. }
  140. }
  142. #intro .carousel-item::before {
  143. content: '';
  144. background-color: rgba(0, 0, 0, 0.7);
  146. }
  148. .text-center{
  150. text-align : justify;
  152. }
  155. @-webkit-keyframes up-down {
  156. 0% {
  157. transform: translateY(10px);
  158. }
  159. 100% {
  160. transform: translateY(-10px);
  161. }
  162. }
  164. @keyframes up-down {
  165. 0% {
  166. transform: translateY(10px);
  167. }
  168. 100% {
  169. transform: translateY(-10px);
  170. }
  171. }
  173. /*--------------------------------------------------------------
  174. # Hero Section
  175. --------------------------------------------------------------*/
  176. #hero {
  177. width: 100%;
  178. position: relative;
  179. overflow: hidden;
  180. padding: 140px 0 100px 0;
  181. }
  182. #hero::before {
  183. content: "";
  184. position: absolute;
  185. right: -100%;
  186. top: 20%;
  187. width: 250%;
  188. height: 200%;
  189. z-index: -1;
  191. }
  193. #hero::before{
  194. background: linear-gradient(-45deg, #3b87bd, #2d71a2);
  195. transform: skewY(135deg);
  196. }
  198. @media screen and (max-width: 600px) {
  199. #hero::before{
  200. background: linear-gradient(-45deg, #3b87bd, white);
  201. transform: skewY(135deg);
  202. }
  203. }
  204. }
  205. #hero h1 {
  206. margin: 0 0 10px 0;
  207. font-size: 48px;
  208. font-weight: 500;
  209. line-height: 56px;
  210. color: #5777ba;
  211. font-family: "Poppins", sans-serif;
  212. }
  213. #hero h2 {
  214. color: #515f7d;
  215. margin-bottom: 50px;
  216. font-size: 20px;
  217. }
  218. #hero .download-btn {
  219. font-family: "Raleway", sans-serif;
  220. font-weight: 500;
  221. font-size: 15px;
  222. display: inline-block;
  223. padding: 8px 24px 10px 46px;
  224. border-radius: 3px;
  225. transition: 0.5s;
  226. color: #fff;
  227. background: #47536e;
  228. position: relative;
  229. }
  230. #hero .download-btn:hover {
  231. background: #5777ba;
  232. }
  233. #hero .download-btn i {
  234. font-size: 20px;
  235. position: absolute;
  236. left: 18px;
  237. top: 8.5px;
  238. }
  239. #hero .download-btn + .download-btn {
  240. margin-left: 20px;
  241. }
  242. @media (max-width: 991px) {
  243. #hero {
  244. text-align: center;
  245. }
  246. #hero .download-btn + .download-btn {
  247. margin: 0 10px;
  248. }
  249. #hero .hero-img {
  250. text-align: center;
  251. }
  252. #hero .hero-img img {
  253. width: 60%;
  254. }
  255. }
  256. @media (max-width: 768px) {
  257. #hero h1 {
  258. font-size: 28px;
  259. line-height: 36px;
  260. }
  261. #hero h2 {
  262. font-size: 18px;
  263. line-height: 24px;
  264. margin-bottom: 30px;
  265. }
  266. #hero .hero-img img {
  267. width: 70%;
  268. }
  269. }
  270. @media (max-width: 575px) {
  271. #hero .hero-img img {
  272. width: 80%;
  273. }
  274. }
  276. .animated {
  277. animation: up-down 2s ease-in-out infinite alternate-reverse both;
  278. }
  280. .animated {
  281. -webkit-animation: none;
  282. animation: none;
  283. }
  285. --------------------------------------------------------------*/
  286. #hero3 .content {
  287. padding: 30px 0;
  288. }
  289. #hero3 .content .icon-box {
  290. margin-top: 25px;
  291. }
  292. #hero3 .content .icon-box h4 {
  293. font-size: 20px;
  294. font-weight: 700;
  295. margin: 5px 0 10px 60px;
  296. }
  297. #hero3 .content .icon-box i {
  298. font-size: 48px;
  299. float: left;
  300. color: #dee2e6;
  301. }
  302. #hero3 .content .icon-box p {
  303. font-size: 15px;
  304. color: white;
  305. margin-left: 60px;
  306. }
  307. @media (max-width: 991px) {
  308. #hero3 .image {
  309. text-align: center;
  310. }
  311. #hero3 .image img {
  312. max-width: 80%;
  313. }
  314. }
  315. @media (max-width: 667px) {
  316. #hero3 .image img {
  317. max-width: 100%;
  318. }
  319. }
  321. #hero3 h4{
  323. color:white;
  325. }
  328. .btn.btn-rounded {
  329. border-radius: 50px; }
  331. .btn-warning{
  333. background : #ff9d00;
  335. }
  337. .btn-gradient-warning {
  338. background: -webkit-gradient(linear, left top, right top, from(#f6e384), to(#ffd500));
  339. background: linear-gradient(to right, #f6e384, #f8b852);
  340. border: 0;
  341. -webkit-transition: opacity 0.3s ease;
  342. transition: opacity 0.3s ease; }
  343. .btn {
  344. font-size: 0.875rem;
  345. line-height: 1;
  346. font-family: "ubuntu-bold", sans-serif;
  347. /* Buttons with only icons */
  348. /* Buttons with icon and text */ }
  354. .btn {
  355. font-size: 0.875rem;
  356. line-height: 1;
  357. font-family: "ubuntu-bold", sans-serif;
  358. padding : 2%;
  359. /* Buttons with only icons */
  360. /* Buttons with icon and text */ }
  361. .btn i {
  362. font-size: 1rem; }
  363. .btn.btn-rounded {
  364. border-radius: 50px; }
  365. .btn.btn-fw {
  366. min-width: 150px; }
  367. .btn.btn-sm, .btn-group-sm > .btn {
  368. font-size: 0.875rem; }
  369. .btn.btn-lg, .btn-group-lg > .btn {
  370. font-size: 0.875rem; }
  371. .btn.btn-xs {
  372. padding: 0.5rem 0.75rem;
  373. font-size: 0.625rem; }
  374. .btn.btn-icon {
  375. width: 42px;
  376. height: 42px;
  377. padding: 0; }
  378. .btn.btn-icon-text .btn-icon-prepend {
  379. margin-right: .5rem; }
  380. .btn.btn-icon-text .btn-icon-append {
  381. margin-left: .5rem; }
  382. .btn.btn-social-icon {
  383. width: 50px;
  384. height: 50px;
  385. padding: 0; }
  387. .btn-group .btn + .btn {
  388. border-left: 0; }
  390. /*social buttons*/
  391. .btn-twitter {
  392. background: #2caae1;
  393. color: #ffffff; }
  394. .btn-twitter:hover, .btn-twitter:focus {
  395. background: #1b8dbf;
  396. color: #ffffff; }
  397. .btn-twitter.btn-social-icon-text {
  398. padding: 0 1.5rem 0 0;
  399. background: #59bce7; }
  400. .btn-twitter.btn-social-icon-text i {
  401. background: #2caae1;
  402. padding: .75rem;
  403. display: inline-block;
  404. margin-right: 1.5rem; }
  406. .btn-outline-twitter {
  407. border: 1px solid #2caae1;
  408. color: #2caae1; }
  409. .btn-outline-twitter:hover {
  410. background: #2caae1;
  411. color: #ffffff; }
  413. .btn-facebook {
  414. background: #3b579d;
  415. color: #ffffff; }
  416. .btn-facebook:hover, .btn-facebook:focus {
  417. background: #2d4278;
  418. color: #ffffff; }
  419. .btn-facebook.btn-social-icon-text {
  420. padding: 0 1.5rem 0 0;
  421. background: #4e6ebd; }
  422. .btn-facebook.btn-social-icon-text i {
  423. background: #3b579d;
  424. padding: .75rem;
  425. display: inline-block;
  426. margin-right: 1.5rem; }
  428. .btn-outline-facebook {
  429. border: 1px solid #3b579d;
  430. color: #3b579d; }
  431. .btn-outline-facebook:hover {
  432. background: #3b579d;
  433. color: #ffffff; }
  435. .btn-google {
  436. background: #dc4a38;
  437. color: #ffffff; }
  438. .btn-google:hover, .btn-google:focus {
  439. background: #bf3322;
  440. color: #ffffff; }
  441. .btn-google.btn-social-icon-text {
  442. padding: 0 1.5rem 0 0;
  443. background: #e47163; }
  444. .btn-google.btn-social-icon-text i {
  445. background: #dc4a38;
  446. padding: .75rem;
  447. display: inline-block;
  448. margin-right: 1.5rem; }
  450. .btn-outline-google {
  451. border: 1px solid #dc4a38;
  452. color: #dc4a38; }
  453. .btn-outline-google:hover {
  454. background: #dc4a38;
  455. color: #ffffff; }
  457. .btn-linkedin {
  458. background: #0177b5;
  459. color: #ffffff; }
  460. .btn-linkedin:hover, .btn-linkedin:focus {
  461. background: #015682;
  462. color: #ffffff; }
  463. .btn-linkedin.btn-social-icon-text {
  464. padding: 0 1.5rem 0 0;
  465. background: #0198e8; }
  466. .btn-linkedin.btn-social-icon-text i {
  467. background: #0177b5;
  468. padding: .75rem;
  469. display: inline-block;
  470. margin-right: 1.5rem; }
  472. .btn-outline-linkedin {
  473. border: 1px solid #0177b5;
  474. color: #0177b5; }
  475. .btn-outline-linkedin:hover {
  476. background: #0177b5;
  477. color: #ffffff; }
  479. .btn-pinterest {
  480. background: #cc2127;
  481. color: #ffffff; }
  482. .btn-pinterest:hover, .btn-pinterest:focus {
  483. background: #a01a1f;
  484. color: #ffffff; }
  485. .btn-pinterest.btn-social-icon-text {
  486. padding: 0 1.5rem 0 0;
  487. background: #e04046; }
  488. .btn-pinterest.btn-social-icon-text i {
  489. background: #cc2127;
  490. padding: .75rem;
  491. display: inline-block;
  492. margin-right: 1.5rem; }
  494. .btn-outline-pinterest {
  495. border: 1px solid #cc2127;
  496. color: #cc2127; }
  497. .btn-outline-pinterest:hover {
  498. background: #cc2127;
  499. color: #ffffff; }
  501. .btn-youtube {
  502. background: #e52d27;
  503. color: #ffffff; }
  504. .btn-youtube:hover, .btn-youtube:focus {
  505. background: #c21d17;
  506. color: #ffffff; }
  507. .btn-youtube.btn-social-icon-text {
  508. padding: 0 1.5rem 0 0;
  509. background: #ea5955; }
  510. .btn-youtube.btn-social-icon-text i {
  511. background: #e52d27;
  512. padding: .75rem;
  513. display: inline-block;
  514. margin-right: 1.5rem; }
  516. .btn-outline-youtube {
  517. border: 1px solid #e52d27;
  518. color: #e52d27; }
  519. .btn-outline-youtube:hover {
  520. background: #e52d27;
  521. color: #ffffff; }
  523. .btn-github {
  524. background: #333333;
  525. color: #ffffff; }
  526. .btn-github:hover, .btn-github:focus {
  527. background: #1a1a1a;
  528. color: #ffffff; }
  529. .btn-github.btn-social-icon-text {
  530. padding: 0 1.5rem 0 0;
  531. background: #4d4d4d; }
  532. .btn-github.btn-social-icon-text i {
  533. background: #333333;
  534. padding: .75rem;
  535. display: inline-block;
  536. margin-right: 1.5rem; }
  538. .btn-outline-github {
  539. border: 1px solid #333333;
  540. color: #333333; }
  541. .btn-outline-github:hover {
  542. background: #333333;
  543. color: #ffffff; }
  545. .btn-behance {
  546. background: #1769ff;
  547. color: #ffffff; }
  548. .btn-behance:hover, .btn-behance:focus {
  549. background: #0050e3;
  550. color: #ffffff; }
  551. .btn-behance.btn-social-icon-text {
  552. padding: 0 1.5rem 0 0;
  553. background: #4a8aff; }
  554. .btn-behance.btn-social-icon-text i {
  555. background: #1769ff;
  556. padding: .75rem;
  557. display: inline-block;
  558. margin-right: 1.5rem; }
  560. .btn-outline-behance {
  561. border: 1px solid #1769ff;
  562. color: #1769ff; }
  563. .btn-outline-behance:hover {
  564. background: #1769ff;
  565. color: #ffffff; }
  567. .btn-dribbble {
  568. background: #ea4c89;
  569. color: #ffffff; }
  570. .btn-dribbble:hover, .btn-dribbble:focus {
  571. background: #e51e6b;
  572. color: #ffffff; }
  573. .btn-dribbble.btn-social-icon-text {
  574. padding: 0 1.5rem 0 0;
  575. background: #ef7aa7; }
  576. .btn-dribbble.btn-social-icon-text i {
  577. background: #ea4c89;
  578. padding: .75rem;
  579. display: inline-block;
  580. margin-right: 1.5rem; }
  582. .btn-outline-dribbble {
  583. border: 1px solid #ea4c89;
  584. color: #ea4c89; }
  585. .btn-outline-dribbble:hover {
  586. background: #ea4c89;
  587. color: #ffffff; }
  589. .btn-reddit {
  590. background: #ff4500;
  591. color: #ffffff; }
  592. .btn-reddit:hover, .btn-reddit:focus {
  593. background: #cc3700;
  594. color: #ffffff; }
  595. .btn-reddit.btn-social-icon-text {
  596. padding: 0 1.5rem 0 0;
  597. background: #ff6a33; }
  598. .btn-reddit.btn-social-icon-text i {
  599. background: #ff4500;
  600. padding: .75rem;
  601. display: inline-block;
  602. margin-right: 1.5rem; }
  604. .btn-outline-reddit {
  605. border: 1px solid #ff4500;
  606. color: #ff4500; }
  607. .btn-outline-reddit:hover {
  608. background: #ff4500;
  609. color: #ffffff; }
  611. /* inverse buttons */
  612. .btn-inverse-primary {
  613. background-color: rgba(182, 109, 255, 0.2);
  614. background-image: none;
  615. border-color: rgba(182, 109, 255, 0); }
  616. .btn-inverse-primary:not(.btn-inverse-light) {
  617. color: #b66dff; }
  618. .btn-inverse-primary:hover {
  619. color: #ffffff;
  620. background-color: #b66dff;
  621. border-color: #b66dff; }
  622. .btn-inverse-primary.focus, .btn-inverse-primary:focus {
  623. -webkit-box-shadow: 0 0 0 3px rgba(182, 109, 255, 0.5);
  624. box-shadow: 0 0 0 3px rgba(182, 109, 255, 0.5); }
  625. .btn-inverse-primary.disabled, .btn-inverse-primary:disabled {
  626. color: #b66dff;
  627. background-color: transparent; }
  628. .btn-inverse-primary.active, .btn-inverse-primary:active,
  629. .show > .btn-inverse-primary.dropdown-toggle {
  630. color: #ffffff;
  631. background-color: #b66dff;
  632. border-color: #b66dff; }
  634. .btn-primary:not(.btn-light) {
  635. color: #ffffff; }
  636. .btn-primary:not(.btn-light):hover, .btn-primary:not(.btn-light):focus, .btn-primary:not(.btn-light):active {
  637. color: #ffffff; }
  638. .btn-primary:not(.btn-light):focus, .btn-primary:not(.btn-light):active {
  639. background: #b66dff;
  640. border-color: #b66dff; }
  642. .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  643. background: -webkit-gradient(linear, left top, right top, from(#da8cff), to(#9a55ff));
  644. background: linear-gradient(to right, #da8cff, #9a55ff);
  645. color: #000; }
  647. .btn-inverse-secondary {
  648. background-color: rgba(195, 189, 189, 0.2);
  649. background-image: none;
  650. border-color: rgba(195, 189, 189, 0); }
  651. .btn-inverse-secondary:not(.btn-inverse-light) {
  652. color: #c3bdbd; }
  653. .btn-inverse-secondary:hover {
  654. color: #ffffff;
  655. background-color: #c3bdbd;
  656. border-color: #c3bdbd; }
  657. .btn-inverse-secondary.focus, .btn-inverse-secondary:focus {
  658. -webkit-box-shadow: 0 0 0 3px rgba(195, 189, 189, 0.5);
  659. box-shadow: 0 0 0 3px rgba(195, 189, 189, 0.5); }
  660. .btn-inverse-secondary.disabled, .btn-inverse-secondary:disabled {
  661. color: #c3bdbd;
  662. background-color: transparent; }
  663. .btn-inverse-secondary.active, .btn-inverse-secondary:active,
  664. .show > .btn-inverse-secondary.dropdown-toggle {
  665. color: #ffffff;
  666. background-color: #c3bdbd;
  667. border-color: #c3bdbd; }
  669. .btn-secondary:not(.btn-light) {
  670. color: #ffffff; }
  671. .btn-secondary:not(.btn-light):hover, .btn-secondary:not(.btn-light):focus, .btn-secondary:not(.btn-light):active {
  672. color: #ffffff; }
  673. .btn-secondary:not(.btn-light):focus, .btn-secondary:not(.btn-light):active {
  674. background: #c3bdbd;
  675. border-color: #c3bdbd; }
  677. .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
  678. background: -webkit-gradient(linear, left top, right top, from(#e7ebf0), to(#868e96));
  679. background: linear-gradient(to right, #e7ebf0, #868e96);
  680. color: #000; }
  682. .btn-inverse-success {
  683. background-color: rgba(27, 207, 180, 0.2);
  684. background-image: none;
  685. border-color: rgba(27, 207, 180, 0); }
  686. .btn-inverse-success:not(.btn-inverse-light) {
  687. color: #1bcfb4; }
  688. .btn-inverse-success:hover {
  689. color: #ffffff;
  690. background-color: #1bcfb4;
  691. border-color: #1bcfb4; }
  692. .btn-inverse-success.focus, .btn-inverse-success:focus {
  693. -webkit-box-shadow: 0 0 0 3px rgba(27, 207, 180, 0.5);
  694. box-shadow: 0 0 0 3px rgba(27, 207, 180, 0.5); }
  695. .btn-inverse-success.disabled, .btn-inverse-success:disabled {
  696. color: #1bcfb4;
  697. background-color: transparent; }
  698. .btn-inverse-success.active, .btn-inverse-success:active,
  699. .show > .btn-inverse-success.dropdown-toggle {
  700. color: #ffffff;
  701. background-color: #1bcfb4;
  702. border-color: #1bcfb4; }
  704. .btn-success:not(.btn-light) {
  705. color: #ffffff; }
  706. .btn-success:not(.btn-light):hover, .btn-success:not(.btn-light):focus, .btn-success:not(.btn-light):active {
  707. color: #ffffff; }
  708. .btn-success:not(.btn-light):focus, .btn-success:not(.btn-light):active {
  709. background: #1bcfb4;
  710. border-color: #1bcfb4; }
  712. .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
  713. background: -webkit-gradient(linear, left top, right top, from(#84d9d2), to(#07cdae));
  714. background: linear-gradient(to right, #84d9d2, #07cdae);
  715. color: #000; }
  717. .btn-inverse-info {
  718. background-color: rgba(25, 138, 227, 0.2);
  719. background-image: none;
  720. border-color: rgba(25, 138, 227, 0); }
  721. .btn-inverse-info:not(.btn-inverse-light) {
  722. color: #198ae3; }
  723. .btn-inverse-info:hover {
  724. color: #ffffff;
  725. background-color: #198ae3;
  726. border-color: #198ae3; }
  727. .btn-inverse-info.focus, .btn-inverse-info:focus {
  728. -webkit-box-shadow: 0 0 0 3px rgba(25, 138, 227, 0.5);
  729. box-shadow: 0 0 0 3px rgba(25, 138, 227, 0.5); }
  730. .btn-inverse-info.disabled, .btn-inverse-info:disabled {
  731. color: #198ae3;
  732. background-color: transparent; }
  733. .btn-inverse-info.active, .btn-inverse-info:active,
  734. .show > .btn-inverse-info.dropdown-toggle {
  735. color: #ffffff;
  736. background-color: #198ae3;
  737. border-color: #198ae3; }
  739. .btn-info:not(.btn-light) {
  740. color: #ffffff; }
  741. .btn-info:not(.btn-light):hover, .btn-info:not(.btn-light):focus, .btn-info:not(.btn-light):active {
  742. color: #ffffff; }
  743. .btn-info:not(.btn-light):focus, .btn-info:not(.btn-light):active {
  744. background: #198ae3;
  745. border-color: #198ae3; }
  747. .btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
  748. background: -webkit-gradient(linear, left top, right top, from(#90caf9), color-stop(99%, #047edf));
  749. background: linear-gradient(to right, #90caf9, #047edf 99%);
  750. color: #000; }
  752. .btn-inverse-warning {
  753. background-color: rgba(254, 215, 19, 0.2);
  754. background-image: none;
  755. border-color: rgba(254, 215, 19, 0); }
  756. .btn-inverse-warning:not(.btn-inverse-light) {
  757. color: #fed713; }
  758. .btn-inverse-warning:hover {
  759. color: #ffffff;
  760. background-color: #fed713;
  761. border-color: #fed713; }
  762. .btn-inverse-warning.focus, .btn-inverse-warning:focus {
  763. -webkit-box-shadow: 0 0 0 3px rgba(254, 215, 19, 0.5);
  764. box-shadow: 0 0 0 3px rgba(254, 215, 19, 0.5); }
  765. .btn-inverse-warning.disabled, .btn-inverse-warning:disabled {
  766. color: #fed713;
  767. background-color: transparent; }
  768. .btn-inverse-warning.active, .btn-inverse-warning:active,
  769. .show > .btn-inverse-warning.dropdown-toggle {
  770. color: #ffffff;
  771. background-color: #fed713;
  772. border-color: #fed713; }
  774. .btn-warning:not(.btn-light) {
  775. color: #ffffff; }
  776. .btn-warning:not(.btn-light):hover, .btn-warning:not(.btn-light):focus, .btn-warning:not(.btn-light):active {
  777. color: #ffffff; }
  778. .btn-warning:not(.btn-light):focus, .btn-warning:not(.btn-light):active {
  779. background: #fed713;
  780. border-color: #fed713; }
  782. .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active {
  783. background: -webkit-gradient(linear, left top, right top, from(#f6e384), to(#ffd500));
  784. background: linear-gradient(to right, #f6e384, #ffd500);
  785. color: #000; }
  787. .btn-inverse-danger {
  788. background-color: rgba(254, 124, 150, 0.2);
  789. background-image: none;
  790. border-color: rgba(254, 124, 150, 0); }
  791. .btn-inverse-danger:not(.btn-inverse-light) {
  792. color: #fe7c96; }
  793. .btn-inverse-danger:hover {
  794. color: #ffffff;
  795. background-color: #fe7c96;
  796. border-color: #fe7c96; }
  797. .btn-inverse-danger.focus, .btn-inverse-danger:focus {
  798. -webkit-box-shadow: 0 0 0 3px rgba(254, 124, 150, 0.5);
  799. box-shadow: 0 0 0 3px rgba(254, 124, 150, 0.5); }
  800. .btn-inverse-danger.disabled, .btn-inverse-danger:disabled {
  801. color: #fe7c96;
  802. background-color: transparent; }
  803. .btn-inverse-danger.active, .btn-inverse-danger:active,
  804. .show > .btn-inverse-danger.dropdown-toggle {
  805. color: #ffffff;
  806. background-color: #fe7c96;
  807. border-color: #fe7c96; }
  809. .btn-danger:not(.btn-light) {
  810. color: #ffffff; }
  811. .btn-danger:not(.btn-light):hover, .btn-danger:not(.btn-light):focus, .btn-danger:not(.btn-light):active {
  812. color: #ffffff; }
  813. .btn-danger:not(.btn-light):focus, .btn-danger:not(.btn-light):active {
  814. background: #fe7c96;
  815. border-color: #fe7c96; }
  817. .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
  818. background: -webkit-gradient(linear, left top, right top, from(#ffbf96), to(#fe7096));
  819. background: linear-gradient(to right, #ffbf96, #fe7096);
  820. color: #000; }
  822. .btn-inverse-light {
  823. background-color: rgba(248, 249, 250, 0.2);
  824. background-image: none;
  825. border-color: rgba(248, 249, 250, 0); }
  826. .btn-inverse-light:not(.btn-inverse-light) {
  827. color: #f8f9fa; }
  828. .btn-inverse-light:hover {
  829. color: #ffffff;
  830. background-color: #f8f9fa;
  831. border-color: #f8f9fa; }
  832. .btn-inverse-light.focus, .btn-inverse-light:focus {
  833. -webkit-box-shadow: 0 0 0 3px rgba(248, 249, 250, 0.5);
  834. box-shadow: 0 0 0 3px rgba(248, 249, 250, 0.5); }
  835. .btn-inverse-light.disabled, .btn-inverse-light:disabled {
  836. color: #f8f9fa;
  837. background-color: transparent; }
  838. .btn-inverse-light.active, .btn-inverse-light:active,
  839. .show > .btn-inverse-light.dropdown-toggle {
  840. color: #ffffff;
  841. background-color: #f8f9fa;
  842. border-color: #f8f9fa; }
  844. .btn-light:not(.btn-light) {
  845. color: #ffffff; }
  846. .btn-light:not(.btn-light):hover, .btn-light:not(.btn-light):focus, .btn-light:not(.btn-light):active {
  847. color: #ffffff; }
  848. .btn-light:not(.btn-light):focus, .btn-light:not(.btn-light):active {
  849. background: #f8f9fa;
  850. border-color: #f8f9fa; }
  852. .btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active {
  853. background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e4e4e9));
  854. background: linear-gradient(to bottom, #f4f4f4, #e4e4e9);
  855. color: #000; }
  857. .btn-inverse-dark {
  858. background-color: rgba(62, 75, 91, 0.2);
  859. background-image: none;
  860. border-color: rgba(62, 75, 91, 0); }
  861. .btn-inverse-dark:not(.btn-inverse-light) {
  862. color: #3e4b5b; }
  863. .btn-inverse-dark:hover {
  864. color: #ffffff;
  865. background-color: #3e4b5b;
  866. border-color: #3e4b5b; }
  867. .btn-inverse-dark.focus, .btn-inverse-dark:focus {
  868. -webkit-box-shadow: 0 0 0 3px rgba(62, 75, 91, 0.5);
  869. box-shadow: 0 0 0 3px rgba(62, 75, 91, 0.5); }
  870. .btn-inverse-dark.disabled, .btn-inverse-dark:disabled {
  871. color: #3e4b5b;
  872. background-color: transparent; }
  873. .btn-inverse-dark.active, .btn-inverse-dark:active,
  874. .show > .btn-inverse-dark.dropdown-toggle {
  875. color: #ffffff;
  876. background-color: #3e4b5b;
  877. border-color: #3e4b5b; }
  879. .btn-dark:not(.btn-light) {
  880. color: #ffffff; }
  881. .btn-dark:not(.btn-light):hover, .btn-dark:not(.btn-light):focus, .btn-dark:not(.btn-light):active {
  882. color: #ffffff; }
  883. .btn-dark:not(.btn-light):focus, .btn-dark:not(.btn-light):active {
  884. background: #3e4b5b;
  885. border-color: #3e4b5b; }
  887. .btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active {
  888. background: linear-gradient(89deg, #5e7188, #3e4b5b);
  889. color: #000; }
  891. /* gradient buttons */
  892. .btn-gradient-primary {
  893. background: -webkit-gradient(linear, left top, right top, from(#da8cff), to(#9a55ff));
  894. background: linear-gradient(to right, #da8cff, #9a55ff);
  895. border: 0;
  896. -webkit-transition: opacity 0.3s ease;
  897. transition: opacity 0.3s ease; }
  898. .btn-gradient-primary:not([disabled]):not(.disabled):active, .btn-gradient-primary:not([disabled]):not(.disabled).active,
  899. .show > .btn-gradient-primary.dropdown-toggle {
  900. background: -webkit-gradient(linear, left top, right top, from(#da8cff), to(#9a55ff));
  901. background: linear-gradient(to right, #da8cff, #9a55ff); }
  902. .btn-gradient-primary:hover {
  903. opacity: .8; }
  904. .btn-gradient-primary:not(.btn-gradient-light) {
  905. color: #ffffff; }
  906. .btn-gradient-primary:not(.btn-gradient-light):hover, .btn-gradient-primary:not(.btn-gradient-light):focus, .btn-gradient-primary:not(.btn-gradient-light):active {
  907. color: #ffffff; }
  909. .btn-gradient-secondary {
  910. background: -webkit-gradient(linear, left top, right top, from(#e7ebf0), to(#868e96));
  911. background: linear-gradient(to right, #e7ebf0, #868e96);
  912. border: 0;
  913. -webkit-transition: opacity 0.3s ease;
  914. transition: opacity 0.3s ease; }
  915. .btn-gradient-secondary:not([disabled]):not(.disabled):active, .btn-gradient-secondary:not([disabled]):not(.disabled).active,
  916. .show > .btn-gradient-secondary.dropdown-toggle {
  917. background: -webkit-gradient(linear, left top, right top, from(#e7ebf0), to(#868e96));
  918. background: linear-gradient(to right, #e7ebf0, #868e96); }
  919. .btn-gradient-secondary:hover {
  920. opacity: .8; }
  921. .btn-gradient-secondary:not(.btn-gradient-light) {
  922. color: #ffffff; }
  923. .btn-gradient-secondary:not(.btn-gradient-light):hover, .btn-gradient-secondary:not(.btn-gradient-light):focus, .btn-gradient-secondary:not(.btn-gradient-light):active {
  924. color: #ffffff; }
  926. .btn-gradient-success {
  927. background: -webkit-gradient(linear, left top, right top, from(#84d9d2), to(#07cdae));
  928. background: linear-gradient(to right, #84d9d2, #07cdae);
  929. border: 0;
  930. -webkit-transition: opacity 0.3s ease;
  931. transition: opacity 0.3s ease; }
  932. .btn-gradient-success:not([disabled]):not(.disabled):active, .btn-gradient-success:not([disabled]):not(.disabled).active,
  933. .show > .btn-gradient-success.dropdown-toggle {
  934. background: -webkit-gradient(linear, left top, right top, from(#84d9d2), to(#07cdae));
  935. background: linear-gradient(to right, #84d9d2, #07cdae); }
  936. .btn-gradient-success:hover {
  937. opacity: .8; }
  938. .btn-gradient-success:not(.btn-gradient-light) {
  939. color: #ffffff; }
  940. .btn-gradient-success:not(.btn-gradient-light):hover, .btn-gradient-success:not(.btn-gradient-light):focus, .btn-gradient-success:not(.btn-gradient-light):active {
  941. color: #ffffff; }
  943. .btn-gradient-info {
  944. background: -webkit-gradient(linear, left top, right top, from(#90caf9), color-stop(99%, #047edf));
  945. background: linear-gradient(to right, #90caf9, #047edf 99%);
  946. border: 0;
  947. -webkit-transition: opacity 0.3s ease;
  948. transition: opacity 0.3s ease; }
  949. .btn-gradient-info:not([disabled]):not(.disabled):active, .btn-gradient-info:not([disabled]):not(.disabled).active,
  950. .show > .btn-gradient-info.dropdown-toggle {
  951. background: -webkit-gradient(linear, left top, right top, from(#90caf9), color-stop(99%, #047edf));
  952. background: linear-gradient(to right, #90caf9, #047edf 99%); }
  953. .btn-gradient-info:hover {
  954. opacity: .8; }
  955. .btn-gradient-info:not(.btn-gradient-light) {
  956. color: #ffffff; }
  957. .btn-gradient-info:not(.btn-gradient-light):hover, .btn-gradient-info:not(.btn-gradient-light):focus, .btn-gradient-info:not(.btn-gradient-light):active {
  958. color: #ffffff; }
  960. .btn-gradient-warning {
  961. background: -webkit-gradient(linear, left top, right top, from(#f6e384), to(#ffd500));
  962. background: linear-gradient(to right, #f6e384, #ffd500);
  963. border: 0;
  964. -webkit-transition: opacity 0.3s ease;
  965. transition: opacity 0.3s ease; }
  966. .btn-gradient-warning:not([disabled]):not(.disabled):active, .btn-gradient-warning:not([disabled]):not(.disabled).active,
  967. .show > .btn-gradient-warning.dropdown-toggle {
  968. background: -webkit-gradient(linear, left top, right top, from(#f6e384), to(#ffd500));
  969. background: linear-gradient(to right, #f6e384, #ffd500); }
  970. .btn-gradient-warning:hover {
  971. opacity: .8; }
  972. .btn-gradient-warning:not(.btn-gradient-light) {
  973. color: #ffffff; }
  974. .btn-gradient-warning:not(.btn-gradient-light):hover, .btn-gradient-warning:not(.btn-gradient-light):focus, .btn-gradient-warning:not(.btn-gradient-light):active {
  975. color: #ffffff; }
  977. .btn-gradient-danger {
  978. background: -webkit-gradient(linear, left top, right top, from(#ffbf96), to(#fe7096));
  979. background: linear-gradient(to right, #ffbf96, #fe7096);
  980. border: 0;
  981. -webkit-transition: opacity 0.3s ease;
  982. transition: opacity 0.3s ease; }
  983. .btn-gradient-danger:not([disabled]):not(.disabled):active, .btn-gradient-danger:not([disabled]):not(.disabled).active,
  984. .show > .btn-gradient-danger.dropdown-toggle {
  985. background: -webkit-gradient(linear, left top, right top, from(#ffbf96), to(#fe7096));
  986. background: linear-gradient(to right, #ffbf96, #fe7096); }
  987. .btn-gradient-danger:hover {
  988. opacity: .8; }
  989. .btn-gradient-danger:not(.btn-gradient-light) {
  990. color: #ffffff; }
  991. .btn-gradient-danger:not(.btn-gradient-light):hover, .btn-gradient-danger:not(.btn-gradient-light):focus, .btn-gradient-danger:not(.btn-gradient-light):active {
  992. color: #ffffff; }
  994. .btn-gradient-light {
  995. background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e4e4e9));
  996. background: linear-gradient(to bottom, #f4f4f4, #e4e4e9);
  997. border: 0;
  998. -webkit-transition: opacity 0.3s ease;
  999. transition: opacity 0.3s ease; }
  1000. .btn-gradient-light:not([disabled]):not(.disabled):active, .btn-gradient-light:not([disabled]):not(.disabled).active,
  1001. .show > .btn-gradient-light.dropdown-toggle {
  1002. background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e4e4e9));
  1003. background: linear-gradient(to bottom, #f4f4f4, #e4e4e9); }
  1004. .btn-gradient-light:hover {
  1005. opacity: .8; }
  1006. .btn-gradient-light:not(.btn-gradient-light) {
  1007. color: #ffffff; }
  1008. .btn-gradient-light:not(.btn-gradient-light):hover, .btn-gradient-light:not(.btn-gradient-light):focus, .btn-gradient-light:not(.btn-gradient-light):active {
  1009. color: #ffffff; }
  1011. .btn-gradient-dark {
  1012. background: linear-gradient(89deg, #5e7188, #3e4b5b);
  1013. border: 0;
  1014. -webkit-transition: opacity 0.3s ease;
  1015. transition: opacity 0.3s ease; }
  1016. .btn-gradient-dark:not([disabled]):not(.disabled):active, .btn-gradient-dark:not([disabled]):not(.disabled).active,
  1017. .show > .btn-gradient-dark.dropdown-toggle {
  1018. background: linear-gradient(89deg, #5e7188, #3e4b5b); }
  1019. .btn-gradient-dark:hover {
  1020. opacity: .8; }
  1021. .btn-gradient-dark:not(.btn-gradient-light) {
  1022. color: #ffffff; }
  1023. .btn-gradient-dark:not(.btn-gradient-light):hover, .btn-gradient-dark:not(.btn-gradient-light):focus, .btn-gradient-dark:not(.btn-gradient-light):active {
  1024. color: #ffffff; }
  1028. .produit-text{
  1030. color : black;
  1032. }
  1034. .text-white-bold{
  1036. font-weight : bold;
  1037. color : white;
  1039. }
  1041. .card-rise{
  1043. background : white;
  1044. height : 390px;
  1046. }
  1048. .card-rise:hover{
  1049. transition: 0.3s;
  1050. box-shadow: 0px 20px 40px 0px rgba(21, 41, 62, 0.1);
  1051. transform: translateY(-5px);
  1052. }
  1053. .card-rise h3{
  1055. font-weight : bold;
  1056. text-align : center;
  1057. color : #6610f2;
  1058. margin-top : 2%;
  1059. }
  1061. .card-rise p{
  1063. text-align : center;
  1064. padding : 5%;
  1065. margin-top : -5%;
  1066. }
  1068. </style>
  1070. </head>
  1072. <body>
  1074. <!-- ======= Header ======= -->
  1075. <header id="header" class="fixed-top d-flex align-items-center">
  1076. <div class="container d-flex justify-content-between">
  1078. <div class="">
  1079. <!-- Uncomment below if you prefer to use an text logo -->
  1080. <!-- <h1><a href="index.html">NewBiz</a></h1> -->
  1081. <a href="{{path('app_index')}}"><img src="{{asset('img/logo.jpeg')}}" alt="" style="width: 150px; height : 50px;"></a>
  1082. </div>
  1084. <nav id="navbar" class="navbar">
  1085. <ul>
  1086. <li><a style="color : rgba(61,61,61,.69); font-size: 13px; font-weight: bold;" class="nav-link scrollto menu-temp active" href="{{path('app_index')}}">Accueil</a></li>
  1087. <li><a style="color : rgba(61,61,61,.69); font-size: 13px; font-weight: bold;" class="nav-link menu-temp scrollto" href="{{path('app_service')}}">Services</a></li>
  1088. <li><a style="color : rgba(61,61,61,.69); font-size: 13px; font-weight: bold;" class="nav-link menu-temp scrollto " href="{{path('app_produit')}}">Produits</a></li>
  1089. <li><a style="color : rgba(61,61,61,.69); font-size: 13px; font-weight: bold;" class="nav-link menu-temp scrollto " href="{{path('app_blog')}}">Blog</a></li>
  1090. <li><a style="color : rgba(61,61,61,.69); font-size: 13px; font-weight: bold;" class="nav-link scrollto" href="#contact">Contact</a></li>
  1091. </ul>
  1092. <i class="bi bi-list mobile-nav-toggle"></i>
  1093. </nav><!-- .navbar -->
  1095. </div>
  1096. </header><!-- #header -->
  1099. {% block body %}{% endblock %}
  1101. <!-- ======= Footer ======= -->
  1102. <footer id="footer" style="background-color: #2e4254;">
  1103. <div class="footer-top" style="background-color: #2e4254;" >
  1104. <div class="container">
  1105. <div class="row">
  1107. <div class="col-lg-4 col-md-6 footer-info">
  1108. <h3 class="font-weight-bold " style="color : white; font-weight : bold;">AMANI SOFTWARE</h3>
  1109. <p style="color : white; font-weight : bold;">Des solutions logiciels et applications innovantes
  1110. pour accompagner votre entreprise dans sa transformation numérique.</p>
  1111. </div>
  1113. <div class="col-lg-2 col-md-6 footer-links">
  1114. <h4>Liens utiles</h4>
  1115. <ul>
  1116. <li><a class="text-white-bold" href="{{path('app_index')}}">Accueil</a></li>
  1117. <li><a class="text-white-bold" href="{{path('app_service')}}">Services</a></li>
  1118. <li><a class="text-white-bold" href="{{path('app_produit')}}">Produit</a></li>
  1119. <li><a class="text-white-bold" href="{{path('app_blog')}}">Blog</a></li>
  1120. <li><a class="text-white-bold" href="#">Contact</a></li>
  1121. </ul>
  1122. </div>
  1124. <div class="col-lg-3 col-md-6 footer-contact">
  1125. <h4 class="text-white-bold">Contactez nous</h4>
  1126. <p class="text-white-bold">
  1127. République Démocratique Du Congo <br>
  1128. <br>
  1129. Kinshasa, limete <br>
  1130. <strong class="text-white-bold">Phone:</strong> +243970585155<br>
  1131. <strong class="text-white-bold">Email:</strong> contact@amanisoftware.com<br>
  1132. </p>
  1134. <div class="social-links">
  1135. {# <a href="#" class="twitter"><i class="bi bi-twitter"></i></a> #}
  1136. <a target="_blank" title=="Facebook" href="https://m.facebook.com/pages/Amani-Software/105431422200356/?locale=hi_IN" class="facebook"><i class="bi bi-facebook"></i></a>
  1137. <a target="_blank" title="Instagram" href="https://instagram.com/amanisoftware?igshid=MzRlODBiNWFlZA==" class="instagram"><i class="bi bi-instagram"></i></a>
  1138. <a target="_blank" title="LinkedIn" href="https://cd.linkedin.com/company/amani-software?trk=public_profile_experience-item_profile-section-card_image-click" class="linkedin"><i class="bi bi-linkedin"></i></a>
  1139. </div>
  1141. </div>
  1143. <div class="col-lg-3 col-md-6 footer-newsletter">
  1144. <h4 class="text-white-bold">Newsletters</h4>
  1145. <p class="text-white-bold">Restez informé de nos dernières offres et nouveautés</p>
  1146. <form action="{{path('app_newsletter')}}" method="get">
  1147. <input type="email" name="email"><input type="submit" value="Souscire">
  1148. </form>
  1149. </div>
  1151. </div>
  1152. </div>
  1153. </div>
  1155. <div class="container">
  1156. <div class="copyright">
  1157. &copy; Copyright <strong>Amani Software 2023</strong>. All Rights Reserved
  1158. </div>
  1159. <div class="credits">
  1160. <!--
  1161. All the links in the footer should remain intact.
  1162. You can delete the links only if you purchased the pro version.
  1163. Licensing information: https://bootstrapmade.com/license/
  1164. Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=NewBiz
  1165. -->
  1167. </div>
  1168. </div>
  1169. </footer><!-- End Footer -->
  1172. <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
  1174. <!-- Vendor JS Files -->
  1175. <script src="{{asset('assets/vendor/aos/aos.js')}}"></script>
  1176. <script src="{{asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
  1177. <script src="{{asset('assets/vendor/glightbox/js/glightbox.min.js')}}"></script>
  1178. <script src="{{asset('assets/vendor/isotope-layout/isotope.pkgd.min.js')}}"></script>
  1179. <script src="{{asset('assets/vendor/php-email-form/validate.js')}}"></script>
  1181. <script src="{{asset('assets/vendor/swiper/swiper-bundle.min.js')}}"></script>
  1183. <!-- Template Main JS File -->
  1184. <script src="{{asset('assets/js/main.js')}}"></script>
  1185. <script src="{{asset('assets/js/jquery.min.js')}}"></script>
  1186. <script src="{{asset('assets/vendor/bootstrap/js/bootstrap.min.js')}}"></script>
  1188. <!-- Google tag (gtag.js) -->
  1189. <script async src="https://www.googletagmanager.com/gtag/js?id=G-DRXPFMTLQ3"></script>
  1190. <script>
  1191. window.dataLayer = window.dataLayer || [];
  1192. function gtag(){dataLayer.push(arguments);}
  1193. gtag('js', new Date());
  1195. gtag('config', 'G-DRXPFMTLQ3');
  1196. </script>
  1199. </body>
  1201. </html>