React

by Abdul Ahmad

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<div id="app"></div>

SCSS

$primaryBackgroundColor: #20262E;
$primaryBackgroundColor: #1c1f23;
$primaryBackgroundColorRgba: rgba(0, 0, 0, 0.5);
$dark1BackgroundColor: #13181f;
$dark1BackgroundColor: #141619;
$navBackgroundColor: $dark1BackgroundColor;
$postTextLight: lighten($dark1BackgroundColor, 30%);

// - slightly darker blue of primary color
// $primaryColor: #008aff;
$primaryColor: #279cff;

$outlineColor: lighten($primaryBackgroundColor, 20%);

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  color: white;
}

body {
  background: $primaryBackgroundColor;
  // padding: 20px;
  font-family: Helvetica;
}

#app {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  z-index: 100;
}

.content-width {
  padding: 0 20px;
  margin: 0 auto;
  max-width: 1440px;
  width: 100%;
  // height: 100%;
  // border: 1px dashed $outlineColor;
  
  &.no-border {
    border: 0;
  }
}


.nav-std {
  // background: $navBackgroundColor;
  min-height: 50px;
  display: flex;
  flex-direction: column;
}

.nav-content {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
}

.nav-section {
  display: flex;
  align-items: center;
}

.nav-section-left {
  
}

.nav-section-right {
  
}

.nav-item {
  color: white;
}

.logo {
  
}

.text-light {
  font-weight: 100;
}

.site-header {
  background-image: url(https://wallpapercave.com/wp/wp2900072.png);
  background-size: cover;
  // background-position: center;
  // padding-top: 300px;
  // padding-bottom: 200px;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
}

.site-header--background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url(https://wallpapercave.com/wp/wp2900072.png);
  background-size: cover;
}

@media all and (max-width: 400px) {
  .site-header--background {
    background-position: center;
  }
}

.site-header-content {
  padding: 200px 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
}


.h1 {
  color: white;
 ...

React

function ContentWidth({ children, customClass, bordered }) {
	let klass = 'content-width';
  if (customClass) klass += ' ' + customClass;
  if (!bordered) klass += ' no-border';
	
	return (
  	<section className={klass}>
  	  { children }
  	</section>
  );
}

function SectionTitlePrimary({ children, customClass }) {
	let klass = 'section-title-primary';
  if (customClass) klass += ' ' + customClass;
  
	return (
  	<h3 className={klass}>
  	  { children }
  	</h3>
  );
}

function SectionTitleImage({ src, customClass }) {
  return (
  	<div>
  	  <img src={src} className='' />
  	</div>
  );
}

function Navigation() {
	return (
  	<nav className='nav-std nav-primary'>
      <ContentWidth bordered customClass='nav-content'>
        <section className='nav-section nav-section-left'>
          <h3 className='nav-item logo'>
            <span className='text-light'>Gamer</span><b>aktics</b>
          </h3>
        </section>
        <section className='nav-section nav-section-right'>
          
        </section>
      </ContentWidth>
  	</nav>
  );
}


function Hexagon({ invisible, customStyles }) {
	let klass = 'hex';
  if (invisible) klass += ' invisible';
	return (
  	<div className={klass} style={customStyles}>
  	  <div className='top' />
      <div className='middle' />
      <div className='bottom' />
  	</div>
  );
}

function Header() {
	return (
  	<header className='site-header'>
      <div className='site-header--background' />
      <Navigation />
      <ContentWidth bordered customClass='site-header-content'>
        <h1 className='h1 site-header-title'>
          Learn advanced gameplay and mechanics from expert gamers
        </h1>
      </ContentWidth>
  	</header>
  );
}

function PageSection({ children, customClass }) {
	let klass = 'page-section';
  if (customClass) klass += ' ' + customClass;
  
	return (
  	<section className={klass}>
  	  { children }
  	</section>
  );
}

function CategoryTag({ children }) {
	return (
  	<div className='tag...