Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import styled from "styled-components";
- export const Wrapper = styled.div`
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: row;
- flex-wrap: wrap;
- `;
- export const Hero = styled.div`
- width: 400px;
- height: 400px;
- margin-top: 10px;
- margin-left: 80px;
- background-size: cover;
- background-image: url("${props => props.img}");
- `;
- export const HeaderName = styled.h1`
- font-size: 50px;
- text-align: center;
- `
- export const Data = styled.div`
- display: flex;
- width: 100%;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- &:nth-child(n+2){
- width: 20%;
- }
- `;
- export const Category = styled.div`
- height: 30px;
- margin-top: 50px;
- opacity: 0.7;
- padding: 20px;
- flex: 1 0 ${props => props.type === "small" ? 35 : 100}%;
- position: relative;
- background-color: #000;
- border-radius: 0px 15px 15px 15px;
- margin-left: ${props => props.margin === "true" ? 10 : 0}px;
- color: white;
- &::after{
- content: "sdfsdfsdffsdfdsf";
- background-color: #00b179;
- padding: 10px 25px;
- border-radius: 15px 15px 0px 0px;
- position: absolute;
- top: -50%;
- color: white;
- left: 0;
- margin-bottom: 120px;
- }
- `
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement