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

updating pf

Browse Source
main
TitanElectrons 1 year ago
parent 94acaa44b3
commit c03f8caa1c
2 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File

16
portfolio/style.css
Unescape Escape View File

@ -31,14 +31,22 @@ a:hover {
.image-details { .image-details {
position: absolute; position: absolute;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.75);
color: white; color: white;
opacity: 0; opacity: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-family: futura;
font-weight: bolder;
font-size: 150%;
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
h1.image-details {
color: #efefef
} }
.item:hover .image-details { .item:hover .image-details {
@ -50,7 +58,7 @@ a:hover {
justify-content: center; justify-content: center;
margin-left: 7vw; margin-left: 7vw;
margin-right: 7vw; margin-right: 7vw;
animation: animation: portfolioItems normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s 1.5s;
} }
.image-container { .image-container {
@ -58,12 +66,14 @@ animation:
width: calc(33.33% - 20px); width: calc(33.33% - 20px);
margin: 10px; margin: 10px;
overflow: hidden; overflow: hidden;
border-radius: 10px;
} }
.image { .image {
width: 100%; width: 100%;
height: auto; height: auto;
transition: transform 0.3s; transition: transform 0.3s;
border-radius: 10px;
} }
.image-container:hover .image { .image-container:hover .image {
@ -77,7 +87,7 @@ animation:
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
color: white; color: #efefef;
padding: 10px; padding: 10px;
opacity: 0; opacity: 0;
display: flex; display: flex;

5
portfolio/wip.html
Unescape Escape View File

@ -21,8 +21,9 @@
<body> <body>
<div class="gallery"> <div class="gallery">
<div class="image-container"> <div class="image-container">
<img class="image" src="image1.jpg" alt="Image 1"> <a href="bitguard/">
<div class="image-details">Image 1 Details</div> <img class="image" src="images/bitguard.webp" alt="Image 1">
<div class="image-details">Your Security Redefined</div></a>
</div> </div>
<div class="image-container"> <div class="image-container">
<img class="image" src="image2.jpg" alt="Image 2"> <img class="image" src="image2.jpg" alt="Image 2">

Write Preview
Loading…
Cancel
Save