Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Thursday, October 19, 2023

Responsive CSS Cards -Free Code + Demo


                Responsive CSS Cards -Free Code + Demo

                

        All code 100% Free code and open source  

        How to create Responsive Cards Using HTML and CSS Here is the Example With Live Demo + Source Code 

        

Output Sample Image

 




                CSS Card with Hover Effects Code Pen





<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Card Design HTML and CSS</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="card-list">
      <a href="#" class="card-item">
        <img
          src="https://t-hub.mx/storage/blog/QopQLVRlmihNPF4aWnSPKuCvV2ja4HuXTCsaM7Cw.jpeg"
          alt="Card Image"
        />
        <span class="developer">Developer</span>
        <h3>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
          Voluptatibus, deleniti..
        </h3>
        <div class="arrow">
          <i class="fas fa-arrow-right card-icon"></i>
        </div>
      </a>
      <a href="#" class="card-item">
        <img
          src="https://simplefreethemes.com/wp-content/uploads/2018/09/Graphic-Designing.jpg"
          alt="Card Image"
        />
        <span class="designer">Designer</span>
        <h3>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
          accusantium odit in harum dolore
        </h3>
        <div class="arrow">
          <i class="fas fa-arrow-right card-icon"></i>
        </div>
      </a>
      <a href="#" class="card-item">
        <img
          src="https://techguide.io/wp-content/uploads/2018/05/video-editing.jpg"
          alt="Card Image"
        />
        <span class="editor">Editor</span>
        <h3>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi,
          repellat
        </h3>
        <div class="arrow">
          <i class="fas fa-arrow-right card-icon"></i>
        </div>
      </a>
    </div>
  </body>
</html>

                    

     This simple example creates a responsive card that adjusts its size and layout based on the screen width. The card contains an image, a title, a description, and a "Read More" link. The CSS code defines the styles and uses media queries to make the card width adapt to smaller screens. You can customize this card with your content and additional styles as needed.                           


The provided code is an HTML document that creates a simple webpage with a responsive card design using HTML and CSS. Let's break down the key components of this HTML code:

Explanation 

<!DOCTYPE html>: This declaration defines the document type and version of HTML being used, which is HTML5 in this case.

<html lang="en">: This opening tag represents the beginning of the HTML document, and it specifies that the document is in the English language ("en").

<head>: The head section contains meta information about the document and links to external resources. In this section, you have:

<meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8.

<meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport configuration for responsive design.


<title>Responsive Card Design HTML and CSS</title>: Defines the title of the webpage, which appears in the browser's title bar or tab.


Links to external resources:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">: Loads the Font Awesome Icons library for using icons.

<link rel="stylesheet" href="style.css">: Links to an external CSS file named "style.css" for additional styling.

<body>: This section contains the content of the webpage that will be displayed to users. It includes a <div> element with a class "card-list" and several <a> elements with the class "card-item." These elements are used to create individual cards in a card list.

Each card (defined by the <a> elements) contains the following elements:

An <img> element with a source URL, representing an image for the card.

A <span> element with a class (e.g., "developer," "designer," "editor") to indicate the type of card.

An <h3> element with a description or text content for the card.

A <div> element with a class "arrow" that contains an icon represented by an <i> element with a Font Awesome class "fas fa-arrow-right card-icon."

Each card is created with similar structure but different content and images.

The intention of this code is to create a webpage with a list of responsive cards, each with an image, a label (e.g., "Developer," "Designer"), a description, and an arrow icon. The styling for these cards is expected to be provided in the linked "style.css" file.

Please note that the style.css file mentioned in the HTML code is likely where the styling and layout for these cards would be defined. If you need more information or have specific questions about the CSS or any other part of this code, feel free to ask.


Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.


Now , add the following CSS code to your style.css file to style

/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, sans-serif;
}

body {
  background: #223;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  max-width: 1250px;
  margin: 150px auto;
  padding: 20px;
  gap: 20px;
}

.card-list .card-item {
  padding: 26px;
  background: linear-gradient(to right top, #ff01e1, #01ffd0);
  border-radius: 8px;
  box-shadow: 0px 3px 5px 3px rgb(21, 21, 41);
  list-style: none;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  border: 2px solid transparent;
  transition: border 0.5s ease;
}
.card-list .card-item:hover {
  border: 2px solid #000;
}
.card-list .card-item img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  object-fit: cover;
  transition: all 0.3s;
  filter: blur(2.5px);
}
.card-list span {
  display: inline-block;
  margin-top: 32px;
  margin-left: 0px;
  width: 100%;
  padding: 10px 15px;
  font-size: 0.75rem;
  border-radius: 5px;
  text-align: center;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1.2em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 2px #000;
}

.card-item h3 {
  color: #ceced1;
  font-size: 1rem;
  text-align: center;
  margin-top: 28px;
  font-weight: 600;
}

.card-item .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  color: #ceced1;
  border: 1px solid #000;
  border-radius: 50%;
  float: right;
  margin-top: 40px;
  transition: 0.2s ease;
}

.card-list .card-item:hover .arrow {
  background: #223;
  color: #fff;
}
.card-item img:hover {
  transform: scale(1.05);
  filter: blur(0);
}
@media (max-width: 1200px) {
  .card-list .card-item {
    padding: 15px;
  }
}

@media screen and (max-width: 980px) {
  .card-list {
    margin: 0 auto;
  }
}


Tags : 

responsive css cards codepen,
responsive cards css grid,
css responsive card hover effects,
css responsive card design,
css responsive card layout,
tailwind css responsive cards,
at No comments:
Labels: , , , ,

Monday, October 16, 2023

Creating a Stunning 3D Carousel with HTML, CSS, and JavaScript


Creating a Stunning 3D Carousel with HTML, CSS,  and JavaScript






In this blog post, we'll walk you through the process of building a mesmerizing 3D carousel using a combination of HTML, CSS, and JavaScript. Carousels are a popular element on websites, often used to showcase featured content or images in an engaging way. This particular carousel goes a step further, incorporating a 3D effect that adds depth and a sense of interactivity to your web page.

Our tutorial will guide you through the step-by-step creation of this 3D carousel. We'll explain how to set up the HTML structure, apply the necessary CSS styles to achieve the 3D effect, and even provide a JavaScript template for handling user interactions (though this example keeps it simple). Whether you're a web development novice or an experienced coder looking for a creative project, you'll find this tutorial accessible and engaging.

By the end of the blog post, you'll have a stunning 3D carousel that you can customize and integrate into your own website to captivate your audience and elevate your web design skills. Get ready to embark on a visually exciting journey into the world of 3D web design!

  •  open your code editor and create new folder 

To start the following HTML code to your Code Editor .
now create Index.html  file with .html extension
Creating a 3D carousel using HTML, CSS, and JavaScript can be a fun and visually appealing project. Below is a basic example of how to build a 3D carousel.

image, etc., to build the website layout.


<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="carousel-container">
      <div class="carousel">
        <div class="carousel-item">1</div>
        <div class="carousel-item">2</div>
        <div class="carousel-item">3</div>
        <div class="carousel-item">4</div>
        <div class="carousel-item">5</div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>


































Next, add the following CSS codes to your style.css file to make your 3D Carousel 

Next, add the following CSS codes to your Code Editor style.css file to make your 3D Carousel Ready to Display You can Customize Your Own Choices To Show user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website. Now, if you Run Or load the web page in your browser, you can see your 3D Carousel.


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.carousel-container {
  perspective: 1000px;
}
.carousel {
  width: 300px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 10s linear infinite;
}
.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  background-color: #3498db;
  color: white;
}
.carousel-item:nth-child(1) {
  transform: rotateY(0deg) translateZ(200px);
}
.carousel-item:nth-child(2) {
  transform: rotateY(72deg) translateZ(200px);
}
.carousel-item:nth-child(3) {
  transform: rotateY(144deg) translateZ(200px);
}
.carousel-item:nth-child(4) {
  transform: rotateY(216deg) translateZ(200px);
}
.carousel-item:nth-child(5) {
  transform: rotateY(288deg) translateZ(200px);
}
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
































































































































































































































Finally, add the following JavaScript code to 





    Follow Me On code Pens It can be Useful to enhance Your designs skills

Conclusion and Final words

In conclusion, building your own 3D Carousel Designs not just an exciting project but also a valuable opportunity to apply your web Designs skills to projects that are increasingly Your Design Skills to Enhance .







Introduction

  • Explain the concept of a 3D carousel and its potential use cases on websites.
  • Mention that the tutorial will guide readers through the process of creating a 3D carousel step by step.

Prerequisites

  • List the prerequisites, such as basic knowledge of HTML, CSS, and JavaScript.
  • Provide links to relevant resources for readers to refresh their knowledge if needed.

Step 1: Setting Up the HTML Structure

  • Create the HTML file and define the basic structure for the carousel.
  • Use <div> elements to create placeholders for the carousel items.

Step 2: Adding CSS Styles

  • Explain the importance of CSS in styling the 3D carousel.
  • Create a separate CSS file and link it to the HTML.
  • Apply styles to achieve the 3D effect, including rotation and perspective.

Step 3: Implementing the JavaScript Logic

  • Describe the role of JavaScript in making the 3D carousel interactive.
  • Create a JavaScript file and link it to the HTML document.
  • Define variables and functions for handling user interactions.

Step 4: Adding Carousel Items

  • Explain how to add content, such as images and captions, to each carousel item.
  • Use CSS classes to style individual items.

Step 5: Making the Carousel Rotatable

  • Explain the JavaScript code to make the carousel rotatable in a 3D space.
  • Provide code examples for rotating the carousel horizontally or vertically.
  • Allow users to drag and interact with the carousel using mouse or touch events.

Step 6: Creating Navigation Buttons

  • Add navigation buttons (previous and next) to control the rotation of the carousel.
  • Explain how to handle button clicks and update the carousel's position.

Step 7: Auto-Rotation and Animation

  • Implement auto-rotation of the carousel for a dynamic user experience.
  • Use CSS transitions or animations to create smooth rotation effects.

Step 8: Styling for a Polished Look

  • Enhance the visual design of the 3D carousel with additional CSS styles.
  • Add features like shadows, reflections, or 3D effects to make the carousel more appealing.

Step 9: Testing and Troubleshooting

  • Discuss the importance of testing the 3D carousel's functionality.
  • Provide tips for debugging and solving common issues, such as cross-browser compatibility.

Conclusion

  • Summarize the key points of the tutorial and the achievement of a 3D carousel.
  • Encourage readers to experiment with their carousel and explore more advanced features.
  • Highlight the skills they've acquired in HTML, CSS, and JavaScript.

Next Steps

  • Suggest additional features or enhancements readers can add to their 3D carousel, such as autoplay, responsive design, or 3D effects.
  • Provide links to advanced tutorials or resources for further learning.

Final Thoughts

  • Express enthusiasm for readers who have successfully created their own 3D carousel.
  • Encourage them to implement this engaging element on their websites and explore more web development projects.

Additional Tips:

  • Include code snippets with proper formatting and syntax highlighting.
  • Use clear and concise explanations.
  • Add images or diagrams to illustrate concepts.
  • Make the blog post SEO-friendly by including relevant keywords and meta tags.

This blog post will help readers create an impressive 3D carousel using HTML, CSS, and JavaScript, offering a unique and interactive element for their websites.

at No comments:
Labels: , , , , , , ,

Latest Updates

Responsive Design with HTML and CSS SPYDEVCODE