Scribd
Upload
2 views

bluetooth_content_share (7)

The document contains CSS styles for a web page, including general styles for the body, header, main container, countdown timer, event images, details, footer, and buttons. It also includes responsive design rules for mobile devices, ensuring the layout adjusts appropriately based on screen size. The styles emphasize a modern aesthetic with a dark background, bright text colors, and various animations.

Uploaded by

starryxander
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

bluetooth_content_share (7)

The document contains CSS styles for a web page, including general styles for the body, header, main container, countdown timer, event images, details, footer, and buttons. It also includes responsive design rules for mobile devices, ensuring the layout adjusts appropriately based on screen size. The styles emphasize a modern aesthetic with a dark background, bright text colors, and various animations.

Uploaded by

starryxander
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<html><head><meta http-equiv="Content-Type" content="text/html;

charset=UTF-8"/></head><body>/* General Styles */<br>body {<br>&nbsp;&nbsp;&nbsp;


font-family: sans-serif;<br>&nbsp;&nbsp;&nbsp; margin: 0;<br>&nbsp;&nbsp;&nbsp;
background-color: rgb(50, 49, 49);<br>&nbsp;&nbsp;&nbsp; background-blend-mode:
overlay;<br>&nbsp;&nbsp;&nbsp; background-image: url(../Assets/Image/images\ -\ <a
href="http://2024-12-20T120253.873.jpeg">2024-12-20T120253.873.jpeg</
a>);<br>&nbsp;&nbsp;&nbsp; background-size: cover;<br>&nbsp;&nbsp;&nbsp;
background-repeat: no-repeat;<br>}<br><br>/* Header Styles */<br>.logo-container
header {<br>&nbsp;&nbsp;&nbsp; padding: 5px;<br>&nbsp;&nbsp;&nbsp; display:
flex;<br>&nbsp;&nbsp;&nbsp; border-bottom: 1px solid rgb(<a href="tel:234">234</a>,
<a href="tel:225">225</a>, <a href="tel:225">225</a>);<br>&nbsp;&nbsp;&nbsp; width:
auto;<br>&nbsp;&nbsp;&nbsp; justify-content: space-between;<br>&nbsp;&nbsp;&nbsp;
align-items: center;<br>&nbsp;&nbsp;&nbsp; background-color: rgb(50, 49,
49);<br>&nbsp;&nbsp;&nbsp; color: #00c8ff;<br>}<br><br>/* Main Container Styles
*/<br>.container {<br>&nbsp;&nbsp;&nbsp; width: 90%;<br>&nbsp;&nbsp;&nbsp; max-
width: <a href="tel:800">800</a>px;<br>&nbsp;&nbsp;&nbsp; margin: 20px
auto;<br>&nbsp;&nbsp;&nbsp; color: rgb(99, 98, 98);<br>&nbsp;&nbsp;&nbsp; backdrop-
filter: blur(7px);<br>&nbsp;&nbsp;&nbsp; padding: 30px;<br>&nbsp;&nbsp;&nbsp;
border-radius: 15px;<br>&nbsp;&nbsp;&nbsp; box-shadow: <a href="tel:0 0 15">0 0
15</a>px rgba(<a href="tel:255">255</a>, <a href="tel:255">255</a>, <a
href="tel:255">255</a>, <a href="tel:0.584">0.584</a>);<br>&nbsp;&nbsp;&nbsp; text-
align: center;<br>&nbsp;&nbsp;&nbsp; overflow: hidden;<br>}<br><br>header h1
{<br>&nbsp;&nbsp;&nbsp; animation: fadeIn 2s ease-in-out;<br>&nbsp;&nbsp;&nbsp;
font-weight: bold;<br>&nbsp;&nbsp;&nbsp; font-size: xxx-
large;<br>&nbsp;&nbsp;&nbsp; color: #<a
href="tel:282">282</a>c34;<br>}<br><br>@keyframes fadeIn {<br>&nbsp;&nbsp;&nbsp;
from {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; opacity:
0;<br>&nbsp;&nbsp;&nbsp; }<br><br>&nbsp;&nbsp;&nbsp; to
{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; opacity:
1;<br>&nbsp;&nbsp;&nbsp; }<br>}<br><br>/* Countdown Timer Styles */<br>#countdown-
timer {<br>&nbsp;&nbsp;&nbsp; display: flex;<br>&nbsp;&nbsp;&nbsp; justify-content:
center;<br>&nbsp;&nbsp;&nbsp; flex-wrap: wrap;<br>&nbsp;&nbsp;&nbsp; margin-bottom:
20px;<br>}<br><br>#<a href="http://countdown-timer.hidden">countdown-
timer.hidden</a> {<br>&nbsp;&nbsp;&nbsp; display: none;<br>}<br><br>.timer-segment
{<br>&nbsp;&nbsp;&nbsp; text-align: center;<br>&nbsp;&nbsp;&nbsp; margin: <a
href="tel:0 10">0 10</a>px;<br>&nbsp;&nbsp;&nbsp; border-right: 3px solid #<a
href="tel:242323">242323</a>;<br>&nbsp;&nbsp;&nbsp; padding-right:
10px;<br>}<br><br>.timer-segment:last-child {<br>&nbsp;&nbsp;&nbsp; border-right:
none;<br>&nbsp;&nbsp;&nbsp; padding-right: 0;<br>}<br><br>.timer-segment
span:first-child {<br>&nbsp;&nbsp;&nbsp; display: block;<br>&nbsp;&nbsp;&nbsp;
font-size: 2em;<br>&nbsp;&nbsp;&nbsp; color: #00c8ff;<br>&nbsp;&nbsp;&nbsp; font-
family: monospace;<br>}<br><br>/* Event Image Styles */<br>#eventImage
{<br>&nbsp;&nbsp;&nbsp; max-width: <a href="tel:100">100</a>
%;<br>&nbsp;&nbsp;&nbsp; height: auto;<br>&nbsp;&nbsp;&nbsp; margin-bottom:
20px;<br>&nbsp;&nbsp;&nbsp; transition: transform <a href="tel:0.3">0.3</a>s ease-
in-out;<br>}<br><br>#eventImage:hover {<br>&nbsp;&nbsp;&nbsp; transform: scale(<a
href="tel:1.05">1.05</a>);<br>}<br><br>/* Details Styles */<br>.details
{<br>&nbsp;&nbsp;&nbsp; line-height: <a
href="tel:1.6">1.6</a>;<br>&nbsp;&nbsp;&nbsp; color: rgba(<a
href="tel:203">203</a>, <a href="tel:227">227</a>, <a href="tel:189">189</a>, <a
href="tel:0.948">0.948</a>);<br>&nbsp;&nbsp;&nbsp; margin-top:
20px;<br>}<br><br>.details p {<br>&nbsp;&nbsp;&nbsp; margin-bottom:
10px;<br>}<br><br>/* Footer Styles */<br>footer {<br>&nbsp;&nbsp;&nbsp; text-align:
center;<br>&nbsp;&nbsp;&nbsp; margin-top: 20px;<br>&nbsp;&nbsp;&nbsp; padding-top:
10px;<br>&nbsp;&nbsp;&nbsp; border-top: 1px solid #ddd;<br>}<br><br>/* Button
Styles */<br>a#rsvpLink {<br>&nbsp;&nbsp;&nbsp; background-color:
#a0aec0;<br>&nbsp;&nbsp;&nbsp; border: none;<br>&nbsp;&nbsp;&nbsp; color:
white;<br>&nbsp;&nbsp;&nbsp; padding: 10px 20px;<br>&nbsp;&nbsp;&nbsp; text-align:
center;<br>&nbsp;&nbsp;&nbsp; text-decoration: none;<br>&nbsp;&nbsp;&nbsp; display:
inline-block;<br>&nbsp;&nbsp;&nbsp; font-size: 16px;<br>&nbsp;&nbsp;&nbsp; border-
radius: 5px;<br>&nbsp;&nbsp;&nbsp; cursor: pointer;<br>}<br><br>#companyName
{<br>&nbsp;&nbsp;&nbsp; font-size: large;<br>&nbsp;&nbsp;&nbsp; font-family:
'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',
Geneva, Verdana, sans-serif;<br>&nbsp;&nbsp;&nbsp; font-size: <a
href="tel:1.2">1.2</a>pc;<br>}<br><br>#aboutEventBtn,<br>#organizersBtn
{<br>&nbsp;&nbsp;&nbsp; background-color: #61dafb;<br>&nbsp;&nbsp;&nbsp; border:
none;<br>&nbsp;&nbsp;&nbsp; color: white;<br>&nbsp;&nbsp;&nbsp; padding: 10px
20px;<br>&nbsp;&nbsp;&nbsp; text-align: center;<br>&nbsp;&nbsp;&nbsp; text-
decoration: none;<br>&nbsp;&nbsp;&nbsp; display: inline-
block;<br>&nbsp;&nbsp;&nbsp; font-size: 16px;<br>&nbsp;&nbsp;&nbsp; border-radius:
5px;<br>&nbsp;&nbsp;&nbsp; cursor: pointer;<br>&nbsp;&nbsp;&nbsp; margin-left:
20px;<br>&nbsp;&nbsp;&nbsp; margin-right: 20px;<br>}<br><br>/* Mobile Styles
*/<br>@media (max-width: <a href="tel:426">426</a>px)
{<br>&nbsp;&nbsp;&nbsp; .logo-container
{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top:
10px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left:
10px;<br>&nbsp;&nbsp;&nbsp; }<br><br>&nbsp;&nbsp;&nbsp; #countdown-timer
{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display:
flex;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; justify-content:
center;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex-wrap:
wrap;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom:
20px;<br>&nbsp;&nbsp;&nbsp; }<br><br>&nbsp;&nbsp;&nbsp; .timer-segment
{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 5px;<br>&nbsp;&nbsp;&nbsp;
}<br><br>&nbsp;&nbsp;&nbsp; .details button
{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display:
block;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:
70%;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 5px
5px;<br>&nbsp;&nbsp;&nbsp; }<br><br>&nbsp;&nbsp;&nbsp; footer
{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align:
center;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-top:
20px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding:
10px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color:
#f0f0f0;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-top: 1px solid
#ddd;<br>&nbsp;&nbsp;&nbsp; }<br><br>&nbsp;&nbsp;&nbsp; #rsvp-message
{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 20px
auto;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color:
#e6f7e4;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: #3c<a
href="tel:763">763</a>d;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding:
10px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius:
4px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align:
center;<br>&nbsp;&nbsp;&nbsp; }<br>}</body></html>

You might also like