Skip to content

Commit

Permalink
Feat: My-Portofolio
Browse files Browse the repository at this point in the history
  • Loading branch information
@melpenyogi
melpenyogi committed Jul 29, 2024
1 parent 8d348c9 commit cdfcff4
Show file tree
Hide file tree
Showing 22 changed files with 3,010 additions and 0 deletions.
107 changes: 107 additions & 0 deletions assets/css/circles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}

.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}

.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}

.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}

.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}

.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}

.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}

.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}

.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}

.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}

.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}

@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
220 changes: 220 additions & 0 deletions assets/css/contact.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
.contact {
background-color: var(--body-color);
display: flex;
justify-content: center;
align-items: center;
}

.contact-box {
width: clamp(100px, 90%, 1000px);
margin: 80px 50px;
display: flex;
flex-wrap: wrap;
}

.contact-links,
.contact-form-wrapper {
width: 50%;
padding: 8% 5% 10% 5%;
}

.contact-links {
background-color: var(--body-color);
background: radial-gradient( circle at 55% 92%, #426691 0 12%, transparent 12.2%), radial-gradient( circle at 94% 72%, #426691 0 10%, transparent 10.2%), radial-gradient( circle at 20% max(78%, 350px), #263a53 0 7%, transparent 7.2%), radial-gradient( circle at 0% 0%, #263a53 0 40%, transparent 40.2%), #1f2e43;
border-radius: 10px 0 0 10px;
}

.contact-form-wrapper {
background-color: #ffffff8f;
border-radius: 0 10px 10px 0;
}

@media only screen and (max-width: 800px) {
.contact-links,
.contact-form-wrapper {
width: 100%;
}
.contact-links {
border-radius: 10px 10px 0 0;
}
.contact-form-wrapper {
border-radius: 0 0 10px 10px;
}
}

@media only screen and (max-width: 400px) {
.contact-box {
width: 95%;
margin: 8% 5%;
}
}

h2.title_contact {
font-family: 'Arimo', sans-serif;
color: #fff;
font-size: clamp(30px, 6vw, 60px);
letter-spacing: 2px;
text-align: center;
transform: scale(.95, 1);
}

.links {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 50px;
}

.link {
margin: 10px;
cursor: pointer;
}

img.icons {
width: 45px;
height: 45px;
filter: hue-rotate(220deg) drop-shadow(2px 4px 4px #0006);
transition: 0.2s;
user-select: none;
}

img:hover {
transform: scale(1.1, 1.1);
}

img.icons:active {
transform: scale(1.1, 1.1);
filter: hue-rotate(220deg) drop-shadow(2px 4px 4px #222) sepia(0.3);
}

.form-item {
position: relative;
}

label,
input,
textarea {
font-family: 'Poppins', sans-serif;
}

label {
position: absolute;
top: 10px;
left: 2%;
color: #999;
font-size: clamp(14px, 1.5vw, 18px);
pointer-events: none;
user-select: none;
}

input,
textarea {
width: 100%;
outline: 0;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
padding: 12px;
font-size: clamp(15px, 1.5vw, 18px);
}

input:focus+label,
input:valid+label,
textarea:focus+label,
textarea:valid+label {
font-size: clamp(13px, 1.3vw, 16px);
color: #777;
top: -20px;
transition: all .225s ease;
}

.submit-btn {
background-color: #fd917e;
filter: drop-shadow(2px 2px 3px #0003);
color: #fff;
font-family: "Poppins", sans-serif;
font-size: clamp(16px, 1.6vw, 18px);
display: block;
padding: 12px 20px;
margin: 2px auto;
border: none;
border-radius: 4px;
cursor: pointer;
user-select: none;
transition: 0.2s;
}

.submit-btn:hover {
transform: scale(1.1, 1.1);
}

.submit-btn:active {
transform: scale(1.1, 1.1);
filter: sepia(0.5);
}

@media only screen and (max-width: 800px) {
h2.title_contact {
font-size: clamp(40px, 10vw, 60px);
}
}

@media only screen and (max-width: 400px) {
h2.title_contact {
font-size: clamp(30px, 12vw, 60px);
}
.links {
padding-top: 30px;
}
img.icons {
width: 38px;
height: 38px;
}
}

.contact__container {
row-gap: 3rem;
}

.contact__information {
display: flex;
margin-bottom: var(--mb-2);
}

.contact__icon {
font-size: 2rem;
color: var(--first-color);
margin-right: var(--mb-0-75);
}

.contact__title {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
}

.contact__subtitle {
font-size: var(--small-font-size);
color: var(--text-color-light);
}

.contact__content {
background-color: var(--input-color);
border-radius: .5rem;
padding: .75rem 1rem .25rem;
}

.contact__label {
font-size: var(--smaller-font-size);
color: var(--title-color);
}

.contact__input {
width: 100%;
background-color: var(--input-color);
color: var(--title-color);
font-family: var(--body-font);
font-size: var(--normal-font-size);
border: none;
outline: none;
padding: .25rem .5rem .5rem 0;
}
Loading

0 comments on commit cdfcff4

Please sign in to comment.