import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

root: {
    margin: '0 auto',
    width: 500,
},
card: {
    maxWidth: 360,
    marginTop: 40,
    position: "relative",
},
ribbon: {
    backgroundColor: 'skyblue',
    position: "absolute",
    color: 'white',
    width: 150,
    zIndex: 3,
    textAlign: 'center',
    textTransform: 'uppercase',
    padding: 5,
    font: 'Lato',
    '&::before': {
        position: "absolute",
        zIndex: -1,
        content: '',
        display: 'block',
        border: '5px solid #2980b9',
    },
    '&::after': {
        position: "absolute",
        zIndex: -1,
        content: '',
        display: 'block',
        border: '5px solid #2980b9',
    },
    transform: 'rotate(-45deg)',
    top: 60,
    marginLeft: -40,
},
span: {

}

export default function RibbonMaterialCard() {
  const classes = useStyles();

  return (
    

       
ribbon 
       
    
    
        
        
        
            Lizard
        
        
            Lizards are a widespread group of squamate reptiles, with over 6,000 
            species, ranging
            across all continents except Antarctica
        
        
    
    
        
        Share
        
        
        Learn More
        
    
    

);
}