रिस्पॉन्सिव सीएसएस कार्ड

अनुशंसित

29 July 2025

ब्रांडिंग और मार्केटिंग के साथ कंपनी कार्ड सूची

20 March 2023

@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,500);
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  padding: 96px;
  font-size: 21px;
  background: #fff;
  color: #000;
  font-family: "Poppins", sans-serif;
}
section.card {
  background: #000046;
  background: -webkit-linear-gradient(to right, #1CB5E0, #000046); 
  background: linear-gradient(to right, #1CB5E0, #000046);
  border-radius: 24px 24px 24px 48px;
  padding: 48px 48px 48px 308px;
  margin: 84px 0;
  min-width: 640px;
  display: flex;
  flex-direction: row;
  align-self: flex-start;
  position: relative;
  box-shadow: 5px 0 0 0 rgba(204,204,204,0.3), -5px 0 0 0 rgba(204,204,204,0.3), 0 5px 0 0 rgba(204,204,204,0.3);
}
section.card .text-content {
  display: flex;
  flex-direction: column;
  width:calc(60vw - 192px);
}
section.card .text-content h3 {
  margin: 0;
  font-size: 1.5em;
  max-width: 20ch;
  color: #fff;
}
section.card .text-content p {
  margin: 25px 0 24px;
  color: #fff;
}
section.card .text-content a {
  border: 3px solid #f2f2f2;
  color: #ffffff;
  align-self: flex-start;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 12px;
  transition: 400ms all;
}
section.card .text-content a:hover {
  background: #051c5e;
  color: white;
}
section.card .visual {
  width: 240px;
  height: 100%;
  position: absolute;
  top: -24px;
  left: 24px;
  overflow: hidden;
  border-radius: 24px;
}
section.card .visual img {
  height: 110%;
}
article {
  margin: auto;
  display: block;
  width:calc(60vw + 248px);
  max-width:calc(920px + 248px);
  min-width:calc(640px + 248px); 
}
@media all and (max-width: 1100px) {
  body {
    padding: 96px 48px 24px;
  }
  article {
    width: 100%;
    min-width: 100%;
  }
  section.card {
    min-width: 100%;
  }
  section.card .text-content {
    width: 100%;
  }
}
@media all and (max-width: 720px) {
  body {
    padding: 48px 24px 0;
  }
  section.card {
    margin: 64px 0;
    padding: 88px 36px 36px;
    flex-direction: column;
    border-radius: 24px;
  }
  section.card .text-content h3 {
    max-width:calc(100% - 150px);
    font-size: 1em;
  }
  section.card .text-content p,
  section.card .text-content a {
    font-size: 0.8em;
  }
  section.card .visual {
    width: 150px;
    height: 150px;
    right: 16px;
    left: auto;
    border-radius: 50%;
  }
  section.card .visual img{
    width: 100%;
    height: auto;
    }
}

रिस्पॉन्सिव सीएसएस कार्ड

अनुशंसित

ब्रांडिंग और मार्केटिंग के साथ कंपनी कार्ड सूची

रिस्पॉन्सिव बूटस्ट्रैप नैवबार

सोशल मीडिया का एनिमेटेड कार्ड

index.html

styles.css

main.js

अनुशंसित

ब्रांडिंग और मार्केटिंग के साथ कंपनी कार्ड सूची

रिस्पॉन्सिव बूटस्ट्रैप नैवबार

सोशल मीडिया का एनिमेटेड कार्ड

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js