diff --git a/portfolio/images/title.webp b/portfolio/images/title.webp
new file mode 100644
index 0000000..c872b26
Binary files /dev/null and b/portfolio/images/title.webp differ
diff --git a/portfolio/style.css b/portfolio/style.css
index 5fc56fb..461e9e4 100644
--- a/portfolio/style.css
+++ b/portfolio/style.css
@@ -4,25 +4,167 @@ b,ol,p,ul{
body,h1{
color:#121212
}
-.posts,h1,h2,h3,ol,p,ul{
- margin-left:8vw
-}
-.nested-list,.posts,h1,ol,ul{
- margin-top:1vw;
- margin-bottom:1vw
-}
.responsive,div.desc,footer{
text-align:center
}
+a:link {
+ color: #121212;
+ background-color: transparent;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #606060;
+ background-color: transparent;
+ text-decoration: underline;
+}
+.container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin-left: 7vw;
+ margin-right: 7vw;
+ margin-top: 2.5vw;
+ animation: portfolioItems normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.8s 1.5s;
+}
+
+.image-details {
+ position: absolute;
+ background-color: rgba(0, 0, 0, 0.8);
+ color: white;
+ opacity: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ transition: opacity 0.3s ease-in-out;
+}
+
+.item:hover .image-details {
+ opacity: 1;
+}
+ .gallery {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+margin-left: 7vw;
+margin-right: 7vw;
+animation:
+ }
+
+ .image-container {
+ position: relative;
+ width: calc(33.33% - 20px);
+ margin: 10px;
+ overflow: hidden;
+ }
+
+ .image {
+ width: 100%;
+ height: auto;
+ transition: transform 0.3s;
+ }
+
+ .image-container:hover .image {
+ transform: scale(1.2);
+ }
+
+ .image-details {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+ color: white;
+ padding: 10px;
+ opacity: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ transition: opacity 0.3s;
+ }
+
+ .image-container:hover .image-details {
+ opacity: 1;
+ }
+
+.item {
+ background-color: #f0f0f0;
+ border: 1px solid #ccc;
+ padding: 20px;
+ width: calc(33.33% - 20px);
+ box-sizing: border-box;
+ margin-bottom: 25px;
+}
+
+.item:hover {
+ background-color: #000;
+ border: 1px solid #efefef;
+ color: #efefef;
+ transition: ease-in-out
+}
+
/* ANIMATIONS */
-@keyframes scaleUp {
- from {
- transform: scale(0.7)
+@keyframes titleAnim {
+ 0% {
+ transform: scale(0.3);
+ margin-top: 5%;
+ padding-bottom: 0;
}
- to {
- transform: scale(4)
+ 70% {
+ transform: scale(1);
+ margin-top: 5%;
+ padding-bottom: 0
+ }
+ 100% {
+ transform: scale(1);
+ margin-top: 2%;
+ padding-bottom: 3%;
+ }
+}
+
+@keyframes glideIn {
+ 0% {
+ opacity: 0;
+ margin-top: 3%;
+ padding-bottom: 0%;
+ }
+ 90% {
+ opacity: 100;
+ margin-top: -1.5%;
+ padding-bottom: 4.5%;
+ }
+ 100% {
+ opacity: 100;
+ margin-top: -1.5%;
+ padding-bottom: 4.5%;
+ }
+}
+
+@keyframes portfolioItems {
+ 0% {
+ opacity: 0;
+ margin-top: 5%;
+ padding-bottom: 0%;
+ }
+ 100% {
+ opacity: 100;
+ margin-top: 2.5%;
+ padding-bottom: 4.5%;
+ }
+}
+
+@keyframes lineAnimation {
+ 0% {
+ width: 0;
+ opacity: 0;
+ }
+ 100% {
+ width: 80%;
}
}
@@ -30,15 +172,18 @@ body,h1{
.main-header {
text-align: center;
- margin-left: 0;
- margin-top: 25%;
- animation-name: scaleUp;
- animation-duration: 1s;
- animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);
- animation-delay: 0;
- animation-iteration-count: 1;
- animation-direction: normal;
- animation-fill-mode: both;
+ animation: titleAnim normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s;
+}
+
+.navigation {
+ text-align: center;
+ color: #efefef;
+ animation: glideIn normal both cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.7s;
+}
+
+.lines {
+ animation: lineAnimation normal both 0.5s 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ margin-top: -3%;
}
@font-face{
@@ -46,6 +191,7 @@ body,h1{
font-weight:400;
font-display:swap;
src:url("fonts/woff2/futura-woff2.woff2") format('woff2'),url(fonts/woff/futura-woff.woff) format('woff') }
+
@font-face{
font-family:futura;
font-weight:700;
@@ -56,7 +202,6 @@ body{
background:#efefef
}
p{
- margin-right:8vw;
font-weight:400
}
.center{
@@ -80,7 +225,7 @@ code,h1,h2,h3{
}
hr{
width:87%;
- color:#6067ff
+ color:#6067ff;
}
code{
color:#50fa7b;
@@ -89,89 +234,84 @@ code{
a{
color:#000bef
}
-footer{
- padding:3px
-}
h1{
font-size:200%
}
h2{
font-size:150%;
- margin-top:1.5vw;
- margin-bottom:1.5vw
}
h3{
font-size:110%
}
-i{
- margin-right:10px
-}
-.posts{
- font-family:futura;
- list-style-type:none
-}
-.code-posts{
- font-family:futura;
- color:#6272a4;
- font-size:80%
-}
-.homepage-title{
- display:block;
- padding-top:3.25vw;
- padding-bottom:3vw;
- margin-left:auto;
- margin-right:auto;
- width:30%;
- max-width:35%;
- height:7.5%
-}
-.footer-text{
- font-family:futura
-}
-.nested-list{
- margin-left:-2vw
-}
-div.gallery{
- border:1px solid #6272a4
-}
-div.gallery:hover{
- border:1px solid
-}
-div.gallery img{
- width:100%;
- height:auto
-}
-div.desc{
- padding:15px
-}
-*{
- box-sizing:border-box
-}
-.main{
- margin-left:10vw;
- margin-right:7vw;
- width:90vw;
- margin-bottom:4vw
-}
-.responsive{
- font-family:futura;
- padding:0 6px;
- margin:auto;
- display:block;
- float:left;
- width:22%
-}
-.clearfix:after{
- content:"";
- display:table;
- clear:both
-}
@media screen and (max-width:600px){
.posts,h1,h2,h3,ol,p,ul{
margin-left:20px;
margin-right:20px;
margin-top:30px
}
+ .item {
+ width: 100%;
+ }
+ @keyframes titleAnim {
+ 0% {
+ transform: scale(0.3);
+ margin-top: 12%;
+ padding-bottom: 0%;
+ }
+ 70% {
+ transform: scale(1);
+ margin-top: 12%;
+ padding-bottom: 0%;
+ }
+ 100% {
+ transform: scale(1);
+ margin-top: 7.5%;
+ padding-bottom: 4.5%;
+ }
+ }
+ @keyframes glideIn {
+ 0% {
+ opacity: 0;
+ margin-top: 3%;
+ padding-bottom: 0%;
+ }
+ 90% {
+ opacity: 100;
+ margin-top: 0%;
+ padding-bottom: 3%;
+ }
+ 100% {
+ opacity: 100;
+ margin-top: 0%;
+ padding-bottom: 3%;
+ }
+ }
+ @keyframes portfolioItems {
+ 0% {
+ opacity: 0;
+ margin-top: 3%;
+ padding-bottom: 0%;
+ }
+ 90% {
+ opacity: 100;
+ margin-top: 0%;
+ padding-bottom: 3%;
+ }
+ 100% {
+ opacity: 100;
+ margin-top: 0%;
+ padding-bottom: 3%;
+ }
+ }
+ @keyframes lineAnimation {
+ 0% {
+ width: 0;
+ opacity: 0;
+ }
+ 100% {
+ width: 100%;
+ }
+ }
hr{
width:93%
}
@@ -182,16 +322,31 @@ div.desc{
.code-posts{
font-size:75%
}
+ .container {
+ margin-top: 7.5vw;
+ margin-left: 2vw;
+ margin-right: 2vw;
+ }
.homepage-title{
width:50%;
max-width:75%;
height:12.5%
}
+ .gallery {
+ justify-content: flex-start;
+ }
+
+ .image-container {
+ width: calc(100% - 20px);
+ }
.nested-list{
margin-left:-6vw;
margin-top:4vw;
margin-bottom:4vw
}
+ .main-header{
+ font-size: 7.5px;
+ }
.responsive{
width:100%;
padding-bottom:4vw
@@ -207,6 +362,12 @@ div.desc{
margin-top:7vw;
padding:8px
}
+ .navigation{
+ font-size: 90%;
+ }
+ .lines {
+ margin-top: 5%;
+ }
}
@media screen and (max-width:1150px){
img{
diff --git a/portfolio/wip.html b/portfolio/wip.html
index e98d0da..bef9d1c 100644
--- a/portfolio/wip.html
+++ b/portfolio/wip.html
@@ -2,13 +2,38 @@
Sufyaan | Designer
-
+
- TitanElectrons
+
+
+ 
+
+
DESIGNS | ABOUT | CONTACT
+
+Image Gallery
+
+
+
+
+
+
Image 1 Details
+
+
+
+
Image 2 Details
+
+
+
+
Image 3 Details
+
+
+