<div id="root"></div>
import * as React from 'https://cdn.skypack.dev/react@^16.13.1';
import * as ReactDOM from 'https://cdn.skypack.dev/react-dom@^16.13.1';
import styled from 'https://cdn.skypack.dev/styled-components';
const FlexContainer = styled.div`
display: flex;
flex-direction: row;
@media (max-width: 768px) {
flex-direction: column;
}
`
const Navigation = styled(FlexContainer)`
align-items: center;
justify-content: space-between;
padding: 10px;
width: calc(100% - 20px);
`
const Footer = styled(Navigation)`
justify-content: flex-end;
`
const NavItem = styled.a`
border: 1px solid purple;
color: purple;
font-size: 20px;
margin: 0 15px 20px 0;
padding: 10px;
&:hover {
opacity: 0.6;
}
`
const FooterNavItem = styled(NavItem)`
border: 0;
font-size: 12px;
margin-bottom: 0;
padding: 0;
`
const ContentWrapper = styled.div`
padding: 50px 10px;
`
const LeftSideNav = styled(FlexContainer)`
justify-content: space-evenly;
order: 1;
@media (max-width: 768px) {
order: 2;
}
`
const Logo = styled.img`
margin-bottom: 20px;
order: 2;
@media (max-width: 768px) {
order: 1;
}
`
const App = () => (
<>
{/* Start App Navigation at top of page */}
<Navigation>
<LeftSideNav>
<NavItem>Link Two</NavItem>
<NavItem>Link Three</NavItem>
<NavItem>Link Three</NavItem>
<NavItem>Link Four</NavItem>
</LeftSideNav>
<Logo alt="Logo" src="https://assets.codepen.io/t-90/placeholder-logo.svg" />
</Navigation>
{/* End App Navigation at top of page */}
<ContentWrapper>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita, reiciendis delectus. Iusto possimus quasi fuga. Adipisci earum ratione officia non, saepe fugit quidem cupiditate nihil dignissimos rem autem mollitia consequatur!</p>
</ContentWrapper>
{/* Start App Footer at the bottom of the page */}
<Footer>
<FooterNavItem>Footer Link One</FooterNavItem>
<FooterNavItem>Footer Link Two</FooterNavItem>
</Footer>
{/* End App Footer at the bottom of the page */}
</>
);
ReactDOM.render(<App />,
document.getElementById("root"))
View Compiled
This Pen doesn't use any external JavaScript resources.