Skip to content

Commit

Permalink
💄 Reposition de toogle btn and hamburger btn
Browse files Browse the repository at this point in the history
  • Loading branch information
@SofiDevO
SofiDevO committed Nov 7, 2023
1 parent 7e8981a commit f6bffeb
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 62 deletions.
4 changes: 2 additions & 2 deletions assets/Styles/elements/toTop.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
.menu__flotante {
position: fixed;
z-index: 999;
bottom: 15vh;
right: 5.9vw;
bottom: 13%;
right: 3%;

}
.to__top {
Expand Down
26 changes: 8 additions & 18 deletions assets/Styles/elements/toogleDark.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
.menu__icon {
display: flex;

position: fixed;
z-index: 999;
bottom: 5vh;
right: 81.7vw;
}

.dark-mode__container {
-webkit-animation: scale-up-center 0.3s ease-in 2s backwards;
Expand Down Expand Up @@ -34,6 +26,8 @@
}

.dark-mode__container {
z-index: 999;
position: fixed;
width: 4rem;
height: 4rem;
transition: all 0.4s;
Expand All @@ -45,10 +39,8 @@
box-shadow: -15px 35px 68px 0px rgba(145, 192, 255, 0.5), inset 12px -12px 16px 0px rgba(214, 232, 255, 0.214), inset 0px 11px 28px 0px rgb(255, 255, 255);
padding: 7px;
display: flex;
bottom: 7%;
right: 84%;
position: fixed;

bottom: 4.1%;
right: 83%;
}


Expand All @@ -66,18 +58,16 @@

@media (min-width: 768px) {
.dark-mode__container {
bottom: -89vh;
right: 5%;
position: absolute;
bottom: 4%;
right: 3%;
}


}
@media (min-width: 1200px) {
.dark-mode__container {
bottom: -86vh;
right: -44px;

bottom: 5%;
right: 1.7%;
}

}
36 changes: 18 additions & 18 deletions assets/Styles/header/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,24 +46,24 @@
/* Menu hamburguesa */
.panel__btn {
position: fixed;
z-index: 9999;
bottom: 3vh;
right: 3vw;
width: 6rem;
height: 6rem;
border-radius: 50%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
border: solid;
border-color: var(--dark-purple);
z-index: 9999;
bottom: 2%;
right: 1.5%;
width: 6rem;
height: 6rem;
border-radius: 50%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
border: solid;
border-color: var(--dark-purple);
}
.panel {
position: fixed;
Expand Down
58 changes: 34 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,13 +98,16 @@
<li class="menu__list"><a class="menu__link menu__hamburger-link" href="#portafolio">Portfolio</a></li>
<li class="menu__list"><a class="menu__link menu__hamburger-link" href="#hobbies">Hobbies</a></li>
<li class="menu__list"><a class="menu__link menu__hamburger-link" href="#formulario">Contact</a></li>
<li class="menu__list"><a class="menu__link menu__hamburger-link" href="https://blog.itssofi.dev/" target="_blank">Blog</a></li>
<li class="menu__list"><a class="menu__link menu__hamburger-link" href="https://blog.itssofi.dev/"
target="_blank">Blog</a></li>
</ul>
<div class="dark-mode__container">
<div class="dark-mode__container">
<i class="bi bi-lightning-charge desktop-rayo" data-toogle></i>
</div>
</header>

<div class="dark-mode__container">
<i class="bi bi-lightning-charge desktop-rayo" data-toogle></i>
</div>

<!-- menu movil (hamburguesa) -->
<button class="panel__btn hamburger hamburger--emphatic" type="button" aria-label="menu">
Expand All @@ -115,7 +118,7 @@


<div class="menu__flotante">


<div class="icon__top-container">
<div class="to__top" data-menu="float">
Expand Down Expand Up @@ -199,19 +202,21 @@ <h2 class="skills__titulo titulo__dark">Skills</h2>

<div class="terminal__content ">
<span class="terminal__content">
Happily graduated from the
</span><a class=" terminal__content" id="link-oracle"
Happily graduated from the
</span><a class=" terminal__content" id="link-oracle"
href="https://www.oracle.com/mx/education/oracle-next-education/" target="_blank"
rel="nofollow noopener noreferrer">"One Oracle Next Education" </a>
<p class="terminal__content">
Strong foundation in <span class="terminal__content"> semantic HTML, CSS, SCSS, Javascript, React, Styled Components,
SASS, React Router, Axios, and Astro. I also have basic knowledge of MySQL. </span>
<p class="terminal__content">
Strong foundation in <span class="terminal__content"> semantic HTML, CSS, SCSS, Javascript,
React, Styled Components,
SASS, React Router, Axios, and Astro. I also have basic knowledge of MySQL. </span>
</p>
<p class="terminal__content">
In addition to my technical skills, I have experince in SEO, graphic design, and UI design.
</p>
<div class="skills__descargar">
<a class="link__boton" href="./assets/documents/Angela_Sofia_Osorio_Cv_2023.pdf" target="_blank" >
<a class="link__boton" href="./assets/documents/Angela_Sofia_Osorio_Cv_2023.pdf"
target="_blank">
<button class="boton titulo__dark"> <span>Download
CV</span> <img class="skills__descargar__icono icono__boton"
src="./assets/svg/generate-pdf.svg" alt="download button"> </button>
Expand Down Expand Up @@ -469,39 +474,41 @@ <h2 class="tools__titulo titulo__dark">Tools</h2>
<section class="about" id="aboutMe">
<h2 class="about__titulo" id="aboutDeTitulo">Who
is Sofi <span class="span__dark" id="span-titulo2"> Dev</span>? </h2>
<div class="about__container">
<div class="about__container">
<div class="card__about ">
<div class="card-photo">
<img class="about__img--src" src="./assets/img/sofi4.png" alt="" >
<img class="about__img--src" src="./assets/img/sofi4.png" alt="">
</div>
<div class="card-title">
<p> SofiDev</p>
<span>frontend Developer</span>
</div>
<div class="card-socials">
<button class="card-socials-btn facebook">
<a class="icon" href="./assets/documents/Angela_Sofia_Osorio_Cv_2023.pdf" target="_blank" >
<img class="about__icons" src="./assets/svg/pdf-solid.svg" alt="" >
</a>
<a class="icon" href="./assets/documents/Angela_Sofia_Osorio_Cv_2023.pdf" target="_blank">
<img class="about__icons" src="./assets/svg/pdf-solid.svg" alt="">
</a>
</button>
<button class="card-socials-btn ">
<a class="icon" href="https://github.com/SofiDevO" target="_blank"
rel="nofollow noreferrer noopener">
<img class="about__icons" src="./assets/svg/github-light.svg" alt="icono GitHub" data-name="Layer 21" id="Layer_21" >
rel="nofollow noreferrer noopener">
<img class="about__icons" src="./assets/svg/github-light.svg" alt="icono GitHub"
data-name="Layer 21" id="Layer_21">
</a>

</button>
<button class="card-socials-btn ">
<a class="icon" href="https://www.linkedin.com/in/sofidev/"
target="_blank" rel="nofollow noreferrer noopener">
<img class="about__icons" src="./assets/svg/linkedin.svg" alt="icono linkedin" data-name="Layer 21" id="Layer_21" >
<a class="icon" href="https://www.linkedin.com/in/sofidev/" target="_blank"
rel="nofollow noreferrer noopener">
<img class="about__icons" src="./assets/svg/linkedin.svg" alt="icono linkedin"
data-name="Layer 21" id="Layer_21">
</a>

</button>
</div>
</div>


<div class="about__caja caja__cristal caja__dark" ">
<div class=" terminal_toolbar">
<div class="butt">
Expand All @@ -516,13 +523,16 @@ <h3 class="terminal__content">
Angela Sofía Osorio
</h3>
<p class="terminal__content contenido">
I'm a dedicated junior front-end developer based in Mexico, passionate about technology and constantly expanding my skills. I also have a deep love for coffee and enjoy writing articles
I'm a dedicated junior front-end developer based in Mexico, passionate about technology and
constantly expanding my skills. I also have a deep love for coffee and enjoy writing articles
</p>
<h3 class="terminal__content contenido">
What <span class="about__span span__dark">sets me apart?</span>
</h3>
<p class="terminal__content contenido">
I genuinely <span class="span__dark">love what I do! 💙</span> I believe that blending creativity and code can craft enchanting user experiences. In my free time, you'll often find me sipping coffee, writing articles on my blog, and creating YouTube videos about programming.
I genuinely <span class="span__dark">love what I do! 💙</span> I believe that blending
creativity and code can craft enchanting user experiences. In my free time, you'll often find me
sipping coffee, writing articles on my blog, and creating YouTube videos about programming.
</p>
</div>
<div class="about__contactar">
Expand Down

0 comments on commit f6bffeb

Please sign in to comment.