Skip to content

Commit 0496bac

Browse files
yadhukrishnasmyadhukrishnasm
committed
img centred
1 parent dfdb178 commit 0496bac

File tree

5 files changed

+36
-204
lines changed

5 files changed

+36
-204
lines changed

‎assets/Untitled design.gif‎

-642 KB
Binary file not shown.

‎assets/img.png‎

-235 KB
Loading

‎index.html‎

Lines changed: 7 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -7,82 +7,21 @@
77
<link rel="icon" type="img" href="./assets/myphoto.png">
88
<link rel="stylesheet" href="style.css">
99
<script src="index.js" defer></script>
10+
1011
</head>
11-
<body>
12+
<body class="hidden">
13+
14+
<div class = ></div>
15+
1216
<div class="landing-container">
1317
<div class="landing-content">
14-
<span>
15-
Fullstack developer/ <br> ML enthusiast/ <br> <i>designer</i>
16-
</span>
18+
<b>Fullstack developer/ </b> <br> ML enthusiast/ <br> <i>designer</i>
19+
<img src="./assets/img.png" alt="" srcset="" id="img">
1720
</div>
18-
19-
<img src="./assets/img.png" alt="" srcset="" width="100%">
2021
</div>
2122

22-
<!-- <div class="name-container" >
23-
head
24-
<div class="intro">I am an aspiring <i>Web Developer</i> and <i>UI/UX designer</i></div>
25-
26-
name
27-
28-
<section class="heading" id="">
29-
30-
<div class="name">
31-
<div id="myName"><b>YADHU<br>KRISHNA</b> </div>
32-
</div>
33-
34-
</section>
35-
36-
image
37-
<section id = "image" data-scroll-section="">
38-
39-
<div class="blob"></div>
40-
41-
connection
42-
<div class="connections">
43-
44-
<a href="https://github.com/yadhukrishnasm" >
45-
<img src="./assets/Github icon.svg" alt="gitIcon" Class="icon" id="git" data-scroll data-scroll-direction="horizontal" data-scroll-speed="3">
46-
</a>
47-
48-
<a href="https://www.linkedin.com/in/yadhu-krishna-657b8b20b/">
49-
<img src = "./assets/in.svg" alt="linkedinIcon" Class="icon" id="linkedin" data-scroll-direction="horizontal" data-scroll-speed="-9" data-scroll data-scroll-direction="vertical">
50-
</a>
51-
52-
<a href="https://devfolio.co/@Yadhukrishnasm">
53-
<img src = "https://img.icons8.com/ios-filled/50/F8E9C3/d.png" alt="devfolio" Class="icon" id="linkedin" data-scroll-direction="horizontal" data-scroll-speed="-9" data-scroll data-scroll-direction="vertical">
54-
</a>
55-
56-
<a href="https://www.linkedin.com/in/yadhu-krishna-657b8b20b/">
57-
<img src = "./assets/in.svg" alt="linkedinIcon" Class="icon" id="linkedin" data-scroll-direction="horizontal" data-scroll-speed="-9" data-scroll data-scroll-direction="vertical">
58-
</a>
59-
60-
</div>
61-
62-
</section>
63-
<p id="footer"> @yadhukrishnasm </p>
64-
65-
66-
67-
works
68-
<section data-scroll-section>
69-
<div class = "worksDone">
70-
<span><i>Works Done</i></span>
71-
<div class="sections large" ></div>
72-
73-
<div class="sections large" ></div>
74-
<div class="sections small" ></div>
75-
76-
<div class="sections small" ></div>
77-
</div>
78-
</section>
7923

80-
<section data-scroll-section>
81-
<div class="blog">
8224

83-
</div>
84-
</section>
8525

86-
</div> -->
8726
</body>
8827
</html>

‎index.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
const nameDiv = document.querySelector("#myName");
22
const image = document.getElementById('myPhoto');
33
console.log(window.innerWidth)
4+
5+
window.onload= ()=>{
6+
document.body.classList.remove("hidden");
7+
}
48
window.addEventListener('scroll',()=>{
59
console.log(scrollY);
610
})
@@ -40,4 +44,4 @@ function xY(x,y){
4044
}
4145
return res
4246

43-
}
47+
}

‎style.css‎

Lines changed: 24 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ html{
88
overflow-y:auto;
99
overflow-x: auto;
1010
}
11+
.hidden{
12+
display: none;
13+
}
1114

1215
body{
1316
background-image: url(./assets/image-from-rawpixel-id-12613923-png.png);
1417
background-color: rgb(29, 206, 194);
1518
margin: auto;
16-
justify-content: center;
17-
align-items: center;
1819

1920
}
2021
body::-webkit-scrollbar{
@@ -26,149 +27,37 @@ width: 0.5em;
2627
width: 100%;
2728
display: flex;
2829
align-items:center;
30+
justify-content: center;
2931
flex-direction:column;
30-
justify-content: end;
3132

3233
}
3334

3435
.landing-content{
36+
align-self: center;
3537
color: yellow;
3638
font-size: larger;
3739
}
3840

39-
40-
/* .blob{
41-
position: absolute;
42-
right: 100px;
43-
background-image: url("./assets/myphoto.png");
44-
height: 478px ;
45-
width: 377px;
46-
background-position: 3px -60px;
47-
background-color:#d1620d;
48-
background-size: cover;
49-
box-shadow: 10px 10px 10px 10px;
50-
animation: animate 2s ease-in-out infinite;
51-
transition: all 2s ease-in-out;
52-
}
53-
@keyframes animate {
54-
0%,100%{
55-
border-radius: 60% 40% 50% 70% / 30% 30% 80% 90%;
56-
}
57-
50%{
58-
border-radius: 70% 84% 73% 96% / 96% 48% 59% 70%;
59-
}
41+
#img{
42+
height: 35vh;
43+
transition: all .3s ease-in-out;
44+
position: fixed;
45+
bottom: 0px;
46+
left: calc(50vw - (40vh / 2));
47+
animation: slide .5s linear;
6048
}
61-
#myName{
62-
height:100% ;
63-
width:100% ;
64-
text-shadow: #F8E9C3 0px 0px 2px ;
65-
transition: text-shadow 0.1s ease-in-out;
66-
font-size: 7rem;
67-
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
68-
letter-spacing:5px ;
69-
b{
70-
position: absolute;
71-
left: 357px;
72-
top: 262px;
7349

50+
@keyframes slide {
51+
0%{
52+
opacity: 0;
53+
transform: translateY(40px);
54+
}
55+
40%{
56+
opacity: 0;
57+
transform: translateY(20px);
7458
}
75-
}
76-
77-
.name-conatainer{
78-
position: relative;
79-
}
80-
81-
.name{
82-
color: #b84609;
83-
height: 100vh;
84-
width: 100vw;
85-
}
86-
87-
#image{
88-
display: flex;
89-
justify-content: center;
90-
}
91-
92-
93-
.heading{
94-
align-items: center;
95-
text-align: center;
96-
font-family: 'Ledger', serif;
97-
display: flex;
98-
gap: 10px;
99-
justify-content: space-evenly;
100-
}
101-
102-
103-
.connections{
104-
position: absolute;
105-
text-align: center;
106-
width: 2rem;
107-
height: 100vh;
108-
margin-top:50px;
109-
margin-bottom: 100px;
110-
display:grid;
111-
left: 20px;
112-
align-content: space-evenly;
113-
}
114-
.icon{
115-
position: absolute;
116-
display: inline-block;
117-
height: 50px;
118-
left: 20px;
119-
padding: 20px;
120-
transform: scale(1);
121-
transition: transform 0.3s ease-in-out;
122-
}
123-
#linkedin{
124-
height: 40px;
125-
}
126-
.icon:hover{
127-
transform: scale(1.23);
128-
}
129-
130-
.intro{
131-
position: absolute;
132-
color: #F8E9C3;
133-
font-family: Arapey;
134-
font-size: 1.5em;
135-
font-style: normal;
136-
font-weight: 100;
137-
line-height: normal;
138-
margin: 50px;
139-
}
140-
141-
.worksDone{
142-
width: 70%;
143-
height: 500px;
144-
padding: 30px;
145-
background-color: #b84609;
146-
margin: 0 auto;
147-
display: flex;
148-
gap: 10px;
149-
justify-content: space-evenly;
150-
border-radius: 10px;
151-
152-
.sections{
153-
border: #F8E9C3 solid ;
154-
}
155-
.small{
156-
width: 28rem;
157-
height: 5rem;
158-
}
159-
.large{
160-
width: 34rem;
161-
height: 9rem;
59+
100%{
60+
opacity: 1;
61+
transform: translateY(0px);
16262
}
163-
}
164-
165-
166-
#footer{
167-
margin-top: 20px;
168-
width: 100%;
169-
height: 200px;
170-
text-align:center;
171-
position: absolute;
172-
color: #F8E9C3;
173-
bottom:-181px
174-
} */
63+
}

0 commit comments

Comments
 (0)