Procedure
Step 1 - Setting Up the HTML Structure:
We start with the basic HTML structure. It includes the DOCTYPE declaration, opening and closing html tags, and the head and body sections.
Step 2 - Defining the Character Encoding and Viewport:
In the head section, we set the character encoding to UTF-8 and define the viewport for responsive design.
Step 3 - Title and Fonts:
Inside the head, we set the title of the webpage and import some Google Fonts using @import rule to style our text later on.
Step 4 - Body Styling:
In the style section, we style the body element. We remove margins, set width and height to 100% to cover the whole viewport, and use flexbox to center elements vertically and horizontally. We also set a dark background color.
Step 5 - Cards Container:
We define a container for the cards with the class .darksoul-glowing-gradient-cards. This container is centered within the viewport and takes up 90% of the height.
Step 6 - Card Styles:
We define styles for three different cards: .darksoul-gradient-card1, .darksoul-gradient-card2, and .darksoul-gradient-card3. Each card has a different size and gradient background, a rotation animation, rounded corners, and a blur effect for the background.
Step 7 - Content Within Cards:
Inside each card, we create a .darksoul-content-card div to hold the text content. The content card has a black background, rounded corners, and a blur effect.
Step 8 - Keyframes for Animation:
We define the @keyframes rotation rule to create a full 360-degree rotation animation for the gradient. The @property --gradient-angle rule is used to animate the custom CSS property for the gradient angle.
Step 9 - Responsive Design:
We use the @media rule to ensure the layout adjusts on screens smaller than 600px. The cards stack vertically and adjust their width for a better viewing experience on mobile devices.
Step 10 - Footer and Text Selection Styles:
We create a footer with the class .darksoul-footer, containing a disclaimer and a link to DarkSoul's homepage. The disclaimer text uses the 'Belanosima' font and changes color when hovered over. Additionally, the ::selection pseudo-element is styled to have a black background with white text when text is selected.
In conclusion, by following these step-by-step instructions, you can create a visually appealing and responsive Glowing Gradient Border Card with customizable styles and animations.
