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{
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%;
}
}

9
portfolio/wip.html
Unescape Escape View File

@ -16,8 +16,6 @@
</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">
@ -33,8 +31,13 @@
<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>
<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>

Write Preview
Loading…
Cancel
Save