Skip to content

Commit

Permalink
Responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jiroma
Jiroma committed Mar 20, 2024
1 parent 0d4e1fb commit 113b6a8
Show file tree
Hide file tree
Showing 18 changed files with 561 additions and 47 deletions.
9 changes: 9 additions & 0 deletions website-andes-hosting/src/components/bannerTop/BannerTop.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,14 @@
font-size: 16px;
color: rgba(0, 0, 0, 1);
text-align: center;
width: 90%;
}
}

@media (max-width: 500px) {
.banner{
h2 {
font-size: 14px;
}
}
}
15 changes: 12 additions & 3 deletions website-andes-hosting/src/components/btnSection/Btn.scss
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,37 @@
@import './../../variables';

.btn{
.btnSection{
background-color: $Color-cyan;
border-radius: 10px;
padding: 5px 20px;
gap: 12px;
font-family: $font;
font-size: 14px;
font-weight: 500;
text-decoration: none;
color: black;
height: auto;
&:hover{
background-color: $Color-cyan-hover;
color: black;
}
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {
.btn{
.btnSection{
font-size: 12px;
}
}

@media only screen and (max-width: 768px) {
.btn{
.btnSection{
font-size: 11px;
}

}

@media (max-width: 650px) {
.btnSection{
font-size: 10px;
}
}
2 changes: 1 addition & 1 deletion website-andes-hosting/src/components/btnSection/BtnSection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const BtnSection = ({ href, children, text, otherClass='' }) => {
};

return (
<a href={href} onClick={handleClick} className={`btn ${otherClass}`} >
<a href={href} onClick={handleClick} className={`btnSection ${otherClass}`} >
{children}
{text}
</a>
Expand Down
63 changes: 63 additions & 0 deletions website-andes-hosting/src/components/bubble/Bubble.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,3 +211,66 @@ $bubble-icon: black;
bottom: calc(100% + 10px); /* Ajusta el valor según sea necesario */
left: 0;
}


@media only screen and (min-width: 768px) and (max-width: 1280px){
.fixed{
.dropup-start{
.btn.bubbleDefault{
width: 50px;
height: 50px;
.bubbleIcon{
display: flex;
justify-content: center;
align-items: center;
img {
width: 30px;
height: 30px;
}
}
}
.dropdown-item{
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
a {
width: 25px;
}
}
}
}
}

@media only screen and (max-width: 768px){
.fixed{
bottom: 20px;
right: 10px;
.dropup-start{
.btn.bubbleDefault{
width: 50px;
height: 50px;
.bubbleIcon{
display: flex;
justify-content: center;
align-items: center;
img {
width: 30px;
height: 30px;
}
}
}
.dropdown-item{
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
a {
width: 25px;
}
}
}
}
}
6 changes: 4 additions & 2 deletions website-andes-hosting/src/components/carousel/Carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@ const CarouselHeader = () => {
<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>
<BtnSection text="¡Contratar un servidor ahora!" href="#planes" >
<RocketIcon/>

<BtnSection className='carouselButton' text="¡Contratar un servidor ahora!" href="#planes" >
<RocketIcon className='carouselIcon' />
</BtnSection>

</div>

<Carousel pause={false} fade interval={3000}>
Expand Down
178 changes: 173 additions & 5 deletions website-andes-hosting/src/components/carousel/Carousel.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
@import './../../variables';

.carouselContainer{
margin-top: 20px;
width: 100% !important;
position: relative;
.carouselInfo{
padding-top: 20px;
position: absolute;
width: 27vw;
top:40%;
Expand All @@ -13,18 +15,26 @@
font-family: $font;
color: $Color-white;
h1{
font-size: 24px !important;
font-size: 32px ;
font-weight: 700;
}
p{
font-size: 20px;
font-weight: 400;
text-wrap: pretty;
}
span{
display: block;
font-size: 45px;
font-weight: 800;
}
a{
width: 80%;
padding: 10px 20px;
.rocket{
width: 26px;
}
}
}
.carousel-indicators{
display: none !important;
Expand All @@ -38,44 +48,202 @@
width: 100vw;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
@media only screen and (max-width: 1320px) {
.carouselContainer{
.carouselInfo{
width: 50vw;
height: 20vw;
margin-top: 0px;
padding-top: 0px;
h1{
font-size: 18px;
font-size: 20px;
font-weight: 700;
}
p{
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
width: 70%;
}
span{
font-size: 24px;
font-weight: 800;
}
a{
width: auto;
font-size: 14px;
padding: 8px 10px;
.rocket{
width: 22px;
}
}
}
}
}

@media only screen and (max-width: 768px) {

@media only screen and (max-width: 900px) {
.carouselContainer{
.carouselInfo{
width: 60vw;
height: 45vw;
padding-top: 80px;
h1{
font-size: 16px;
font-size: 18px;
font-weight: 700;
}
p{
font-size: 14px;
font-weight: 400;
width: 280px;
}
span{
font-size: 20px;
font-weight: 800;
}
a{
width: 40%;
font-size: 14px;
.rocket{
width: 20px;
}
}
}
}
}

@media (max-width: 730px) {
.carouselContainer{
.carouselInfo{
width: 60vw;
height: 45vw;
padding-top: 60px;
h1{
font-size: 18px;
font-weight: 700;
}
p{
font-size: 14px;
font-weight: 400;
}
span{
font-size: 20px;
font-weight: 800;
}
a{
width: 40%;
font-size: 14px;
.rocket{
width: 20px;
}
}
}
}
}

@media (max-width: 670px) {
.carouselContainer{
.carouselInfo{
h1{
font-size: 10px;
font-weight: 700;
}
p{
font-size: 10px;
font-weight: 400;
width: 200px;
}
span{
font-size: 12px;
font-weight: 800;
}
a{
width: 40%;
font-size: 12px;
.rocket{
width: 18px;
}
}
}
}
}

@media (max-width: 557px){
.carouselContainer{
.carouselInfo{
h1{
font-size: 8px;
font-weight: 700;
}
p{
font-size: 8px;
font-weight: 400;
}
span{
font-size: 10px;
font-weight: 800;
}
a{
font-size: 8px;
.rocket{
width: 18px;
}
}
}
}
}

@media (max-width: 490px){
.carouselContainer{
.carouselInfo{
h1{
font-size: 8px;
font-weight: 700;
}
p{
font-size: 6px;
font-weight: 400;
width: 150px;
margin-bottom: 10px;
}
span{
font-size: 10px;
font-weight: 800;
}
a{
font-size: 6px;
.rocket{
width: 16px;
}
}
}
}
}

@media (max-width: 420px){
.carouselContainer{
.carouselInfo{
padding-top: 30px;
h1{
font-size: 8px;
font-weight: 700;
}
p{
font-size: 6px;
font-weight: 400;
width: 150px;
margin-bottom: 5px;
}
span{
font-size: 10px;
font-weight: 800;
}
a{
font-size: 6px;
.rocket{
width: 12px;
}
}
}
}
}
Loading

0 comments on commit 113b6a8

Please sign in to comment.