bravo68web-portfolio-nextjs/components/extras.style.jsx

73 lines
1.7 KiB
JavaScript

import styled from "styled-components";
// import SendIcon from "@mui/icons-material/Send";
export const ExtraStyles = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 15vh;
background-image: url("images/background2.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll !important;
height: 100vh;
.default {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* height: 100vh; */
padding-bottom: 10em;
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-bottom: 2em;
&:hover {
filter: contrast(200%);
-webkit-transform: translateX(-5px) translateY(-5px);
transform: translateX(-5px) translateY(-5px);
transition: 1s ease;
}
.content-description {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content-description img {
width: 100px;
}
.content-title {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
h1 {
font-size: 1.5em;
font-weight: bold;
color: #fff;
text-align: center;
margin: 0;
padding: 0;
a {
color: #fff;
text-decoration: none;
&:hover {
color: #b41ee6;
}
}
}
}
}
}
`;