Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $primary: #fe2c55;
- $secondary: #ffffff;
- * {
- margin: 0;
- padding: 0;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- #App{
- margin: 0;
- padding: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- #Home{
- margin: 0;
- padding: 0;
- }
- #Navbar{
- height: 59px;
- display: flex;
- flex-direction: row;
- align-items: center;
- border-bottom: 1px solid #cecece
- }
- #Menu{
- width: 80px;
- border-right: 1px solid #cecece;
- display: flex;
- flex-direction: column;
- img {
- border-radius: 50%;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- -ms-border-radius: 50%;
- -o-border-radius: 50%;
- margin-top: 10%;
- margin-bottom: 10%;
- &.icon{
- margin-top: 20px;
- margin-bottom: 20px;
- }
- &.profile{
- margin-top: 10px;
- margin-bottom: 10px;
- }
- }
- }
- #Logo{
- }
- #SearchBar{
- width: 361px;
- height: 46px;
- background-color: #1618230f;
- border: none;
- border-radius: 50px;
- padding-left: 15px;
- }
- #Upload{
- text-align: center;
- font-weight: 700;
- margin-bottom: 0;
- }
- #Button {
- width: 100px;
- height: 36px;
- border-radius: 4px;
- font-weight: 700;
- -webkit-border-radius: 4px;
- -moz-border-radius:4px;
- &.primary{
- background-color: #fe2c55;
- color: white;
- }
- &.secondary{
- background-color: white;
- color: #fe2c55;
- border-color: #fe2c55;
- }
- }
- #Feed {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- #TikTok {
- padding-top: 20px;
- padding-bottom: 20px;
- .left {
- padding-left: 0;
- padding-right: 0;
- .profile {
- border-radius: 50%;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- -ms-border-radius: 50%;
- -o-border-radius: 50%;
- }
- }
- .mid {
- padding-left: 10px;
- padding-right: 10px;
- .username {
- padding-left: 0;
- padding-right: 0;
- }
- .name {
- }
- .content {
- }
- .soundtrack {
- }
- .video {
- border-radius: 2%;
- -webkit-border-radius: 2%;
- -moz-border-radius: 2%;
- -ms-border-radius: 2%;
- -o-border-radius: 2%;
- }
- }
- .right {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .follow {
- }
- .social {
- .likes {
- }
- .comments {
- }
- .shares {
- }
- }
- }
- }
- #Card {
- padding: 20px;
- video {
- position: absolute;
- width: 100%;
- height: 100%;
- }
- .body {
- height: 300px;
- background-color: coral;
- }
- }
Add Comment
Please, Sign In to add comment