Scribd
Upload
2 views

bluetooth_content(4)

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 media queries for mobile responsiveness. The styles focus on layout, colors, and animations to enhance the user interface.

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 PDF, TXT or read online on Scribd
2 views

bluetooth_content(4)

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 media queries for mobile responsiveness. The styles focus on layout, colors, and animations to enhance the user interface.

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 PDF, TXT or read online on Scribd
You are on page 1/ 3

<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