diff --git a/images/Portfolio.png b/images/Portfolio.png new file mode 100644 index 0000000..bf79276 Binary files /dev/null and b/images/Portfolio.png differ diff --git a/images/abbbb-removebg-preview.png b/images/abbbb-removebg-preview.png new file mode 100644 index 0000000..bc8a220 Binary files /dev/null and b/images/abbbb-removebg-preview.png differ diff --git a/images/abbbb.png b/images/abbbb.png new file mode 100644 index 0000000..469e692 Binary files /dev/null and b/images/abbbb.png differ diff --git a/images/about.jpg b/images/about.jpg new file mode 100644 index 0000000..be9e071 Binary files /dev/null and b/images/about.jpg differ diff --git a/images/girl-removebg-preview.png b/images/girl-removebg-preview.png new file mode 100644 index 0000000..6005919 Binary files /dev/null and b/images/girl-removebg-preview.png differ diff --git a/images/girl.jpg b/images/girl.jpg new file mode 100644 index 0000000..491f0e7 Binary files /dev/null and b/images/girl.jpg differ diff --git a/images/html_tutorial.pdf b/images/html_tutorial.pdf new file mode 100644 index 0000000..285e658 Binary files /dev/null and b/images/html_tutorial.pdf differ diff --git a/images/port2-removebg-preview.png b/images/port2-removebg-preview.png new file mode 100644 index 0000000..f33313c Binary files /dev/null and b/images/port2-removebg-preview.png differ diff --git a/images/port2.png b/images/port2.png new file mode 100644 index 0000000..c93bf1e Binary files /dev/null and b/images/port2.png differ diff --git a/images/skill.svg b/images/skill.svg new file mode 100644 index 0000000..cf05d21 --- /dev/null +++ b/images/skill.svg @@ -0,0 +1,292 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/star-removebg-preview.png b/images/star-removebg-preview.png new file mode 100644 index 0000000..c0ac6ab Binary files /dev/null and b/images/star-removebg-preview.png differ diff --git a/images/star.png b/images/star.png new file mode 100644 index 0000000..447de62 Binary files /dev/null and b/images/star.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ad173a4 --- /dev/null +++ b/index.html @@ -0,0 +1,141 @@ + + + + + + + + Document + + + + + + + +
+ + +
+

I'm Farzan Muhammed

+

This is my official portfolio website to describe
all details and work + experience in web development

+ Download CV +
+
+ + +
+ + + +
+
+

About

+ Introduction +
+ + +
+
+ +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea saepe natus, exercitationem molestiae + dicta soluta officiis voluptate impedit enim commodi ullam illum? Aliquam accusamus, odio + impedit ipsa numquam commodi possimus + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea saepe natus, exercitationem + molestiae dicta soluta officiis voluptate impedit enim commodi ullam illum? Aliquam accusamus, + odio impedit ipsa numquam commodi possimus + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea saepe natus, exercitationem + molestiae dicta soluta officiis voluptate impedit enim commodi ullam illum? Aliquam accusamus, + odio impedit ipsa numquam commodi possimus +

+
+
+ Muhammed Rihan +
+
+ 8137065541 +
+
+ riha12@gmail.com +
+
+
+
+ +
+
+
+

Skills

+ My skills +
+
+
+ +
+

HTML

+ 93% +
+
+
+
+

CSS

+ 87% +
+
+
+
+

JavaScript

+ 84% +
+
+
+
+

Angular

+ 87% +
+
+
+
+
+ +
+
+ +
+ +
+
+

Contacts

+ My contacts +
+
+
+
+
+
+
+ + + +
+ + +
+ + + \ No newline at end of file diff --git a/note.txt b/note.txt new file mode 100644 index 0000000..8872e29 --- /dev/null +++ b/note.txt @@ -0,0 +1,5 @@ +inline element n margin kodkkan pattilla + +display: inline-block; + +psedo \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ac67b8b --- /dev/null +++ b/style.css @@ -0,0 +1,295 @@ +* { + padding: 0; + margin: 0; + font-family: "Playwrite NG Modern", cursive; +} + +#container { + width: 100%; + height: 100vh; + position: relative; +} + +nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-left: 30px; +} + +.list-items { + display: inline; + margin: 0px 20px 20px; +} + +.links { + text-decoration: none; + font-size: 17px; + color: black; + font-weight: bold; +} + +.h-content { + /* margin-top: 130px; + margin-left: 8%; */ + margin: 13% 0% 0% 8%; +} + +#uname { + font-size: 40px; + margin-bottom: 18px; + font-family: "Playwrite AT", cursive; +} + +#lname { + font-size: 40px; + color: rgb(255, 67, 67); +} + +#user-details { + line-height: 1.5; + margin-bottom: 25px; +} + +.downd { + display: inline-block; + text-decoration: none; + background-color: black; + color: white; + margin: 10px; + border-radius: 5px; +} + +.links:hover { + color: orangered; +} + +.h-images { + width: 45%; + height: 80%; + position: absolute; + bottom: 0%; + right: 40px; +} + +.grop1 { + + height: 100%; + position: absolute; + bottom: 0px; + left: 50%; + transform: translateX(-50%); + transition: bottom 2s, left 1s; +} + +.h-images:hover #shape { + bottom: 40px; +} + +.h-images:hover #girl { + left: 45%; +} + +#about { + margin: 15% 8% 0% 8%; +} + +.section-head { + text-align: center; +} + +.main-head { + font-size: 40px; + +} + +.sub-head { + font-size: 20px; + color: rgb(114, 180, 15); + + +} + +.about-content { + display: flex; + align-items: center; + margin-top: 30px; + /* padding: 10px; */ + +} + +/* #about-image > img{ + /* height: 300px; + width: 400px; */ +/* } */ +*/ .about-details { + font-size: 18px; + text-align: justify; + padding: 50px; +} + +.intormation { + margin-top: 20px; +} + +.info-box { + display: flex; + align-items: center; + text-decoration: none; +} + +.info-box>span { + margin-left: 20px; +} + +#in { + text-decoration: none; +} + + +.skills { + margin: 8% 8% 0% 8%; + +} + +.myskills { + width: 100%; +} + +.skill-content { + display: grid; + grid-template-columns: repeat(2, 1fr); + /* grid-template-columns: 1fr 1fr; */ + gap: 2rem; + margin-top: 20px; + align-items: center; +} + +.bar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 0px; + position: relative; +} + +.bar-head, +.bar-perc { + font-size: 1.1rem; + font-weight: 550; +} + +.base-bar { + width: 100%; + height: 0.5rem; + border-radius: 0.5rem; + background-color: rgb(88, 82, 82); + bottom: 0px; + position: absolute; +} + +.html-bar { + width: 93%; + background-color: tomato; +} + +.css-bar { + width: 87%; + background-color: tomato; +} + +.js-bar { + width: 82%; + background-color: tomato; +} + +#contact { + margin: 8%; +} + +.icon-collection { + display: flex; + align-items: center; + justify-content: center; + margin-top: 40px; + /* position: relative; */ +} + +.icon{ + /* position: absolute; */ + height: 50px; + width: 50px; + border-radius: 30px; + /* border: 2px solid black; */ + background-color: gray; + display: flex; + align-items: center; + justify-content: center; + margin: 0px 8px; +} + +.icon:hover{ + background-image: linear-gradient(to bottom right, white,yellow, rgb(255, 70, 24), red); +} + +.brand{ + color: black; + font-size: 26px; +} + +.brand:hover{ + color: white; +} + +@keyframes rotates { + 0%{ + transform: rotate(30deg); + }20%{ + transform: rotate(-30deg); + } + 40%{ + transform: rotate(30deg); + }60%{ + transform: rotate(-30deg); + }80%{ + transform: rotate(30deg); + }100%{ + transform: rotate(-30deg); + } + +} + +.icon:hover{ + /* animation-name: rotates; */ + animation: rotates 1s; +} + +#copyright{ + text-align: center; + font-weight: bold; + font-size: 15px; +} + +.up-arow{ + float: right; + margin: -40px 30px 30px 0px; +} + +html{ + scroll-behavior: smooth; +} + +::-webkit-scrollbar{ + width: 20px; + border-radius: 10px; + /* color: yellow; */ +} + +::-webkit-scrollbar-track{ + background-color: azure; +} + +::-webkit-scrollbar-thumb{ + background-color: rgb(236, 240, 34); + border-radius: 20px; +}