Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history 
landing-page
  • Loading branch information
@oriphel
oriphel committed Jul 13, 2024
1 parent f9f6503 commit 93822a1
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 128 deletions.
184 changes: 92 additions & 92 deletions _includes/landing-page.html
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,110 @@
<div id="landing">
<div class="overlay"></div>
<div class="landing-title">
<img src="{{ "/assets/img/mascota_bandera.png" | prepend: site.baseurl }}" alt="Logo" style="width: 250px; height: auto;">
<h1>Hola, <span class="highlight-title">bienvenid@ </span> a nuestro proyecto
</h1>

<div class="landing-title">
<h1>Hola, <span class="highlight-title">bienvenid@ </span> a nuestro proyecto</h1>

<h1>
<span id="txt-rotate" data-period="2000"
data-rotate='["{{site.typing_text}}", "baja para más info."]'
>
</span>
<span id="txt-rotate" data-period="2000" data-rotate='["{{site.typing_text}}", "baja para más info."]'></span>
</h1>
<div class="landing-icons">
{% if site.email != null %}
<a class="social-link email" aria-label="My E-Mail" href="mailto:{{site.email}}">
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />

<img src="{{ "/assets/img/mascota_bandera.png" | prepend: site.baseurl }}" alt="Logo" style="width: 150px; height: auto;">
</div>

<div class="landing-icons">
{% if site.email != null %}
<a class="social-link email" aria-label="My E-Mail" href="mailto:{{site.email}}">
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/solid.svg#envelope" | prepend: site.baseurl }}""></use>
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/solid.svg#envelope" | prepend: site.baseurl }}""></use>
</svg>
</div>
<span class="label">E-Mail</span>
</a>
{% endif %}
</div>
<span class="label">E-Mail</span>
</a>
{% endif %}

{% if site.github_username != null %}
<a class="social-link" aria-label="My GitHub" target="_blank" rel="noreferrer"
href="https://github.com/{{site.github_username}}"
>
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
{% if site.github_username != null %}
<a class="social-link" aria-label="My GitHub" target="_blank" rel="noreferrer"
href="https://github.com/{{site.github_username}}"
>
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#github" | prepend: site.baseurl }}"></use>
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#github" | prepend: site.baseurl }}"></use>
</svg>
</div>
<span class="label">GitHub</span>
</a>
{% endif %}
</div>
<span class="label">GitHub</span>
</a>
{% endif %}

{% if site.codepen_username != null %}
<a class="social-link" aria-label="My Codepen" target="_blank" rel="noreferrer"
href="https://codepen.io/{{site.codepen_username}}"
>
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
{% if site.codepen_username != null %}
<a class="social-link" aria-label="My Codepen" target="_blank" rel="noreferrer"
href="https://codepen.io/{{site.codepen_username}}"
>
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#codepen" | prepend: site.baseurl }}"></use>
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#codepen" | prepend: site.baseurl }}"></use>
</svg>
</div>
<span class="label">CodePen</span>
</a>
{% endif %}
</div>
<span class="label">CodePen</span>
</a>
{% endif %}

{% if site.dev_username != null %}
<a class="social-link" aria-label="My DEV" target="_blank" rel="noreferrer"
href="https://dev.to/{{site.dev_username}}"
>
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
{% if site.dev_username != null %}
<a class="social-link" aria-label="My DEV" target="_blank" rel="noreferrer"
href="https://dev.to/{{site.dev_username}}"
>
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#dev" | prepend: site.baseurl }}"></use>
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#dev" | prepend: site.baseurl }}"></use>
</svg>
</div>
<span class="label">DEV</span>
</a>
{% endif %}
</div>
<span class="label">DEV</span>
</a>
{% endif %}

{% if site.linkedin_username != null %}
<a class="social-link linkedin" aria-label="My LinkedIn" target="_blank"
rel="noreferrer" href="https://www.linkedin.com/in/{{site.linkedin_username}}"
>
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
{% if site.linkedin_username != null %}
<a class="social-link linkedin" aria-label="My LinkedIn" target="_blank"
rel="noreferrer" href="https://www.linkedin.com/in/{{site.linkedin_username}}"
>
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#linkedin-in" | prepend: site.baseurl }}"></use>
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#linkedin-in" | prepend: site.baseurl }}"></use>
</svg>
</div>
<span class="label">LinkedIn</span>
</a>
{% endif %}
</div>
<span class="label">LinkedIn</span>
</a>
{% endif %}

{% if site.twitter_username != null %}
<a class="social-link twitter" aria-label="My Twitter" target="_blank"
rel="noreferrer" href="https://twitter.com/{{site.twitter_username}}"
>
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
{% if site.twitter_username != null %}
<a class="social-link twitter" aria-label="My Twitter" target="_blank"
rel="noreferrer" href="https://twitter.com/{{site.twitter_username}}"
>
<svg viewBox="0 0 200 200" class="circle">
<circle cx="100" cy="100" r="80" />
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#twitter" | prepend: site.baseurl }}"></use>
</svg>
<div class="social">
<svg class="social-svg" viewBox="0 0 48 48">
<use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#twitter" | prepend: site.baseurl }}"></use>
</svg>
</div>
<span class="label">Twitter</span>
</a>
{% endif %}
</div>
</div>
<span class="label">Twitter</span>
</a>
{% endif %}
</div>
</div>
</div>
54 changes: 21 additions & 33 deletions _sass/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ $large-screen: 75em !default;
$font-family: "Raleway", sans-serif;
$font-family-numbers: "Josefin Sans", sans-serif;
$font-size-base: 1rem !default;
$font-size-h1: 2rem !default;
$font-size-h1: 1.75rem !default;
$font-weight-strong: 600;
$text-color: #fff !default;
$text-color: #fdfbfb !default;
$bg-color: rgba(43, 45, 47, 1);
$card-bg-color: linear-gradient(
145deg,
Expand All @@ -38,20 +38,6 @@ body {
height: 100%;
}

.layout {
position: relative; /* Para asegurar que el contenido esté por encima del fondo */
z-index: 1;
padding: 20px; /* Espaciado */
}

section.card {
background: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente */
padding: 20px; /* Espaciado interno */
border-radius: 8px; /* Bordes redondeados */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para neumorfismo */
}



/* Typography */

Expand All @@ -75,7 +61,7 @@ a {
}

.highlight-title {
color: $bg-color;
color: rgba(248, 171, 5, 0.836);
text-shadow: 0.25rem 0.25rem 0.25rem $bg-color;
}

Expand Down Expand Up @@ -246,47 +232,49 @@ a {
#landing {
background: url('/assets/img/fig_back.png') no-repeat center top; /* Imagen de fondo */
background-size: cover; /* Asegúrate de cubrir el contenedor */
background-position: 60% 50%;
z-index: -1; /* Envía el fondo detrás del contenido */
color: $bg-color; /* Color del texto */
color: rgba(241, 238, 245, 0.8); /* Color del texto */
display: flex; /* Habilita flexbox */
flex-direction: column; /* Alinea elementos en columna */
justify-content: center; /* Centra verticalmente */
align-items: center; /* Centra horizontalmente */
height: 100vh; /* Altura del viewport */
height: 100%; /* Altura del viewport */
padding: 10px; /* Espacio interno */
text-align: center; /* Centra el texto */
border-radius: 50%; /* Esto crea la forma ovalada */
overflow: hidden; /* Oculta cualquier contenido que se desborde */
}


#landing .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(135, 206, 250, 0.5); /* Color celeste con transparencia */
background-color: rgba(71, 8, 172, 0.3); /* Color celeste con transparencia */
z-index: 0; /* Justo encima de la imagen de fondo */
animation: blob 8s infinite alternate;
border-radius: 50%; /* Hace que la mancha tenga bordes redondeados */
filter: blur(8px); /* Ajusta el valor para el nivel de difuminado deseado */
}

.landing-title {
.landing-icons {
display: flex;
flex-direction: row; /* Asegura que los iconos estén en fila */
justify-content: center; /* Centra los iconos horizontalmente */
margin-top: 3rem; /* Ajusta según necesites */
}

.landing-title {
left: 0;
margin: 80px 0.5rem 0.5rem; // Aumenta el margin-top aquí
margin: 0.5rem;
padding: 0.5rem;
position: absolute;
right: 0;
top: 30%;
}

.landing-icons {
display: flex;
justify-content: center;
margin-top: 80px; // Ajusta este valor según necesites


.social-link {
color: $text-color;
position: relative;
Expand All @@ -311,7 +299,7 @@ a {
}

.social-svg {
fill: white;
fill: rgb(243, 241, 247);
}

.label {
Expand Down Expand Up @@ -416,7 +404,7 @@ a {

@keyframes blob {
0% {
transform: scale(0.8) translate(0);
transform: scale(0.9) translate(0);
}
25% {
transform: scale(1) translate(-10px, -10px);
Expand All @@ -428,10 +416,10 @@ a {
transform: scale(1) translate(-5px, 10px);
}
100% {
transform: scale(0.8) translate(0);
transform: scale(0.9) translate(0);
}
}
}




Expand Down
Loading

0 comments on commit 93822a1

Please sign in to comment.