Skip to content

Commit

Permalink
Title & Lenguaje
Browse files Browse the repository at this point in the history
  • Loading branch information
@facundoezequiel
facundoezequiel committed Mar 26, 2021
1 parent 7b13826 commit 0f877df
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 32 deletions.
3 changes: 3 additions & 0 deletions constants/globalStyles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ const GlobalStyle = createGlobalStyle`
/* Colors */
--black: ${Colors.black.toCSS()};
--white: ${Colors.white.toCSS()};
/* Fonts */
--poppins: "poppins" , -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
padding: 0;
margin: 0;
Expand Down
2 changes: 2 additions & 0 deletions constants/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { default as Colors } from "./colors";
export { default as GlobalStyle } from "./globalStyles";
47 changes: 36 additions & 11 deletions containers/home/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,42 @@ import { default as NextLink } from "next/link";
function Home() {
return (
<HomeContainer>
<div className="leftDiv">
<img src="Logos/LogoGandini.svg" alt="Logo Gandini"/>
</div>
<div className="rightDiv">
<NextLink href="/">
<a>ESP</a>
</NextLink>
<NextLink href="/english">
<a>ENG</a>
</NextLink>
</div>
{/* LEFT ZONE */}
<section className="leftZone" style={{
backgroundImage: `url(${'/Images/Background.jpg'})`
}}>
{/* Logo Gandini Center */}
<img src="Logos/LogoGandini.svg" alt="Logo Gandini" id="gandiniLogo" />
</section>
{/* RIGHT ZONE */}
<section className="rightZone">
{/* CirclesDecoration
<img id="CirclesDecoration" src="Decoration/Circles.svg" /> */}
{/* Right Zone Container */}
<div id="rightZoneContainer">
{/* Title Section */}
<div id="TitleSection">
{/* Title */}
<div id="Title">
<h1>CRISTIAN GANDINI <span>AR</span></h1>
<p>DJ / Musicalizador / Productor / Editor / Remixer / Radio Host / Ableton Teacher</p>
</div>
{/* Lenguaje Buttons */}
<div id="Lenguaje">
<NextLink href="/">
<a style={{
fontWeight: `800`, color: `red`
}}>ESP</a>
</NextLink>
<NextLink href="/english">
<a style={{
fontWeight: `400`, color: `#FFFFFF`
}}>ENG</a>
</NextLink>
</div>
</div>
</div>
</section>
</HomeContainer>
);
}
Expand Down
47 changes: 36 additions & 11 deletions containers/home/homeEN.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,42 @@ import { default as NextLink } from "next/link";
function HomeEN() {
return (
<HomeContainer>
<div className="leftDiv">
<img src="Logos/LogoGandini.svg" alt="Logo Gandini"/>
</div>
<div className="rightDiv">
<NextLink href="/">
<a>ESP</a>
</NextLink>
<NextLink href="/english">
<a>ENG</a>
</NextLink>
</div>
{/* LEFT ZONE */}
<section className="leftZone" style={{
backgroundImage: `url(${'/Images/Background.jpg'})`
}}>
{/* Logo Gandini Center */}
<img src="Logos/LogoGandini.svg" alt="Logo Gandini" id="gandiniLogo" />
</section>
{/* RIGHT ZONE */}
<section className="rightZone">
{/* CirclesDecoration
<img id="CirclesDecoration" src="Decoration/Circles.svg" /> */}
{/* Right Zone Container */}
<div id="rightZoneContainer">
{/* Title Section */}
<div id="TitleSection">
{/* Title */}
<div id="Title">
<h1>CRISTIAN GANDINI <span>AR</span></h1>
<p>DJ / Musicalizer / Producer / Editor / Remixer / Radio Host / Ableton Teacher</p>
</div>
{/* Lenguaje Buttons */}
<div id="Lenguaje">
<NextLink href="/">
<a style={{
fontWeight: `400`, color: `#FFFFFF`
}}>ESP</a>
</NextLink>
<NextLink href="/english">
<a style={{
fontWeight: `800`, color: `red`
}}>ENG</a>
</NextLink>
</div>
</div>
</div>
</section>
</HomeContainer>
);
}
Expand Down
90 changes: 80 additions & 10 deletions containers/home/styled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,98 @@ const HomeContainer = styled.div`
display: flex;
flex-wrap: wrap;
.leftDiv {
/* LEFT ZONE */
.leftZone {
width: 50%;
background-color: gray;
display: flex;
justify-content: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightDiv {
/* Logo Gandini Center */
#gandiniLogo {
width: 55%;
padding-top: 8%;
display: block;
margin: 0 auto;
}
/* RIGHT ZONE */
.rightZone {
width: 50%;
background: rgba(0,0,0,1);
background: -moz-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(77,77,77,1)));
background: -webkit-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
background: -o-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
background: -ms-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#4d4d4d', GradientType=1 );
display: flex;
justify-content: center;
position: relative;
}
#rightZoneContainer {
width: 76%;
padding-top: 8%;
margin: 0 auto;
}
/* #CirclesDecoration {
position: absolute;
top: 73%;
left: 69%;
overflow: hidden;
} */
a {
margin-right: 2%;
cursor: pointer;
color: green;
}
/* Title */
#TitleSection {
display: flex;
width: 100%;
justify-content: space-between;
}
img {
width: 40%;
#Title h1 {
color: #FFFFFF;
font-weight: 800;
font-family: var(--poppins);
font-size: 2em;
letter-spacing: 1.3px;
text-align: left;
}
#Title h1 span {
font-weight: 400;
font-size: 0.7em !important;
}
#Title p {
color: #FFFFFF;
font-family: var(--poppins);
padding-top: 2%;
text-align: left;
}
/* Lenguaje Buttons */
#Lenguaje {
display: flex;
justify-content: flex-end;
}
#Lenguaje a {
display: block;
margin: 0 auto;
margin-left: 15%;
cursor: pointer;
color: #FFFFFF;
font-family: var(--poppins);
letter-spacing: 1.5px;
text-align: right;
}
`;

export { HomeContainer };
1 change: 1 addition & 0 deletions public/Decoration/Circles.svg
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 public/Images/Background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

1 comment on commit 0f877df

@vercel
Copy link

@vercel vercel bot commented on 0f877df Mar 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.