Fake Google

by joplomacedo

HTML

<div id="app">
  <div class="topBar">
    <div class="topBar__menuAndQuickLinks">
      <div class="topBar__menu">
        <div class="topBar__menu__toggle"></div>
      </div>
      <div class="topBar__quickLinks">
        <div class="topBar__quickLinks__link">All</div>
        <div class="topBar__quickLinks__link">Images</div>
      </div>
    </div>
    
    
    <div class="topBar__appNavAndAccountMenu">
    <div class="topBar__appNav">
      <div class="topBar__appNav__toggle"></div>
    </div>
    <div class="topBar__accountMenu">
      <div class="topBar__accountMenu__toggle"></div>
    </div>
    </div>
  </div>

  <div class="main">
    <div class="searchBlock">
      <div class="searchBlock__logo">Google</div>
      <div class="searchBlock__searchInputWrapper">
        .
      </div>
      <div class="searchBlock__languageOptions">
        <span>Google offered in:</span>
        <span>PortuguĂŞs (Portugal)</span>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer__countryRow">
      <div class="footer__country">
        Portugal
      </div>
    </div>
    <div class="footer__navRow">
      <div class="footer__nav">
        <div class="footer__nav__link">Settings</div>
        <div class="footer__nav__link">Privacy</div>
        <div class="footer__nav__link">Terms</div>
      </div>
    </div>
  </div>
</div>

CSS

#app {
  display: flex;
  height: 100vh;
  flex-direction: column;
  background-color: #fff;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.topBar {
  display: flex;
  justify-content: space-between;
}

.topBar__quickLinks {
  display: flex;
}

.main{
  flex-grow: 1;
}

.footer__nav {
  display: flex;
  justify-content: space-around;
}

Vue

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})


const keywordGroupToSubjectMap = {
	'otario': 'carlos',
  'fixe': 'jp'
};


const subjects = {
	'carlos': {},
  'jp': {}
}