parent
							
								
									06623f8a24
								
							
						
					
					
						commit
						a50605c711
					
				
				 5 changed files with 173 additions and 2 deletions
			
			
		| 
		 After Width: | Height: | Size: 67 KiB  | 
@ -0,0 +1,48 @@ | 
				
			|||||||
 | 
					import React, { Component } from "react"; | 
				
			||||||
 | 
					import ArabickarImg from "../../assets/images/origami.jpg"; | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					class Arabickar extends Component { | 
				
			||||||
 | 
					  render() { | 
				
			||||||
 | 
					    return ( | 
				
			||||||
 | 
					      <div | 
				
			||||||
 | 
					        style={{ | 
				
			||||||
 | 
					          display: "flex", | 
				
			||||||
 | 
					          flexDirection: "column", | 
				
			||||||
 | 
					          width: "100%", | 
				
			||||||
 | 
					          textAlign: "center", | 
				
			||||||
 | 
					          height: "100vh", | 
				
			||||||
 | 
					        }} | 
				
			||||||
 | 
					      > | 
				
			||||||
 | 
					        <img | 
				
			||||||
 | 
					          src={ArabickarImg} | 
				
			||||||
 | 
					          alt={"حرفة ورقية"} | 
				
			||||||
 | 
					          style={{ | 
				
			||||||
 | 
					            padding: "5px", | 
				
			||||||
 | 
					            maxHheight: "70vh", | 
				
			||||||
 | 
					            maxWidth: "80vw", | 
				
			||||||
 | 
					            margin: "auto", | 
				
			||||||
 | 
					          }} | 
				
			||||||
 | 
					        /> | 
				
			||||||
 | 
					        <a | 
				
			||||||
 | 
					          style={{ | 
				
			||||||
 | 
					            display: "flex", | 
				
			||||||
 | 
					            backgroundColor: "#0099ff", | 
				
			||||||
 | 
					            color: "#fff", | 
				
			||||||
 | 
					            textDecoration: "none", | 
				
			||||||
 | 
					            textAlign: "center", | 
				
			||||||
 | 
					            margin: "30px auto", | 
				
			||||||
 | 
					            fontSize: "20px", | 
				
			||||||
 | 
					            fontWeight: "bold", | 
				
			||||||
 | 
					            padding: "5px 80px", | 
				
			||||||
 | 
					            borderRadius: "5px", | 
				
			||||||
 | 
					          }} | 
				
			||||||
 | 
					          href="https://zil.ink/arabickar" | 
				
			||||||
 | 
					        > | 
				
			||||||
 | 
					          حرفة ورقية | 
				
			||||||
 | 
					        </a> | 
				
			||||||
 | 
					      </div> | 
				
			||||||
 | 
					    ); | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default Arabickar; | 
				
			||||||
@ -0,0 +1,114 @@ | 
				
			|||||||
 | 
					.faq { | 
				
			||||||
 | 
					  width: 100vw; | 
				
			||||||
 | 
					  max-width: 1250px; | 
				
			||||||
 | 
					  margin: 0px auto; | 
				
			||||||
 | 
					  padding: 0px 10px; | 
				
			||||||
 | 
					  direction: rtl; | 
				
			||||||
 | 
					  min-height: calc(100vh - 288px); | 
				
			||||||
 | 
					  padding-top: 70px; | 
				
			||||||
 | 
					  &__header { | 
				
			||||||
 | 
					    margin-top: 30px; | 
				
			||||||
 | 
					    width: 600px; | 
				
			||||||
 | 
					    h1 { | 
				
			||||||
 | 
					      letter-spacing: -2px; | 
				
			||||||
 | 
					      font-family: numeralMedium; | 
				
			||||||
 | 
					      font-size: calc(100vw / 25); | 
				
			||||||
 | 
					      color: #424246; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    &--search { | 
				
			||||||
 | 
					      margin-top: 20px; | 
				
			||||||
 | 
					      width: 100%; | 
				
			||||||
 | 
					      border: 2px solid rgb(197, 197, 197); | 
				
			||||||
 | 
					      border-radius: 10px; | 
				
			||||||
 | 
					      padding: 5px; | 
				
			||||||
 | 
					      justify-content: space-between; | 
				
			||||||
 | 
					      input { | 
				
			||||||
 | 
					        border: 0px; | 
				
			||||||
 | 
					        flex: 1; | 
				
			||||||
 | 
					        border: 0px; | 
				
			||||||
 | 
					        font-size: calc(100vw / 90); | 
				
			||||||
 | 
					        color: green; | 
				
			||||||
 | 
					        padding: 0px 10px 0px; | 
				
			||||||
 | 
					        font-size: 16px; | 
				
			||||||
 | 
					        font-family: numeralMedium; | 
				
			||||||
 | 
					        &::placeholder { | 
				
			||||||
 | 
					          color: #d8dce5; | 
				
			||||||
 | 
					          font-size: 16px; | 
				
			||||||
 | 
					        } | 
				
			||||||
 | 
					        &:focus { | 
				
			||||||
 | 
					          outline: 0px !important; | 
				
			||||||
 | 
					        } | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      button { | 
				
			||||||
 | 
					        font-family: numeralMedium; | 
				
			||||||
 | 
					        border: 0px; | 
				
			||||||
 | 
					        background-color: #7dc241; | 
				
			||||||
 | 
					        color: white; | 
				
			||||||
 | 
					        border-radius: 10px; | 
				
			||||||
 | 
					        padding: 7px 50px; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  &__list { | 
				
			||||||
 | 
					    width: 100%; | 
				
			||||||
 | 
					    max-width: 1000px; | 
				
			||||||
 | 
					    margin: 30px 0px; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.mobile-faq { | 
				
			||||||
 | 
					  width: 100vw; | 
				
			||||||
 | 
					  max-width: 650px; | 
				
			||||||
 | 
					  margin: 0px auto; | 
				
			||||||
 | 
					  padding: 0px 10px; | 
				
			||||||
 | 
					  direction: rtl; | 
				
			||||||
 | 
					  overflow-x: hidden; | 
				
			||||||
 | 
					  padding-top: 70px; | 
				
			||||||
 | 
					  &__header { | 
				
			||||||
 | 
					    margin-top: 30px; | 
				
			||||||
 | 
					    width: 100%; | 
				
			||||||
 | 
					    h1 { | 
				
			||||||
 | 
					      letter-spacing: -2px; | 
				
			||||||
 | 
					      font-family: numeralMedium; | 
				
			||||||
 | 
					      color: #424246; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    input { | 
				
			||||||
 | 
					      border: 0px; | 
				
			||||||
 | 
					      flex: 1; | 
				
			||||||
 | 
					      border: 0px; | 
				
			||||||
 | 
					      color: green; | 
				
			||||||
 | 
					      padding: 0px 10px 0px; | 
				
			||||||
 | 
					      font-size: 16px; | 
				
			||||||
 | 
					      font-family: numeralMedium; | 
				
			||||||
 | 
					      border: 1px solid #afafaf; | 
				
			||||||
 | 
					      border-radius: 10px; | 
				
			||||||
 | 
					      width: 100%; | 
				
			||||||
 | 
					      padding: 8px 5px; | 
				
			||||||
 | 
					      margin: 15px 0px; | 
				
			||||||
 | 
					      max-width: 400px; | 
				
			||||||
 | 
					      &::placeholder { | 
				
			||||||
 | 
					        color: #d8dce5; | 
				
			||||||
 | 
					        font-size: 16px; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					      &:focus { | 
				
			||||||
 | 
					        outline: 0px !important; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    button { | 
				
			||||||
 | 
					      font-family: numeralMedium; | 
				
			||||||
 | 
					      border: 0px; | 
				
			||||||
 | 
					      background-color: #7dc241; | 
				
			||||||
 | 
					      color: white; | 
				
			||||||
 | 
					      border-radius: 10px; | 
				
			||||||
 | 
					      padding: 7px 50px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  &__list { | 
				
			||||||
 | 
					    width: 100%; | 
				
			||||||
 | 
					    max-width: 1000px; | 
				
			||||||
 | 
					    margin: 30px 0px; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
					Loading…
					
					
				
		Reference in new issue