Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web dev file added (task 3) #469

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

web dev file added (task 3) #469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 48 additions & 53 deletions Web Development/Task/Task Submission/Khitish Kumar Pradhan/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,49 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="styles.css">

<title>Portfolio</title>
</head>

<body>
<div class="container">

<main class="wrapper">

<section class="demo-box" id="home">
<div class="demo-text">
<div class="demo-text-card">
<span>Hello</span>
</div>
<div class="demo-name">
<p>I'm<strong> Khitish Kumar Pradhan</strong><span class="typedText"></span></p>
</div>

<p style="margin-top: 10px; margin-bottom: 20px;font-size: 30px;">About Me!<span
class="typedText"></span>

<div class="demo-text-info">
<p>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 .
</p>
</div>


</div>
<div class="demo-image">
<div class="image">
<img src="Khitish Img.jpg" alt="avatar">
</div>
</div>


</div>
</body>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="styles.css">

<title>Portfolio</title>
</head>

<body>
<div class="container">

<main class="wrapper">

<section class="demo-box" id="home">
<div class="demo-text">
<div class="demo-text-card">
<span>Hello</span>
</div>
<div class="demo-name">
<p>I'm<strong> shivangi sahu</strong><span class="typedText"></span></p>
</div>

<p style="margin-top: 20px; margin-bottom: 20px;font-size: 40px;">It's About me!<span
class="typedText"></span>

<div class="demo-text-info">
<p>I am Shivangi sahu from sonepur. My academic journey commenced with the successful completion of my Matriculation at St annes convent school dist.subarnapur ,odisha in year (2020). Followed by my Intermediate education at kendriya vidyalaya subarnapur ,odisha in year(2022). Presently, I am ardently pursuing my Bachelor of Technology degree specializing in Electrical and Electronics Engineering at the esteemed Veer Surendra Sai University of Technology, Burla. This academic pursuit not only reflects my passion for the field but also underscores my commitment to acquiring profound knowledge and skills in the realm of engineering.i have some prior knowledge about three languages that is java ,C ,python and trying to gain knowledge about some more languages like C++.
</p>
</div>



</div>
<div class="demo-image">
<div class="image">
<img src="shivangi.jpg" alt="avatar">
</div>
</div>


</div>
</body>

</html>
1 change: 1 addition & 0 deletions Web Development/Task/Task Submission/Khitish Kumar Pradhan/link.txt.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
https://shivangisahu071.github.io/shivangisahu1871/
Binary file added Web Development/Task/Task Submission/Khitish Kumar Pradhan/portfilio png.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Web Development/Task/Task Submission/Khitish Kumar Pradhan/shivangi.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
272 changes: 136 additions & 136 deletions Web Development/Task/Task Submission/Khitish Kumar Pradhan/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(232, 191, 191);
--color-white: rgb(240, 236, 236);
--third-color: rgb(73, 17, 45);
}
* {
margin: 1;
padding: 1;
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: 80%;
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%;
}
}Pictures\Camera Roll\shivangi.jpg.jpg"