Skip to content

Commit

Permalink
More Responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jiroma
Jiroma committed Mar 20, 2024
1 parent 113b6a8 commit 4eaed4c
Show file tree
Hide file tree
Showing 14 changed files with 199 additions and 103 deletions.
7 changes: 6 additions & 1 deletion website-andes-hosting/src/components/benefits/Benefits.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,9 @@
}
}
}

/* aqui */
@media only screen and (max-width: 400px){
.container-benefits-page{
margin-top: 100px;
}
}
117 changes: 64 additions & 53 deletions website-andes-hosting/src/components/benefitsCard/BenefitsCard.scss
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,76 @@
@import './../../variables';
@import "./../../variables";

.benefits-card{
display:flex;
align-items: start;
.benefits-card {
display: flex;
align-items: start;
flex-direction: column;
width: 33%;
background-color: transparent;
border: 0;
height: 330px;
.icon-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 120px;
background-color: #3e055b8a;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.65);
border-radius: 5px;
opacity: 90%;
}
.benefits-card-title {
font-family: $font;
font-style: normal;
font-weight: 600;
font-size: 20px;
text-align: center;
color: $Color-cyan;
margin-top: 15px;
}
.benefits-card-text {
font-family: $font;
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
color: $Color-white;
}
.benefits-text-container {
display: flex;
flex-direction: column;
width: 33%;
background-color: transparent;
border: 0;
height: 330px;
.icon-container{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 120px;
background-color: #3e055b8a;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.65);
border-radius: 5px;
opacity: 90%;
}
.benefits-card-title{
font-family: $font;
font-style: normal;
font-weight: 600;
font-size: 20px;
text-align: center;
color: $Color-cyan;
margin-top: 15px;
}
.benefits-card-text{
font-family: $font;
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
color: $Color-white;
}
.benefits-text-container{
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
}
align-items: start;
justify-content: start;
}
}

@media only screen and (max-width: 1100px) {
.benefits-card {
width: 49%;
height: 300px;
}
}

@media only screen and (max-width: 1100px) {
.benefits-card{
width: 49%;
@media only screen and (max-width: 768px) {
.benefits-card {
width: 100%;
height: 250px;
.icon-container {
height: 110px;
}
.benefits-card-title {
font-size: 16px;
}
.benefits-card-text {
font-size: 14px;
}
}
}
@media only screen and (max-width: 768px) {

@media only screen and (max-width: 500px) {
.benefits-card{
width: 100%;
.benefits-card-title{
font-size: 16px;
}
.benefits-card-text{
font-size: 12px;
}
}

}
}
5 changes: 2 additions & 3 deletions website-andes-hosting/src/components/carousel/Carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ const CarouselHeader = () => {
<div className='carouselContainer'>

<div className='carouselInfo'>
<h1>Bienvenido a <span>ANDES HOSTING</span></h1>
<p>Tu mejor aliado para servidores de videojuegos. Con CPU ilimitada y hosting de baja latencia, garantizamos una experiencia de juego sin igual. Asistencia personalizada y servidores privados para una diversión libre de trolls. Únete ahora y lleva tu experiencia de juego al siguiente nivel.</p>

<h1>Bienvenido a <span className='carouselTitle'>ANDES HOSTING</span></h1>
<p>Tu mejor aliado para servidores de videojuegos. Con CPU ilimitada y hosting de baja latencia<span className='delete-responsive'>, garantizamos una experiencia de juego sin igual. Asistencia personalizada y servidores privados para una diversión libre de trolls. Únete ahora y lleva tu experiencia de juego al siguiente nivel.</span></p>
<BtnSection className='carouselButton' text="¡Contratar un servidor ahora!" href="#planes" >
<RocketIcon className='carouselIcon' />
</BtnSection>
Expand Down
45 changes: 26 additions & 19 deletions website-andes-hosting/src/components/carousel/Carousel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,11 @@
font-size: 20px;
font-weight: 400;
text-wrap: pretty;
.delete-responsive{
display: inline;
}
}
span{
.carouselTitle{
display: block;
font-size: 45px;
font-weight: 800;
Expand Down Expand Up @@ -65,7 +68,7 @@
margin-bottom: 20px;
width: 70%;
}
span{
.carouselTitle{
font-size: 24px;
font-weight: 800;
}
Expand Down Expand Up @@ -97,7 +100,7 @@
font-weight: 400;
width: 280px;
}
span{
.carouselTitle{
font-size: 20px;
font-weight: 800;
}
Expand Down Expand Up @@ -126,7 +129,7 @@
font-size: 14px;
font-weight: 400;
}
span{
.carouselTitle{
font-size: 20px;
font-weight: 800;
}
Expand All @@ -145,15 +148,15 @@
.carouselContainer{
.carouselInfo{
h1{
font-size: 10px;
font-size: 12px;
font-weight: 700;
}
p{
font-size: 10px;
font-weight: 400;
width: 200px;
}
span{
.carouselTitle{
font-size: 12px;
font-weight: 800;
}
Expand All @@ -172,19 +175,19 @@
.carouselContainer{
.carouselInfo{
h1{
font-size: 8px;
font-size: 12px;
font-weight: 700;
}
p{
font-size: 8px;
font-size: 10px;
font-weight: 400;
}
span{
.carouselTitle{
font-size: 10px;
font-weight: 800;
}
a{
font-size: 8px;
font-size: 10px;
.rocket{
width: 18px;
}
Expand All @@ -197,21 +200,24 @@
.carouselContainer{
.carouselInfo{
h1{
font-size: 8px;
font-size: 12px;
font-weight: 700;
}
p{
font-size: 6px;
font-size: 10px;
font-weight: 400;
width: 150px;
margin-bottom: 10px;
.delete-responsive{
display: none;
}
}
span{
.carouselTitle{
font-size: 10px;
font-weight: 800;
}
a{
font-size: 6px;
font-size: 10px;
.rocket{
width: 16px;
}
Expand All @@ -225,21 +231,22 @@
.carouselInfo{
padding-top: 30px;
h1{
font-size: 8px;
font-size: 12px;
font-weight: 700;
}
p{
font-size: 6px;
font-size: 10px;
font-weight: 400;
width: 150px;
margin-bottom: 5px;
margin-bottom: 10px;
}
span{
.carouselTitle{
font-size: 10px;
font-weight: 800;
}
a{
font-size: 6px;
font-size: 8px;
padding: 4px 5px;
.rocket{
width: 12px;
}
Expand Down
3 changes: 2 additions & 1 deletion website-andes-hosting/src/components/footer/Footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@
}

.copyright{
margin-top: 6%;
/* aqui */
margin-top: 50px;
p{
color: white;
text-align: center;
Expand Down
11 changes: 8 additions & 3 deletions website-andes-hosting/src/components/gamePlansCarousel/GamePlansCarousel.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
import React from 'react'
import React, { useState } from 'react'
import games from "../../games.js"
import "./GamePlansCarousel.scss"
import GamePlansList from '../gamePlansList/GamePlansList.js'
import Carousel from 'react-bootstrap/Carousel';

const GamePlansCarousel = ({currency='CLP'}) => {
const [interval, setInterval] = useState(5000);

const handleSlide = () => {
setInterval(10000);
}

return (
<div className='carouselPlansContainer'>
<Carousel interval={10000000000000}>
<Carousel interval={interval} onSlide={handleSlide}>
<Carousel.Item>
<GamePlansList game={games.minecraft} currency={currency}/>
<GamePlansList game={games.minecraft} currency={currency}/>
</Carousel.Item>

<Carousel.Item>
Expand Down
2 changes: 1 addition & 1 deletion website-andes-hosting/src/components/gamePlansList/GamePlansList.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
}
.gameLogo{
img{
width: 80%;
width: 100%;
height: auto;
}
}
Expand Down
2 changes: 1 addition & 1 deletion website-andes-hosting/src/components/pterodactyl/Pterodactyl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Pterodactyl = () => {
<div className="ptero-container">
<h2 className="ptero-title">ADMINISTRA TUS SERVIDORES CON:</h2>
<img src={image_logo} alt="Pterodactyl logo"/>
<p className="ptero-text">Descubre la revolución en la gestión de servidores de videojuegos con Pterodactyl. Nuestra elección del panel de control Pterodactyl no solo garantiza un rendimiento excepcional y estabilidad inigualable, sino que también ofrece una interfaz intuitiva que pone el poder de la administración de servidores en manos de nuestros clientes. Con Pterodactyl, la experiencia de juego se eleva a nuevas alturas, permitiendo a nuestros usuarios tener el control total desu experiencia de hosting con facilidad y eficiencia. ¡Experimenta la excelencia en administración de servidores con Pterodactyl, solo en nuestro servicio de hosting!</p>
<p className="ptero-text">Descubre la revolución en la gestión de servidores de videojuegos con Pterodactyl. Nuestra elección del panel de control Pterodactyl no solo garantiza un rendimiento excepcional y estabilidad inigualable, sino que también ofrece una interfaz intuitiva que pone el poder de la administración de servidores en manos de nuestros clientes.<span className='ptero-delete'> Con Pterodactyl, la experiencia de juego se eleva a nuevas alturas, permitiendo a nuestros usuarios tener el control total desu experiencia de hosting con facilidad y eficiencia. ¡Experimenta la excelencia en administración de servidores con Pterodactyl, solo en nuestro servicio de hosting!</span></p>
</div>
<div className="img-section-background">
<div className= "img-container">
Expand Down
Loading

0 comments on commit 4eaed4c

Please sign in to comment.