Skip to content

Instantly share code, notes, and snippets.

Clara Lecroisey clecrois

Block or report user

Report or block clecrois

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@clecrois
clecrois / index.js
Created Aug 19, 2019
Navigation bar view -short version
View index.js
function App() {
return (
<div className="App">
<Navbar />
</div>
);
}
class Navbar extends React.Component {
constructor() {
@clecrois
clecrois / styles.css
Last active Aug 19, 2019
Navigation bar style -short version
View styles.css
:root {
--height-lg-screens: 80px;
}
.navbar {
display: flex;
justify-content: space-between;
/* by default: align-items: strech -> child elements' heights = the container's height */
}
@clecrois
clecrois / styles.css
Created Aug 19, 2019
Gallery style -short version
View styles.css
.gallery {
display: flex;
}
.card {
flex-basis: calc(100% / 4);
flex-shrink: 0; /* don't shrink, and don't wrap -> leave the container*/
}
@media screen and (min-width: 967px) and (max-width: 1127px) {
@clecrois
clecrois / index.js
Last active Aug 19, 2019
Gallery js -short version
View index.js
function App() {
return (
<div className="App">
<Gallery />
</div>
);
}
function Gallery() {
const images = [
@clecrois
clecrois / navbar-short-ver.css
Last active Aug 7, 2019
Responsive nav bar short version
View navbar-short-ver.css
:root {
--height-lg-screens: 80px;
}
.Navbar {
display: flex;
justify-content: space-between;
/* by default: align-items: strech -> child elements' heights = the container's height */
height: var(--height-lg-screens); /* set a fixed height */
@clecrois
clecrois / nav-bar-full-ver.css
Last active Aug 7, 2019
Responsive nav bar's style
View nav-bar-full-ver.css
:root {
--height-lg-screens: 80px;
--bg-color-lg-screens: #e4e3e2;
}
.Navbar {
display: flex;
justify-content: space-between;
/* by default: align-items: strech -> child elements' heights = the container's height */
@clecrois
clecrois / Navbar.js
Last active Aug 7, 2019
NavBar component
View Navbar.js
class Navbar extends React.Component {
constructor() {
super();
this.state = {
opened: false
};
}
toggle() {
this.setState({
@clecrois
clecrois / responsive-gallery.css
Created Jul 22, 2019
Responsive gallery's style sheet
View responsive-gallery.css
@clecrois
clecrois / response-gallery.js
Last active Aug 7, 2019
Gallery and Place components of the response-gallery (in React)
View response-gallery.js
You can’t perform that action at this time.