BCB Bank static website
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

217 строки
4.1 KiB

  1. @font-face {
  2. src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype");
  3. font-family: archivo-black;
  4. font-style: normal;
  5. }
  6. @font-face {
  7. src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype");
  8. font-family: open-sans;
  9. font-weight: bolder;
  10. }
  11. @font-face {
  12. src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype");
  13. font-family: open-sans;
  14. font-weight: bold;
  15. }
  16. @font-face {
  17. src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");
  18. font-family: open-sans;
  19. font-style: normal;
  20. }
  21. @font-face {
  22. src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype");
  23. font-family: open-sans;
  24. font-weight: normal;
  25. font-style: italic;
  26. }
  27. .banner {
  28. height: 30vh;
  29. background-image: url("../images/cover-image.jpg");
  30. background-size: cover;
  31. background-repeat: no-repeat;
  32. display: flex;
  33. justify-content: center;
  34. position: relative;
  35. }
  36. .banner:after {
  37. content: "";
  38. width: 100%;
  39. height: 100%;
  40. position: absolute;
  41. background-color: rgba(64, 62, 65, 0.6);
  42. }
  43. .banner h3 {
  44. text-align: center;
  45. align-self: center;
  46. font-size: 36px;
  47. color: white;
  48. z-index: 1;
  49. }
  50. .about-content {
  51. margin: 50px auto;
  52. line-height: 1.8;
  53. letter-spacing: 0.8px;
  54. color: #808285;
  55. border-bottom: 1px solid #f1f1f1;
  56. }
  57. .about-content .inner-container {
  58. display: flex;
  59. justify-content: space-between;
  60. width: 90%;
  61. margin: 0 auto;
  62. }
  63. @media screen and (max-width: 1024px) {
  64. .about-content .inner-container {
  65. flex-direction: column;
  66. }
  67. }
  68. .about-content .inner-container .description {
  69. width: 60%;
  70. align-self: center;
  71. display: flex;
  72. justify-content: space-between;
  73. flex-direction: column;
  74. }
  75. @media screen and (max-width: 1024px) {
  76. .about-content .inner-container .description {
  77. width: 100%;
  78. }
  79. }
  80. .about-content .inner-container .description p {
  81. width: 100%;
  82. }
  83. .about-content .inner-container .description mark {
  84. color: #28aae2;
  85. }
  86. .about-content .inner-container .description .heading {
  87. font-weight: bold;
  88. font-size: 36px;
  89. font-family: archivo-black;
  90. color: #403e41;
  91. }
  92. .about-content .scene-container {
  93. overflow: hidden;
  94. width: 37%;
  95. background-color: #f0f0f0;
  96. min-height: 50vh;
  97. }
  98. @media screen and (max-width: 1023px) {
  99. .about-content .scene-container {
  100. width: 100%;
  101. }
  102. }
  103. .about-content object {
  104. overflow-x: hidden;
  105. display: none;
  106. width: 100%;
  107. height: 100%;
  108. }
  109. .about-content object.active {
  110. display: block;
  111. }
  112. .about-content iframe {
  113. display: none;
  114. }
  115. @media screen and (max-width: 1024px) {
  116. .about-content iframe.active {
  117. display: block;
  118. }
  119. }
  120. .about-content figure {
  121. width: 37%;
  122. align-self: center;
  123. display: flex;
  124. height: 50vh;
  125. }
  126. @media screen and (max-width: 1024px) {
  127. .about-content figure {
  128. width: 100%;
  129. }
  130. }
  131. .about-content figure img {
  132. width: 100%;
  133. align-self: center;
  134. height: 100%;
  135. object-fit: cover;
  136. object-position: top;
  137. }
  138. .about-content p {
  139. width: 90%;
  140. margin: 0 auto 0;
  141. padding-bottom: 50px;
  142. }
  143. @media screen and (max-width: 1024px) {
  144. .about-content p {
  145. margin: 0 auto;
  146. }
  147. }
  148. .about-content .features {
  149. width: 90%;
  150. margin: 20px auto;
  151. }
  152. .about-content .features h3 {
  153. margin-bottom: 10px;
  154. }
  155. .about-content .features p {
  156. width: 100%;
  157. padding: 0;
  158. }
  159. .about-content .features ul {
  160. margin-bottom: 20px;
  161. margin-left: 30px;
  162. }
  163. #our-team {
  164. width: 90%;
  165. margin: 30px auto 100px;
  166. }
  167. #our-team h3 {
  168. font-size: 36px;
  169. color: #403e41;
  170. text-align: center;
  171. font-family: archivo-black;
  172. }
  173. #our-team h3 marked {
  174. color: #28aae2;
  175. display: inline;
  176. }
  177. #our-team marked {
  178. color: #28aae2;
  179. padding: 10px 0 0;
  180. text-align: center;
  181. display: block;
  182. font-weight: bold;
  183. }
  184. #our-team .owl-team {
  185. margin: 50px 0;
  186. }
  187. #our-team .section-container {
  188. margin: 0 20px;
  189. }
  190. #our-team figure {
  191. width: 100%;
  192. display: block;
  193. margin: 0 auto;
  194. }
  195. #our-team figure img {
  196. width: 100%;
  197. }
  198. #our-team p {
  199. text-align: center;
  200. margin-top: 10px;
  201. }
  202. #our-team .owl-team-btn {
  203. margin: 20px auto;
  204. text-align: center;
  205. padding: 20px 0;
  206. }
  207. #our-team .owl-team-btn i {
  208. font-size: 16px;
  209. padding: 0 10px;
  210. color: #28aae2;
  211. cursor: pointer;
  212. }
  213. /*# sourceMappingURL=about.css.map */