sufyaan
/
sufyaan-website
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updating portfolio

Browse Source
main
TitanElectrons 1 year ago
parent d976dba92d
commit 94acaa44b3
3 changed files with 279 additions and 93 deletions
Show Stats Download Patch File Download Diff File

BIN
portfolio/images/title.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

325
portfolio/style.css
Unescape Escape View File

@ -4,25 +4,167 @@ b,ol,p,ul{
body,h1{ body,h1{
color:#121212 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{ .responsive,div.desc,footer{
text-align:center 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 */ /* ANIMATIONS */
@keyframes scaleUp { @keyframes titleAnim {
from { 0% {
transform: scale(0.7) transform: scale(0.3);
margin-top: 5%;
padding-bottom: 0;
}
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%;
} }
to { 100% {
transform: scale(4) 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 { .main-header {
text-align: center; text-align: center;
margin-left: 0; animation: titleAnim normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s;
margin-top: 25%; }
animation-name: scaleUp;
animation-duration: 1s; .navigation {
animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86); text-align: center;
animation-delay: 0; color: #efefef;
animation-iteration-count: 1; animation: glideIn normal both cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.7s;
animation-direction: normal; }
animation-fill-mode: both;
.lines {
animation: lineAnimation normal both 0.5s 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
margin-top: -3%;
} }
@font-face{ @font-face{
@ -46,6 +191,7 @@ body,h1{
font-weight:400; font-weight:400;
font-display:swap; font-display:swap;
src:url("fonts/woff2/futura-woff2.woff2") format('woff2'),url(fonts/woff/futura-woff.woff) format('woff') } src:url("fonts/woff2/futura-woff2.woff2") format('woff2'),url(fonts/woff/futura-woff.woff) format('woff') }
@font-face{ @font-face{
font-family:futura; font-family:futura;
font-weight:700; font-weight:700;
@ -56,7 +202,6 @@ body{
background:#efefef background:#efefef
} }
p{ p{
margin-right:8vw;
font-weight:400 font-weight:400
} }
.center{ .center{
@ -80,7 +225,7 @@ code,h1,h2,h3{
} }
hr{ hr{
width:87%; width:87%;
color:#6067ff color:#6067ff;
} }
code{ code{
color:#50fa7b; color:#50fa7b;
@ -89,88 +234,83 @@ code{
a{ a{
color:#000bef color:#000bef
} }
footer{
padding:3px
}
h1{ h1{
font-size:200% font-size:200%
} }
h2{ h2{
font-size:150%; font-size:150%;
margin-top:1.5vw;
margin-bottom:1.5vw
} }
h3{ h3{
font-size:110% font-size:110%
} }
i{ @media screen and (max-width:600px){
margin-right:10px .posts,h1,h2,h3,ol,p,ul{
margin-left:20px;
margin-right:20px;
margin-top:30px
} }
.posts{ .item {
font-family:futura; width: 100%;
list-style-type:none
} }
.code-posts{ @keyframes titleAnim {
font-family:futura; 0% {
color:#6272a4; transform: scale(0.3);
font-size:80% margin-top: 12%;
padding-bottom: 0%;
} }
.homepage-title{ 70% {
display:block; transform: scale(1);
padding-top:3.25vw; margin-top: 12%;
padding-bottom:3vw; padding-bottom: 0%;
margin-left:auto;
margin-right:auto;
width:30%;
max-width:35%;
height:7.5%
} }
.footer-text{ 100% {
font-family:futura transform: scale(1);
margin-top: 7.5%;
padding-bottom: 4.5%;
} }
.nested-list{
margin-left:-2vw
} }
div.gallery{ @keyframes glideIn {
border:1px solid #6272a4 0% {
opacity: 0;
margin-top: 3%;
padding-bottom: 0%;
} }
div.gallery:hover{ 90% {
border:1px solid opacity: 100;
margin-top: 0%;
padding-bottom: 3%;
} }
div.gallery img{ 100% {
width:100%; opacity: 100;
height:auto margin-top: 0%;
padding-bottom: 3%;
} }
div.desc{
padding:15px
} }
*{ @keyframes portfolioItems {
box-sizing:border-box 0% {
opacity: 0;
margin-top: 3%;
padding-bottom: 0%;
} }
.main{ 90% {
margin-left:10vw; opacity: 100;
margin-right:7vw; margin-top: 0%;
width:90vw; padding-bottom: 3%;
margin-bottom:4vw
} }
.responsive{ 100% {
font-family:futura; opacity: 100;
padding:0 6px; margin-top: 0%;
margin:auto; padding-bottom: 3%;
display:block;
float:left;
width:22%
} }
.clearfix:after{
content:"";
display:table;
clear:both
} }
@media screen and (max-width:600px){ @keyframes lineAnimation {
.posts,h1,h2,h3,ol,p,ul{ 0% {
margin-left:20px; width: 0;
margin-right:20px; opacity: 0;
margin-top:30px }
100% {
width: 100%;
}
} }
hr{ hr{
width:93% width:93%
@ -182,16 +322,31 @@ div.desc{
.code-posts{ .code-posts{
font-size:75% font-size:75%
} }
.container {
margin-top: 7.5vw;
margin-left: 2vw;
margin-right: 2vw;
}
.homepage-title{ .homepage-title{
width:50%; width:50%;
max-width:75%; max-width:75%;
height:12.5% height:12.5%
}
.gallery {
justify-content: flex-start;
}
.image-container {
width: calc(100% - 20px);
} }
.nested-list{ .nested-list{
margin-left:-6vw; margin-left:-6vw;
margin-top:4vw; margin-top:4vw;
margin-bottom:4vw margin-bottom:4vw
} }
.main-header{
font-size: 7.5px;
}
.responsive{ .responsive{
width:100%; width:100%;
padding-bottom:4vw padding-bottom:4vw
@ -207,6 +362,12 @@ div.desc{
margin-top:7vw; margin-top:7vw;
padding:8px padding:8px
} }
.navigation{
font-size: 90%;
}
.lines {
margin-top: 5%;
}
} }
@media screen and (max-width:1150px){ @media screen and (max-width:1150px){
img{ img{

29
portfolio/wip.html
Unescape Escape View File

@ -2,13 +2,38 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Sufyaan | Designer</title> <title>Sufyaan | Designer</title>
<link rel="icon" type="image/x-icon" href="../images/favicon.webp"> <link rel="icon" type="image/x-icon" href="images/favicon.webp">
<link rel='stylesheet' type='text/css' href="style.css"> <link rel='stylesheet' type='text/css' href="style.css">
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<h1 class="main-header">TitanElectrons</h1> <div class="main-header" style="text-align: center;">
<a href=".">
<img src="images/title.webp" draggable="false">
</a>
</div>
<p style="color:#c9c9c9" class="navigation"><a style="text-decoration: none;color: #000bef;" href=".">DESIGNS</a> | <a style="text-decoration: none;" href="about">ABOUT</a> | <a style="text-decoration: none;" href="contact">CONTACT</a></p>
<hr class="lines">
<title>Image Gallery</title>
</head>
<body>
<div class="gallery">
<div class="image-container">
<img class="image" src="image1.jpg" alt="Image 1">
<div class="image-details">Image 1 Details</div>
</div>
<div class="image-container">
<img class="image" src="image2.jpg" alt="Image 2">
<div class="image-details">Image 2 Details</div>
</div>
<div class="image-container">
<img class="image" src="image3.jpg" alt="Image 3">
<div class="image-details">Image 3 Details</div>
</div>
<!-- Repeat more image containers as needed -->
</div>
</body> </body>

Write Preview
Loading…
Cancel
Save