$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;
}
}
Comments