My SMM panel
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
 
 
 

618 Zeilen
9.5 KiB

  1. @use "vars";
  2. @font-face {
  3. font-family: "PatuaOne";
  4. src: url("../PatuaOne-Regular.ttf") format("opentype");
  5. font-style: normal;
  6. font-weight: normal;
  7. }
  8. html body {
  9. font-family: 'PatuaOne', 'Times New Roman';
  10. margin: 0;
  11. }
  12. section {
  13. position: relative;
  14. padding-top: 3em;
  15. padding-bottom: 3em;
  16. overflow: hidden;
  17. }
  18. button {
  19. font-family: 'PatuaOne', 'Times New Roman';
  20. }
  21. h1 {
  22. color: white;
  23. }
  24. h2 {
  25. color: vars.getColor("brand-orange");
  26. text-align: center;
  27. }
  28. h3 {
  29. color: vars.getColor("faded-text");
  30. // text-transform: uppercase;
  31. }
  32. ul {
  33. color: vars.getColor("faded-text");
  34. list-style-type: none;
  35. padding: 0;
  36. }
  37. li {
  38. &:before {
  39. content: url("/images/green-check.svg");
  40. margin-right: 4px;
  41. }
  42. padding-bottom: 8px;
  43. }
  44. a {
  45. text-decoration: none;
  46. }
  47. nav {
  48. position: absolute;
  49. width: 100%;
  50. top: 10px;
  51. display: flex;
  52. flex-flow: row wrap;
  53. align-items: center;
  54. justify-content: space-between;
  55. // background-color: transparent;
  56. }
  57. nav h1 {
  58. margin: 4px 0 10px 6px;
  59. display: inline-block;
  60. }
  61. .formal-font {
  62. font-family: "FreeSans";
  63. }
  64. nav #logo {
  65. margin-right: 50px;
  66. }
  67. nav form {
  68. display: flex;
  69. flex-wrap: wrap;
  70. margin-right: 20px;
  71. }
  72. nav form div {
  73. margin: 0 10px;
  74. }
  75. nav form button {
  76. min-width: 5em;
  77. }
  78. nav form input,label {
  79. opacity: 0.7;
  80. }
  81. nav .nav-toggle {
  82. position: absolute;
  83. right: 10px;
  84. top: 5px;
  85. display: none;
  86. height: 45px;
  87. width: 45px;
  88. margin-left: auto;
  89. background: url("../images/menu-icon.svg");
  90. background-size: 100%;
  91. background-size: cover;
  92. color: white;
  93. }
  94. nav .nav-toggle.toggled {
  95. background: url("../images/cancel-icon2.svg");
  96. width: 25px;
  97. height: 25px;
  98. background-size: 100%;
  99. background-size: cover;
  100. top: 10px;
  101. right: 15px;
  102. color: white;
  103. }
  104. div.landing-hero {
  105. top: 0;
  106. height: 50em;
  107. background-color: #ff4e00;
  108. // background-image: linear-gradient(to right bottom, #ff4e00, #fc6200, #f87200, #f58100, #f18e00, #f19507, #f09c0f, #f0a317, #f3a620, #f6a927, #f8ad2e, #fbb034);
  109. background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
  110. z-index: 0;
  111. }
  112. div.hero-filter {
  113. width: 100%;
  114. height: 100%;
  115. }
  116. div.hero-filter h2 {
  117. color: black;
  118. opacity: 0.7;
  119. width: 10em;
  120. font-size: 2.4em;
  121. position: absolute;
  122. top: 3em;
  123. margin-left: 5%;
  124. }
  125. div.hero-filter p {
  126. position: absolute;
  127. top: 12em;
  128. margin-left: 5%;
  129. font-size: 20px;
  130. width: 10em;
  131. opacity: 0.7;
  132. }
  133. div.errors {
  134. background-color: #ececec;
  135. color: vars.getColor("red-alert");
  136. border: 2px solid vars.getColor("red-alert");
  137. border-radius: 4px;
  138. min-height: 50px;
  139. position: absolute;
  140. left: 50%;
  141. margin-right: -50%;
  142. top: 100px;
  143. min-width: 30em;
  144. transform: translate(-50%, -50%);
  145. }
  146. .errors ul {
  147. margin: auto;
  148. }
  149. form.login {
  150. // font-weight: bold;
  151. color: white;
  152. }
  153. .cancel-icon {
  154. width: 30px;
  155. }
  156. form.login input {
  157. margin-left: 2px;
  158. color: white;
  159. background-color: transparent;
  160. border: 2px solid white;
  161. border-radius: 2px;
  162. outline-color: orange
  163. }
  164. form.login .login-btn {
  165. @include vars.special-button("medium-blue", "dark-blue");
  166. }
  167. .hero-filter .register-btn {
  168. @include vars.transparent-button;
  169. display: block;
  170. position: relative;
  171. width: 7em;
  172. top: 60%;
  173. margin-left: auto;
  174. margin-right: auto;
  175. }
  176. div.blue-background {
  177. background-image: url("/images/polka-dots.png");
  178. background-size: 350px;
  179. background-color: #0d324d;
  180. }
  181. section.about-us {
  182. padding: 70px 0;
  183. }
  184. section.about-us p {
  185. max-width: 600px;
  186. margin-left: auto;
  187. margin-right: auto;
  188. border-top: 2px solid vars.getColor("grey");
  189. border-bottom: 2px solid vars.getColor("grey");
  190. padding: 15px;
  191. background-color: #0d324d;
  192. color: white;
  193. }
  194. section.services-cards {
  195. // margin-bottom: 0;
  196. background-color: lightgrey;
  197. padding-bottom: 4em;
  198. background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e9e9e9 50%, vars.getColor("light-grey") 100%);
  199. }
  200. section.services-cards .cards{
  201. display: flex;
  202. flex-flow: wrap;
  203. margin-top: 2em;
  204. gap: 25px;
  205. justify-content: center;
  206. max-width: 1050px;
  207. margin-left: auto;
  208. margin-right: auto;
  209. text-align: center;
  210. }
  211. section.services-cards h2 {
  212. text-align: center;
  213. padding: 10px;
  214. margin-top: 0;
  215. padding-top: 30px;
  216. color: white;
  217. }
  218. section.services-cards .card {
  219. width: 280px;
  220. height: 350px;
  221. padding: 18px 9px;
  222. border-radius: 4px;
  223. background: white;
  224. box-shadow: 7px 10px 8px rgb(156 166 175 / 22%);
  225. transition: transform 0.2s;
  226. &:hover {
  227. transform: translateY(-20px);
  228. }
  229. }
  230. section.services-cards img {
  231. width: 50px;
  232. height: 50px;
  233. }
  234. section.services-cards button {
  235. @include vars.brand-button("orange");
  236. }
  237. section.features-info {
  238. // height: fit-content;
  239. height: 60em;
  240. background: radial-gradient(ellipse at left, #fff, vars.getColor("light-grey") 80%);
  241. }
  242. .circle-prop {
  243. height: 100%;
  244. overflow: hidden;
  245. width: 100%;
  246. position: relative;
  247. // transform: translateX(-10em);
  248. }
  249. .circle-prop svg {
  250. width: 50%;
  251. }
  252. .features-info img {
  253. width: 600px;
  254. position: absolute;
  255. top: 15%;
  256. right: 4%;
  257. }
  258. div.info-cards {
  259. position: absolute;
  260. top: 10em;
  261. margin-left: 20%;
  262. width: 70%;
  263. }
  264. .info-card {
  265. margin-bottom: 40px;
  266. &:nth-of-type(2) {
  267. margin-left: 13%;
  268. }
  269. &:nth-of-type(3) {
  270. margin-left: 10%;
  271. }
  272. &:nth-of-type(4) {
  273. margin-left: 5%;
  274. }
  275. p {
  276. max-width: 20em;
  277. background: white;
  278. padding: 5px;
  279. border-radius: 4px;
  280. text-align: center;
  281. color: vars.getColor("faded-text2");
  282. // border: 2px solid vars.getColor("medium-orange");
  283. @include vars.hovering;
  284. }
  285. }
  286. section.panel-infos {
  287. height: 40em;
  288. margin-top: 5em;
  289. margin-bottom: 5em;
  290. }
  291. section.panel-infos img.panel-preview {
  292. margin-top: 4em;
  293. height: 80%;
  294. position: absolute;
  295. right: 50%;
  296. }
  297. .panel-info {
  298. left: 50%;
  299. width: 50%;
  300. margin-left: auto;
  301. margin-top: 4em;
  302. }
  303. .panel-info img {
  304. width: 50px;
  305. height: 50px;
  306. }
  307. .panel-info p {
  308. color: vars.getColor("faded-text2");
  309. }
  310. section.benefits-info div {
  311. margin: 1em auto;
  312. padding: 1em 1em;
  313. border-top: 2px solid vars.getColor("faded-text2");
  314. border-bottom: 2px solid vars.getColor("faded-text2");
  315. max-width: 40em;
  316. color: vars.getColor("faded-text");
  317. }
  318. .benefits-info h2 {
  319. margin-bottom: 2em;
  320. }
  321. section.faq-info {
  322. margin-bottom: 6em;
  323. margin-top: 3em;
  324. min-height: 30em;
  325. }
  326. .faq-info h2 {
  327. margin-bottom: 2em;
  328. }
  329. section.faq-info .collapsibles {
  330. display: flex;
  331. flex-flow: wrap;
  332. gap: 2em;
  333. justify-content: space-around;
  334. max-width: 65em;
  335. width: fit-content;
  336. margin-left: auto;
  337. margin-right: auto;
  338. align-text: center;
  339. }
  340. .faq-info .collapsible {
  341. text-align: center;
  342. width: 25em;
  343. &:not(.active) .content {
  344. display: none;
  345. }
  346. }
  347. .collapsible button {
  348. width: 95%;
  349. display: block;
  350. margin-right: auto;
  351. height: 2.5em;
  352. border: 2px solid vars.getColor("brand-orange");
  353. @include vars.button("light-grey");
  354. font-size: 17px;
  355. // font-weight: bold;
  356. }
  357. .collapsible button:after {
  358. content: '\02795'; /* Unicode character for "plus" sign (+) */
  359. font-size: 13px;
  360. color: white;
  361. float: right;
  362. margin-left: 5px;
  363. }
  364. .collapsible .content {
  365. // background-color: vars.getColor("faded-text2");
  366. border: 2px solid black;
  367. border-radius: 4px;
  368. padding: 4px;
  369. // transition: all 0.2s;
  370. // height: 1px;
  371. }
  372. footer {
  373. height: 6em;
  374. background-color: vars.getColor("dark-grey");
  375. padding: 20px;
  376. color: vars.getColor("faded-text2");
  377. }
  378. footer .foot-links {
  379. width: 20em;
  380. margin: 2em auto;
  381. text-align: center;
  382. }
  383. footer a {
  384. margin: 0 8px;
  385. color: vars.getColor("faded-text2");
  386. &:hover {
  387. color: vars.getColor("faded-text");
  388. }
  389. }
  390. .hidden {
  391. display: none;
  392. }
  393. .loading-icon {
  394. width: 50px;
  395. height: 50px;
  396. }
  397. div.register-area {
  398. overflow: hidden;
  399. height: 0px;
  400. width: 100%;
  401. z-index: 1;
  402. @include vars.hovering3;
  403. margin-bottom: 2em;
  404. position: fixed;
  405. border-radius: 0;
  406. padding: 0;
  407. opacity: 0;
  408. transition: all 0.2s;
  409. background: white;
  410. h3 {
  411. text-align: center;
  412. }
  413. label,input {
  414. color: black;
  415. display: block;
  416. border-color: black;
  417. }
  418. div {
  419. margin-top: 20px;
  420. margin-bottom: 20px;
  421. }
  422. form {
  423. width: fit-content;
  424. margin: 20px auto;
  425. }
  426. .submit-btn {
  427. width: 100%;
  428. background-color: #3bb78f;
  429. @include vars.special-button("light-green", "dark-green");
  430. }
  431. .cancel-button {
  432. width: 20px;
  433. height: 20px;
  434. background: url("../images/close-icon-black.svg");
  435. background-size: cover;
  436. position: absolute;
  437. top: 20px;
  438. right: 20px;
  439. }
  440. }
  441. section.features-info {
  442. min-height: 70em;
  443. }
  444. div.register-area.active {
  445. height: 400px;
  446. opacity: 1;
  447. }
  448. // Make small screens more usable
  449. @media (max-width: 720px) {
  450. nav { display: block; }
  451. nav form {
  452. // display: none;
  453. width: 190px;
  454. margin-left: auto;
  455. margin-right: auto;
  456. align-items: center;
  457. margin-top: 5em;
  458. opacity: 0;
  459. transition: transform 0.3s;
  460. transform: translateY(-50px);
  461. }
  462. nav form.active {
  463. display: block;
  464. transform: translateX(0%);
  465. opacity: 1;
  466. // background: white;
  467. // color: black;
  468. }
  469. nav form div {
  470. margin: 10px auto;
  471. }
  472. nav div label,input {
  473. display: block;
  474. }
  475. nav .nav-toggle {
  476. display: block;
  477. }
  478. div.register-area.active {
  479. display: initial;
  480. }
  481. div.register-area h1 {
  482. font-size: 1.5rem;
  483. display: inline-block;
  484. color: vars.getColor("brand-orange");
  485. }
  486. div.register-area h3 {
  487. text-align: center;
  488. }
  489. div.register-area .login {
  490. color: vars.getColor("brand-orange");
  491. display: block;
  492. margin-left: auto;
  493. margin-right: auto;
  494. // margin-top: 1em;
  495. width: 10em;
  496. // top: 40px;
  497. // position: absolute;
  498. }
  499. div.register-area .login input {
  500. border: 2px solid black;
  501. border-color: black;
  502. color: black;
  503. }
  504. div.register-area button {
  505. margin-top: 1em;
  506. width: 6em;
  507. }
  508. div.register-area div {
  509. margin-top: 10px;
  510. margin-bottom: 5px;
  511. }
  512. .landing-hero div.hero-filter h2 {
  513. top: 4em;
  514. }
  515. .landing-hero div.hero-filter p {
  516. top: 15em;
  517. }
  518. .landing-hero div.hero-filter .register-btn {
  519. top: 75%;
  520. }
  521. }