hand JSBloqs
hand GutenBloqs
hand kuworking
What?
nochedía
Card-Box
By kuworking
import React from 'react'
import styled from '@emotion/styled'

export default () => {
  return (
    <>
      <link href="https://fonts.googleapis.com/css2?family=Kulim+Park&display=swap" rel="stylesheet"></link>
      <link href="/20201011_iframe.css" type="text/css" rel="stylesheet" />
      <Card id="bloq">
        <img src="https://source.unsplash.com/V4EOZj7g1gw/250x175" />
        <Box>
          <Button>
            <img src="/blocks/bykuworking/badge.svg" /> See
          </Button>
          <div className="text">
            <div>Now is the winter of our discontent</div>
          </div>
        </Box>
      </Card>
    </>
  )
}

const Card = styled.div`
  font-family: 'Kulim Park', sans-serif;
  max-width: 250px;

  display: flex;
  flex-direction: column;
  align-items: center;

  & > img {
    width: 250px;
    height: 175px;
    border-radius: 3px;
  }
`

const Box = styled.div`
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-gap: 0px;
  margin: 5px 0px;
  border-radius: 3px;
  overflow: hidden;

  & > div {
    display: flex;
    align-items: center;
  }

  .text {
    font-size: 1.5rem;
    line-height: 1;
    padding: 5px;
  }
`

const Button = styled.button`
  cursor: pointer;
  width: fit-content;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px 10px;
  border-radius: 3px;

  background: #ff8181;
  color: #fff;
  font-weight: 700;

  transition: background 0.2s ease-in;
  &:hover {
    background: #e2e2e2;
  }

  & img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
`
Privacidad
by kuworking.com
[ 2020 >> kuworking ]