index.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
  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. height: 200vh;
  18. padding-top: 4rem;
  19. }
  20. section {
  21. padding: 5rem 0;
  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-sub-title {
  46. color: rgba(0, 0, 0, 0.6);
  47. text-align: center;
  48. font-size: 1.4rem;
  49. margin-bottom: 2rem;
  50. }
  51. .img-container {
  52. overflow: hidden;
  53. }
  54. .img-container img {
  55. height: 100%;
  56. width: 100%;
  57. -o-object-fit: cover;
  58. object-fit: cover;
  59. -o-object-position: center;
  60. object-position: center;
  61. }
  62. .link-btn {
  63. margin: 0;
  64. padding: 0.45rem 1.2rem !important;
  65. background: rgb(0, 38, 136);
  66. border-color: rgb(0, 38, 136);
  67. border-width: 2px;
  68. font-size: 0.9rem;
  69. font-weight: 600;
  70. box-shadow: none;
  71. opacity: unset;
  72. display: block;
  73. height: unset;
  74. width: -moz-fit-content;
  75. width: fit-content;
  76. }
  77. .link-btn:hover {
  78. background: rgb(255, 255, 255);
  79. color: rgb(0, 38, 136);
  80. }
  81. .link-btn-outline {
  82. margin: 0;
  83. padding: 0.45rem 1.2rem !important;
  84. color: rgb(0, 38, 136);
  85. border-color: rgb(0, 38, 136);
  86. background: rgb(255, 255, 255);
  87. border-width: 2px;
  88. font-size: 0.9rem;
  89. font-weight: 600;
  90. box-shadow: none;
  91. opacity: unset;
  92. height: unset;
  93. }
  94. .link-btn-outline:hover {
  95. background: rgb(0, 38, 136);
  96. color: rgb(255, 255, 255);
  97. }
  98. .single-course {
  99. box-shadow: 1px 2px 5px rgba(0, 46, 116, 0.25);
  100. font-family: "Inter", sans-serif;
  101. }
  102. .single-course .top-part {
  103. height: 200px;
  104. position: relative;
  105. overflow: hidden;
  106. }
  107. .single-course .top-part .img-container {
  108. height: 100%;
  109. width: 100%;
  110. }
  111. .single-course .top-part .tag {
  112. position: absolute;
  113. left: 4%;
  114. bottom: 4%;
  115. padding: 0.1rem 1rem;
  116. background: rgb(203, 236, 71);
  117. font-size: 0.75rem;
  118. font-weight: 700;
  119. border-radius: 15px;
  120. }
  121. .single-course .details {
  122. height: calc(100% - 180px);
  123. padding: 1rem;
  124. display: flex;
  125. flex-direction: column;
  126. gap: 0.75rem;
  127. font-family: "Inter", sans-serif;
  128. line-height: 1.2;
  129. background: rgb(255, 255, 255);
  130. }
  131. .single-course .details .level {
  132. font-size: 0.75rem;
  133. font-weight: 500;
  134. color: rgb(0, 38, 136);
  135. }
  136. .single-course .details .title {
  137. font-size: 0.9rem;
  138. font-weight: 600;
  139. text-decoration: none;
  140. color: rgb(0, 0, 0);
  141. cursor: pointer;
  142. }
  143. .single-course .details .stats {
  144. font-size: 0.7rem;
  145. color: rgba(0, 0, 0, 0.6);
  146. }
  147. .single-course .details .price {
  148. color: rgb(0, 38, 136);
  149. font-weight: 600;
  150. font-size: 1rem;
  151. text-align: right;
  152. }
  153. #navbar {
  154. position: fixed;
  155. top: 0;
  156. left: 0;
  157. width: 100%;
  158. padding: 0.75rem 0;
  159. font-family: "Poppins", sans-serif;
  160. background: rgb(255, 255, 255);
  161. z-index: 999;
  162. }
  163. #navbar .container-fluid {
  164. display: flex;
  165. justify-content: space-between;
  166. align-items: center;
  167. }
  168. @media screen and (max-width: 768px) {
  169. #navbar .container-fluid {
  170. flex-direction: column;
  171. }
  172. }
  173. #navbar .nav-icons {
  174. display: flex;
  175. align-items: center;
  176. }
  177. @media screen and (max-width: 768px) {
  178. #navbar .nav-icons {
  179. position: fixed;
  180. top: 0;
  181. left: 0;
  182. right: 0;
  183. justify-content: space-between;
  184. width: 100%;
  185. padding: 0 1rem;
  186. background: rgb(255, 255, 255);
  187. height: 4rem;
  188. }
  189. }
  190. #navbar .navbar-brand {
  191. height: 3.5rem;
  192. }
  193. #navbar .navbar-brand img {
  194. height: 100%;
  195. }
  196. #navbar .res-btn {
  197. font-size: 1.2rem;
  198. padding: 0.25rem;
  199. background: unset;
  200. color: rgb(0, 0, 0);
  201. border: none;
  202. margin: 0;
  203. width: unset;
  204. height: -moz-fit-content;
  205. height: fit-content;
  206. width: -moz-fit-content;
  207. width: fit-content;
  208. display: none;
  209. }
  210. #navbar .res-btn:focus {
  211. box-shadow: none;
  212. }
  213. @media screen and (max-width: 768px) {
  214. #navbar .res-btn {
  215. display: block;
  216. }
  217. }
  218. #navbar .nav-links {
  219. display: flex;
  220. justify-content: center;
  221. align-items: center;
  222. gap: 1rem;
  223. }
  224. @media screen and (max-width: 768px) {
  225. #navbar .nav-links {
  226. background: rgb(255, 255, 255);
  227. display: block;
  228. position: fixed;
  229. top: 4rem;
  230. left: 0;
  231. right: 0;
  232. min-height: calc(100vh - 4rem);
  233. padding: 1rem;
  234. overflow-y: auto;
  235. transform: translateX(-200vw);
  236. transition: 0.75s;
  237. }
  238. #navbar .nav-links li {
  239. display: block;
  240. color: #fff;
  241. margin-top: 1rem !important;
  242. }
  243. }
  244. #navbar .nav-links li {
  245. margin: unset;
  246. padding: unset;
  247. }
  248. #navbar .link-item {
  249. padding: 0.25rem 0.5rem;
  250. margin: unset;
  251. color: rgba(0, 0, 0, 0.8);
  252. font-size: 0.9rem;
  253. font-weight: 600;
  254. background: transparent;
  255. }
  256. #navbar .link-item:hover {
  257. color: rgb(0, 38, 136);
  258. }
  259. #navbar .link-item.active {
  260. color: rgb(0, 38, 136);
  261. }
  262. #navbar .link-btn {
  263. padding: 0.25rem 0.75rem !important;
  264. }
  265. @media screen and (max-width: 768px) {
  266. body.show-mobile-menu #navbar .nav-links {
  267. transform: translateX(0px);
  268. }
  269. body.show-mobile-menu main {
  270. overflow-y: none;
  271. }
  272. }
  273. #hero-banner {
  274. font-family: "Noto Serif Bengali", serif !important;
  275. color: rgb(0, 0, 0);
  276. background: url(../images/hero-background.svg) no-repeat center center/cover;
  277. }
  278. #hero-banner .hero-content {
  279. align-items: center;
  280. min-height: 70vh;
  281. }
  282. #hero-banner .hero-content .hero-title {
  283. font-weight: 500;
  284. font-size: 2.5rem;
  285. font-family: "Noto Serif Bengali", serif;
  286. line-height: 1.2;
  287. margin-bottom: 1.5rem;
  288. }
  289. @media screen and (max-width: 768px) {
  290. #hero-banner .hero-content .hero-title {
  291. font-size: 1.5rem;
  292. margin-bottom: 0.75rem;
  293. }
  294. }
  295. #hero-banner .hero-content .hero-paragraph {
  296. line-height: 1.7;
  297. font-size: 1.3rem;
  298. margin-bottom: 2rem;
  299. }
  300. @media screen and (max-width: 768px) {
  301. #hero-banner .hero-content .hero-paragraph {
  302. font-size: 0.9rem;
  303. }
  304. }
  305. #hero-banner .hero-content .hero-desc {
  306. order: 0;
  307. }
  308. @media screen and (max-width: 992px) {
  309. #hero-banner .hero-content .hero-desc {
  310. order: 1;
  311. }
  312. }
  313. @media screen and (max-width: 768px) {
  314. #hero-banner .hero-content .hero-image {
  315. height: 240px;
  316. text-align: center;
  317. }
  318. #hero-banner .hero-content .hero-image img {
  319. height: 100%;
  320. }
  321. }
  322. #hero-banner .statistics {
  323. display: flex;
  324. align-items: center;
  325. gap: 1rem;
  326. }
  327. #hero-banner .single-statistics {
  328. color: rgba(0, 0, 0, 0.6);
  329. text-align: center;
  330. padding-right: 1rem;
  331. border-right: 5px solid rgb(203, 236, 71);
  332. }
  333. #hero-banner .single-statistics:last-child {
  334. border-right: none;
  335. }
  336. #hero-banner .single-statistics .count {
  337. margin-bottom: 0.2rem;
  338. font-size: 1.3rem;
  339. }
  340. @media screen and (max-width: 768px) {
  341. #hero-banner .single-statistics .count {
  342. font-size: 0.9rem;
  343. }
  344. }
  345. #hero-banner .single-statistics p {
  346. margin-bottom: 0;
  347. }
  348. @media screen and (max-width: 768px) {
  349. #hero-banner .single-statistics p {
  350. font-size: 0.75rem;
  351. }
  352. }
  353. #hero-banner .hero-links {
  354. margin-top: 2rem;
  355. display: flex;
  356. flex-wrap: wrap;
  357. gap: 0.75rem;
  358. }
  359. #feature {
  360. font-family: "Noto Serif Bengali", serif !important;
  361. color: rgb(0, 0, 0);
  362. background: url(../images/2-features.svg) no-repeat center center/cover;
  363. }
  364. #course-catagory {
  365. font-family: "Noto Serif Bengali", serif !important;
  366. color: rgb(0, 0, 0);
  367. background: url(../images/3-jobcourse_catagory.svg) no-repeat center center/cover;
  368. }
  369. #course-catagory .section-title, #course-catagory .section-sub-title {
  370. text-align: start;
  371. }
  372. #course-catagory .courses-short-desc .swiper-slide {
  373. padding: 1rem 0;
  374. height: -moz-max-content;
  375. height: max-content;
  376. }
  377. #course-catagory .courses-short-desc .single-course-short-desc {
  378. font-family: "Inter", sans-serif;
  379. padding: 0.75rem 1rem;
  380. border: 3px solid #ADBCFF;
  381. border-radius: unset;
  382. display: flex;
  383. flex-direction: column;
  384. height: 100%;
  385. }
  386. @media screen and (max-width: 767px) {
  387. #course-catagory .courses-short-desc .single-course-short-desc {
  388. align-items: center;
  389. justify-content: center;
  390. }
  391. }
  392. #course-catagory .courses-short-desc .single-course-short-desc h6 {
  393. font-size: 1rem;
  394. }
  395. #course-catagory .courses-short-desc .single-course-short-desc .desc {
  396. margin-top: 0.2rem;
  397. font-size: 0.65rem;
  398. color: rgba(0, 0, 0, 0.6);
  399. display: flex;
  400. align-items: center;
  401. gap: 0.25rem;
  402. font-weight: 600;
  403. }
  404. #course-catagory .courses-short-desc .single-course-short-desc .desc span {
  405. display: flex;
  406. align-items: center;
  407. gap: 0.25rem;
  408. }
  409. #course-catagory .courses-short-desc .single-course-short-desc .desc span::before {
  410. content: "";
  411. background: #ADBCFF;
  412. height: 15px;
  413. width: 15px;
  414. padding: 0.15rem;
  415. }
  416. #course-catagory .course-container {
  417. margin-top: 2rem;
  418. margin-bottom: 2rem;
  419. }
  420. #course-catagory .link-btn {
  421. margin-top: 1rem;
  422. margin-left: auto;
  423. margin-right: auto;
  424. }
  425. #why-studypress {
  426. background: rgb(173, 188, 255);
  427. padding: 0;
  428. }
  429. #why-studypress .section-title {
  430. text-align: left;
  431. font-weight: 500;
  432. font-size: 2rem;
  433. }
  434. #why-studypress .details {
  435. display: flex;
  436. flex-direction: column;
  437. justify-content: center;
  438. }
  439. #why-studypress ul {
  440. list-style-image: url("../images/round-ok-icon.svg") !important;
  441. list-style-position: inside;
  442. }
  443. #why-studypress ul li {
  444. font-size: 1.3rem;
  445. margin-bottom: 1rem;
  446. }
  447. #why-studypress .slider {
  448. display: flex;
  449. align-items: center;
  450. }
  451. #why-studypress .why-slider-1 .swiper-wrapper, #why-studypress .why-slider-2 .swiper-wrapper {
  452. max-height: 600px;
  453. }
  454. #why-studypress .why-slider-1 .swiper-slide, #why-studypress .why-slider-2 .swiper-slide {
  455. height: 60%;
  456. }
  457. @media screen and (max-width: 768px) {
  458. #why-studypress .why-slider-1 .swiper-slide, #why-studypress .why-slider-2 .swiper-slide {
  459. display: none;
  460. }
  461. }
  462. #new-course {
  463. font-family: "Noto Serif Bengali", serif;
  464. color: rgb(0, 0, 0);
  465. background: url(../images/5-courses.svg) no-repeat center center/cover;
  466. }
  467. #new-course .section-title, #new-course .section-sub-title {
  468. text-align: left;
  469. }
  470. #new-course .new-course-slider {
  471. padding: 1rem 0;
  472. }
  473. #app-download {
  474. font-family: "Noto Serif Bengali", serif;
  475. color: rgb(0, 0, 0);
  476. background: url(../images/6-download.svg) no-repeat center center/cover;
  477. }
  478. #app-download .feature-img {
  479. order: 0;
  480. }
  481. #app-download .feature-img img {
  482. width: 100%;
  483. }
  484. @media screen and (max-width: 767px) {
  485. #app-download .feature-img {
  486. order: 1;
  487. }
  488. }
  489. #app-download .details {
  490. display: flex;
  491. flex-direction: column;
  492. justify-content: center;
  493. }
  494. #app-download .details .section-title, #app-download .details .section-sub-title {
  495. text-align: left;
  496. }
  497. #app-download .download-btns {
  498. display: flex;
  499. align-items: center;
  500. gap: 0.75rem;
  501. }
  502. #app-download .download-btns a {
  503. text-decoration: none;
  504. height: 3.2rem;
  505. }
  506. #app-download .download-btns a img {
  507. height: 100%;
  508. }
  509. #our-blog {
  510. font-family: "Noto Serif Bengali", serif;
  511. color: rgb(0, 0, 0);
  512. background: url(../images/7-blog.svg) no-repeat center center/cover;
  513. }
  514. #our-blog .link-btn {
  515. margin: 2rem auto 0;
  516. }
  517. #our-blog .blog-container {
  518. margin: 2rem 0 2.5rem;
  519. }
  520. #our-blog .blog-container div {
  521. margin: 0;
  522. }/*# sourceMappingURL=index.css.map */