Код: Выделить всё
@font-face {
font-family: myFont;
src: url(bold.ttf);
}
header {
background-color: #293454;
font-family: myFont;
width: 100%;
margin: 0px;
padding: 15px;
top: 0;
box-sizing: 100px;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 1000;
}
.logo {
font-family: myFont;
font-size: 40px;
color: #F1E6D2;
}
.logo {
font-family: myFont;
font-size: 40px;
color: #F1E6D2;
margin: 10px;
margin-top: 15px;
padding: 0;
text-shadow: 0 0 10px;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.logo:hover {
text-shadow:
0 0 10px #F1E6D2,
0 0 20px #F1E6D2,
0 0 30px #F1E6D2;
transform: scale(1.1);
}
.logo span {
color: #ffffff;
transition: 0.4s ease-in-out;
}
.logo span:hover {
color: #F1E6D2;
}
body {
background-color: #F1E6D2;
;
}
nav ul {
margin-top: 28px;
padding: 0;
list-style: none;
z-index: 1;
}
nav ul li {
display: inline;
margin: 0 15px;
margin-right: 50px;
z-index: 1;
}
nav ul li a {
color: #F1E6D2;
font-size: 20px;
text-decoration: none;
transition: 0.5s ease-in-out;
z-index: 1;
}
nav ul li a:hover,
nav ul li a:active {
border-bottom: 3px solid #F1E6D2;
border-radius: 1px;
}
/* Ensure [*] elements are positioned */
nav ul li {
position: relative;
/* Ensure the transform works */
animation: transform2 1s ease forwards;
opacity: 0;
}
/* Delay applied to each to make the animation more staggered */
nav ul li:nth-child(1) {
animation-delay: 0.2s;
}
nav ul li:nth-child(2) {
animation-delay: 0.4s;
}
nav ul li:nth-child(3) {
animation-delay: 0.6s;
}
nav ul li:nth-child(4) {
animation-delay: 0.8s;
}
nav ul li:nth-child(5) {
animation-delay: 1s;
}
@keyframes transform2 {
0% {
transform: translateY(-50px);
opacity: 0;
}
100% {
transform: translateY(0);
/* This moves the elements up */
opacity: 1;
}
}
/* old code mo HAHAHAHAH
nav ul li:nth-child(1) {
animation: transform2 1s ease forwards 0.2s;
}
nav ul li:nth-child(2) {
animation: transform2 1s ease forwards 0.4s;
}
@keyframes transform2 {
0% {
transform: translateY(-1000px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
*/
.intro {
color: #293454;
font-family: myFont;
font-size: 30px;
animation: fadeIn 2s ease-in, transform1 2s ease-in;
padding-top: 300px;
}
@keyframes transform1 {
0% {
opacity: 0%;
transform: translateY(-100px);
}
100% {
opacity: 100%;
transform: translateY(0px);
}
}
.nyak {
color: #293454;
overflow: hidden;
white-space: nowrap;
font-family: myFont;
font-size: 15px;
font-weight: lighter;
animation: typing 5s steps(51),
blink 1s infinite, transform 5s;
border-right: 4px solid #293454;
width: 51ch;
margin-top: 20px;
margin-left: 640px;
}
@keyframes typing {
0% {
width: 0ch;
}
100% {
width: 51ch
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
@keyframes transform {
0% {
transform: translateX(-800px);
}
100% {
transform: translateX(0px);
}
}
.arrow {
margin-top: -1500px;
rotate: 90deg;
}
.arrow span {
color: #293454;
display: block;
width: 350px;
height: 350px;
margin-top: 300px;
border-top: 200px solid #293454;
border-left: 200px solid #293454;
rotate: 45deg;
animation: animate 10s infinite alternate;
transition: ease-in-out;
z-index: 1000;
}
.arrow span:nth-child(1) {
animation-delay: -0.6s;
}
.arrow span:nth-child(2) {
animation-delay: -0.5s;
}
.arrow span:nth-child(3) {
animation-delay: -0.4s;
}
.arrow span:nth-child(4) {
animation-delay: -0.3s;
}
.arrow span:nth-child(5) {
animation-delay: -0.2s;
}
@keyframes animate {
0% {
opacity: 100%;
transform: translate(3000px, 3000px);
}
100% {
opacity: 0%;
transform: translate(-5000px, -5000px);
}
}
.circle1 {
background-color: #B8CEEB;
border-radius: 200px;
width: 150px;
height: 150px;
margin-top: -3000px;
margin-left: 110px;
margin-bottom: 100px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate1 2s infinite alternate ease-in-out;
;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;
}
.circle1:hover {
transform: translateX(100px);
}
.circle2 {
background-color: #B8CEEB;
border-radius: 50px;
width: 80px;
height: 80px;
margin-left: 220px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate1 2s infinite alternate ease-in-out;
;
animation-delay: -0.2s;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;
}
.circle2:hover {
transform: translateX(120px);
rotate: 60deg;
}
.circle3 {
background-color: #B8CEEB;
border-radius: 100px;
width: 180px;
height: 180px;
margin-top: 100px;
margin-left: 50px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate1 2s infinite alternate ease-in-out;
;
animation-delay: -0.4s;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;
}
.circle3:hover {
transform: translateX(50px);
rotate: -40deg;
}
.circle4 {
background-color: #B8CEEB;
border-radius: 200px;
width: 150px;
height: 150px;
margin-top: -400px;
margin-left: 1500px;
margin-bottom: 150px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate2 2s infinite alternate ease-in-out;
;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;
}
.circle5 {
background-color: #B8CEEB;
border-radius: 200px;
width: 80px;
height: 80px;
margin-top: -460px;
margin-left: 1650px;
margin-bottom: 80px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate2 2s infinite alternate ease-in-out;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;
}
.circle6 {
background-color: #B8CEEB;
border-radius: 200px;
width: 180px;
height: 180px;
margin-top: 300px;
margin-left: 1600px;
margin-bottom: 100px;
box-shadow: 0 20px 30px #29345477;
animation: float 1.5s infinite alternate ease-in-out, rotate2 2s infinite alternate ease-in-out;
;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 1;
}
@keyframes float {
100% {
transform: translateY(25px);
box-shadow: 0 20px 10px #29345477;
}
}
@keyframes rotate1 {
0% {
transform: rotate3d(0, 0, 0, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes rotate2 {
0% {
transform: rotate3d(0, 0, 1, 360deg);
}
100% {
transform: rotate3d(0, 0, 0, 0deg);
}
}
.profile-img {
border-radius: 30%;
margin-left: 50px;
}
.profile-img img {
position: relative;
margin-top: 800px;
left: 100px;
width: 20vw;
border-radius: 30%;
box-shadow: 0 0 50px #293454;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.profile-img img:hover {
box-shadow: 0 0 50px #293454,
0 0 60px #293454,
0 0 70px #293454;
transform: scale(1.1);
}
.all-about {
margin-left: 200px;
margin-top: -1180px;
}
.about {
color: #293454;
font-family: myFont;
font-size: 60px;
margin-top: 0;
margin: 450px;
margin-bottom: -450px;
padding-top: 300px;
}
.aboutc {
margin-top: 0;
margin: 450px;
letter-spacing: 1.3px;
line-height: 30px;
margin-bottom: -500px;
}
h3 {
font-family: myFont;
font-size: 30px;
color: #293454;
}
.aboutc p {
font-family: myFont;
color: #293454;
}
.sticker2-img img {
width: 15vw;
position: relative;
margin-top: 200px;
margin-left: 1550px;
transition: 0.3s ease-in-out;
opacity: 0;
}
.sticker1-img img {
width: 15vw;
position: relative;
margin-top: -300px;
margin-left: 1430px;
}
.hover1 {
color: #293454;
font-family: myFont;
font-size: 20px;
margin-left: 1690px;
margin-top: -30px;
transition: 0.3s ease-in-out;
animation: fadeIn 5s forwards infinite;
animation-delay: 10s;
opacity: 0%;
}
@keyframes fadeIn {
0% {
opacity: 0%;
}
100% {
opacity: 50%;
}
}
.sticker2-img img:hover {
animation: slide 0.5s forwards;
}
@keyframes slide {
0% {
transform: translateX(0);
opacity: 0%;
}
100% {
transform: translateX(50px);
opacity: 100%;
}
}
footer {
color: #B8CEEB;
background-color: #293454;
font-family: myFont;
font-size: 15px;
padding: 10px;
margin-top: 1000px;
}
@media screen {}< /code>
JEZREELHUB
[list]
[url=#home]HOME[/url]
[*][url=#about]ABOUT[/url]
[*][url=#education]EDUCATION[/url]
[*][url=#skills]SKILLS[/url]
[*][url=#contact]CONTACT[/url]
[/list]
WELCOME TO MY PORTFOLIO WEBSITE
This is a website that showcases my portfolio as a junior programmer:)
[img]grad.jpg[/img]
ABOUT
Hi! This is Jezreel!
I am an introverted individual with an INTP personality type, identify as sp3 choleric phlegmatic. I have a strong inclination towards technology and a desire for continuous learning and skill development, although I do not achieve mastery in any particular area. I actively seek opportunities to step outside of my comfort zone to foster personal growth. My appreciation for uniqueness drives me to differentiate myself from others as much as possible. Moreover, I quickly adapt to diverse environments and learn rapidly, though I face challenges or difficulties with short-term memory retention.
[img]intpp.png[/img]
HOVER HERE
[img]intp.png[/img]
©2025 JezreelHub. ALL RIGHTS RESERVED.Подробнее здесь: https://stackoverflow.com/questions/794 ... n-pure-htm
