parent
							
								
									fb00a64063
								
							
						
					
					
						commit
						f05e248c64
					
				
				 11 changed files with 177 additions and 295 deletions
			
			
		| After Width: | Height: | Size: 646 B | 
| @ -1,119 +0,0 @@ | ||||
| 
 | ||||
| .Slider{ | ||||
|     width: 100%; | ||||
|     height: 80vh; | ||||
|     overflow: hidden; | ||||
|     position: relative; | ||||
|     z-index: 4; | ||||
|     max-width: 1550px; | ||||
|     @media screen and (min-width: 1551px) { | ||||
|       margin: 0 auto; | ||||
|     } | ||||
| 
 | ||||
|     &-main-box { | ||||
|       width: 100%; | ||||
|       height: 100%; | ||||
|       position: absolute; | ||||
|       top: 0; | ||||
|       left: 0; | ||||
| 
 | ||||
|       &-title { | ||||
|         width: 80%; | ||||
|         margin: 0 auto; | ||||
|         font-size: 38px; | ||||
|         color: #fff; | ||||
|         font-family: Medium; | ||||
|       } | ||||
| 
 | ||||
|       &-item-container { | ||||
|         width: 80%; | ||||
|         margin: 0 auto; | ||||
|         margin-top: 20px; | ||||
|         display: flex; | ||||
|         align-items: center; | ||||
|         justify-content: space-between; | ||||
|         // direction: rtl; | ||||
| 
 | ||||
|         &-item { | ||||
|           width: 32%; | ||||
|           flex-shrink: 0; | ||||
|           aspect-ratio: 1/0.85; | ||||
|           border-radius: 21px; | ||||
|           background-color: rgba($color: #fff, $alpha: 0.1); | ||||
|           backdrop-filter: blur(10px); | ||||
|           box-sizing: border-box; | ||||
|           padding: 20px; | ||||
|           margin-right: 2%; | ||||
|           transition: all 1s; | ||||
| 
 | ||||
|           &-img-container { | ||||
|             width: 100%; | ||||
|             height: 70%; | ||||
|             // background-color: rgb(253, 57, 178); | ||||
|           } | ||||
| 
 | ||||
|           &-title { | ||||
|             font-size: 24px; | ||||
|             width: 100%; | ||||
|             margin-top: 10px; | ||||
|             font-family: Medium; | ||||
|             color: #0080ff; | ||||
|           } | ||||
| 
 | ||||
|           &-subtitle { | ||||
|             width: 100%; | ||||
|             font-size: 18px; | ||||
|             margin-top: 10px; | ||||
|             color: #fff; | ||||
|             font-family: Thin; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
| 
 | ||||
|       &-slider-btns { | ||||
|         width: 80%; | ||||
|         margin: 0 auto; | ||||
|         margin-top: 30px; | ||||
|         display: flex; | ||||
|         align-items: center; | ||||
|         justify-content: space-between; | ||||
| 
 | ||||
|         &-previous { | ||||
|           display: flex; | ||||
|           align-items: center; | ||||
|           cursor: pointer; | ||||
|           color: #555; | ||||
| 
 | ||||
|           &-icon { | ||||
|             // color: #fff; | ||||
|             font-size: 25px; | ||||
|             margin-right: 10px; | ||||
|           } | ||||
| 
 | ||||
|           &-text { | ||||
|             font-size: 30px; | ||||
|             font-family: Thin; | ||||
|             // color: #fff; | ||||
|           } | ||||
|         } | ||||
| 
 | ||||
|         &-next { | ||||
|           display: flex; | ||||
|           align-items: center; | ||||
|           cursor: pointer; | ||||
| 
 | ||||
|           &-icon { | ||||
|             color: #fff; | ||||
|             font-size: 25px; | ||||
|             margin-left: 10px; | ||||
|           } | ||||
| 
 | ||||
|           &-text { | ||||
|             font-size: 30px; | ||||
|             font-family: Thin; | ||||
|             color: #fff; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| After Width: | Height: | Size: 364 KiB | 
| After Width: | Height: | Size: 20 KiB | 
| After Width: | Height: | Size: 89 KiB | 
| After Width: | Height: | Size: 43 KiB | 
					Loading…
					
					
				
		Reference in new issue