UI card
Code
Brand and communication strategy, graphic design, illustration, art direction and portrait photography
Travel
Travelling across the world wiil bring peace into your life.This allows you to enjoy the beauty of nature
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
background-color: rgb(223, 227, 231);
}
.container {
display: flex;
}
.block {
height: 350px;
width: 250px;
border-radius: 30px;
box-shadow: 5px 5px 8px rgb(185, 184, 184), -5px -5px 8px rgb(250, 246, 246);
justify-content: center;
align-items: center;
text-align: center;
color: #0CBCCA;
font-family: sofia-pro, sans-serif;
font-style: normal;
font-weight: 200;
}
.block1 {
margin-right: 30px;
}
.block1:hover {
box-shadow: 5px 5px 8px rgb(185, 184, 184)inset, -5px -5px 8px rgb(250, 246, 246)inset;
}
.block img {
height: 80px;
width: 80px;
margin-top: 40px;
}
.block h1 {
margin-top: 20px;
font-weight: lighter;
}
.block p {
padding-left: 20px;
padding-right: 20px;
margin-top: 10px;
}
button {
margin-top: 20px;
padding: 8px 20px;
border-radius: 30px;
border: none;
background-color: rgb(223, 227, 231);
box-shadow: 5px 5px 5px rgb(194, 191, 191), -5px -5px 8px rgb(243, 241, 241);
color: #0CBCCA;
font-weight: bold;
Outline:none ;
}
button:hover {
box-shadow: 5px 5px 5px rgb(194, 191, 191)inset, -5px -5px 5px rgb(243, 241, 241)inset;
}
.block2 {
box-shadow: 5px 5px 8px rgb(185, 184, 184), -5px -5px 8px rgb(250, 246, 246);
color: #0CBCCA;
}
.block2:hover {
box-shadow: 5px 5px 8px rgb(185, 184, 184)inset, -5px -5px 8px rgb(250, 246, 246)inset;
}
@media only screen and (max-width: 400px) {
.container {
display: flex;
flex-direction: column;
}
.block1 {
margin-bottom: 30px;
margin-top:50px;
}
}