blog-archive.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592
  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. section {
  366. padding: 2rem 0 1.5rem;
  367. }
  368. .page-title {
  369. font-family: "Inter", sans-serif;
  370. margin-top: 2.5rem;
  371. text-align: left;
  372. font-weight: 600;
  373. padding-bottom: 1.5rem;
  374. border-bottom: 3px solid rgb(173, 188, 255);
  375. }
  376. .page-title strong {
  377. color: rgb(0, 38, 136);
  378. }
  379. #archive-hero {
  380. display: grid;
  381. grid-template-columns: repeat(3, 1fr);
  382. padding: 0 0 2rem;
  383. gap: 1rem;
  384. }
  385. @media screen and (max-width: 768px) {
  386. #archive-hero {
  387. grid-template-columns: repeat(1, 1fr);
  388. }
  389. }
  390. #archive-hero .single-item {
  391. box-shadow: 1px 2px 5px rgba(0, 46, 116, 0.25);
  392. display: flex;
  393. flex-direction: column;
  394. }
  395. #archive-hero .single-item .img-container {
  396. flex: auto;
  397. }
  398. #archive-hero .single-item .details {
  399. height: -moz-fit-content;
  400. height: fit-content;
  401. background: rgb(255, 255, 255);
  402. padding: 0.75rem;
  403. }
  404. #archive-hero .single-item .details .title {
  405. line-height: 1.4;
  406. font-size: 0.85rem;
  407. font-weight: 500;
  408. color: rgb(0, 0, 0);
  409. font-family: "Noto Serif Bengali", serif;
  410. text-decoration: none;
  411. }
  412. #archive-hero .single-item .details .title:hover {
  413. opacity: 0.7;
  414. }
  415. #archive-hero .single-item:first-child {
  416. grid-column: span 2;
  417. grid-row: span 2;
  418. }
  419. @media screen and (max-width: 768px) {
  420. #archive-hero .single-item:first-child {
  421. grid-column: unset;
  422. grid-row: unset;
  423. }
  424. }
  425. .single-item-archive-wraper .archive-title {
  426. color: rgb(0, 0, 0);
  427. display: flex;
  428. align-items: center;
  429. gap: 1rem;
  430. font-family: "Inter", sans-serif;
  431. font-weight: 600;
  432. }
  433. .single-item-archive-wraper .archive-title::after {
  434. content: "";
  435. background: rgb(173, 188, 255);
  436. flex: auto;
  437. padding: 0.1rem;
  438. }
  439. .single-item-archive-wraper .link-btn {
  440. display: block;
  441. width: -moz-fit-content;
  442. width: fit-content;
  443. margin: 2rem auto;
  444. }
  445. .single-item-archive-wraper #single-item-container {
  446. font-family: "Noto Serif Bengali", serif;
  447. font-family: "Inter", sans-serif;
  448. margin-top: 1rem;
  449. }
  450. .single-item-archive-wraper #single-item-container .single-item {
  451. box-shadow: 1px 2px 5px rgba(0, 46, 116, 0.25);
  452. height: 100%;
  453. border-radius: 3px;
  454. overflow: hidden;
  455. display: flex;
  456. flex-direction: column;
  457. }
  458. .single-item-archive-wraper #single-item-container .img-container {
  459. height: 180px;
  460. }
  461. @media screen and (max-width: 768px) {
  462. .single-item-archive-wraper #single-item-container .img-container {
  463. height: 220px;
  464. }
  465. }
  466. .single-item-archive-wraper #single-item-container .details {
  467. flex: auto;
  468. padding: 0.75rem 0.75rem 1rem;
  469. line-height: 1.4;
  470. display: flex;
  471. flex-direction: column;
  472. gap: 0.25rem;
  473. }
  474. .single-item-archive-wraper #single-item-container .tags {
  475. font-size: 0.6rem;
  476. font-weight: 600;
  477. color: rgb(0, 38, 136);
  478. }
  479. .single-item-archive-wraper #single-item-container .title {
  480. font-size: 0.8rem;
  481. line-height: 1.2;
  482. color: rgb(0, 0, 0);
  483. font-weight: 700;
  484. text-decoration: none;
  485. }
  486. .single-item-archive-wraper #single-item-container .title:hover {
  487. color: rgb(0, 38, 136);
  488. }
  489. .single-item-archive-wraper #single-item-container .item-date {
  490. font-size: 0.55rem;
  491. color: rgba(0, 0, 0, 0.6);
  492. font-weight: 600;
  493. }
  494. .single-item-archive-wraper #single-item-container .desc {
  495. color: rgba(0, 0, 0, 0.6);
  496. font-size: 0.65rem;
  497. }
  498. #side-section {
  499. padding-top: 0;
  500. display: flex;
  501. flex-direction: column;
  502. gap: 1.5rem;
  503. }
  504. #side-section .side-item-title {
  505. background-color: rgb(173, 188, 255);
  506. color: rgb(0, 0, 0);
  507. text-align: left;
  508. margin-bottom: 0.5rem;
  509. padding: 0.25rem 0.75rem;
  510. font-size: 1rem;
  511. }
  512. #side-section .single-item {
  513. display: flex;
  514. padding-bottom: 0.75rem;
  515. border-bottom: 2px solid rgb(173, 188, 255);
  516. }
  517. #side-section .single-item .img-container {
  518. flex: 2;
  519. }
  520. #side-section .single-item .img-container img {
  521. width: 100%;
  522. }
  523. #side-section .single-item .details {
  524. flex: 4;
  525. padding: 0.25rem 0.75rem;
  526. }
  527. #side-section .single-item .details .title {
  528. display: block;
  529. font-size: 0.8rem;
  530. line-height: 1.4;
  531. color: rgb(0, 0, 0);
  532. font-weight: 500;
  533. text-decoration: none;
  534. }
  535. #side-section .single-item .details .title:hover {
  536. opacity: 0.8;
  537. }
  538. #side-section .single-testimonial {
  539. display: flex;
  540. padding-bottom: 0.75rem;
  541. border-bottom: 2px solid rgb(173, 188, 255);
  542. }
  543. #side-section .single-testimonial .img-container {
  544. flex: 2;
  545. }
  546. #side-section .single-testimonial .img-container img {
  547. width: 100%;
  548. }
  549. #side-section .single-testimonial .details {
  550. flex: 4;
  551. padding: 0.25rem 0.75rem;
  552. }
  553. #side-section .single-testimonial .details .testimonial {
  554. display: block;
  555. font-size: 0.65rem;
  556. line-height: 1.2;
  557. color: rgba(0, 0, 0, 0.6);
  558. font-weight: 500;
  559. text-decoration: none;
  560. }
  561. #side-section .single-testimonial .details .name, #side-section .single-testimonial .details .ocupation {
  562. margin: unset;
  563. margin-top: 0.15rem;
  564. font-weight: 500;
  565. font-size: 0.7rem;
  566. text-align: right;
  567. }
  568. .add-container {
  569. width: 100%;
  570. }/*# sourceMappingURL=blog-archive.css.map */