GithubHelp home page GithubHelp logo

html_css_work's Introduction

Instructions

  • Put all of this code inside a folder named week1-day2-html-css, and put the folder in a place where you normally code.

  • Use the command line to make a folder called css.

  • Use the command line to make a file called style.css inside of thee css folder.

  • Reference the style.css in your student-bio.html file. You do this by placing <link rel="stylesheet" type="text/css" href="css/style.css"> inside the <head> tag.

  • Style the example on the projector.

    • Add a class called "container" on the div tag.
    • Add an id called "main-bio" for the first section tag.
    • Add an id called "contact-info" for the second section tag.
    • Add an id called "bio-image" for the bio image.

  • Style specs:

    • body
      • The background color is #efeee7.
      • The font used "Georgia",Times New Roman,Times,serif;.
      • The font color is #333333.
      • Be sure to zero out the body margins and padding so the page is flush to the top of the page: 
        body {
  margin: 0;
  padding: 0;
}
    • header
      • The background color is #333333.
    • h1
      • The font color is #eee.
      • The font size is 28px.
      • Look at the example on the screen, and eyeball the padding and/or margins and positioning of the text.
    • h2
      • The font size is 24px
    • Make the container have a width of 1024 pixels, and center it. You do this using margin: 0 auto;.
    • Make #main-bio, #contact-info, #bio-image all float: left.
    • Make the #bio-image have a width of 200 pixels.
    • Be sure to include alt text in all images
    • #main-bio should have a width of 70%.
      • Add margins to the image so there is distance between it and the bio text.
    • #content-info should have a width of 30%.
    • Adjust the line height so it is 1.5 times the size of the font.
    • Make the link color #d21034.

  • If you forgot how to write the CSS properties, you can reference all CSS properties here https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

  • Bonus:

    • Stage, commit, and push this new file to Github.

html_css_work's People

Contributors

evasimon avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.