Final Project - Contacts

In this example below you will see how to do a Final Project - Contacts with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by RDJ36, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright RDJ36 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Final Project - Contacts</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class = "header">
  <div class = "nav">
    <a href="https://codepen.io/RDJ36/debug/zovxeg">Home</a>
    <a href="https://codepen.io/RDJ36/debug/eBpmoa">Events</a>
    <a href="https://codepen.io/RDJ36/debug/qqOEGb">Contacts</a>
  </div>
</div>

<h1>CONTACTS</h1>
<DIV>@copyright 2016</DIV>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/RDJ36/final-project-contacts-eBpNZO */
/* 
Step 2:
decide what type of website you want to build by next class and decide what topic it will be about. take screenshots of websites to show examples. PRINT IT OUT FOR CLASS.

Step 3:
what is the content? find text, image, and links.
information architecture

Step 4:
Design layout.
https://www.google.com/search?q=cool+website+layouts&espv=2&biw=1920&bih=974&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjGr6uqsZrQAhUHwYMKHf4QC94Q_AUIBigB#tbm=isch&q=minimal+website+templates&imgrc=_

Step 5:
Details! Types of colors, font, font size

*/
* {
  margin: 0 15 15 15;
  padding: 0;
  box-sizing: border-box;
  color: black;
}

.header {
  background-color: white;
  background-size: auto 30px;
  background-repeat: no-repeat;
  background-position: 16px center;
  text-align: right;
}
.header > .nav > a {
  display: inline-block;
  padding: 16px;
  text-decoration: none;
  font-family: sans-serif;
  text-transform: uppercase;
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.35);

}

Comments