diff --git a/portfolio/about/index.html b/portfolio/about/index.html
new file mode 100644
index 0000000..743471b
--- /dev/null
+++ b/portfolio/about/index.html
@@ -0,0 +1,30 @@
+
+
+
+ Sufyaan | Designer
+
+
+
+
+
+
+
+
+ DESIGNS | ABOUT | CONTACT
+
+
+ About
+ Hey. My name is Sufyaan.
+
+
+
+
+
diff --git a/portfolio/contact/index.html b/portfolio/contact/index.html
new file mode 100644
index 0000000..55b926b
--- /dev/null
+++ b/portfolio/contact/index.html
@@ -0,0 +1,29 @@
+
+
+
+ Sufyaan | Designer
+
+
+
+
+
+
+
+
+ DESIGNS | ABOUT | CONTACT
+
+
+ hey
+
+
+
+
+
diff --git a/portfolio/style.css b/portfolio/style.css
index 7e1d045..ccf4b22 100644
--- a/portfolio/style.css
+++ b/portfolio/style.css
@@ -1,9 +1,15 @@
b,ol,p,ul{
- font-family:futura
+ font-family:futura;
+ margin-left: 7.5vw;
+ margin-right: 7.5vw;
}
body,h1{
color:#121212
}
+h1 {
+ margin-left: 7.5vw;
+ margin-right: 7.5vw;
+}
.responsive,div.desc,footer{
text-align:center
}
@@ -14,6 +20,21 @@ a:link {
text-decoration: none;
}
+.footer {
+ animation: glideInFooter normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.8s 1.5s;
+}
+.nonfooter {
+ margin-top: 1%;
+ padding-bottom: 0.5%;
+}
+svg {
+ color: #121212
+}
+svg:hover {
+ color: #000bef
+}
+
+
a:hover {
color: #606060;
background-color: transparent;
@@ -36,10 +57,9 @@ a:hover {
opacity: 0;
display: flex;
flex-direction: column;
- justify-content: center;
- align-items: center;
font-family: futura;
font-weight: bolder;
+ margin-top: -2.5%;
font-size: 150%;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
@@ -103,7 +123,6 @@ margin-right: 7vw;
.item {
background-color: #f0f0f0;
- border: 1px solid #ccc;
padding: 20px;
width: calc(33.33% - 20px);
box-sizing: border-box;
@@ -112,7 +131,6 @@ margin-right: 7vw;
.item:hover {
background-color: #000;
- border: 1px solid #efefef;
color: #efefef;
transition: ease-in-out
}
@@ -154,6 +172,18 @@ margin-right: 7vw;
padding-bottom: 4.5%;
}
}
+@keyframes glideInFooter {
+ 0% {
+ opacity: 0;
+ margin-top: 2.5%;
+ padding-bottom: 0%;
+ }
+ 100% {
+ opacity: 100;
+ margin-top: 1%;
+ padding-bottom: 0.5%;
+ }
+}
@keyframes portfolioItems {
0% {
@@ -164,7 +194,19 @@ margin-right: 7vw;
100% {
opacity: 100;
margin-top: 2.5%;
- padding-bottom: 4.5%;
+ padding-bottom: 2.5%;
+ }
+}
+@keyframes footerIcons {
+ 0% {
+ opacity: 0;
+ margin-top: 2%;
+ padding-bottom: 0%;
+ }
+ 100% {
+ opacity: 100;
+ margin-top: -0.5%;
+ padding-bottom: 6.5%;
}
}
@@ -184,17 +226,41 @@ margin-right: 7vw;
text-align: center;
animation: titleAnim normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s;
}
+.nonanim-header{
+ text-align: center;
+ margin-top: 2%;
+ padding-bottom: 3%;
+}
.navigation {
text-align: center;
color: #efefef;
animation: glideIn normal both cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.7s;
}
+.nonanim-nav {
+ text-align: center;
+ color: #efefef;
+ margin-top: -1.5%;
+ padding-bottom: 4.5%;
+}
.lines {
animation: lineAnimation normal both 0.5s 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
margin-top: -3%;
}
+.nonlines {
+ margin-top: -3%;
+}
+
+.endline {
+ animation: lineAnimation normal both 0.5s 1.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ margin-top: 0%;
+}
+.footername {
+ text-align: center;
+ font-weight: bold;
+ font-size: 150%;
+}
@font-face{
font-family:futura;
@@ -322,6 +388,10 @@ h3{
width: 100%;
}
}
+ .nonanim-header {
+ margin-top: 7.5%;
+ padding-bottom: 4.5%;
+ }
hr{
width:93%
}
@@ -345,6 +415,10 @@ h3{
.gallery {
justify-content: flex-start;
}
+ .image-details {
+ font-size: 120%;
+ margin-left: -2.5%;
+ }
.image-container {
width: calc(100% - 20px);
@@ -361,12 +435,10 @@ h3{
width:100%;
padding-bottom:4vw
}
- div.gallery{
- border:1px solid #121212
- }
- div.gallery:hover{
- border:1px solid
- }
+ .nonanim-nav{
+ margin-top: 0%;
+ padding-bottom: 3%;
+ }
.main{
width:75vw;
margin-top:7vw;
@@ -375,7 +447,7 @@ h3{
.navigation{
font-size: 90%;
}
- .lines {
+ .lines, .nonlines {
margin-top: 5%;
}
}
diff --git a/portfolio/wip.html b/portfolio/wip.html
index c6f2012..a15aed5 100644
--- a/portfolio/wip.html
+++ b/portfolio/wip.html
@@ -16,8 +16,6 @@
DESIGNS | ABOUT | CONTACT
-Image Gallery
-
@@ -33,8 +31,13 @@
Image 3 Details
-
+
+
+
+