Skip to content

Commit

Permalink
ux23 page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdivo
mdivo committed Apr 5, 2024
1 parent 544f3ea commit b1b0b60
Show file tree
Hide file tree
Showing 6 changed files with 375 additions and 0 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
375 changes: 375 additions & 0 deletions ux23.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,375 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Miguel Divo</title>
<link rel="icon" href="index_resources/tab-logo3.png" type="image/x-icon">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>


<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk4vzc/dW8b5tv6v0w7pCqF5/2z2PpXhpz3q5t5z" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>





<nav class="navbar sticky-top shadow-sm" id="navbar" style="background-color: rgb(255, 255, 255);">
<div class="container-fluid">
<div class="row align-items-center col-12 d-flex">
<div id="logoname" class="col-1 " style="width: 70px;">
<a class="navbar-brand padding-right-0" href="index.html">
<img src="index_resources/logo2.png" alt="" width="50" height="50" class="d-inline-block align-text-top">
</a>
</div>
<div class="col d-flex">
<a class="navbar-brand" href="index.html">
MIGUEL<br>DIVO
</a>
</div>


<div id="headerlinks" class="col d-flex justify-content-end align-items-center">
<a id="ux-item" class="navbar-brand ms-auto" href="https://mdivo.github.io/index.html#ux-projects">UX</a>

<style>
#ux-item{
margin-right: auto !important;
}
</style>

<div id="project-item" class="dropdown">
<a class="navbar-brand ms-auto dropdown-toggle" href="#" role="button" id="projectsDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
PROJECTS
</a>
<ul class="dropdown-menu" aria-labelledby="projectsDropdown">
<li><a class="dropdown-item" href="code.html">CODE</a></li>
<li><a class="dropdown-item" href="design.html">DESIGN</a></li>
<li><a class="dropdown-item" href="sound.html">SOUND</a></li>
</ul>
</div>
<a id="archive-item" class="navbar-brand ms-auto" href="archives.html">ARCHIVES</a>
<a id="about-item" class="navbar-brand ms-auto" href="about.html">ABOUT</a>

<div class="menu-botton-container" onclick="menuAnimate(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</div>
</nav>

<div id="overlay-menu">
<div id="menu-content">
<ul>
<li><a class="navbar-brand ms-auto" href="https://mdivo.github.io/index.html#ux-projects">UX PROJECTS</a></li>

<div class="dropdown" style="margin-bottom: 20px; margin-left: 13px;">
<a class="navbar-brand ms-auto dropdown-toggle" href="#" role="button" id="projectsDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="font-size: 1.5em;">
PROJECTS
</a>
<ul class="dropdown-menu" aria-labelledby="projectsDropdown">
<li><a class="dropdown-item" style="font-size: 1em;" href="code.html">CODE</a></li>
<li><a class="dropdown-item" style="font-size: 1em;" href="design.html">DESIGN</a></li>
<li><a class="dropdown-item" style="font-size: 1em;" href="sound.html">SOUND</a></li>
</ul>
</div>

<li><a class="navbar-brand ms-auto" href="archives.html">ARCHIVES</a></li>
<li><a class="navbar-brand ms-auto" href="about.html">ABOUT</a></li>
</ul>
</div>
</div>


<script>
function menuAnimate(x) {
x.classList.toggle("change");
var overlayMenu = document.getElementById("overlay-menu");

if (overlayMenu.style.opacity === "0" || overlayMenu.style.opacity === "") {
overlayMenu.style.display = "block";
setTimeout(function () {
overlayMenu.style.opacity = "1"; // Set opacity to 1 to fade in
}, 10); // Add a small delay to ensure the display change takes effect before fading in
} else {
overlayMenu.style.opacity = "0"; // Set opacity to 0 to fade out
setTimeout(function () {
overlayMenu.style.display = "none";
}, 300); // Wait for the fade-out transition to complete before hiding
}
}
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>





<div id="quick-info-page-section" class="container-fluid full-1st-height full-width ">
<div class="row " style="height: 70vh; justify-content: center; align-items: center;">


<style>
.oval-image {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
transition: filter 0.3s;
background-color: rgba(0, 0, 0, 0.467);
}

.oval-image img {
position: absolute;
width: 125%;
height: 125%;
object-fit: cover;
z-index: -1;
}

.oval-image .content {
height: 42vh;
width: 40vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow: hidden;
position: relative;
z-index: 1;
color: rgb(255, 255, 255);

}


</style>

<div class="oval-image ">

<img class="rounded-5" src="ux_resources/oval-image.png" >

<div class="content">
<p style="font-size: 0.7rem; margin-top: 0;"></p>
<a href="https://www.figma.com/file/8l15FPn7r1pm1SHX6O4iL5/UXathon---NYAP-(Self-File)?type=design&node-id=9%3A63&mode=design&t=OpatffNM5hyNdwgW-1" target="_blank" style="font-size: 2rem; color: white;"> CLICK <i class="fancy-font">Here</i> TO VIEW<br><i class="fancy-font">The Prototype</i> </a>
<p style="font-size: 0.7rem; margin-bottom: 0;"></p>
</div>
</div>



</div>


<div class="col-12 ">
<div class="row">

<div class="col-12" style="height: 14vh;">
<p style="font-size: 2rem; padding-top: 5vh; padding-bottom: 0px; margin-bottom: 0px;">NOT YOUR AVERAGE PHYSIO<i class="fancy-font"> / UXathon23</i></p>
<hr style="color: #000000; height: 12px; margin-top: 0px;">
</div>

<div>
<img src="ux_resources/ux23-bg.png" width="100%">
</div>






</div>
</div>

<style>
.card:hover h5 {
text-decoration: underline;
}

.card:hover img {
transform: scale(1.03); /* Zoom in effect on hover (adjust the scale value as needed) */
transition: transform 0.3s ease-in-out; /* Add smooth transition for zoom effect */

}

</style>







</div>


</body>
</html>





<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen&display=swap');


</style>


<style>
.fancy-font{
font-family: 'Adobe-Caslon-Pro';
}
</style>

<style>
#overlay-menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255); /* Semi-transparent white background */
z-index: 1000;
opacity: 0; /* Initially, set opacity to 0 */
transition: opacity 0.8s ease; /* Transition for opacity property */
}

#menu-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;

}

#menu-content ul {
list-style-type: none;
padding: 0;
}

#menu-content ul li {
margin-bottom: 20px;
}

#menu-content ul li a {
color: #000000;
font-size: 24px;
text-decoration: none;
}
</style>



<style>
/* Styles for screens 591px or higher */
@media (min-width: 592px) {
#ux-item, #project-item, #archive-item, #about-item {
display: block !important;
}

.menu-botton-container {
display: none;
}
}

/* Styles for screens 590px or lower */
@media (max-width: 590px) {
#ux-item, #project-item, #archive-item, #about-item {
display: none !important;
}

.menu-botton-container {
display: inline-block;
}
}

.menu-botton-container {
cursor: pointer;
}

.bar1, .bar2, .bar3 {
width: 35px;
height: 2px;
background-color: #333;
margin: 9px 0;
transition: 0.4s;
}

.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
opacity: 0;
}

.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
</style>

<style>

.no-margin {
margin: 0 !important;
}

.full-width {
width: 100vw;
}

.four-col-height {
height: 22.625vh;
}

.full-1st-height {
height: 90.5vh;
}

.font-weight-normal {
font-weight: 400!important;
}
.text-dark {
color: #343a40!important;
}

html{
font-size: 100%;
}

.font-size-for-scroll{
font-size: 0.8rem;
}


.oval-image {
width: 77vw;
height: 50vh;
overflow: hidden;
border-radius: 50%;
}

.oval-image img {
width: 100%;
height: 100%;
object-fit: cover;
}



</style>
Binary file added ux_resources/.DS_Store
View file
Binary file not shown.
Binary file added ux_resources/Desktop - 1.pdf
View file
Binary file not shown.
Binary file added ux_resources/oval-image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ux_resources/ux23-bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b1b0b60

Please sign in to comment.