diff --git a/home.jpg b/home.jpg new file mode 100644 index 0000000..254be3b Binary files /dev/null and b/home.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..7eee973 --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + + + + Fezin. + + + + +
+ + + + +
+ +
+
+

Hi, I'am Fezin Aniq

+

Web Developer

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non molestiae dolor ex quisquam incidunt dolores animi error, minus molestias autem illo quo vel, ullam fugit facere enim.

+
+ Hire me + Let's Talk +
+ +
+ +
+ + + +
+ +
+ + + \ No newline at end of file diff --git a/logo hider.png b/logo hider.png new file mode 100644 index 0000000..7e7d853 Binary files /dev/null and b/logo hider.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..e4ecafc --- /dev/null +++ b/style.css @@ -0,0 +1,183 @@ + @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body{ + background: #081b29; + color: #ededed; +} + +.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{ + position: relative; + font-size: 25px; + color: #ededed; + text-decoration: none; + font-weight: 600; +} + +.logo::before{ + content: ''; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + background: url('logo hider.png'); + animation: showRight 1s ease forwards; + animation-delay: 0.4s; +} + +.navbar a{ + font-size: 18px; + color: #ededed; + text-decoration: none; + font-weight: 500; + margin-left: 35px; + transition: 0.3s; +} + +.navbar a:hover, +.navbar a.active{ + color: #00abf0; +} + +.home{ + height: 100vh; + background: url('home.jpg') no-repeat; + background-size: cover; + background-position: center; + display: flex; + align-items: center; + padding: 0 10%; +} + +.home-content{ + max-width: 600px; +} + +.home-content h1{ + font-size: 56px; + font-weight: 700; + line-height: 1.2; +} + +.home-content h3{ + font-size: 32px; + font-weight: 700; + color: #00abf0; +} + + + +.home-content p{ + font-size: 16px; + margin: 20px 0 40px; +} + +.home-content .btn-box{ + display: flex; + justify-content: space-between; + width: 345px; + height: 50px; +} + +.btn-box a{ + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + width: 150px; + height: 100%; + background: #00abf0; + border: 2px solid #00abf0; + border-radius: 8px; + font-size: 19px; + color:#081b29; + text-decoration: none; + font-weight: 600px; + letter-spacing: 1px; + z-index: 1; + overflow: hidden; + transition: 0.5s; +} + + +.home-sci{ + position: absolute; + bottom: 40px; + width: 170px; + display: flex; + justify-content: space-between; +} + +.home-sci a{ + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + background: transparent; + border: 2px solid #00abf0; + border-radius: 50%; + font-size: 20px; + color: #00abf0; + text-decoration: none; + z-index: 1; + overflow: hidden; + transition: 0.5s; +} + +.home-sci a:hover{ + color: #081b29; +} + +.home-sci a::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + background: #00abf0; + z-index: -1; + transition: 0.5s; +} + +.home-sci a:hover::before{ + width: 100%; + +} + +/* key frames animation*/ +@keyframes showRight { + 100%{ + width: 0; + } + + 50%{ + + } + + 0%{ + + } +} \ No newline at end of file