danak/javaneh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

template

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-01 21:26:18 +03:30
parent a6947c37a6
commit 48537c93a5
12 changed files with 857 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+159 -15
View File
@@ -2,22 +2,25 @@
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'Iransans';
src: url('/public/fonts/IRANSansWebFaNum.woff2');
font-family: "Iransans";
src: url("/public/fonts/IRANSansWebFaNum.woff2");
}
body{
html{
overflow-x: hidden;
}
body {
direction: rtl;
font-family: 'Iransans';
background-color: #FAF6F9;
font-family: "Iransans";
background-color: #faf6f9;
max-width: 100vw;
overflow-x: hidden !important;
}
.animate{
-webkit-animation:spin 0.5s linear infinite;
-moz-animation:spin 0.5s linear infinite;
animation:spin 0.3s linear infinite;
.animate {
-webkit-animation: spin 0.5s linear infinite;
-moz-animation: spin 0.5s linear infinite;
animation: spin 0.3s linear infinite;
}
.line2{
.line2 {
stroke: black;
}
.header {
@@ -28,14 +31,155 @@ body{
background-size: cover;
}
@media (min-width: 1024px) {
.header{
@media (min-width: 1024px) {
.header {
background-position: center;
}
}
.test{
background-image: linear-gradient(to bottom, rgba(255,255,255,0), #FAF6F9 70%);
}
.test {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #faf6f9 70%);
width: 100%;
height: 150px;
margin-top: -130px;
}
.fade {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 70%);
width: 100%;
height: 150px;
margin-top: -130px;
}
.imgWrap {
position: relative;
margin: 0% auto;
padding-bottom: 39%;
}
.ourStory{
background-image: url('/public/images/aboutBg.jpg');
background-repeat: no-repeat;
background-size: 100% 155%;
background-position-y: -10vw;
}
@media (max-width: 768px) {
.ourStory{
background-image: url('/public/images/aboutBg.jpg');
background-repeat: no-repeat;
background-size: 180% 155%;
background-position-x: -35vw;
}
.imgWrap {
padding-bottom: 5vw !important;
}
.imgWrap > div {
position: absolute;
top: 0;
width: 44% !important;
height: 58vw !important;
float: left;
background-image: url("/public/images/aboutBg.jpg");
background-size: auto 190%;
object-fit: cover;
background-position: center;
justify-content: center;
justify-items: center;
margin-top: 5vw !important;
/* background-repeat: no-repeat; */
}
.imgWrap .two {
left: -22% !important;
background-position: 18% 50%;
}
.imgWrap .three {
left: 26% !important;
background-position: 50% 50%;
}
.imgWrap .four {
left: 74% !important;
background-position: 85% 50%;
}
}
.imgWrap > div {
position: absolute;
top: 0;
width: 23%;
height: 92%;
float: left;
background-image: url("/public/images/aboutBg.jpg");
background-size: auto 190%;
object-fit: cover;
background-position: center;
justify-content: center;
justify-items: center;
margin-top: 5vw;
/* background-repeat: no-repeat; */
}
.imgWrap > div > div {
height: 99.7%;
width: 99.3%;
border-color: white;
}
.imgWrap .one {
left: -11.5%;
background-position: -13% 50%;
}
.imgWrap .two {
left: 13.5%;
background-position: 18% 50%;
}
.imgWrap .three {
left: 38.5%;
background-position: 50% 50%;
}
.imgWrap .four {
left: 63.5%;
background-position: 85% 50%;
}
.imgWrap .five {
left: 89.5%;
background-position: 111% 50%;
}
.imgWrap .left {
left: 0;
background-position: 3% 0;
}
.imgWrap .center {
left: 34.83%;
background-position: -97% 0;
}
.imgWrap .right {
left: 69.66%;
background-position: -197% 0;
}
.imgWrap > div:before {
content: "";
position: absolute;
top: 0;
right: 100%;
width: 10%;
height: 100%;
background: inherit;
transform-origin: 100% 50%;
transform: rotateY(-90deg);
}
.imgWrap .left:before {
background-position: 0% 0;
}
.imgWrap .center:before {
background-position: -1001.3% 0;
}
.imgWrap .right:before {
background-position: -2001.4% 0;
}
.contact{
background-image: url('/public/images/aboutBg.jpg');
background-image: url('/public/images/aboutBg.jpg');
background-repeat: no-repeat;
background-size: 100% 185%;
background-position-y: -16vw;
}