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 c03f8caa1c
commit cfb10dfe43
4 changed files with 150 additions and 16 deletions
Show Stats Download Patch File Download Diff File

30
portfolio/about/index.html
Unescape Escape View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sufyaan | Designer</title>
<link rel="icon" type="image/x-icon" href="../images/favicon.webp">
<link rel='stylesheet' type='text/css' href="../style.css">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="nonanim-header" style="text-align: center">
<a href="../">
<img src="../images/title.webp" draggable="false">
</a>
</div>
<p style="color:#c9c9c9" class="nonanim-nav"><a style="text-decoration: none;" href="../">DESIGNS</a> | <a style="text-decoration: none;color: #000bef;" href=".">ABOUT</a> | <a style="text-decoration: none;" href="../contact">CONTACT</a></p>
<hr class="nonlines">
<body>
<h1>About</h1>
<p>Hey. My name is Sufyaan.</p>
<hr class="nonline">
<div class="nonfooter">
<p class="footername">Sufyaan A.</p>
<div style="text-align: center;" class="footericons">
<a href="mailto:sufyaan@counterhawks.com"><svg class="footericon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5l-8-5V6l8 5l8-5v2z"/></svg></a>
</div></div>
</body>

29
portfolio/contact/index.html
Unescape Escape View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sufyaan | Designer</title>
<link rel="icon" type="image/x-icon" href="../images/favicon.webp">
<link rel='stylesheet' type='text/css' href="../style.css">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="nonanim-header" style="text-align: center">
<a href="../">
<img src="../images/title.webp" draggable="false">
</a>
</div>
<p style="color:#c9c9c9" class="nonanim-nav"><a style="text-decoration: none;" href="../">DESIGNS</a> | <a style="text-decoration: none;" href="../about">ABOUT</a> | <a style="text-decoration: none;color: #000bef;" href=".">CONTACT</a></p>
<hr class="nonlines">
<body>
<p>hey</p>
<hr class="nonline">
<div class="nonfooter">
<p class="footername">Sufyaan A.</p>
<div style="text-align: center;" class="footericons">
<a href="mailto:sufyaan@counterhawks.com"><svg class="footericon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5l-8-5V6l8 5l8-5v2z"/></svg></a>
</div></div>
</body>

98
portfolio/style.css
Unescape Escape View File

@ -1,9 +1,15 @@
b,ol,p,ul{ b,ol,p,ul{
font-family:futura font-family:futura;
margin-left: 7.5vw;
margin-right: 7.5vw;
} }
body,h1{ body,h1{
color:#121212 color:#121212
} }
h1 {
margin-left: 7.5vw;
margin-right: 7.5vw;
}
.responsive,div.desc,footer{ .responsive,div.desc,footer{
text-align:center text-align:center
} }
@ -14,6 +20,21 @@ a:link {
text-decoration: none; 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 { a:hover {
color: #606060; color: #606060;
background-color: transparent; background-color: transparent;
@ -36,10 +57,9 @@ a:hover {
opacity: 0; opacity: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center;
font-family: futura; font-family: futura;
font-weight: bolder; font-weight: bolder;
margin-top: -2.5%;
font-size: 150%; font-size: 150%;
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
border-radius: 10px; border-radius: 10px;
@ -103,7 +123,6 @@ margin-right: 7vw;
.item { .item {
background-color: #f0f0f0; background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 20px; padding: 20px;
width: calc(33.33% - 20px); width: calc(33.33% - 20px);
box-sizing: border-box; box-sizing: border-box;
@ -112,7 +131,6 @@ margin-right: 7vw;
.item:hover { .item:hover {
background-color: #000; background-color: #000;
border: 1px solid #efefef;
color: #efefef; color: #efefef;
transition: ease-in-out transition: ease-in-out
} }
@ -154,6 +172,18 @@ margin-right: 7vw;
padding-bottom: 4.5%; 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 { @keyframes portfolioItems {
0% { 0% {
@ -164,7 +194,19 @@ margin-right: 7vw;
100% { 100% {
opacity: 100; opacity: 100;
margin-top: 2.5%; 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; text-align: center;
animation: titleAnim normal both cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s; 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 { .navigation {
text-align: center; text-align: center;
color: #efefef; color: #efefef;
animation: glideIn normal both cubic-bezier(0.77, 0, 0.175, 1) 0.6s 0.7s; 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 { .lines {
animation: lineAnimation normal both 0.5s 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); animation: lineAnimation normal both 0.5s 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
margin-top: -3%; 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-face{
font-family:futura; font-family:futura;
@ -322,6 +388,10 @@ h3{
width: 100%; width: 100%;
} }
} }
.nonanim-header {
margin-top: 7.5%;
padding-bottom: 4.5%;
}
hr{ hr{
width:93% width:93%
} }
@ -345,6 +415,10 @@ h3{
.gallery { .gallery {
justify-content: flex-start; justify-content: flex-start;
} }
.image-details {
font-size: 120%;
margin-left: -2.5%;
}
.image-container { .image-container {
width: calc(100% - 20px); width: calc(100% - 20px);
@ -361,12 +435,10 @@ h3{
width:100%; width:100%;
padding-bottom:4vw padding-bottom:4vw
} }
div.gallery{ .nonanim-nav{
border:1px solid #121212 margin-top: 0%;
} padding-bottom: 3%;
div.gallery:hover{ }
border:1px solid
}
.main{ .main{
width:75vw; width:75vw;
margin-top:7vw; margin-top:7vw;
@ -375,7 +447,7 @@ h3{
.navigation{ .navigation{
font-size: 90%; font-size: 90%;
} }
.lines { .lines, .nonlines {
margin-top: 5%; margin-top: 5%;
} }
} }

9
portfolio/wip.html
Unescape Escape View File

@ -16,8 +16,6 @@
</div> </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> <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"> <hr class="lines">
<title>Image Gallery</title>
</head>
<body> <body>
<div class="gallery"> <div class="gallery">
<div class="image-container"> <div class="image-container">
@ -33,8 +31,13 @@
<img class="image" src="image3.jpg" alt="Image 3"> <img class="image" src="image3.jpg" alt="Image 3">
<div class="image-details">Image 3 Details</div> <div class="image-details">Image 3 Details</div>
</div> </div>
<!-- Repeat more image containers as needed -->
</div> </div>
<hr class="endline">
<div class="footer">
<p class="footername">Sufyaan A.</p>
<div style="text-align: center;" class="footericons">
<a href="mailto:sufyaan@counterhawks.com"><svg class="footericon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5l-8-5V6l8 5l8-5v2z"/></svg></a>
</div></div>
</body> </body>

Write Preview
Loading…
Cancel
Save