Test

In this example below you will see how to do a Test 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>Test</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>

<div id ="container"> 
 <div id="container">
    <div id="left"></div>
    <div id="right">
  <h1>Home</h1>
      <p>Welcome to my Website</p>   
   </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/RDJ36/test-bBoWbR */
/* 
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;
}

@import <link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">>;


.header {
  background-color: white;
  background-size: auto 30px;
  background-repeat: no-repeat;
  background-position: 16px center;
  box-shadow: 0px 3px 3px 0px      rgba(0,0,0,0.15);
  background-image: url("http://whiskystore.bg/userfiles/editor/image/j%26b.png");
}

.header{
  height: 80px;
  width: 100%;
  padding: 16px;
  text-align: right;
}
.header > .nav > a {
  display: inline-block;
  padding: 16px;
  text-decoration: none;
  font-family: sans-serif;
  text-transform: uppercase;
  width: 17%;
  height: 560px;
  vertical-align: top;
}

.header{
  postion: relative;
}

#left {
    width: 50%;
    float: left;
    height: 500px;
  background-image: url("http://www.hdwallpap.com/wp-content/uploads/2013/11/workplace-interior-design.jpg");
  display:block;
    background-size: cover;
}
  #right{
    text-align: center;
  }
  
}

#right {
    width: 50%;;
    float: left;
    height: 500px;
    background-color: white;

  h2{
    font-family: Noto Serif, serif;
}

@media all and (max-width: 600px){
  
  .container > div{
    width: 75%;
  }


Comments