Advertisement
thotfrnk

presspage.css

Oct 27th, 2024
142
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.08 KB | None | 0 0
  1. body {
  2.   font-family: "Helvetica, Arial, sans-serif";
  3.   margin: 0;
  4.   padding: 0;
  5.   background-color: #131212;
  6.   color: #ebe8e8;
  7. }
  8.  
  9. h1, h2, h3 {
  10.   margin-bottom: 1rem;
  11. }
  12.  
  13. a {
  14.   color: #d6e3f8;
  15.   text-decoration: none;
  16. }
  17.  
  18. .container {
  19.   max-width: 1200px;
  20.   margin: 0 auto;
  21.   padding: 0 1rem;
  22. }
  23.  
  24. .grid--2x2, .press-page__grid {
  25.   display: grid;
  26.   grid-template-columns: repeat(2, 1fr);
  27.   grid-gap: 1rem;
  28. }
  29. @media (max-width: 768px) {
  30.   .grid--2x2, .press-page__grid {
  31.     grid-template-columns: 1fr;
  32.   }
  33. }
  34.  
  35. .button {
  36.   padding: 1rem 2rem;
  37.   background-color: #d6e3f8;
  38.   color: #000;
  39.   border: none;
  40.   border-radius: 10px;
  41.   cursor: pointer;
  42.   transition: background-color 0.3s, transform 0.3s;
  43. }
  44. .button:hover {
  45.   background-color: rgb(170.4375, 197.25, 240.5625);
  46.   transform: scale(1.05);
  47. }
  48.  
  49. .press-page {
  50.   padding: 1rem 2rem;
  51. }
  52. .press-page__header {
  53.   position: relative;
  54.   height: 100vh;
  55.   background-color: #d6e3f8;
  56.   clip-path: polygon(0 14%, 99% 0, 100% 78%, 0 100%);
  57.   margin-bottom: 3rem;
  58.   display: flex;
  59.   justify-content: center;
  60.   align-items: center;
  61.   text-align: center;
  62.   color: #000;
  63.   background-image: url("../img/headerimg.jpg");
  64.   background-size: cover;
  65.   background-position: center;
  66. }
  67. .press-page__header__overlay {
  68.   position: absolute;
  69.   top: 0;
  70.   left: 0;
  71.   right: 0;
  72.   bottom: 0;
  73.   background-color: rgba(0, 0, 0, 0.5);
  74. }
  75. .press-page__grid {
  76.   margin: 0 auto;
  77.   width: 100%;
  78.   max-width: 1200px;
  79. }
  80. .press-page__article {
  81.   background-color: #313131;
  82.   padding: 1rem;
  83.   border-radius: 10px;
  84.   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  85.   transition: transform 0.3s;
  86.   display: flex;
  87.   flex-direction: column;
  88. }
  89. .press-page__article:hover {
  90.   transform: translateY(-10px);
  91. }
  92. .press-page__article-image {
  93.   width: 100%;
  94.   height: 200px;
  95.   border-radius: 10px 10px 0 0;
  96.   object-fit: cover;
  97. }
  98. .press-page__article-content {
  99.   padding: 1rem;
  100. }
  101. .press-page__article-title {
  102.   font-size: 1.5rem;
  103.   margin-bottom: 1rem;
  104.   font-weight: bold;
  105. }
  106. .press-page__article-excerpt {
  107.   font-size: 1rem;
  108.   color: white;
  109.   margin-bottom: 1rem;
  110. }
  111. .press-page__article-link {
  112.   font-size: 1rem;
  113.   font-weight: bold;
  114.   color: #d6e3f8;
  115.   text-transform: uppercase;
  116. }
  117. .press-page__contact {
  118.   padding: 4rem 2rem;
  119.   text-align: center;
  120. }
  121. .press-page__contact-title {
  122.   font-size: 2rem;
  123.   margin-bottom: 2rem;
  124.   font-weight: bold;
  125. }
  126. .press-page__contact-logo {
  127.   display: flex;
  128.   justify-content: center;
  129.   margin-bottom: 2rem;
  130. }
  131. .press-page__contact-logo-image {
  132.   width: 350px;
  133.   height: auto;
  134.   border-radius: 10px;
  135. }
  136. .press-page__contact-info-title {
  137.   font-size: 1.5rem;
  138.   font-weight: bold;
  139.   margin-bottom: 1rem;
  140. }
  141. .press-page__contact-info p {
  142.   font-size: 1rem;
  143.   margin-bottom: 1rem;
  144. }
  145. .press-page__contact-info p a {
  146.   color: #d6e3f8;
  147.   text-decoration: none;
  148.   font-weight: bold;
  149. }
  150. .press-page__contact-info p a:hover {
  151.   text-decoration: underline;
  152. }
  153. .press-page__about {
  154.   padding: 4rem 2rem;
  155.   background-color: #ebe8e8;
  156.   text-align: center;
  157.   color: #000;
  158. }
  159. .press-page__about-title {
  160.   font-size: 2.5rem;
  161.   font-weight: bold;
  162.   margin-bottom: 2rem;
  163. }
  164. .press-page__about-text {
  165.   font-size: 1.2rem;
  166.   max-width: 800px;
  167.   margin: 0 auto;
  168.   margin-bottom: 4rem;
  169. }
  170. .press-page__about-stats {
  171.   display: grid;
  172.   grid-template-columns: repeat(2, 1fr);
  173.   gap: 4rem;
  174.   justify-content: center;
  175. }
  176. .press-page__about-stats-stat {
  177.   text-align: center;
  178. }
  179. .press-page__about-stats-stat-icon {
  180.   width: 3.125rem;
  181.   height: auto;
  182.   margin-bottom: 2rem;
  183. }
  184. .press-page__about-stats-stat-title {
  185.   font-size: 1.8rem;
  186.   font-weight: bold;
  187.   margin-bottom: 1rem;
  188. }
  189. .press-page__about-stats-stat p {
  190.   font-size: 1rem;
  191. }
  192.  
  193. .heading-main {
  194.   position: relative;
  195.   z-index: 1;
  196. }
  197. .heading-main__title {
  198.   font-size: 2.5rem;
  199.   animation: slideIn 0.8s ease-in-out;
  200.   text-align: center;
  201. }
  202.  
  203. @keyframes slideIn {
  204.   from {
  205.     opacity: 0;
  206.     transform: translateY(-20px);
  207.   }
  208.   to {
  209.     opacity: 1;
  210.     transform: translateY(0);
  211.   }
  212. }
  213.  
  214. /*# sourceMappingURL=style.css.map */
  215.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement