Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Monday, November 20, 2023

Responsive Design with HTML and CSS SPYDEVCODE

 In the world of web development, creating responsive designs is essential to ensure a seamless user experience across various devices. In this tutorial, we'll explore a sample HTML and CSS code for building a responsive webpage. codePen Link


Responsive Website Design Templete
Responsive Website Design


The HTML Structure


<!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="style.css">
    <title>Responsive Design</title>
</head>
<body>
    <section class="container">
        <div class="main-container">

            <nav class="navbar">
                <div class="navbar-container container">
                    <input type="checkbox" name="" id="">
                    <div class="hamburger-lines">
                        <span class="line line1"></span>
                        <span class="line line2"></span>
                        <span class="line line3"></span>
                    </div>
                    <ul class="menu-items">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Category</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Testimonial</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <h1 class="logo">Navbar</h1>
                </div>
            </nav>

            <div class="main">
            <div class="main-text">
          <h4>Lorem ipsum dolor sit amet!</h4>
         <h1>Build Earn<ion-icon name="flash"></ion-icon> Automate</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
At consequuntur, quidem amet rem sapiente in. Officia beatae quia vel
atque sunt iure placeat, culpa modi! Necessitatibus eaque doloribus laudantium
labore?</p>
    <div class="btns">
    <a href="https://codepen.io/amkamble/pen/yLZvwov" class="btn">
    Get Code <ion-icon name="code-slash"></ion-icon></a>
    <a href="#" class="btn">Explore <ion-icon name="arrow-forward"></ion-icon></a>
                </div>
            </div>
        </div>

        </div>
    </section>
   
    <span class="circle-1"></span>
    <span class="circle-2"></span>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js">
</script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js">
</script>
   
</body>
</html>

The HTML structure includes sections for the navigation bar, main content, and circular elements for a visually appealing design.

Styling with CSS

        CodePen Link Click The Given Code Pen Link To live Demo

  @import url('https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght@500&family=Gluten:wght@500&family=Merienda:wght@700&family=Poppins&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(109.6deg, rgb(17, 19, 23)
11.2%, rgb(11, 18, 24) 51.2%, rgb(6, 18, 24) 98.6%);
}

a{
    text-decoration: none;
    color: #fff;
}
li{
    list-style: none;
}
.container{
    width: 100%;
    height: 100vh;
    position: relative;
    display: block;
}
.main-container{
    width: 100%;
    color: #fff;
    position: relative;
}

.navbar input[type="checkbox"],
.navbar .hamburger-lines{
    display: none;
}

.container{
    max-width: 1200px;
    width: 100%;
    position: fixed;
    top: 0;
    margin: auto;
}

.navbar{
    width: 100%;
    color: #fff;
    opacity: 0.85;
    z-index: 100;
}

.navbar-container{
    display: flex;
    justify-content: space-between;
    height: 50px;
    margin-top: 10px;
    align-items: center;
}

.menu-items{
    order: 2;
    display: flex;
}
.logo{
    order: 1;
    font-size: 2.3rem;
}

.menu-items li{
    list-style: none;
    margin-left: 1.5rem;
    font-size: 1.2rem;
}

.navbar a{
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}

.navbar a:hover{
    color:  rgb(19, 119, 220) ;
}


.main{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    text-align: center;
}
.main-text{
    width: 70%;
    margin-top: 5%;
}
.main-text h4{
    font-size: 15px;
    padding: auto;
    color: skyblue;
    margin-top: 10px;
}
.main-text h1{
    color: #fff;
    margin-top: 10px;
    font-size: 3rem;
    font-weight: bolder;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
 h1 [name="flash"]{
    font-size: 2.3rem;
    color: rgb(14, 156, 188);
    text-align: center;
    margin-top: 10px;
}

.main-text p{
    padding: 10px;
    margin-top: 5px;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    line-height: 1.5rem;
    text-align: center;

}

.main-text .btns{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding-top: 20px;
    margin-top: 10px;
}
.main-text .btns .btn{
   border: 2px solid rgb(107, 41, 194);
    padding: 10px 40px;
    margin: 15px;
    border-radius: 20px;
    transition: 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

[name="code-slash"] ,[name="arrow-forward"]{
    margin: 0 5px;
    font-size: 1rem;
}
.btn:nth-child(1){
    background-color:rgb(107, 41, 194);
}
.btns a:hover{
    background-color:rgb(107, 41, 194);
}



 .circle-1{
    position: absolute;
    display: flex;
    height: 300px;
    width: 300px;
    left: 0%;
    top: 50%;
    border-radius: 50%;
    filter: blur(70px);
    background: linear-gradient(180.8deg, rgb(234, 8, 211) 6.9%,
    rgb(73, 6, 70) 73.2%);
    z-index: -999;
}

.circle-1::after {
    content:"";
    position: absolute;
    height: 90%;
    width: 90%;
    left: 10%;
    top:30%;
    border-radius: 50%;
    background: linear-gradient(180.8deg, rgb(19, 119, 220) 6.9%,
    rgb(73, 6, 70) 73.2%);
  }

  .circle-2{
    position: absolute;
    display: flex;
    height: 300px;
    width: 300px;
    right: 0;
    border-radius: 50%;
    filter: blur(80px);
    background: linear-gradient(180.8deg, rgb(27, 10, 139) 6.9%,
    rgb(73, 6, 70) 73.2%);
    z-index: -999;
}

.circle-2::after {
    content:"";
    position: absolute;
    height: 90%;
    width: 90%;
    right: -20%;
    top: -120px;
    border-radius: 50%;
    background: linear-gradient(180.8deg, rgb(139, 10, 36) 6.9%,
    rgb(73, 6, 70) 73.2%);
  }


 
@media (max-width: 920px){
    .navbar-container input[type="checkbox"]:checked ~ .logo{
        display: none;
   
    }
   
    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines{
        display: block;
       
    }

    .navbar-container{
        display: block;
        position: relative;
        height: 64px;
        margin-top: 5px;
    }

    .navbar-container input[type="checkbox"]{
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .navbar-container .hamburger-lines{
        display: block;
        height: 20px;
        width: 25px;
        position: absolute;
        top: 20px;
        left: 40px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .navbar-container .hamburger-lines .line{
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: white;
    }
   
    .navbar-container .hamburger-lines .line1{
        transform-origin: 0% 0%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2{
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3{
        transform-origin: 0% 100%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar .menu-items{
        padding-top: 100px;
        background: transparent;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: 00px;
        padding-left: 40px;
        transition: transform 0.5s ease-in-out;
       background-color: rgba(0,0,0,0.5);
       
    }

    .navbar .menu-items li{
        margin-bottom: 1.8rem;
        font-size: 1.7rem;
        font-weight: 500;
    }

    .logo{
        position: absolute;
        top: 10px;
        right: 15px;
        margin-right: 50px;
        font-size: 1.5rem;
    }

   
}

@media (max-width: 768px){
    .navbar{
        opacity: 0.95;
    }

    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines{
        display: block;
       
    }

    .navbar-container{
        display: block;
        position: relative;
        height: 64px;
        margin-top: 5px;
    }

    .navbar-container input[type="checkbox"]{
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .navbar-container .hamburger-lines{
        display: block;
        height: 28px;
        width: 35px;
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .navbar-container .hamburger-lines .line{
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: white;
    }
   
    .navbar-container .hamburger-lines .line1{
        transform-origin: 0% 0%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2{
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3{
        transform-origin: 0% 100%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar .menu-items{
        padding-top: 100px;
        background: transparent;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: -40px;
        padding-left: 40px;
        transition: transform 0.5s ease-in-out;
       background-color: rgba(0,0,0,0.5);
       
    }

    .navbar .menu-items li{
        margin-bottom: 1.8rem;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .logo{
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.5rem;
    }

    .navbar-container input[type="checkbox"]:checked ~ .menu-items{
        transform: translateX(0);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
        transform: rotate(45deg);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
        transform: scaleY(0);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
        transform: rotate(-45deg);
    }


    .main-text{
        margin-top: 20%;
    }

    .main-text h4{
        font-size: 15px;
        padding: auto;
       
    }
    .main-text h1{
        color: #fff;
        font-size: 1.4rem;
        padding-bottom:10px;
    }
     h1 [name="flash"]{
        font-size: 1.7rem;
        color: rgb(14, 156, 188);
        text-align: center;
        margin-top: 5px;
    }
   
    .main-text p{
        padding: 0 10px;
        margin-top: 5px;
        font-size: 0.8rem;
    }
   
    .main-text .btns .btn{
        padding: 7px 25px;
        margin: 5px;
    }
   
    [name="code-slash"] ,[name="arrow-forward"]{
        margin: 0 5px;
        font-size: 0.9rem;
    }

}

@media (max-width: 500px){
    .navbar-container input[type="checkbox"]:checked ~ .logo{
        display: none;
    }
   
    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines{
        display: block;
       
    }

    .navbar-container{
        display: block;
        position: relative;
        height: 64px;
        margin-top: 5px;
    }

    .navbar-container input[type="checkbox"]{
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .navbar-container .hamburger-lines{
        display: block;
        height: 20px;
        width: 25px;
        position: absolute;
        top: 20px;
        left: 40px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .navbar-container .hamburger-lines .line{
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: white;
    }
   
    .navbar-container .hamburger-lines .line1{
        transform-origin: 0% 0%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2{
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3{
        transform-origin: 0% 100%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar .menu-items{
        padding-top: 100px;
        background: transparent;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: 00px;
        padding-left: 40px;
        transition: transform 0.5s ease-in-out;
       background-color: rgba(0,0,0,0.5);
       
    }

    .navbar .menu-items li{
        margin-bottom: 1.8rem;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .logo{
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.5rem;
        margin-right: 50px;
    }

   
}

The accompanying CSS code provides styling for the entire webpage, from the body to the navigation bar, main content, and responsive design adjustments for different screen sizes.

Key Features

  1. Navigation Bar: The navigation bar includes a hamburger menu for a clean and responsive design. The menu items are styled with a smooth hover effect.

  2. Main Content: The main content section features a bold heading, subheading, and a call-to-action button. The use of Ionicons adds visually appealing icons to the buttons.

  3. Circular Elements: The webpage includes circular elements with gradient colors, enhancing the overall visual appeal. The use of the ::after pseudo-element adds depth to the circles.

  4. Responsive Design: The CSS includes media queries for responsiveness. The navigation bar transforms into a mobile-friendly version on smaller screens, providing a better user experience.

Conclusion

Building a responsive webpage is crucial for reaching users on different devices. This HTML and CSS template serves as a foundation for creating visually appealing and user-friendly designs. Feel free to customize and expand upon this code for your specific projects.



at No comments:
Labels:

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: , , , ,

Latest Updates

Responsive Design with HTML and CSS SPYDEVCODE