Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url('https://fonts.googleapis.com/css?family=Saira:400,700&display=swap&subset=latin-ext');
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Saira' , 'Arial';
- }
- html{
- font-size: 10px;
- }
- .black_head{
- width: 100vw;
- height: 8vh;
- background-color: #000;
- position: fixed;
- }
- .nav_left{
- top: 8vh;
- width: 20vw;
- height: 100vh;
- position: fixed;
- background-color:#fff;
- float: left;
- z-index: 1;
- }
- h1{
- color: #fff;
- text-align: right;
- padding-right: 3rem;
- padding-top: 1rem;
- }
- section{
- height: 200vh;
- }
- .me{
- width: 20vw;
- height: 15vh;
- border-bottom: 1px solid #aaa;
- }
- .boy{
- position: absolute;
- width: 5rem;
- height: 5rem;
- top: 2rem;
- left: 2rem;
- }
- .me h2{
- position: absolute;
- top: 2rem;
- right: 4rem;
- font-weight: normal;
- }
- .me h2 span{
- font-weight: bold;
- }
- .me i{
- position: absolute;
- font-size: 1.6rem;
- color: #000;
- }
- .me i:hover{
- font-size: 2rem;
- }
- .me .fa-envelope{
- top: 5.5rem;
- right: 13.5rem;
- }
- .me .fa-user{
- top: 5.5rem;
- right: 8.5rem;
- }
- .me .fa-play-circle{
- top: 5.5rem;
- right: 4rem;
- }
- .dashboard{
- width: 20vw;
- height: 100vh;
- background-color: #fff;
- }
- .dashboard h3{
- font-size: 2.5rem;
- font-weight: normal;
- padding: 3rem 0 0 2rem;
- }
- .dashboard i{
- color: black;
- font-size: 2rem;
- width: 4rem;
- height: 4rem;
- padding-left: 2rem;
- margin-right: 2rem;
- padding-bottom: 2rem;
- }
- .dashboard a{
- display: block;
- font-size: 2rem;
- /* text-align: center; */
- text-decoration: none;
- color: #000;
- width: 20vw;
- height: 4rem;
- line-height: 4rem;
- }
- a.blue{
- margin-top: 2rem;
- background-color: #2196F3;
- }
- a.blue i{
- color: #fff;
- }
- .dashboard a.menu:hover{
- background-color: #bbb;
- }
- main{
- position: fixed;
- top: 8vh;
- left: 20vw;
- width: 80vw;
- height: 100vh;
- background-color: #F1F1F1;
- }
- main h4{
- font-size: 3rem;
- padding-top: 3rem;
- padding-left: 3rem;
- }
- main i{
- margin-left: 1.5rem;
- margin-right: 1rem;
- }
- .main_div{
- width: 22%;
- height: 16rem;
- float: left;
- margin: 1.5%;
- }
- .red{
- background-color: #F44336;
- position: relative;
- }
- .blue2{
- background-color: #2196F3;
- position: relative;
- }
- .green{
- background-color: #009688;
- position: relative;
- }
- .orange{
- background-color: #FF9800;
- position: relative;
- }
- .red i {
- color: #fff;
- font-size: 5rem;
- padding: 2.5rem 0 0 1.5rem;
- }
- .blue2 i{
- color: #fff;
- font-size: 5rem;
- padding: 2rem 0 0 1.5rem;
- }
- .green i{
- color: #fff;
- font-size: 5rem;
- padding: 2rem 0 0 1.5rem;
- }
- .orange i{
- color: #fff;
- font-size: 5rem;
- padding: 1.3rem 0 0 1.5rem;
- }
- .red p , .blue2 p , .orange p , .green p{
- position: absolute;
- top: 55%;
- left: 10%;
- color: #fff;
- font-size: 3rem;
- }
- .main_div:hover{
- cursor: pointer;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement