diff --git a/IMG_E9600.JPG b/IMG_E9600.JPG new file mode 100644 index 0000000..1f76184 Binary files /dev/null and b/IMG_E9600.JPG differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b355955 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + + + Document + + +
+ + + +
+
+
+

Hello, It's Me

+

Fatemeh Aalipour

+

And I'm a

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis unde aliquid in praesentium?

+ + Download CV +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b36225a --- /dev/null +++ b/script.js @@ -0,0 +1,7 @@ +var typed = new Typed(".multiple-text",{ + strings:["Frontend Developer" , "computer engineer" ,"web programmer" , " I live in Shahrekord"], + typeSpeed : 100, + backSpeed : 100, + backDelay : 1000, + loop:true +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..4426336 --- /dev/null +++ b/style.css @@ -0,0 +1,225 @@ +*{ + margin: 0px; + padding: 0px; + font-family: 'Gill Sans', 'Gill Sans MT'; + box-sizing: border-box; +} + +body{ + background: #1f242d; + color: #fff; +} + +.header{ + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 20px 10%; + background: transparent; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 100; +} + +.logo{ + font-size: 25px; + color: white; + font-weight: 600; + cursor: default; + opacity: 0; + animation: slideRight 1s ease forwards; + +} + + +.navbar a{ + display: inline-block; + font-size: 18px; + text-decoration: none; + color: white; + font-weight: 500; + padding: 5px; + margin-right: 50px; + transition: .3s; + opacity: 0; + animation: slideTop .5s ease forwards; + animation-delay: calc(.2s * var(--i)); +} + + +.navbar a:hover, +.navbar a.active{ + color: #0ef; +} + +.home{ + position: relative; + width: 100%; + height: 100vh; + display: flex; + justify-content: space-between; + align-items: center; + padding: 70px 10% 0; +} + + +.home-content{ + max-width: 600px; +} + +.home-content h3{ + font-size: 32px; + font-weight: 700; + opacity: 0; + animation: slideBottom 1s ease forwards; + animation-delay: .7s ; +} + +.home-content h3 span{ + color: #0ef; +} + +.home-content h3:nth-last-of-type(2){ + margin-bottom: 30px; + animation: slideTop 1s ease forwards; + animation-delay: .7s ; +} + +.home-content h1{ + font-size: 56px; + font-weight: 700; + margin: -3px 0; + opacity: 0; + animation: slideRight 1s ease forwards; + animation-delay: 1s; +} + +.home-content p{ + font-size: 16px; + opacity: 0; + animation: slideLeft 1s ease forwards; + animation-delay: 1s; +} + + + +.home-img img{ + max-width: 450px; + margin-right: 30px; + border: 3px solid #0ef; + border-radius: 50%; + opacity: 0; + animation: zoomIn .5s ease forwards,floatImage 4s ease-out infinite; + animation-delay: 2s,3s ; + + +} + +.social-mediya a{ + display: inline-flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + background: transparent; + border: 2px solid #0ef; + border-radius: 50%; + font-size: 20px; + color: #0ef; + text-decoration: none; + margin: 30px 15px 30px 0px ; + transition: .5s ease; + opacity: 0; + animation: slideRight 1s ease forwards; + animation-delay: calc(.2s*var(--i)); +} + +.social-mediya a:hover{ + background: #0ef; + color: #1f242d; +} + +.btn{ + display: inline-block; + padding: 12px 28px; + background: #0ef; + border-radius: 40px; + box-shadow: 0 0 10px #0ef; + color: #1f242d; + letter-spacing: 1px; + text-decoration: none; + font-weight: 600; + opacity: 0; + animation: slideTop .5s ease forwards; + animation-delay: 2s ; +} + +@keyframes slideRight{ + 0%{ + transform: translateX(-100px); + } + 100%{ + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideLeft{ + 0%{ + transform: translateY(100px); + } + 100%{ + transform: translateY(0); + opacity: 1; + } +} + +@keyframes slideTop{ + 0%{ + transform: translateY(100px); + } + 100%{ + transform: translateY(0); + opacity: 1; + } +} + + +@keyframes slideBottom{ + 0%{ + transform: translateY(-100px); + } + 100%{ + transform: translateY(0); + opacity: 1; + } +} + + +@keyframes zoomIn{ + 0%{ + transform: scale(0); + opacity: 0; + } + 100%{ + transform: scale(1); + opacity: 1; + } +} + + +@keyframes floatImage{ + 0%{ + transform: translateY(0); + } + 50%{ + transform: translateY(-24px); + } + 100%{ + + } +} + +