diff --git a/Web Development/Task/README.md b/Web Development/Task/README.md index 9464c1be..7a582b99 100644 --- a/Web Development/Task/README.md +++ b/Web Development/Task/README.md @@ -1,28 +1,28 @@ -1. First of all, **`pull the upstream repository`** (like you did in Open Source Task-2) to update your local repository - -2. Create a **webpage** having **`About Me`**, **`My Interests`**, **`Gallery`**, **`Contact Me`**. You can add other sections, images or multiple pages, that's up to your creativity. To get you started, a screenshot of a sample webpage is provided. -

- -

- -4. Change the text and images according to your preferences. - -5. You can select color codes and font styles of your own choice but make sure that the format of the webpage is same as the sample given to you. - -6. Main points to keep in mind:
- i) Your page should be [**`Responsive`**](https://web.dev/learn/design/)
- ii) **`Do not copy the sample`**. The fields should be same but play with your creativity - -7. Next, you have to **host your website** on your GitHub Account. [Click here to learn how to host a website in GitHub.](https://youtu.be/OltY8JIaP-4) - -8. After completion of the above steps, make a folder of **``** inside the [Task Submission](./Task%20Submission/) folder. - -9. **Inside your designated folder add your `HTML` file, `CSS` file , a `link` text file containing the URL of your webpage hosted on GitHub and a **`screenshot`** of your task**. Make sure that you have added the images used in the website in the folder. -The folder `Induction-2024/Web Development/Task/Task Submission/Khitish Kumar Pradhan/` is uploaded for reference. - -10. Finally commit your changes and `create a pull request` along with the **URL of your webpage hosted in the description section of the Pull request**. - -If you are facing any problems or having any doubts feel free to ask in the discord server. - -All the best!!
-Team Enigma 💚 +1. First of all, **`pull the upstream repository`** (like you did in Open Source Task-2) to update your local repository + +2. Create a **webpage** having **`About Me`**, **`My Interests`**, **`Gallery`**, **`Contact Me`**. You can add other sections, images or multiple pages, that's up to your creativity. To get you started, a screenshot of a sample webpage is provided. +

+ +

+ +4. Change the text and images according to your preferences. + +5. You can select color codes and font styles of your own choice but make sure that the format of the webpage is same as the sample given to you. + +6. Main points to keep in mind:
+ i) Your page should be [**`Responsive`**](https://web.dev/learn/design/)
+ ii) **`Do not copy the sample`**. The fields should be same but play with your creativity + +7. Next, you have to **host your website** on your GitHub Account. [Click here to learn how to host a website in GitHub.](https://youtu.be/OltY8JIaP-4) + +8. After completion of the above steps, make a folder of **``** inside the [Task Submission](./Task%20Submission/) folder. + +9. **Inside your designated folder add your `HTML` file, `CSS` file , a `link` text file containing the URL of your webpage hosted on GitHub and a **`screenshot`** of your task**. Make sure that you have added the images used in the website in the folder. +The folder `Induction-2024/Web Development/Task/Task Submission/Khitish Kumar Pradhan/` is uploaded for reference. + +10. Finally commit your changes and `create a pull request` along with the **URL of your webpage hosted in the description section of the Pull request**. + +If you are facing any problems or having any doubts feel free to ask in the discord server. + +All the best!!
+Team Enigma 💚 diff --git a/Web Development/Task/Task Submission/Aditya portfolio/2.jpeg b/Web Development/Task/Task Submission/Aditya portfolio/2.jpeg new file mode 100644 index 00000000..4447b19a Binary files /dev/null and b/Web Development/Task/Task Submission/Aditya portfolio/2.jpeg differ diff --git a/Web Development/Task/Task Submission/Aditya portfolio/Link.txt b/Web Development/Task/Task Submission/Aditya portfolio/Link.txt new file mode 100644 index 00000000..a72bfa7c --- /dev/null +++ b/Web Development/Task/Task Submission/Aditya portfolio/Link.txt @@ -0,0 +1 @@ +https://imadr17.github.io/Aditya-Ranjan-Nayak/ \ No newline at end of file diff --git a/Web Development/Task/Task Submission/Aditya portfolio/bg.png b/Web Development/Task/Task Submission/Aditya portfolio/bg.png new file mode 100644 index 00000000..fd1262c1 Binary files /dev/null and b/Web Development/Task/Task Submission/Aditya portfolio/bg.png differ diff --git a/Web Development/Task/Task Submission/Aditya portfolio/github.png b/Web Development/Task/Task Submission/Aditya portfolio/github.png new file mode 100644 index 00000000..9490ffc6 Binary files /dev/null and b/Web Development/Task/Task Submission/Aditya portfolio/github.png differ diff --git a/Web Development/Task/Task Submission/Aditya portfolio/index.html b/Web Development/Task/Task Submission/Aditya portfolio/index.html new file mode 100644 index 00000000..f7e725fd --- /dev/null +++ b/Web Development/Task/Task Submission/Aditya portfolio/index.html @@ -0,0 +1,74 @@ + + + + + + + + My Portfolio + + + +
+
+

Hello, I'm
Aditya Ranjan Nayak

+

About Me!

+

Greetings to everyone,I am a budding programmer, and a tech enthusiast from VSSUT,Burla. I have keen interest in Web development,and to explore the various horizons of tech fields. I am also interested in playing eSports. I am looking forward to connect with more and more people and collabrate with them to build some awesome projects.

+ + +
+
+ profile picture +

Frontend Developer

+
+ +
+ + +
+

Gallery

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

Interests

+
  • Web dev
    • +
  • Cloud computing
    • +
  • Playing eSports
    • + +
    + +
    +

    Contact Me

    + +
    +
    + github + +
    +
    + instagram + +
    +
    + + + + +
    + + + + diff --git a/Web Development/Task/Task Submission/Aditya portfolio/instagram.jpg b/Web Development/Task/Task Submission/Aditya portfolio/instagram.jpg new file mode 100644 index 00000000..1e56be2c Binary files /dev/null and b/Web Development/Task/Task Submission/Aditya portfolio/instagram.jpg differ diff --git a/Web Development/Task/Task Submission/Aditya portfolio/pic.jpeg b/Web Development/Task/Task Submission/Aditya portfolio/pic.jpeg new file mode 100644 index 00000000..dcaf80f8 Binary files /dev/null and b/Web Development/Task/Task Submission/Aditya portfolio/pic.jpeg differ diff --git a/Web Development/Task/Task Submission/Aditya portfolio/style.css b/Web Development/Task/Task Submission/Aditya portfolio/style.css new file mode 100644 index 00000000..0bc058c5 --- /dev/null +++ b/Web Development/Task/Task Submission/Aditya portfolio/style.css @@ -0,0 +1,97 @@ + + +body{ + margin: 0; + padding: 0; + } + .first-section{ + display: flex; + height: max-content; + width: 100%; + padding: 50px; + } + .first-text-section{ + width: 50%; + font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + } + .first-text-section>h1{ + font-size: 69px; + } + .first-text-section>h2{ + font-size: 55px; + margin-bottom: 0; + } + .name-colour{ + color : mediumblue + + ; + } + .image-first-section{ + width: 50%; + margin-left: 25%; + + } + + .firstimage{ + height: 450px; + border-radius: 10%; + + } + .developer-colour{ + color:rgb(253, 186, 3); + + } + .second-section-heading{ + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + } + .images{ + height: 350px; + display: flex; + justify-content: space-evenly; + + } + + + #pic2 img{ + height: 350px; + display:flex; + justify-content: space-evenly; + }#pic3 img{ + height: 350px; + display:flex; + justify-content: space-evenly; + } + + + + + + footer{ + border-top: 3px solid black; + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + } + .buttons{ + display: flex; + justify-content: space-around; + } + #github img{ + height:50px; + + } + #linkedin img{ + height:50px ; + + } + #instagram img{ + height:50px; + + + } + +.interests{ + border-top: 3px solid black; + text-align: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} diff --git a/Web Development/Task/Task Submission/Khitish Kumar Pradhan/index.html b/Web Development/Task/Task Submission/Khitish Kumar Pradhan/index.html index 4e05307b..0e136c0b 100644 --- a/Web Development/Task/Task Submission/Khitish Kumar Pradhan/index.html +++ b/Web Development/Task/Task Submission/Khitish Kumar Pradhan/index.html @@ -1,54 +1,54 @@ - - - - - - - - - - - Portfolio - - - -
    - -
    - -
    -
    -
    - Hello -
    -
    -

    I'm Khitish Kumar Pradhan

    -
    - -

    About Me! - -

    -

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has - been the industry's standard dummy text ever since the 1500s, when an unknown printer took a - galley of type and scrambled it to make a type specimen book. It has survived not only five - centuries, but also the leap into electronic typesetting, remaining essentially unchanged. - It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum - passages, and more recently with desktop publishing software like Aldus PageMaker including - versions of Lorem Ipsum . -

    -
    - - -
    -
    -
    - avatar -
    -
    - - -
    - - + + + + + + + + + + + Portfolio + + + +
    + +
    + +
    +
    +
    + Hello +
    +
    +

    I'm Khitish Kumar Pradhan

    +
    + +

    About Me! + +

    +

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has + been the industry's standard dummy text ever since the 1500s, when an unknown printer took a + galley of type and scrambled it to make a type specimen book. It has survived not only five + centuries, but also the leap into electronic typesetting, remaining essentially unchanged. + It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum + passages, and more recently with desktop publishing software like Aldus PageMaker including + versions of Lorem Ipsum . +

    +
    + + +
    +
    +
    + avatar +
    +
    + + +
    + + \ No newline at end of file diff --git a/Web Development/Task/Task Submission/Khitish Kumar Pradhan/styles.css b/Web Development/Task/Task Submission/Khitish Kumar Pradhan/styles.css index 9878d5b0..1ee7826b 100644 --- a/Web Development/Task/Task Submission/Khitish Kumar Pradhan/styles.css +++ b/Web Development/Task/Task Submission/Khitish Kumar Pradhan/styles.css @@ -1,136 +1,136 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); - -:root { - --body-color: rgb(250, 250, 250); - --color-white: rgb(255, 255, 255); - --third-color: rgb(192, 166, 49); -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Poppins", sans-serif; -} - -body { - background: var(--body-color); -} - -.container { - width: 100%; - position: relative; -} - -.wrapper { - padding-inline: 10vw; -} - -.demo-box { - position: relative; - display: flex; - height: 100vh; - min-height: 700px; -} - -.demo-text { - position: relative; - display: flex; - justify-content: center; - align-content: center; - min-height: 80vh; - flex-direction: column; - width: 50%; - padding-left: 20px; -} - -.demo-text-card span { - background: var(--third-color); - color: var(--color-white); - padding: 3px 8px; - font-size: 30px; - border-radius: 5px; -} - -.demo-name { - font-size: 50px; -} - -.demo-image { - display: flex; - justify-content: right; - align-content: center; - min-height: 80vh; - width: 50%; -} - -.image { - margin: auto 0; - width: 380px; - height: 380px; - border-radius: 55% 45% 55% 45%; - overflow: hidden; - animation: imgFloat 7s ease-in-out infinite; -} - -.image img { - width: 380px; - height: 380px; - object-fit: cover; -} - -@keyframes imgFloat { - 50% { - transform: translateX(10px); - border-radius: 45% 45% 45% 45%; - } -} - -@media only screen and (max-width: 1024px) { - .demo-text { - padding: 0; - } - - .image, - .image img { - width: 320px; - height: 320px; - } -} - -@media only screen and (max-width: 900px) { - .demo-box { - flex-direction: column; - justify-content: center; - align-items: center; - height: auto; - } - - .demo-text { - width: 90%; - order: 2; - justify-content: center; - align-content: flex-start; - min-height: 60vh; - margin-bottom: 40px; - } - - .demo-image { - order: 1; - margin-top: 3%; - min-height: auto; - width: 80%; - margin-top: 0; - - } - - .image, - .image img { - width: 100%; - height: auto; - max-width: 300px; - max-height: 300px; - margin-top: 10%; - margin-bottom: 5%; - } -} +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); + +:root { + --body-color: rgb(250, 250, 250); + --color-white: rgb(255, 255, 255); + --third-color: rgb(192, 166, 49); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + background: var(--body-color); +} + +.container { + width: 100%; + position: relative; +} + +.wrapper { + padding-inline: 10vw; +} + +.demo-box { + position: relative; + display: flex; + height: 100vh; + min-height: 700px; +} + +.demo-text { + position: relative; + display: flex; + justify-content: center; + align-content: center; + min-height: 80vh; + flex-direction: column; + width: 50%; + padding-left: 20px; +} + +.demo-text-card span { + background: var(--third-color); + color: var(--color-white); + padding: 3px 8px; + font-size: 30px; + border-radius: 5px; +} + +.demo-name { + font-size: 50px; +} + +.demo-image { + display: flex; + justify-content: right; + align-content: center; + min-height: 80vh; + width: 50%; +} + +.image { + margin: auto 0; + width: 380px; + height: 380px; + border-radius: 55% 45% 55% 45%; + overflow: hidden; + animation: imgFloat 7s ease-in-out infinite; +} + +.image img { + width: 380px; + height: 380px; + object-fit: cover; +} + +@keyframes imgFloat { + 50% { + transform: translateX(10px); + border-radius: 45% 45% 45% 45%; + } +} + +@media only screen and (max-width: 1024px) { + .demo-text { + padding: 0; + } + + .image, + .image img { + width: 320px; + height: 320px; + } +} + +@media only screen and (max-width: 900px) { + .demo-box { + flex-direction: column; + justify-content: center; + align-items: center; + height: auto; + } + + .demo-text { + width: 90%; + order: 2; + justify-content: center; + align-content: flex-start; + min-height: 60vh; + margin-bottom: 40px; + } + + .demo-image { + order: 1; + margin-top: 3%; + min-height: auto; + width: 80%; + margin-top: 0; + + } + + .image, + .image img { + width: 100%; + height: auto; + max-width: 300px; + max-height: 300px; + margin-top: 10%; + margin-bottom: 5%; + } +}