Final Project - Contacts: About Russell

In this example below you will see how to do a Final Project - Contacts: About Russell 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: About Russell</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul class="menu">

  <!-- Top level menu item -->
  <li>
    <!-- Top level menu item text -->
    <a href="https://codepen.io/RDJ36/debug/PbQQMG" style="text-decoration: none"<span>Home</span></a>
      <!-- 2nd level menu --> 
   
  </li>
  <!-- Top level menu item -->
  <li>
    <!-- Top level menu item text -->
    <span>Career</span>
      <!-- 2nd level menu -->
    
    <ul>
        <li>
          <a href="https://codepen.io/RDJ36/debug/eBpmoa?editors=1010">How to Apply</a>  
        </li>
        <li><a href="https://codepen.io/RDJ36/debug/LbrMjE">Your Future</a></li>
      </ul>  
  </li>

  <!-- Top level menu item -->
  <li>
    <!-- Top level menu item text -->
    <span>Services</span>
    
    <ul>
        <li>
          <a href="https://codepen.io/RDJ36/debug/ENovPZ">How We Can Help</a>  
        </li>
      </ul>  
  </li>

  <!-- Top level menu item -->
  <li>
    <!-- Top level menu item text -->
    <span>Contact</span>
    <ul>
      <li>
          <a href="https://codepen.io/RDJ36/debug/qqOEGb">About Russell</a>  
        </li>
     <li>
          <a href="https://codepen.io/RDJ36/debug/qqpPjv">About other Workers</a>  
        </li>
    </ul>  
  </li>
</ul>


 <div id="container">
    <div id="left"></div>
    
   <div id="right">
  <h1>About Me</h1>
      <br>   
     <h4>Hi! I'm Russell, the website developer.</h4>
     <br>
     <p>I enjoy biking, hiking, and swimming. My favorite sports team is the New York Knicks and New York Giants.  Also, do you play Pokemon Go? TEAM VALOR!!</p>
     <br>
     <p>There’s a lot of noise out there, you don’t need more of it. You have business challenges and you need answers. When we fix tech, our goal is to make it so good you won't need much else on the subject. We’ll make sure the restoration is on point, helped by innovative people and clear steps on what to do next.</p>
     <br>
    <h4>Experience</h4>
     <ul>
       <li>Project Analyst Intern, <i>NYC Administration for Child Services</i></li>
       <li>YMCA Childcare Assistant, <i>Raritan Valley YMCA</i></li>
       <li>Camp Counselor, <i>Raritan Valley YMCA Camp</i></li>
     </ul>
   </div> 
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/RDJ36/final-project-contacts-about-russell-qqOEGb */
/* 
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">>;


/* Select all tags and reset its padding and margin to be zero. This will reduce the confusion about various default settings for various tags. */
* { padding: 0; margin: 0; }

/* Use .className selector */
.menu {  
  /* Use display: block, since it will have the whole row for itself. */
  display: inline-block;
  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");
  width: 100%;
  text-align: right;
  text-transform: uppercase;
  padding: 5px;
}  

/* Use child selector to select top level menu items. */
.menu > li {
  /* Use display: inline-block since menu items will share the the same row. */
  display: inline-block;


  /* Use padding: 15px; to add some space around each top level menu item. */
  padding: 15px;
}

/* Use pseudo class selector to change the appearance when louse hover over the top level menu item */
.menu > li:hover {
  color: yellow;
  background-color: #9E9E9E;
}

/* Select the span tag to control the color of the top level menu item. Notice, the text is inside of the span tag. */
.menu > li > span {
  /* Use display: inline; without width and height value since they have no effects on inline element. Inline elements's width and height is controlled by browsers. */
  display: inline;
  
  color: black;
  font-size: 80%;
  
  /* Use font-family to choose the font type. We will learn more later. */
  font-family: sans-serif;
}

/* Use class, path, pseudo class, and tag selector together to select span tag when mouse is hover over its parent li element. */
.menu > li:hover > span {
  color: #F44336;
}

/* Select 2nd level menu using path selector */
.menu > li > ul {
  /* Use dispaly: none; to hide them for now. We will learn how to display them later. */
  display: none;
}

/* Here is how to do dropdown menu */
/* Step 1 - set 1st level menu item position relative, so 2nd level menu position can be relative to it. */
.menu > li {
  position: relative;
}

/* 2nd level menu */
.menu > li:hover > ul {
  display: block;
  background-color: #E0E0E0;
  color: red;
  
  /* Step 2 - set 2nd level menu position absolute, so it's position is relative to 1st level menu position, only when 1st level menu position is NOT static (relative or absolute) */
  position: absolute;
  
  /* further use top and left (bottome/right) to control exact position */
  top: 48px;
  left: 0;

  /* popup sub-menu will be displayed on top of other content */
  z-index: 1;
}

/* TODO - Align 2nd menu to the right edge of 1st level menu */
.menu > li:last-child:hover > ul {
  /* TODO - set left to be auto */
  /* TODO - set right to be 0 to align on right edge */
  left: auto;
  right: 0;
}

.menu > li > ul > li {
  padding: 0.5em;

  /* remove bullets in front of list items */
  list-style: none;
}

.menu > li > ul > li > a {
  color: white;
  
  /* remove underline of links */
  text-decoration: none;
  
  /* prevent link text from wrapping up to multiple lines */
  white-space: nowrap;
}
#left {
    width: 45%;
    float: left;
    height: 850px;
  background-image: url("https://scontent.fewr1-2.fna.fbcdn.net/v/t1.0-9/1488171_10202058945669690_1644845588_n.jpg?oh=45c9f41936b18c447b07be396102dcec&oe=58C1C1C7");
  display:block;
    background-size: cover;
    padding: 16px;
}

 
#right{
    text-align: left;
    padding: 10px;
  }
#right {
    width: 55%;;
    float: left;
    height: 850px;
    background-color: #FFF3E0;
    padding: 36px;
    font-family: Noto Serif, serif;
}
 
@media all and (max-width: 600px){
  
  .container > div{
    width: 75%;
  }
  
  

Comments