hand JSBloqs
hand GutenBloqs
hand kuworking
What?
nochedía
Banner-Image
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" />
      <div id="bloq" style={{ padding: '50px 0px 50px 0px' }}>
        <Card>
          <div className="card_image">
            <img src="https://source.unsplash.com/V4EOZj7g1gw/300x300" />
          </div>
          <div className="text">
            <div className="description">
              Splash well-earned Sam washing why shape counts passing. Devouring wanton mister hinder Rohan's. Today is
              my 111th birthday! Flaming invitations impressive whilst trying regroup blade rid Bar-hrum. Yellowed
              permitted conjurer 1400 Cirith needed. Defiler management crush person rose! Moon tested powerful.
              Lone-lands animals unseen flowing sprite afters lived quiet fairer Arwen's opening. Ragged Oakenshield's
              brave ears. Immediately Trolls otherwise meant tree-herder stick
            </div>
          </div>
        </Card>
      </div>
    </>
  )
}

const q = u => `@media (min-width: ${u}px)`

const Card = styled.div`
  font-family: 'Kulim Park', sans-serif;
  max-width: 800px;
  width: 100%;
  min-height: 300px;

  display: flex;
  flex-direction: column;
  ${q(500)} {
    flex-direction: row;
  }

  align-items: flex-start;
  border-radius: 8px;
  overflow: hidden;
  background: #8a91aa;
  color: #fff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  .card_image {
    mix-blend-mode: hard-light;
    max-width: 100%;
    ${q(500)} {
      max-width: 300px;
    }
    min-height: 300px;
    width: 100%;
    height: 100%;
    & > img {
      width: 100%;
      height: 100%;
    }
  }

  .text {
    display: flex;
    flex-direction: row;

    width: fit-content;

    .description {
      width: fit-content;
      font-size: 1.6rem;

      padding: 20px 20px 50px 20px;
      ${q(500)} {
        padding: 50px;
      }
    }
  }
`
Privacidad
by kuworking.com
[ 2020 >> kuworking ]