Google Docs Clone

Learn how to create Google Docs Clone using html, css and/or js.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

.clear {
  clear: both;
}
/*********************
GENERAL
*********************/

body {
  margin: 0;
  left: 0;
  background-color: #EEEEEE;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/*********************
HEADER
*********************/

.header {
  position: fixed;
  background-color: white;
  width: 100%;
  height: 61px;
  padding: 0;
  z-index: 100;
}

.docsLogo {
  margin: -20px 0 0 -8px;
  position: absolute;
  float: left;
  z-index: 3;
}

#untitled {
  font-size: 1.1em;
  color: grey;
  font-weight: 400;
  margin-left: 60px;
  margin-top: -6px;
  position: absolute;
  padding: 0 3px 0;
}

#untitled:hover {
  background-color: #eee;
}

.whiteBar ul {
  list-style: none;
  margin-left: 20px;
}

li {
  display: inline;
  position: relative;
  margin: 0px;
  top: 22px;
  font-size: 0.85em;
  z-index: 2;
  padding: 3px 5px;
  border-radius: 0.15em;
}

li:hover {
  background-color: #eee;
}

.rightSide {
  position: relative;
  float: right;
  margin: -45px 2% 3px 0;
  font-size: 0.7em;
}

#emailLogin {
  color: grey;
  padding: 0;
  margin-left: -10px;
  opacity: 0.8;
}

#emailLogin:hover {
  color: black;
  opacity: 0.8;
}

#emailcaret {
  position: relative;
  float: right;
  margin: -1px 0 0 3px;
  padding: 0;
  opacity: 0.7;
}

#emailcaret:hover {
  opacity: 1.0;
}

.extraButtons {
  position: absolute;
  width: 100px;
  left: -160px;
  list-style: none;
  text-align: center;
  padding: 0;
  margin: -17px 0 0px auto;
}

.extraButtons li {
  position: relative;
  float: right;
  display: inline;
  padding: 7px;
  background-color: white;
  margin: 0 -55px 5px;
  -50px;
  color: black;
  font-size: 1em;
  font-weight: bold;
  border: 1px solid #c9c9c9;
  border-radius: 0.25em;
  box-shadow: 0 0 1px #C7C7C7;
  background-color: #F6F6F6;
}

.extraButtons li:hover {
  box-shadow: 0 0 1px #737373;
}

.extraButtons li:nth-child(2) {
  background-color: #377CEA;
  right: -75px;
  width: 50px;
  color: white;
}

.extraButtons li:nth-child(2):hover {
  background-color: #4285F4;
}
/*********************
PAGE
*********************/

.page {
  position: absolute;
  width: 820px;
  height: 1100px;
  left: 49.5%;
  margin: 130px 0 50px -410px;
  background-color: white;
  box-shadow: 0 0 5px grey;
  font-family: 'Open Sans', sans-serif;
}

#cursor {
  margin: 0px 0 0 30px;
}

.page2 {
  position: absolute;
  width: 820px;
  height: 1100px;
  left: 49.5%;
  margin: 1250px 0 50px -410px;
  background-color: white;
  box-shadow: 0 0 5px grey;
}

#paragraph {
  width: 700px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
}

#headline {
  font-size: 1.5em;
  color: #007db6;
  font-weight: bold;
}

.h2 {
  font-weight: 600;
  font-size: 1.0em;
  color: #3b3d47;
}

a {
  color: blue;
}

.blueBold {
  color: #007db6;
}
/*********************
CONTENT
*********************/

#screen1 {
  width: 300px;
  position: relative;
  float: left;
  margin-left: 45px;
}
/*********************
TOOLBAR
*********************/

.toolBar {
  width: 100%;
  height: 30px;
  background-color: #F0F0F0;
  margin-top: 27px;
  border-bottom: 1px solid #dbdbdb;
  padding-top: 5px;
}

.toolBag {
  background-color: red;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.slider {
  margin-top: -10px;
  height: 23px;
  position: fixed;
  left: 50%;
  margin-left: -720px;
  box-shadow: 0 2px 1px #dbdbdb;
  z-index: -10;
}

.toolbarButtons {
  padding: 0.3%;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
}

.toolbarButtons:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsPrint {
  padding: 0.3%;
  border-radius: 0.15em;
  position: relative;
  margin-left: 60px;
  margin-right: auto;
  float: left;
  color: black;
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
}

.toolbarButtonsPrint:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsPaint {
  padding: 0.3%;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
  border-right: 1px solid #EEEEEE;
}

.toolbarButtonsPaint:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtons100 {
  padding: 0.3% 20px 0.3% 15px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
  border-left: 1px solid #c4c4c4;
  border-right: 1px solid #c4c4c4;
}

.toolbarButtons100:hover {
  box-shadow: 0 0 1px black;
}

#hunCaret {
  position: relative;
  float: right;
  margin: 0 -20px 0 10px;
}

.toolbarButtonsNormal {
  padding: 0.3% 10px 0.3% 15px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #c4c4c4;
}

.toolbarButtonsNormal:hover {
  box-shadow: 0 0 1px black;
}

#normalCaret {
  position: relative;
  float: right;
  margin-left: 10px;
  padding: 0;
}

.toolbarButtonsArial {
  padding: 0.3% 30px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #c4c4c4;
}

.toolbarButtonsArial:hover {
  box-shadow: 0 0 1px black;
}

#openCaret {
  position: relative;
  float: right;
  margin: 0 -25px 0 25px;
  padding: 0;
}

.toolbarButtons11 {
  padding: 0.3% 30px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #c4c4c4;
}

.toolbarButtons11:hover {
  box-shadow: 0 0 1px black;
}

#twelveCaret {
  position: relative;
  float: right;
  margin: 0 -25px 0 15px;
  padding: 0;
}

.toolbarButtonsB {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  border-left: 1px solid #EEEEEE;
}

.toolbarButtonsB:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsI {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
}

.toolbarButtonsI:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsU {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

.toolbarButtonsU:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsColor {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  border-right: 1px solid #c4c4c4;
}

.toolbarButtonsColor:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsHyper {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

.toolbarButtonsHyper:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsMsg {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  border-right: 1px solid #c4c4c4;
}

.toolbarButtonsMsg:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsJust {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  border-right: 1px solid #c4c4c4;
}

.toolbarButtonsJust:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsLine {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  border-right: 1px solid #c4c4c4;
}

.toolbarButtonsLine:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsNumbered {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

.toolbarButtonsNumbered:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsBullet {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

.toolbarButtonsBullet:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsIndentLeft {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

.toolbarButtonsIndentLeft:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsIndentRight {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  border-right: 1px solid #c4c4c4;
}

.toolbarButtonsIndentRight:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsClear {
  padding: 0.3% 10px 0.3% 10px;
  border-radius: 0.15em;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

.toolbarButtonsClear:hover {
  box-shadow: 0 0 1px black;
}

.toolbarButtonsPencil {
  padding: 0.3% 5px 0.3% 5px;
  border-radius: 0.15em;
  position: relative;
  margin-left: 160px;
  margin-right: auto;
  float: left;
  color: black;
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  border-right: 1px solid #c4c4c4;
}

.toolbarButtonsPencil:hover {
  box-shadow: 0 0 1px black;
}

#pencil {
  position: relative;
  float: left;
  margin: 0px 5px 0 0;
  padding: 0;
}

#caret {
  position: relative;
  float: right;
  margin-left: 25px;
  margin-right: 0;
  padding: 0;
}

.toolbarButtonsUpload {
  padding: 0.3%;
  border-radius: 0.15em;
  position: relative;
  margin-left: 5px;
  margin-right: auto;
  float: left;
  color: black;
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
}

.toolbarButtonsUpload:hover {
  box-shadow: 0 0 1px black;
}
</style>

</head>

<body>

<h1 id="untitled">
        <em>Untitled document</em>
      </h1>

<ul id="mainMenu">
        <li>File</li>
        <li>Edit</li>
        <li>View</li>
        <li>Insert</li>
        <li>Format</li>
        <li>Tools</li>
        <li>Table</li>
        <li>Add-Ons</li>
        <li>Help</li>
      </ul>

<span id="emailLogin">pablo@inkling.com<img id="emailcaret" src="http://static1.squarespace.com/static/55dcfb03e4b07360409d0471/55e724bde4b0c296de94c811/55e724bde4b076794acc4218/1441211581744/caret.png?format=300w" alt=""></span>

<ul class="extraButtons">
          <li>Comments</li>
          <li>Share</li>
        </ul>

</div>

</div>

<a href="#"><span class="toolbarButtons100">100%<img id="hunCaret" src="http://static1.squarespace.com/static/55dcfb03e4b07360409d0471/55e724bde4b0c296de94c811/55e724bde4b076794acc4218/1441211581744/caret.png?format=300w" alt=""></span></a>
          <a href="#"><span class="toolbarButtonsNormal">Normal Text<img id="normalCaret" src="http://static1.squarespace.com/static/55dcfb03e4b07360409d0471/55e724bde4b0c296de94c811/55e724bde4b076794acc4218/1441211581744/caret.png?format=300w" alt=""></span></a>
          <a href="#"><span class="toolbarButtonsArial">Open Sans<img id="openCaret" src="http://static1.squarespace.com/static/55dcfb03e4b07360409d0471/55e724bde4b0c296de94c811/55e724bde4b076794acc4218/1441211581744/caret.png?format=300w" alt=""></span></a>
          <a href="#"><span class="toolbarButtons11">12<img id="twelveCaret" src="http://static1.squarespace.com/static/55dcfb03e4b07360409d0471/55e724bde4b0c296de94c811/55e724bde4b076794acc4218/1441211581744/caret.png?format=300w" alt=""></span></a>

</div>

</div>

</div>

<div class="page">
    <p id="paragraph">
      <span id="headline">Design Specs: Habitat</span><br>
      <span id="h2">Configure Project Design: Quintin, Peter. Last updated 11.30.14 by Peter</span><br><br>

<span class="h2"><strong>Problem:</strong></span><br><br>

The interaction model in <a href="#"> Organize Content</a> is confusing and not consistent with the rest of Habitat.<br><br>
      Users at publishers need to perform bulk content organization operations.
      The goal is to improve usability overall, and support publisher use cases for managing many files.<br><br>

<span class="h2"><strong>UX Changes to TOC View Center Panel</strong></span><br><br>

<em>Multi-select via Command/Control</em><br><br>

· You can select individual pages (and blueprint cards).<br>
      · Selecting a page that has child pages will select all children as well.<br>
      · No support for multi-select of chapters or units.<br><br>

<span class="h2"><strong>Interaction Demos</strong></span><br><br>
       For reference (using JQuery sortable). We would like to implement a combination of these: <a href="#">http://demo.inkling.com/internal/structure/index.html</a><br><br>

<em>Visual design mocks</em><br><br>

Sketch source file here: <a href="#">Edit-Structure R2-2 PC</a><br><br>

<span class="blueBold"><strong>Showing current Project panel on the left side.</strong></span> This is the interim design until we are able to combine the project setup and settings. All subsequent mocks show the new panels layout with the sub-navigation, not the interim one.<br>
    </p>
    
    
  </div>

</div>

</body>

</footer>
</html>

Google Docs Clone

Random HTML Example Codes: