Classes
It is possible to heavily style run.events speakers ticket using nothing but css.
Here's a breakdown of the main CSS classes used in the context of the webpage and their purposes:
1.
.card
- Use: Defines the appearance of each speaker card.
2.
.card h4
- Use: Styles the header text within the card, typically the speaker’s name.
3.
.card .speaker-image img
- Use: Styles the speaker’s image within each card.
4.
.popup .inner-container
- Use: Styles the popup container that displays detailed information about the speaker or session.
5.
.popup .session-list button
- Use: Styles the buttons with session names for speaker within the session list popup.
6.
.session-info .item
- Use: Styles the session information pills or items.
7.
.labels
and
.badge-icon- Use: Applied to containers and icons within the speaker or session cards for showing labels like company logos or badges.
8.
.popup-footer button
- Use: Styles the close button in the popup.
9.
.speakers-images-container
and
.speakers-images- Use: Styles a section that displays images of speakers in the session or speaker popup.
Those CSS classes can be used to increase the visual appeal and user experience by making speaker cards interactive and attractive.
Example
.card {
background: linear-gradient(160deg, #FFFFFF 0%, #F3F6F8 55%, #E8EBF0 100%) !important;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
transform: scale(1) rotate(0deg) translateZ(0) !important;
transform-origin: center center !important;
position: relative !important;
z-index: 1 !important;
backface-visibility: hidden !important;
will-change: transform !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.02),
0 4px 8px rgba(0,0,0,0.02) !important;
}
/* Gradient text effect for speaker name */
.card h4 {
font-size: 1.4rem !important;
font-weight: 600 !important;
margin-bottom: 1.2rem !important;
background: linear-gradient(45deg, #005c9f, #693bbd) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
transition: all 0.3s ease !important;
}
/* White text on hover */
.card:hover h4 {
background: none !important;
-webkit-text-fill-color: white !important;
color: white !important;
}
.card:hover {
background: #005c9f !important;
transform: scale(1.04) rotate(1deg) translateY(-5px) !important;
z-index: 2 !important;
box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
color: white !important;
}
/* Speaker image styles */
.card .speaker-image img {
border-radius: 12px !important;
width: 130px !important;
height: 130px !important;
object-fit: cover !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
transform: rotate(0deg) !important;
}
.card:hover .speaker-image img {
transform: rotate(-2deg) !important;
}
/* Other text elements white on hover */
.card:hover p,
.card:hover span,
.card:hover hr {
color: white !important;
border-color: white !important;
}
/* Container styles */
.speakers-component .row {
padding: 0px !important;
overflow: visible !important;
}
.speakers-component .card {
margin: 10px 10px !important;
width: 320px !important;
}
/* Apply font family to the popup container */
.popup .inner-container {
font-family: 'IBM Plex Sans', sans-serif;
background: linear-gradient(160deg, #FFFFFF 0%, #F3F6F8 55%, #E8EBF0 100%);
border-radius: 12px;
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
padding: 2rem;
position: relative;
box-shadow: 0 12px 24px rgba(0,0,0,0.08);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.popup .left-side img {
width: 130px;
height: 130px;
object-fit: cover;
border-radius: 12px !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
transform: rotate(-3deg) !important;
}
.popup .right-side h3 {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 2.4rem !important;
font-weight: 600;
margin-bottom: 1.5rem !important; /* Increased space after name */
background: linear-gradient(45deg, #005c9f, #693bbd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
/* Make the title more distinct */
.popup .right-side span {
font-family: 'IBM Plex Sans', sans-serif;
display: block;
font-size: 0.95rem;
font-weight: 500;
color: #605E5C;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 1rem;
padding: 0.5rem 0;
border-top: 1px solid rgba(0,0,0,0.1);
}
/* Bio text */
.popup .content p {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 1.05rem !important;
font-weight: 400 !important;
color: #605E5C;
line-height: 1.6;
margin-bottom: 2rem;
}
/* Session link styling */
.popup .session-list button {
font-family: 'IBM Plex Sans', sans-serif;
width: 100%;
text-align: left;
padding: 1.25rem 1.75rem; /* Increased padding */
background: linear-gradient(160deg, #FFFFFF 0%, #F3F6F8 55%, #E8EBF0 100%);
border: none;
border-radius: 12px;
color: #005c9f !important;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 2px 4px rgba(0,0,0,0.02), 0 4px 8px rgba(0,0,0,0.02);
margin: 0.5rem 0;
padding: 8px !important;
}
.popup .session-list button:hover {
background: #005c9f;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(0,0,0,0.08);
padding: 8px !important;
}
/* Close button in primary color */
.popup .popup-footer button {
font-family: 'IBM Plex Sans', sans-serif !important;
background: #005c9f !important;
color: white !important;
border-color: #787878 !important;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 2px 4px rgba(0,0,0,0.02), 0 4px 8px rgba(0,0,0,0.02);
}
.popup .popup-footer button:hover {
background: #8f3860;
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}
/* Keep all existing styles and add these media queries at the end */
@media (max-width: 768px) {
.popup .inner-container {
padding: 1.5rem;
width: 95%;
margin: 1rem;
}
.popup .speaker-info {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.5rem;
}
.popup .left-side {
width: 100%;
display: flex;
justify-content: center;
}
.popup .left-side img {
width: 150px;
height: 150px;
/* Maintain the rotation and shadow from your styles */
transform: rotate(-3deg) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}
.popup .right-side {
width: 100%;
}
.popup .right-side h3 {
text-align: center;
font-size: 2rem !important; /* Slightly smaller for mobile */
}
.popup .labels {
justify-content: center;
}
.popup .right-side span {
text-align: center;
margin-top: 0.5rem;
}
/* Ensure content is properly aligned */
.popup .content {
text-align: left;
}
.popup .content p {
font-size: 1rem !important;
}
}
/* Additional small screen optimizations */
@media (max-width: 480px) {
.popup .inner-container {
padding: 1.25rem;
}
.popup .left-side img {
width: 130px;
height: 130px;
}
.popup .right-side h3 {
font-size: 1.8rem !important;
margin-bottom: 1rem !important;
}
.popup .session-list button {
padding: 8px !important; /* Maintaining your specific padding */
}
.popup .popup-footer button {
width: 100%; /* Full width button on very small screens */
}
}
/* Session popup specific styles */
.session-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.session-info .item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(160deg, #FFFFFF 0%, #F3F6F8 55%, #E8EBF0 100%);
padding: 0.5rem 1rem;
border-radius: 50px;
box-shadow: 0 2px 4px rgba(0,0,0,0.02), 0 4px 8px rgba(0,0,0,0.02);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 500;
color: #005c9f;
}
.session-info .item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.session-info .item mat-icon {
color: #005c9f;
font-size: 20px;
height: 20px;
width: 20px;
transition: all 0.3s ease;
}
.session-info .item:hover mat-icon {
transform: scale(1.1);
}
/* Ensure responsive styling still works */
@media (max-width: 768px) {
.session-info .item {
margin: 0 auto; /* Centers the pill when in mobile view */
}
}
.popup h3 {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 2.4rem !important;
font-weight: 600;
margin-bottom: 1.5rem !important;
background: linear-gradient(45deg, #005c9f, #693bbd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.labels-sponsor {
margin-bottom: 2rem;
}
.labels-sponsor .labels {
display: flex;
gap: 1rem;
align-items: center;
}
.label {
font-family: 'IBM Plex Sans', sans-serif;
padding: 0.4rem 1rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
}
.badge-icon {
height: 24px;
width: auto;
transition: all 0.3s ease;
}
.content p {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 1.05rem !important;
font-weight: 400;
color: #605E5C;
line-height: 1.6;
margin-bottom: 2rem;
}
.speakers-images-container {
margin-top: 2rem;
border-top: 1px solid rgba(0,0,0,0.1);
padding-top: 2rem;
}
.speakers-images {
display: inline-flex;
align-items: center;
gap: 1rem;
margin-right: 2rem;
margin-bottom: 1rem;
}
.speakers-images img {
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.speakers-images span {
font-family: 'IBM Plex Sans', sans-serif;
color: #605E5C;
font-weight: 500;
}
/* Responsive styles */
@media (max-width: 768px) {
.popup h3 {
font-size: 2rem !important;
text-align: center;
}
.session-info {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.labels-sponsor .labels {
justify-content: center;
flex-wrap: wrap;
}
.speakers-images-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.speakers-images {
margin-right: 0;
justify-content: center;
}
.content p {
font-size: 1rem !important;
text-align: left;
}
}
/* Small screen optimizations */
@media (max-width: 480px) {
.popup h3 {
font-size: 1.8rem !important;
}
.labels-sponsor .labels {
gap: 0.5rem;
}
.label {
padding: 0.3rem 0.8rem;
font-size: 0.8rem;
}
.badge-icon {
height: 20px;
}
.popup-footer button {
width: 100%;
}
}
The CSS targets specific elements on the page, particularly those related to speaker cards, their layout, and interactions. It enhances the design, user experience, and responsiveness of elements such as cards, buttons, text, and image elements on the page.
Detailed Breakdown:
- Card Styling (
.card):- Background and Gradients: The
.cardclass has a gradient background, transitioning from white to shades of gray. This adds a subtle depth to the design.
- Hover Effects: The card scales slightly, rotates 1 degree, and shifts upwards when hovered over. This interaction provides a more dynamic feel, drawing attention to the card.
- Box Shadow: Soft shadows are applied for a raised effect, which enhances visual hierarchy and makes the card appear elevated.
- Background and Gradients: The
- Speaker Name Styling (
.card h4):- Gradient Text: The heading within the card has a gradient effect applied to the text, clipped to the text shape, giving it a visually appealing look.
- Hover Effect: On hover, the gradient text switches to solid white, making it more readable against the card's hover background.
- Image Styling (
.card .speaker-image img):- Rounded Corners: The images within the speaker cards have rounded corners to match the overall card design.
- Shadow and Object Fit: The images have a subtle shadow and are set to
object-fit: coverto maintain their aspect ratio.
- Hover Rotation: The image rotates slightly when hovered over, adding interactivity.
- Responsive Design:
- The CSS includes media queries for different screen sizes to ensure the layout adapts:
- Tablets (max-width: 768px): Adjustments such as centering content and resizing images are made for better readability.
- Small Screens (max-width: 480px): Even more compact designs are applied, ensuring text and images fit within the available space.
- The CSS includes media queries for different screen sizes to ensure the layout adapts:
- Popup Container (
.popup .inner-container):- Font and Layout: Uses a consistent font, background gradient, and box shadow for consistency with the card styling.
- Responsive Adjustments: Padding and width adjustments ensure a pleasant experience on smaller screens.
- Close Button: Styled for visibility, matching the page's color scheme.
- Session Button (
.popup .session-list button):- Button Design: Buttons within the popup maintain the same gradient background as cards, with hover effects to signify interactivity.