Giter Site home page Giter Site logo

stats-preview-card-component's People

Contributors

venkat2305 avatar

Watchers

avatar

stats-preview-card-component's Issues

Improvements

Hi there! As promissed, I reviewed the code and there is a first draft of a final solution. I hope we can collaborate in further projects, so I can make Pull Requests. Kind regards! Here is the code you can test by yourself:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Stats preview card component</title>
  </head>
  <body>
    <main>
      <div class="card">
        <div class="desc">
          <h1>
            Get
            <span>insights</span>
            that help your business grow.
          </h1>
          <p>
            Discover the benefits of data analytics and make better decisions
            regarding revenue, customer experience, and overall efficiency.
          </p>
          <div class="info">
            <ul>
              <li>
                <strong>10k+</strong>
                COMPANIES
              </li>
              <li>
                <strong>314</strong>
                TEMPLATES
              </li>
              <li>
                <strong>12M+</strong>
                QUERIES
              </li>
            </ul>
          </div>
        </div>
        <div class="bg">
          <picture>
            <source
              srcset="images/image-header-desktop.jpg"
              media="(min-width:1000px)"
            />
            <img class="mob" src="images/image-header-mobile.jpg" alt="" />
          </picture>
        </div>
      </div>
    </main>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

:root {
  --Very-dark-blue: hsl(233, 47%, 7%);
  --Dark-desaturated-blue: hsl(244, 38%, 16%);
  --Soft-violet: hsl(277, 64%, 61%);
  --Slightly-transparent-white-para: hsla(0, 0%, 100%, 0.75);
  --Slightly-transparent-white-stats: hsla(0, 0%, 100%, 0.6);
  --font--inter: "inter", sans-serif;
  --font--lexend-deca: "Lexend Deca", sans-serif;
}
body {
  background-color: var(--Very-dark-blue);
  color: gray;
  display: grid;
  height: 100vh;
  place-items: center;
}
main {
  margin: 1rem 0 0;
}
.card {
  background-color: var(--Dark-desaturated-blue);
  max-width: 25rem;
  border-radius: 0.625rem;
  display: flex;
  flex-direction: column-reverse;

  /* max-width: 100%; */
}

img {
  width: 100%;
  background: var(--Dark-desaturated-blue);
  mix-blend-mode: multiply;
  opacity: 0.75;
  margin: -0.3rem 0;
}
img,
.bg {
  border-radius: 0.625rem 0.625rem 0 0;
}
.bg {
  background-color: var(--Soft-violet);
}

span {
  color: var(--Soft-violet);
}

.desc {
  padding: 1rem 0;
}

h1 {
  font-family: var(--font--inter);
  font-weight: 700;
  color: white;
  text-align: center;
  margin-bottom: 1.25rem;
}

p {
  font-family: var(--font--inter);
  color: var(--Slightly-transparent-white-para);
  text-align: center;
  line-height: 1.8;
}

strong {
  color: white;
  font-family: var(--font--inter);
  text-align: center;
}

ul {
  list-style: none;
  font-family: var(--font--lexend-deca);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.9375rem;
}

li {
  display: flex;
  flex-direction: column;
  margin: 0.9375rem 0;
}

@media screen and (min-width: 62.5rem) {
  main {
    margin: 0;
  }
  .card {
    max-width: 62.5rem;
    flex-direction: row;
  }

  img {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  img,
  .bg {
    border-radius: 0 0.625rem 0.625rem 0;
  }
  .desc {
    width: 28.125rem;
    display: flex;
    flex-direction: column;
    margin: 1.875rem;
  }
  h1 {
    text-align: left;
    margin-bottom: 1.875rem;
  }

  p {
    text-align: left;
    margin-bottom: 3rem;
  }

  ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  strong {
    font-size: 1.125rem;
    text-align: left;
  }
}

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

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

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.