API tools faq
paste
Bozman2024

style.css

Bozman2024
Jun 29th, 2025
14
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 13.80 KB | None | 0 0
raw download clone embed print report
  1. /* Globales dunkles, aber farbenfrohes Theme */
  2. body {
  3.   background-color: #121212;  /* sehr dunkel */
  4.  color: #e0e0e0;             /* helle Schrift */
  5. }
  6. main{
  7.   padding-top: 80px;
  8. }
  9.  
  10. /* Custom Button, inspiriert von der Portfolio-Seite */
  11. .btn-custom {
  12.   color: #0dcaf0;             /* Akzentfarbe Blau (Bootstrap Info-Farbe) */
  13.  border: 2px solid #0dcaf0;
  14.  background-color: transparent;
  15.   transition: background-color 0.3s, color 0.3s;
  16. }
  17.  
  18. .btn-custom:hover {
  19.   background-color: #0dcaf0;
  20.  color: #fff;
  21. }
  22.  
  23. /* Weitere Dekorationen */
  24. a {
  25.   transition: color 0.3s;
  26. }
  27.  
  28. a:hover {
  29.   color: #0dcaf0;
  30. }
  31.  
  32. /* Alternative Akzentfarben */
  33. .accent-blue {
  34.   color: #0dcaf0;
  35. }
  36.  
  37. .accent-pink {
  38.   color: #ff1177;
  39. }
  40.  
  41. .accent-green {
  42.   color: #28a745;
  43. }
  44.  
  45. .limegreen {
  46.   color: #c4ff00;
  47. }
  48.  
  49. .red{
  50.   color: #ff0000;
  51. }
  52.  
  53. .blue{
  54.   color: #0000ff;
  55. }
  56.  
  57. .nav-link {
  58.   cursor: pointer;
  59.   padding: 0;
  60. }
  61.  
  62. .nav-link:hover,
  63. .nav-link:active {
  64.   color: limegreen !important;
  65. }
  66.  
  67. .icon-link:active i, .icon-link:hover i {
  68.   color: limegreen;
  69. }
  70.  
  71. .navbar-brand {
  72.   font-size: 1.2rem; /* Kleinere Schriftgröße für das Logo */
  73. }
  74.  
  75. .navbar-nav .nav-link {
  76.   font-size: 1rem; /* Kleinere Menü-Links */
  77.   padding: 5px 10px;
  78. }
  79.  
  80.  
  81. .team-img {
  82.   width: 120px;
  83.   height: 120px;
  84.   object-fit: cover;
  85.   border-radius: 50%;
  86.   display: block;
  87.   margin: 10px auto;
  88.   box-shadow: 0 0 8px rgba(0,0,0,0.1);
  89. }
  90.  
  91. /* Kontakt */
  92.  
  93. form {
  94.   background: darkslategray
  95.   padding: 30px;
  96.   border-radius: 12px;
  97.   box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  98. }
  99.  
  100. .form-label {
  101.   font-weight: 600;
  102.   color: #cce4f6;
  103. }
  104.  
  105. .form-control,
  106. .form-select {
  107.   background-color: rgba(255, 255, 255, 0.05);
  108.   border: 1px solid rgba(255, 255, 255, 0.2);
  109.   color: #fff;
  110.  border-radius: 8px;
  111.   padding: 12px;
  112.   transition: all 0.3s ease-in-out;
  113. }
  114.  
  115. .form-select option {
  116.   background-color: #1e1e1e;
  117.  color: #ffffff;
  118. }
  119.  
  120.  
  121. .form-control:focus,
  122. .form-select:focus {
  123.   background-color: rgba(255, 255, 255, 0.1);
  124.   border-color: #1abc9c;
  125.  box-shadow: 0 0 5px rgba(26, 188, 156, 0.5);
  126. }
  127.  
  128. textarea.form-control {
  129.   color: #ffffff !important;
  130.  background-color: rgba(255, 255, 255, 0.05);
  131.   border: 1px solid rgba(255, 255, 255, 0.2);
  132. }
  133.  
  134. input.form-control,
  135. textarea.form-control {
  136.   color: #ffffff !important;
  137.  background-color: rgba(255, 255, 255, 0.05);
  138.   border: 1px solid rgba(255, 255, 255, 0.2);
  139. }
  140.  
  141.  
  142. .btn-primary {
  143.   background-color: #0d7377;
  144.  border: none;
  145.   padding: 12px;
  146.   font-weight: bold;
  147.   color: #fff;
  148.  border-radius: 8px;
  149.   transition: all 0.3s ease-in-out;
  150.   box-shadow: 0 4px 12px rgba(13, 115, 119, 0.3);
  151. }
  152.  
  153. .btn-primary:hover {
  154.   background-color: #14ffec;
  155.  color: #000;
  156.  box-shadow: 0 6px 16px rgba(20, 255, 236, 0.45);
  157.   transform: scale(1.05);
  158. }
  159.  
  160. /* Wrapper um das Formular – hier wird der Hintergrund definiert */
  161. .form-wrapper {
  162.   background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
  163.  padding: 40px;
  164.   border-radius: 16px;
  165.   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  166.   color: #fff;
  167.  margin-bottom: 80px;
  168. }
  169.  
  170.  
  171.  
  172.  
  173. /* Hintergrundbilder */
  174.  
  175. .about {
  176.   background: url('../images/about.jpg') no-repeat center center fixed;
  177.   background-size: cover;
  178. }
  179.  
  180. .portfolio {
  181.   background: url('../images/portfolio.jpg') no-repeat center center fixed;
  182.   background-size: cover;
  183. }
  184.  
  185. .index {
  186.   background: url('../images/bgindex.png') no-repeat center center fixed;
  187.   background-size: cover;
  188. }
  189.  
  190. .contact {
  191.   background: url('../images/contact.jpg') no-repeat center center fixed;
  192.   background-size: cover;
  193. }
  194. .team_detail-member1{
  195.   background: url('../images/bgindex.png') no-repeat center center fixed;
  196.   background-size: cover;
  197. }
  198.  
  199. .team_detail-member2{
  200.   background: url('../images/sozialmedia.png') no-repeat center center fixed;
  201.   background-size: cover;
  202. }
  203.  
  204. .project_alpha_gallery {
  205.   background: url('../images/paracord_bg.jpg') no-repeat center center fixed;
  206.   background-size: cover;
  207. }
  208.  
  209. .project_beta_gallery{
  210.   background: url('../images/gaming_bg.jpg') no-repeat center center fixed;
  211.   background-size: cover;
  212. }
  213.  
  214. .project_gamma_gallery{
  215.   background: url('../images/holiday_bg.jpg') no-repeat center center fixed;
  216.   background-size: cover;
  217. }
  218.  
  219. .info{
  220.   background: url('../images/info/information.jpg') no-repeat center center fixed;
  221.   background-size: cover;
  222. }
  223.  
  224. .impressum{
  225.   background: url('../images/impressum.png') no-repeat center center fixed;
  226.   background-size: cover;
  227. }
  228.  
  229. .privacy{
  230.   background: url('../images/datenschutz.png') no-repeat center center fixed;
  231.   background-size: cover;
  232. }
  233.  
  234. .heviz2025 {
  235.   background: url('../images/heviz_bg.jpg') no-repeat center center fixed;
  236.   background-size: cover;
  237. }
  238.  
  239. .holiday_hu {
  240.   background: url('../images/holiday_hu_bg.jpg') no-repeat center center fixed;
  241.   background-size: cover;
  242. }
  243. /* Fixierter Header oben */
  244. .fixed-header {
  245.   position: fixed;
  246.   height: 60px; /* Gleiche Höhe wie dein Footer */
  247.   top: 0;
  248.   left: 0;
  249.   width: 100%;
  250.   background: #000; /* Beispiel-Farbe */
  251.  color: white;
  252.   padding: 15px;
  253.   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  254.   z-index: 1000;
  255.     padding: 0;
  256.  
  257. }
  258.  
  259. /* Hauptinhalt mit Platz für den Header */
  260. .content {
  261.   flex: 1;
  262.   padding-top: 60px; /* Platz für Header einberechnen */
  263.   padding-bottom: 50px;
  264.  
  265. }
  266.  
  267. /* Fixierter Footer unten */
  268. .fixed-footer {
  269.   position: fixed;
  270.   bottom: 0;
  271.   left: 0;
  272.   width: 100%;
  273.   background: #000; /* Beispiel-Farbe */
  274.  color: white;
  275.   padding: 15px;
  276.   text-align: center;
  277.   box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  278.   z-index: 1000;
  279. }
  280.  
  281. .card{
  282.   background: rgba(0, 0, 0, 0.7); /* Leichter dunkler Hintergrund mit Transparenz */
  283.   border: 2px solid rgba(255, 255, 255, 0.3); /* Weißer, leicht transparenter Rahmen */
  284.   border-radius: 10px; /* Abgerundete Ecken für einen sanften Look */
  285.   padding: 20px;
  286.   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sanfte Schatten für mehr Tiefe */
  287.  
  288. }
  289.  
  290. .custom-card{
  291.   background: rgba(0,0,0,0.7);
  292.   border: 2px solid rgba(255,255,255,0.3);
  293.   border-radius: 10px;
  294.   padding: 20px;
  295.   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  296.   transition: 0.3s ease;
  297. }
  298.  
  299. .rounded-circle {
  300.   width: 200px; /* Größe anpassen */
  301.   height: 200px;
  302.   object-fit: cover; /* Verhindert Verzerrungen und schneidet das Bild korrekt zu */
  303.   border-radius: 50%; /* Macht das Bild wirklich rund */
  304.   border: 4px solid rgba(255, 255, 255, 0.3); /* Optional: Leichter, transparenter Rahmen */
  305.   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Optional: Schatten für einen edlen Effekt */
  306. }
  307.  
  308. .team-profile-card {
  309.   max-width: 500px;
  310.   background: rgba(0, 0, 0, 0.4);
  311.   border: 1px solid rgba(255, 255, 255, 0.2);
  312.   border-radius: 20px;
  313.   backdrop-filter: blur(8px);
  314.   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  315.   transition: 0.3s ease;
  316. }
  317.  
  318. .team-profile-card:hover{
  319.   transform: scale(1.03);
  320. }
  321.  
  322. .team-profile-img {
  323.   width: 180px;
  324.   height: 180px;
  325.   object-fit: cover;
  326.   border-radius: 50%;
  327.   border: 4px solid rgba(255, 255, 255, 0.3);
  328.   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  329. }
  330.  
  331. .about-card {
  332.   background: rgba(0, 0, 0, 0.4);
  333.   border: 2px solid rgba(255, 255, 255, 0.2);
  334.   border-radius: 20px;
  335.   backdrop-filter: blur(8px);
  336.   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  337.   transition: transform 0.3s ease, box-shadow 0.3s ease;
  338. }
  339.  
  340.  
  341.  
  342. .about-card:hover {
  343.   transform: scale(1.03);
  344.   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  345. }
  346.  
  347.  
  348. body.team_detail-member1 main {
  349.   margin-top: 0px;
  350. }
  351.  
  352. .info-card {
  353.   background: rgba(255, 255, 255, 0.06);
  354.   border: 2px solid rgba(255, 255, 255, 0.2);
  355.   border-radius: 16px;
  356.   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  357.   transition: transform 0.3s ease;
  358. }
  359.  
  360. .info-card:hover {
  361.   transform: scale(1.03);
  362. }
  363.  
  364. .img-fluid {
  365.   border: 2px solid #ddd !important;
  366.  box-shadow: none !important;
  367. }
  368.  
  369. .img-fluid:hover {
  370.   border-color: #f39c12; /* Schöner Orange-Ton beim Hover */
  371.  transform: scale(1.03);
  372.   transition: 0.3s ease;
  373. }
  374.  
  375. body.info .card:last-of-type {
  376.   margin-bottom: 120px !important;
  377. }
  378.  
  379. .info-card ul li {
  380.   margin-bottom: 10px;
  381.   font-size: 1rem;
  382. }
  383.  
  384. .info-card strong {
  385.   color: #ffc107;
  386. }
  387.  
  388. .card-title-para{
  389.   color:#ffc107;
  390.  text-align: center;
  391. }
  392.  
  393. .custom-card {
  394.   border: 2px solid rgba(255, 255, 255, 0.2); /* Eleganter Rahmen */
  395.   border-radius: 12px;
  396.   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  397.   transition: transform 0.3s ease, box-shadow 0.3s ease;
  398.   height: 400px; /* Fixierte Kartenhöhe */
  399. }
  400.  
  401. .custom-card:hover {
  402.   transform: scale(1.05);
  403.   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  404. }
  405.  
  406.  
  407. .card:last-of-type {
  408.   margin-bottom: 80px !important; /* Sicherer Abstand zum Footer */
  409.   margin-top: 20px !important; /* Sicherer Abstand zum oberen Inhalt */
  410. }
  411.  
  412.  
  413.  
  414.  
  415. .card-img-top {
  416.   height: 200px; /* Verhindert zu hohe Bilder */
  417.   object-fit: cover;
  418.   border-radius: 10px;
  419. }
  420.  
  421. .card-title {
  422.   font-size: 1.1rem;
  423.   font-weight: 500;
  424.   background: rgba(0, 0, 0, 0.25);
  425.   padding: 6px 12px;
  426.   border-radius: 8px;
  427.   display: inline-block;
  428.   color:#ffc107;
  429. }
  430.  
  431. .back-btn-wrapper {
  432.   margin-top : 40px;
  433.   margin-bottom: 120px;
  434. }
  435.  
  436. .paracord-card {
  437.   border: 3px solid rgba(255, 255, 255, 0.2);
  438.   border-radius: 12px;
  439.   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  440.   transition: transform 0.3s ease, box-shadow 0.3s ease;
  441.   height: 300px; /* Fixierte Kartenhöhe */
  442.   background: rgba(255, 255, 255, 0.07);
  443. }
  444.  
  445. .paracord-text{
  446.   color: #ffc107; /* Helle Akzentfarbe für den Text */
  447.  font-weight: bold;
  448.   text-align: center;
  449.   margin-top: 10px;
  450.   font-size: 1.2rem; /* Größere Schriftgröße für bessere Lesbarkeit */
  451.    background: rgba(255, 255, 255, 0.07);
  452.   border: 3px solid rgba(255, 255, 255, 0.2);
  453.   border-radius: 12px;
  454. }
  455.  
  456. .paracord-card:hover {
  457.   transform: scale(1.05);
  458.   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  459. }
  460.  
  461. .paracord-img {
  462.   height: 200px;
  463.   object-fit: cover;
  464.   border-radius: 10px;
  465. }
  466.  
  467. .paracord-body {
  468.   text-align: center;
  469.   min-height: 50px;
  470. }
  471.  
  472. .back-btn-wrapper {
  473.   margin-top: 40px;
  474.   margin-bottom: 80px; /* Sicherer Abstand zum Footer */
  475. }
  476.  
  477. .paracord-gallery .col {
  478.   margin-bottom: -70px !important; /* Verringert den Abstand zwischen Reihen */
  479. }
  480.  
  481. .custom-card-style {
  482.   display: flex;
  483.   flex-direction: column;
  484.   justify-content: space-between;
  485.   align-items: center;
  486.   height: 400px !important; /* Erzwingt gleiche Höhe */
  487.   border: 3px solid rgba(255, 255, 255, 0.2);
  488.   border-radius: 12px;
  489.   background: #222; /* Neutraler, stilvoller Hintergrund */
  490.  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  491.   transition: 0.3s ease;
  492. }
  493.  
  494. .gaming-gallery .col {
  495.   margin-bottom: -70px !important;
  496.   padding-bottom: 5px;
  497. }
  498.  
  499. .gaming-gallery {
  500.   row-gap: 0px !important;
  501. }
  502.  
  503. .custom-card-style:hover{
  504.   transform: scale(1.05);
  505.   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  506. }
  507.  
  508. .card-img-top-gal {
  509.   height: 160px;
  510.   object-fit: cover;
  511.   width: 100%;
  512.   border-radius: 10px;
  513. }
  514.  
  515. .game-text{
  516.   color: #ffc107; /* Helle Akzentfarbe für den Text */
  517.  font-weight: bold;
  518.   text-align: center;
  519.   margin-top: 10px;
  520.   font-size: 1.2rem; /* Größere Schriftgröße für bessere Lesbarkeit */
  521.   border: 3px solid rgba(255, 255, 255, 0.2);
  522.   border-radius: 12px;
  523.   background: #222; /* Neutraler, stilvoller Hintergrund */
  524. }
  525.  
  526. .impressum-container {
  527.   display: flex;
  528.   justify-content: space-between;
  529.   flex-wrap: wrap;
  530.   gap: 20px;
  531.   padding: 20px;
  532.   background: rgba(255, 255, 255, 0.05);
  533.   border-radius: 12px;
  534.   border: 3px solid rgba(255, 255, 255, 0.2);
  535.   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  536.   opacity: 0;
  537.   transform: translateY(20px);
  538.   animation: fadeIn 1s ease-out forwards;
  539. }
  540.  
  541. @keyframes fadeIn {
  542.   from {
  543.     opacity: 0;
  544.     transform: translateY(20px);
  545.   }
  546.   to {
  547.     opacity: 1;
  548.     transform: translateY(0);
  549.   }
  550. }
  551.  
  552.  
  553. .company-info, .legal-info {
  554.   flex: 1;
  555.   min-width: 280px;
  556. }
  557.  
  558. .company-info h3, .legal-info h4 {
  559.   color: #f8f9fa;
  560.  font-weight: 600;
  561. }
  562.  
  563. p,li {
  564.   color: #dcdcdc;
  565.  font-size: 16px;
  566. }
  567.  
  568. .datenschutz-container {
  569.   display: flex;
  570.   justify-content: space-between;
  571.   flex-wrap: wrap;
  572.   gap: 20px;
  573.   padding: 20px;
  574.   background: rgba(255, 255, 255, 0.05);
  575.    border: 3px solid rgba(255, 255, 255, 0.2);
  576.   border-radius: 12px;
  577.   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  578.   opacity: 0;
  579.   transform: translateY(20px);
  580.   animation: fadeIn 1s ease-out forwards;
  581.  
  582. }
  583.  
  584. @keyframes fadeIn {
  585.   from {
  586.     opacity: 0;
  587.     transform: translateY(20px);
  588.   }
  589.   to {
  590.     opacity: 1;
  591.     transform: translateY(0);
  592.   }
  593. }
  594.  
  595. .privacy-info, .cookie-info {
  596.   flex: 1;
  597.   min-width: 280px;
  598. }
  599.  
  600. .privacy-info h3, .cookie-info h4 {
  601.   color: #f8f9fa;
  602.  font-weight: 600;
  603. }
  604.  
  605. .text-center.mt-4 {
  606.   margin-bottom: 80px; /* Sicherer Abstand nach dem Button */
  607. }
  608. .heviz-wrapper {
  609.   display: flex;
  610.   flex-wrap: wrap;
  611.   justify-content: center;
  612.   gap: 2rem;
  613.   padding: 30px;
  614.   margin: 60px 0;
  615.   border: 2px solid rgba(255, 255, 255, 0.3);
  616.   border-radius: 12px;
  617.   background-color: rgba(255, 255, 255, 0.05);
  618.   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  619. }
  620.  
  621. .heviz-card {
  622.   width: 500px;
  623.   flex-grow: 1;
  624.   display: flex;
  625.   flex-direction: column;
  626. }
  627.  
  628. /* Slideshow */
  629. .carousel-inner {
  630.   aspect-ratio: 16 / 9;
  631.   width: 100%;
  632.   overflow: hidden;
  633.   border-radius: 8px;
  634. }
  635.  
  636. .carousel-inner img {
  637.   width: 100%;
  638.   height: 100%;
  639.   object-fit: cover;
  640. }
  641.  
  642. /* Beschreibungskarte */
  643. .card-heviz {
  644.   background: rgba(0, 0, 0, 0.5);
  645.   border: 2px solid rgba(255, 255, 255, 0.3);
  646.   border-radius: 10px;
  647.   padding: 20px;
  648.   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  649.   transition: transform 0.3s ease, box-shadow 0.3s ease;
  650. }
  651.  
  652. .card-heviz:hover {
  653.   transform: scale(1.03);
  654.   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  655. }
  656.  
  657. .footer-link {
  658.   color: #fff;
  659.  transition: color 0.3s ease;
  660. }
  661.  
  662. .footer-link:hover {
  663.   color: #f0c040;
  664.  text-decoration: underline;
  665. }
  666.  
  667.  
  668.  
  669.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!