jyrry / pricing-table Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 2.0 13 KB

It's a pricing table project

Home Page: https://jyrry.github.io/Pricing-Table/

HTML 44.36% CSS 55.64%

pricing-table's Introduction

Pricing-Table

It's a pricing table project

pricing-table's People

Contributors

Stargazers

Watchers

Forkers

samiksha1603 suleman09

pricing-table's Issues

Fixing HTML & CSS Code

Html File
`

<title>Pricing Table Project</title> JYRY Home About Services Contact Sign Up

Basic

$9.99/month

✅ 10GB Storage
✅ 1 User
🚫 Support

More Details ↴

7300

likes

97k

views

550

comments

    <!-- 2nd Card -->
    <div class="card card-2">
      <div class="card-image">
      </div>
      <div class="card-text">
        <span class="date">Standard</span>
        <h2>$19.99/month</h2>
        <ul>
            <li>
                ✅ 50GB Storage
            </li>
            <li>
                ✅ 5 User
            </li>
            <li>
                ✅ Phone &amp; Email Support
            </li>
            <li>
               <a href="#" class="details-2">More Details ↴</a>
            </li>
        </ul>
       
      </div>
      <div class="card-stats">
        <div class="stats">
          <div class="value">100k</div>
          <div class="type">likes</div>
        </div>
        <div class="stats">
          <div class="value">265k</div>
          <div class="type">views</div>
        </div>
        <div class="stats">
          <div class="value">10k</div>
          <div class="type">comments</div>
        </div>
      </div>
    </div>

    <!-- 3nd Card -->
    <div class="card card-3">
      <div class="card-image">
      </div>
      <div class="card-text">
        <span class="date">Premium</span>
        <h2>$49.99/month</h2>
        <ul>
            <li>
                ✅ 100GB Storage
            </li>
            <li>
                ✅ 10 User
            </li>
            <li>
                ✅ 24/7 Support
            </li>
        </ul>
        <a href="#" class="details">More Details ↴</a>
      </div>
      <div class="card-stats">
        <div class="stats">
          <div class="value">480k</div>
          <div class="type">likes</div>
        </div>
        <div class="stats">
          <div class="value">1.4m</div>
          <div class="type">views</div>
        </div>
        <div class="stats">
          <div class="value">175k</div>
          <div class="type">comments</div>
        </div>
      </div>
    </div>

  </div>
<footer> © 2023 JYRY </footer>

Css file

`
body {
background: linear-gradient(
0deg,
rgba(34, 0, 20, 0.479),
rgba(34, 0, 20, 0.548)
),
url(https://i.ibb.co/GvRtsmV/background.jpg) no-repeat center center;
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;

overflow-x: hidden;

}

/* Navbar */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
padding: 20px 100px;
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
background-color:#504444;
}

/* Sign Up */
.button {
height: 40px;
width: 150px;
margin-left: 40px;
position: relative;
background-color: transparent;
cursor: pointer;
border: 2px solid #fff;
overflow: hidden;
border-radius: 30px;
color: black;
transition: all 0.5s ease-in-out;
}

.btn-txt {
z-index: 1;
font-size: 18px;
letter-spacing: 4px;
font-family: "Poppins", sans-serif;
}

.type1::after {
content: "";
position: absolute;
left: 0;
top: 0;
transition: all 0.5s ease-in-out;
background-color: black;
border-radius: 30px;
visibility: hidden;
height: 10px;
width: 10px;
z-index: -1;
}

.button:hover {
box-shadow: 1px 1px 200px #252525;
color: #fff;
border: none;
}

.type1:hover::after {
visibility: visible;
transform: scale(100) translateX(2px);
}

/* Logo */
.logo {
font-size: 32px;
color: #fff;
text-decoration: none;
font-weight: 700;
letter-spacing: 4px;
}

.navbar a {
position: relative;
font-size: 18px;
color: #fff;
font-weight: 500;
text-decoration: none;
margin-left: 40px;
}

.navbar a::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 2px;
background: #fff;
transition: .3s;
}

.navbar a:hover::before {
width: 100%;
}

nav {
box-sizing: border-box;
}

/* 3 Cards */
.card-1 {
--color: rgb(155, 81, 20);
--image: url("https://www.indivstock.com/static49/preview1/stock-photo-humanoid-android-robot-with-artificial-intelligence-evil-bad-eyes-metallic-body-generative-ai-976030.jpg")
}
.card-2 {
--color: rgb(202, 202, 202);
--image: url("https://www.indivstock.com/static49/preview1/stock-photo-humanoid-android-robot-with-artificial-intelligence-evil-bad-eyes-metallic-body-generative-ai-976032.jpg");
}
.card-3 {
--color: rgb(236, 215, 0);
--image: url("https://www.indivstock.com/static49/preview1/stock-photo-humanoid-android-robot-with-artificial-intelligence-evil-bad-eyes-metallic-body-generative-ai-976031.jpg");
}

.card {
position: relative;
display: grid;
grid-template-columns: 250px;
grid-template-rows: 180px 150px 150px;
grid-template-areas: "image" "text" "stats";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "HelveticaNeue", sans-serif;
border-radius: 18px;
background: white;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
text-align: center;
width: 250px;
transition: 0.5s ease;
cursor: pointer;
margin: 16px;
flex-shrink: 0.6;
border-radius: 18px;
}

.card-image {
grid-area: image;
background: var(--image);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background-size: cover;
}

.card-text {
grid-area: text;
margin: 25px;
}

.card-text .date {
color: var(--color);
font-size: 10px;
font-weight: bolder;
}

.card-text h2 {
margin-top: 0;
font-size: 22px;
}

.card-stats {
display: flex;
justify-content: space-around;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background: var(--color);
position: absolute;
left: 0;
right: 0;
bottom: 0;
}

.card-stats .stats {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
color: white;
}

.card-stats .type {
font-size: 9px;
font-weight: 400;
text-transform: uppercase;
}

.card-stats .value {
font-size: 16px;
font-weight: 500;
}

.card:hover {
transform: scale(1.1);
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
}

li {
padding: 5px;
}

ul {
list-style: none;
font-family: "Poppins", sans-serif;
font-weight: 500;
text-align: center;
padding: 1rem;
margin: 2px;
}

.details {
font-size: 10px;
font-family: "Poppins", sans-serif;
font-weight: 600;
text-align: center;
}

.details-2 {
font-size: 10px;
font-family: "Poppins", sans-serif;
font-weight: 600;
text-align: center;
}

footer {
font-size: 10px;
color: #fff;
font-family: "Poppins", sans-serif;
font-weight: 600;

}
@media screen and (max-width: 768px){
body{
flex-direction: column;
}
}
`

Fix Flex system

HTML


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Table Project</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- Navbar -->
  <header class="header">
    <a class="logo">JYRY</a>
    <nav class="navbar">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
      <button class="button type1">Sign Up</button>
      <span class="btn-txt"></span>
    </nav>
  </header>

<!-- 3 Cards -->
 <div class="container">
 </div>
        <!-- 1st Card -->
        <div class="card card-1">
          <div class="card-image">
          </div>
          <div class="card-text">
            <span class="date">Basic</span>
            <h2>$9.99/month</h2>
            <ul>
                <li>
                    ✅ 10GB Storage
                </li>
                <li>
                    ✅ 1 User
                </li>
                <li>
                    🚫 Support
                </li>
            </ul>
          <a href="#" class="details">More Details ↴</a>
        </div>
        <div class="card-stats">
            <div class="stats">
              <div class="value">7300</div>
              <div class="type">likes</div>
            </div>
            <div class="stats">
              <div class="value">97k</div>
              <div class="type">views</div>
            </div>
            <div class="stats">
              <div class="value">550</div>
              <div class="type">comments</div>
            </div>
          </div>
        </div>

        <!-- 2nd Card -->
        <div class="card card-2">
          <div class="card-image">
          </div>
          <div class="card-text">
            <span class="date">Standard</span>
            <h2>$19.99/month</h2>
            <ul>
                <li>
                    ✅ 50GB Storage
                </li>
                <li>
                    ✅ 5 User
                </li>
                <li>
                    ✅ Phone &amp; Email Support
                </li>
                <li>
                   <a href="#" class="details-2">More Details ↴</a>
                </li>
            </ul>
           
          </div>
          <div class="card-stats">
            <div class="stats">
              <div class="value">100k</div>
              <div class="type">likes</div>
            </div>
            <div class="stats">
              <div class="value">265k</div>
              <div class="type">views</div>
            </div>
            <div class="stats">
              <div class="value">10k</div>
              <div class="type">comments</div>
            </div>
          </div>
        </div>

        <!-- 3nd Card -->
        <div class="card card-3">
          <div class="card-image">
          </div>
          <div class="card-text">
            <span class="date">Premium</span>
            <h2>$49.99/month</h2>
            <ul>
                <li>
                    ✅ 100GB Storage
                </li>
                <li>
                    ✅ 10 User
                </li>
                <li>
                    ✅ 24/7 Support
                </li>
            </ul>
            <a href="#" class="details">More Details ↴</a>
          </div>
          <div class="card-stats">
            <div class="stats">
              <div class="value">480k</div>
              <div class="type">likes</div>
            </div>
            <div class="stats">
              <div class="value">1.4m</div>
              <div class="type">views</div>
            </div>
            <div class="stats">
              <div class="value">175k</div>
              <div class="type">comments</div>
            </div>
          </div>
        </div>

      </div>
    <footer> © 2023 JYRY </footer>
</body>
</html>

CSS

body {
  background: linear-gradient(
      0deg,
      rgba(34, 0, 20, 0.479),
      rgba(34, 0, 20, 0.548)
    ),
    url(https://i.ibb.co/GvRtsmV/background.jpg) no-repeat center center;
  background-attachment: fixed;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  
  overflow-x: hidden;
  
}

/* Navbar */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 20px 100px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  background-color:#504444;
}

/* Sign Up */
.button {
  height: 40px;
  width: 150px;
  margin-left: 40px;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 2px solid #fff;
  overflow: hidden;
  border-radius: 30px;
  color: black;
  transition: all 0.5s ease-in-out;
}

.btn-txt {
  z-index: 1;
  font-size: 18px;
  letter-spacing: 4px;
  font-family: "Poppins", sans-serif;
}

.type1::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s ease-in-out;
  background-color: black;
  border-radius: 30px;
  visibility: hidden;
  height: 10px;
  width: 10px;
  z-index: -1;
}

.button:hover {
  box-shadow: 1px 1px 200px #252525;
  color: #fff;
  border: none;
}

.type1:hover::after {
  visibility: visible;
  transform: scale(100) translateX(2px);
}

/* Logo */
.logo {
  font-size: 32px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 4px;
}

.navbar a {
  position: relative;
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  margin-left: 40px;
}

.navbar a::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 2px;
  background: #fff;
  transition: .3s;
}

.navbar a:hover::before {
  width: 100%;
}

nav {
  box-sizing: border-box;
}

/* 3 Cards */
.card-1 {
  --color: rgb(155, 81, 20);
  --image: url("https://www.indivstock.com/static49/preview1/stock-photo-humanoid-android-robot-with-artificial-intelligence-evil-bad-eyes-metallic-body-generative-ai-976030.jpg")
}
.card-2 {
  --color: rgb(202, 202, 202);
  --image: url("https://www.indivstock.com/static49/preview1/stock-photo-humanoid-android-robot-with-artificial-intelligence-evil-bad-eyes-metallic-body-generative-ai-976032.jpg");
}
.card-3 {
  --color: rgb(236, 215, 0);
  --image: url("https://www.indivstock.com/static49/preview1/stock-photo-humanoid-android-robot-with-artificial-intelligence-evil-bad-eyes-metallic-body-generative-ai-976031.jpg");
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: 250px;
  grid-template-rows: 180px 150px 150px;
  grid-template-areas: "image" "text" "stats";
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "HelveticaNeue", sans-serif;
  border-radius: 18px;
  background: white;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  text-align: center;
  width: 250px;
  transition: 0.5s ease;
  cursor: pointer;
  margin: 16px;
  flex-shrink: 0.6;
  border-radius: 18px;
}

.card-image {
  grid-area: image;
  background: var(--image);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}

.card-text {
  grid-area: text;
  margin: 25px;
}

.card-text .date {
  color: var(--color);
  font-size: 10px;
  font-weight: bolder;
}

.card-text h2 {
  margin-top: 0;
  font-size: 22px;
}

.card-stats {
  display: flex;
  justify-content: space-around;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background: var(--color);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.card-stats .stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  color: white;
}

.card-stats .type {
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
}

.card-stats .value {
  font-size: 16px;
  font-weight: 500;
}

.card:hover {
  transform: scale(1.1);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
}

li {
  padding: 5px;
}

ul {
  list-style: none;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-align: center;
  padding: 1rem;
  margin: 2px;
}

.details {
  font-size: 10px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-align: center;
}

.details-2 {
  font-size: 10px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-align: center;
}

footer {
  font-size: 10px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  
}
@media screen and (max-width: 768px){
  body{
    flex-direction: column;
  }
}

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

jyrry / pricing-table Goto Github PK

pricing-table's Introduction

Pricing-Table

pricing-table's People

Contributors

Stargazers

Watchers

Forkers

pricing-table's Issues

Flex issue solved

flex issue solved #3

Fixing HTML & CSS Code

$9.99/month

Fix Flex system

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent