index.css 8.7 KB

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