diff --git a/Ravi_Kumar_Resume(2).pdf b/Ravi_Kumar_Resume(2).pdf new file mode 100644 index 0000000..aa861a7 Binary files /dev/null and b/Ravi_Kumar_Resume(2).pdf differ diff --git a/back.png b/back.png new file mode 100644 index 0000000..cbdc238 Binary files /dev/null and b/back.png differ diff --git a/boy.png b/boy.png new file mode 100644 index 0000000..7f55d4b Binary files /dev/null and b/boy.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..66c4cb6 --- /dev/null +++ b/index.html @@ -0,0 +1,221 @@ + + + + + + Portfolio_webiste + + + + + +
+ +
+

I,m Ravi Kumar

+

This is my official portfolio website + to shows all
Details and work exiprins web development, +

+
+ + +
+
+
+ + +
+
+ + + +
+
+
+ +
+

About Me

+

Hi, I'm Ravi Kumar , a Frontend Developer. I love to create beautiful and performant products with delightful user experiences and always ready to learn new technologies, methods , and principle as per the project requirements.

+
+

Skills

+

Experience

+

Education

+
+
+
    +
  • Frontend Development
    Build Websites using HTML, CSS , Javascript and React js
    • +
  • Backend Development
    MYSQL
    • +
+
+
+
    +
  • 2023 - Current
    Web Developer at Teachnook
  • +
+
+
+
    +
  • B.Tech
    from Netaji Subhash University Of Technology (Delhi) +
    Current CGPA: 7.93
    • +
  • Intermediate
    from St.Anthonys Senior Secondary School
    + Percentage: 75.2
    • +
  • High School
    from St.Anthonys Senior Secondary School
    + CGPA: 8.4
    • +
+
+
+
+
+ + +
+
+

My Services

+
+
+ +

Frontend Developer

+

As a Frontend Developer , I am responsible for developing new user-facing features , determining the structure and design of web pages, building reusable codes, optimizing page loading times and using a variety of markup languages to create the web pages.

+
+
+
+
+ +
+ +
+
+

My Works

+
+
+ work-1 +
+

Amazon Clone

+

Skills used : HTML5, Css3, Javascript and Bootsrap + Features : Proper clone of Amazon landing page which + includes search bar.

+ +
+
+
+ work-2 +
+

Responsive Landing Page

+

Skills used : HTML5, Css3, Javascript and Bootsrap + Features: 1-Having Nav bar. + 2-Using Of Animation and Tranformation properties Of Css. + +

+ +
+
+
+ work-3 +
+

Weather-Forecast

+

Skills used: Javascript and REST-API + Features: 1-Search bar to search for the Cityand get information in your language. + 2-Contains weather details all over world. +

+ +
+
+
+ See more +
+
+
+ +
+
+
+
+

Contact Me

+

ravisidd1122@gmail.com

+

+91 6397173845

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

Copyright ©️ Made by Ravi Kumar

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..25dc2bc --- /dev/null +++ b/style.css @@ -0,0 +1,392 @@ +*{ + margin: 0; + padding: 0; + font-family: sans-serif; +} + +.hero{ + position: relative; + width: 100%; + height: 100vh; + background: #eff4fe; +} + +nav{ + display: flex; + width: 84%; + margin: auto; + padding: 20px 0; + align-items: center; + justify-content: space-between; +} + +.logo{ + width: 50px; + height: 5opx; + box-shadow: 2px 2px white; +} +nav ul li{ + display: inline-block; + list-style: none; + margin: 10px 20px; +} + +nav ul li a{ + text-decoration: none; + color: black; + font-weight: bold; + +} + +nav ul li a:hover{ + background-color:orange; + color: white; + transition: 0.6s linear; + +} + +.detail{ + margin-left: 8%; + margin-top: 15%; + +} + +.detail h1{ + font-size: 50px; + color: #212121; + margin-bottom: 20px; +} + +span{ + color: orange; + text-shadow: 2px 3px black; + transform: translateX(20px); +} + +.detail p{ + color: #555; + line-height: 22px; +} + +.icon{ + display: flex; +} + +.icon i{ + margin-top: 20px; + font-size: 40px; + margin-right: 50px; + width: 20px; + height: 20px; + text-shadow: 1px 2px black; + +} + +.image{ + width: 45%; + height: 80%; + position: absolute; + bottom: 0; + right: 100px; +} + +.image img{ + height: 100%; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + transition: bottom 1s, left 1s; + +} + +.image:hover .shape{ + bottom: 40px; +} + +.image:hover .girl{ + left: 45%; +} + +#about{ + background-color: #eff4fe; + background-size: cover; + + background-position: center; + padding: 40px 0; + color: #ababab; +} + +.about-col-2{ + text-align: center; + /* flex-basis: 60%; */ +} +.about-col-2 p{ + font-size: 20px; + text-align: center; + line-height: 1.5; +} +.sub-title{ + text-align: center; + margin-bottom: 20px; + font-size: 60px; + font-weight: 600; + color: orange; + text-shadow: 2px 2px black; +} +.tab-titles{ + text-align: center; + display: flex; + justify-content: center; + margin: 20px 0 40px; +} +.tab-links{ + margin-right: 50px; + font-size: 18px; + font-weight: 700; + cursor: pointer; + position: relative; + color: #212121; + text-shadow: 1px 1px black; +} +.tab-links::after{ + content: ''; + width: 0; + height: 3px; + background: #ABC270; + position: absolute; + left: 0; + bottom: -8px; + transition: 0.5s; +} +.tab-links.active-link::after{ + width: 50%; +} +.tab-contents ul li{ + list-style: none; + margin: 10px 0; +} +.tab-contents ul li span{ + color: #fa781b; + text-shadow: 1px 0px #fa781b; + font-weight: bolder; + font-size: 20px; + +} +.tab-contents{ + display: none; +} +.tab-contents.active-tab{ + display: block; + color: #555; +} + +#services{ + background-size: cover; + + background-position: center; + padding: 10px 0; + text-align: center; +} +.services-list{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 40px; + margin-top: 50px; +} +.services-list div{ + width: 600px; + margin-left: 300px; + background: #c48303; + padding: 40px; + border-radius: 10px; + font-size: 13px; + font-weight: 300; + transition: background 0.5s, transform 0.5s; +} +.services-list div i{ + font-size: 50px; + margin-bottom: 30px; +} +.services-list div h2{ + font-size: 30px; + font-weight: 700; + margin-bottom: 15px; +} +.services-list div a{ + text-decoration: none; + color: #fff; + font-size: 12px; + margin-top: 20px; + display: inline-block; +} +.services-list div:hover{ + background: #ebc053; + color: #fff; + transform: translateY(-10px); +} + + +#works{ + padding: 20px 0; + background-size: cover; + background-position: center; + margin-left: 40px; +} +.works-list{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 40px; + margin-top: 50px; +} +.work{ + border-radius: 10px; + position: relative; + overflow: hidden; +} +.work img{ + height: 80%; + width: 80%; + border-radius: 10px; + transition: transform 0.5s; + +} +.layer{ + position: absolute; + width: 100px; + height: 0; + background: linear-gradient(rgba(0,0,0,0.6), #ABC270); + border-radius: 10px; + left: 0; + bottom: 0; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + font-size: 14px; + transition: height 0.5s; +} +.layer h3{ + font-weight: 500; + margin-bottom: 20px; +} +.layer a{ + margin-top: 20px; + color: #c2a570; + text-decoration: none; + font-size: 18px; + line-height: 60px; + background: #fff; + width: 60px; + height: 60px; + border-radius: 50%; + /* text-align: center; */ +} +.work:hover img{ + transform: scale(1.1); +} +.work:hover .layer{ + height: 100%; +} +.btn{ + display: block; + margin: 40px auto; + width: fit-content; + border: 1px solid #ABC270; + padding: 14px 50px; + border-radius: 6px; + text-decoration: none; + color: #014a11; + transition: background 0.5s; +} +.btn:hover{ + background: #ABC270; + color: aliceblue; +} + + +#contact{ + background-color: #eff4fe; +} +.contact-left{ + flex-basis: 30%; +} +.contact-right{ + flex-basis: 55%; +} +.contact-left p{ + padding-top: 30px; + margin-right: 20px; + +} +.contact-left p i{ + color: #f88d12; + margin-right: 20px; + font-size: 25px; + margin-left: 40px; +} +.social-icons{ + margin-top: 30px; + margin-left: 40px; +} +.social-icons a{ + text-decoration: none; + font-size: 30px; + margin-right: 10px; + color: #fc8c14; + display: inline-block; + transition: transform 0.5s; +} +.social-icons a:hover{ + color: #fa9405; + transform: translateY(-5px); +} +.btn.btn2{ + display: inline-block; + background: rgb(238, 175, 58); + margin-left: 40px; +} +.contact-right form{ + width: 100%; +} +.contact-right form input, textarea{ + width: 90%; + border: 0; + outline: none; + background: #c7c3c3; + margin: 15px 0; + padding: 15px; + color: #fff; + font-size: 18px; + border-radius: 6px; + margin-left: 40px; +} +.contact-right form .btn2{ + padding: 14px 60px; + margin-top: 20px; + font-size: 18px; + cursor: pointer; + margin-left: 40px; +} +.copyright{ + width: 100%; + text-align: center; + padding: 25px 0; + background: #3a3939; + font-weight: 300; + margin-top: 20px; +} +.copyright i{ + color: #ABC270; +} +.copyright a{ + text-decoration: none; + color: #fff; +} +.copyright a:hover{ + color: #fe9e04; + text-shadow: 1px 0px; +} \ No newline at end of file diff --git a/th-removebg-preview (1).png b/th-removebg-preview (1).png new file mode 100644 index 0000000..01327b1 Binary files /dev/null and b/th-removebg-preview (1).png differ