about.css 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
  2. @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
  3. @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@300;400;500;600;700;800;900&display=swap");
  4. * {
  5. list-style: none;
  6. text-decoration: none;
  7. }
  8. a {
  9. opacity: 1;
  10. }
  11. body {
  12. background: rgb(255, 255, 255);
  13. color: rgb(0, 0, 0);
  14. font-family: "Inter", sans-serif;
  15. }
  16. main {
  17. padding-top: 4rem;
  18. padding-bottom: 0 !important;
  19. }
  20. section {
  21. padding: 5rem 0 3.5rem;
  22. margin: unset;
  23. }
  24. h1, h2, h3, h4, h5, h6, p {
  25. color: inherit;
  26. font-family: inherit;
  27. margin: unset;
  28. text-shadow: unset;
  29. }
  30. .row {
  31. margin-top: unset;
  32. }
  33. @media screen and (min-width: 1400px) {
  34. .container {
  35. max-width: 1360px;
  36. }
  37. }
  38. .section-title {
  39. font-weight: 600;
  40. color: rgb(0, 0, 0);
  41. text-align: center;
  42. margin-bottom: 1rem;
  43. font-size: 2.2rem;
  44. }
  45. .section-title strong {
  46. color: rgb(0, 38, 136);
  47. }
  48. .section-sub-title {
  49. color: rgba(0, 0, 0, 0.6);
  50. text-align: center;
  51. font-size: 1.4rem;
  52. margin-bottom: 2rem;
  53. }
  54. .img-container {
  55. overflow: hidden;
  56. }
  57. .img-container img {
  58. height: 100%;
  59. width: 100%;
  60. -o-object-fit: cover;
  61. object-fit: cover;
  62. -o-object-position: center;
  63. object-position: center;
  64. }
  65. .link-btn {
  66. margin: 0;
  67. padding: 0.45rem 1.2rem !important;
  68. background: rgb(0, 38, 136);
  69. border-color: rgb(0, 38, 136);
  70. border-width: 2px;
  71. font-size: 0.9rem;
  72. font-weight: 600;
  73. box-shadow: none;
  74. opacity: unset;
  75. display: block;
  76. height: unset;
  77. width: -moz-fit-content;
  78. width: fit-content;
  79. }
  80. .link-btn:hover {
  81. background: rgb(255, 255, 255);
  82. color: rgb(0, 38, 136);
  83. }
  84. .link-btn-outline {
  85. margin: 0;
  86. padding: 0.45rem 1.2rem !important;
  87. color: rgb(0, 38, 136);
  88. border-color: rgb(0, 38, 136);
  89. background: rgb(255, 255, 255);
  90. border-width: 2px;
  91. font-size: 0.9rem;
  92. font-weight: 600;
  93. box-shadow: none;
  94. opacity: unset;
  95. height: unset;
  96. }
  97. .link-btn-outline:hover {
  98. background: rgb(0, 38, 136);
  99. color: rgb(255, 255, 255);
  100. }
  101. .single-course {
  102. box-shadow: 1px 2px 5px rgba(0, 46, 116, 0.25);
  103. font-family: "Inter", sans-serif;
  104. }
  105. .single-course .top-part {
  106. height: 200px;
  107. position: relative;
  108. overflow: hidden;
  109. }
  110. .single-course .top-part .img-container {
  111. height: 100%;
  112. width: 100%;
  113. }
  114. .single-course .top-part .tag {
  115. position: absolute;
  116. left: 4%;
  117. bottom: 4%;
  118. padding: 0.1rem 1rem;
  119. background: rgb(203, 236, 71);
  120. font-size: 0.75rem;
  121. font-weight: 700;
  122. border-radius: 15px;
  123. }
  124. .single-course .details {
  125. height: calc(100% - 180px);
  126. padding: 1rem;
  127. display: flex;
  128. flex-direction: column;
  129. gap: 0.75rem;
  130. font-family: "Inter", sans-serif;
  131. line-height: 1.2;
  132. background: rgb(255, 255, 255);
  133. }
  134. .single-course .details .level {
  135. font-size: 0.75rem;
  136. font-weight: 500;
  137. color: rgb(0, 38, 136);
  138. }
  139. .single-course .details .title {
  140. font-size: 0.9rem;
  141. font-weight: 600;
  142. text-decoration: none;
  143. color: rgb(0, 0, 0);
  144. cursor: pointer;
  145. }
  146. .single-course .details .stats {
  147. font-size: 0.7rem;
  148. color: rgba(0, 0, 0, 0.6);
  149. }
  150. .single-course .details .price {
  151. color: rgb(0, 38, 136);
  152. font-weight: 600;
  153. font-size: 1rem;
  154. text-align: right;
  155. }
  156. #navbar {
  157. position: fixed;
  158. top: 0;
  159. left: 0;
  160. width: 100%;
  161. padding: 0.75rem 0;
  162. font-family: "Poppins", sans-serif;
  163. background: rgb(255, 255, 255);
  164. z-index: 999;
  165. }
  166. #navbar .container-fluid {
  167. display: flex;
  168. justify-content: space-between;
  169. align-items: center;
  170. }
  171. @media screen and (max-width: 768px) {
  172. #navbar .container-fluid {
  173. flex-direction: column;
  174. }
  175. }
  176. #navbar .nav-icons {
  177. display: flex;
  178. align-items: center;
  179. }
  180. @media screen and (max-width: 768px) {
  181. #navbar .nav-icons {
  182. position: fixed;
  183. top: 0;
  184. left: 0;
  185. right: 0;
  186. justify-content: space-between;
  187. width: 100%;
  188. padding: 0 1rem;
  189. background: rgb(255, 255, 255);
  190. height: 4rem;
  191. }
  192. }
  193. #navbar .navbar-brand {
  194. height: 3.5rem;
  195. }
  196. #navbar .navbar-brand img {
  197. height: 100%;
  198. }
  199. #navbar .res-btn {
  200. font-size: 1.2rem;
  201. padding: 0.25rem;
  202. background: unset;
  203. color: rgb(0, 0, 0);
  204. border: none;
  205. margin: 0;
  206. width: unset;
  207. height: -moz-fit-content;
  208. height: fit-content;
  209. width: -moz-fit-content;
  210. width: fit-content;
  211. display: none;
  212. }
  213. #navbar .res-btn:focus {
  214. box-shadow: none;
  215. }
  216. @media screen and (max-width: 768px) {
  217. #navbar .res-btn {
  218. display: block;
  219. }
  220. }
  221. #navbar .nav-links {
  222. display: flex;
  223. justify-content: center;
  224. align-items: center;
  225. gap: 1rem;
  226. }
  227. @media screen and (max-width: 768px) {
  228. #navbar .nav-links {
  229. background: rgb(255, 255, 255);
  230. display: block;
  231. position: fixed;
  232. top: 4rem;
  233. left: 0;
  234. right: 0;
  235. min-height: calc(100vh - 4rem);
  236. padding: 1rem;
  237. overflow-y: auto;
  238. transform: translateX(-200vw);
  239. transition: 0.75s;
  240. }
  241. #navbar .nav-links li {
  242. display: block;
  243. color: #fff;
  244. margin-top: 1rem !important;
  245. }
  246. }
  247. #navbar .nav-links li {
  248. margin: unset;
  249. padding: unset;
  250. }
  251. #navbar .link-item {
  252. padding: 0.25rem 0.5rem;
  253. margin: unset;
  254. color: rgba(0, 0, 0, 0.8);
  255. font-size: 0.9rem;
  256. font-weight: 600;
  257. background: transparent;
  258. }
  259. #navbar .link-item:hover {
  260. color: rgb(0, 38, 136);
  261. }
  262. #navbar .link-item.active {
  263. color: rgb(0, 38, 136);
  264. }
  265. #navbar .link-btn {
  266. padding: 0.25rem 0.75rem !important;
  267. }
  268. @media screen and (max-width: 768px) {
  269. body.show-mobile-menu #navbar .nav-links {
  270. transform: translateX(0px);
  271. }
  272. body.show-mobile-menu main {
  273. overflow-y: none;
  274. }
  275. }
  276. #footer {
  277. background: #151E37;
  278. padding: 2rem 0;
  279. font-family: "Inter", sans-serif;
  280. }
  281. #footer .top-part {
  282. padding-bottom: 2rem;
  283. border-bottom: 2px solid rgb(255, 255, 255);
  284. }
  285. #footer .top-part ul {
  286. display: flex;
  287. justify-content: space-around;
  288. align-items: flex-end;
  289. flex-direction: row;
  290. list-style: none;
  291. }
  292. #footer .top-part ul li {
  293. list-style: none;
  294. }
  295. #footer .top-part ul .short-icon {
  296. width: 4rem;
  297. }
  298. #footer .top-part ul a {
  299. font-size: 1.2rem;
  300. color: rgb(255, 255, 255);
  301. }
  302. @media screen and (max-width: 767px) {
  303. #footer .top-part ul a {
  304. font-size: 0.85rem;
  305. }
  306. }
  307. #footer .top-part ul a.active {
  308. color: #ADBCFF;
  309. }
  310. #footer .address {
  311. display: flex;
  312. flex-direction: column;
  313. gap: 0.5rem;
  314. color: rgb(255, 255, 255);
  315. }
  316. #footer .address li {
  317. list-style: none;
  318. display: flex;
  319. align-items: center;
  320. gap: 0.75rem;
  321. font-size: 1rem;
  322. font-weight: 300;
  323. }
  324. #footer .other-link {
  325. color: rgb(255, 255, 255);
  326. display: flex;
  327. justify-content: center;
  328. align-items: center;
  329. flex-direction: column;
  330. gap: 1rem;
  331. }
  332. #footer .social-link {
  333. display: flex;
  334. gap: 0.5rem;
  335. }
  336. #footer .social-link img {
  337. height: 100%;
  338. width: 100%;
  339. }
  340. #footer .privacy-links {
  341. display: flex;
  342. gap: 0.25rem;
  343. }
  344. #footer .privacy-links a {
  345. padding: 0.1rem 0.5rem;
  346. font-size: 0.7rem;
  347. color: rgb(255, 255, 255);
  348. border-right: 2px solid rgb(255, 255, 255);
  349. }
  350. #footer .privacy-links a:last-child {
  351. border-right: none;
  352. }
  353. #footer .app-download {
  354. margin-top: 0.5rem;
  355. display: flex;
  356. gap: 1.5rem;
  357. }
  358. #footer .app-download a {
  359. height: 2.2rem;
  360. text-decoration: none;
  361. }
  362. #footer .app-download a img {
  363. height: 100%;
  364. }
  365. #about {
  366. padding-top: 2.5rem;
  367. font-family: "Noto Serif Bengali", serif;
  368. }
  369. #about .section-title {
  370. font-weight: 400;
  371. }
  372. #about h3 {
  373. font-size: 1.4rem;
  374. margin-bottom: 1rem;
  375. }
  376. #about p {
  377. font-size: 1rem;
  378. margin-bottom: 0.5rem;
  379. line-height: 1.7;
  380. }
  381. @media screen and (max-width: 992px) {
  382. #about .why-studypress .feature-image {
  383. order: 0;
  384. }
  385. }
  386. #about .motive .feature-image {
  387. order: 1;
  388. }
  389. @media screen and (max-width: 992px) {
  390. #about .motive .feature-image {
  391. order: 0;
  392. }
  393. }/*# sourceMappingURL=about.css.map */