<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div class='info-block'>
      <div id="header">
      
      </div>

      <div class="general-info">
      
      </div>

      <div class="map">
      
      </div>
    </div>

    <div class='info-block'>
      <div class="description">
      
      </div>
      <div class='rsvp-banner'>
      
      </div>
    </div>

  </body>
</html>
/*  Feel free to change anything you want,
 *  here and in the HTML file
 *
 *  What can you change? Anything!
 *  For example:
 *   - The text
 *   - The map
 *   - The colors
 *   - The layout
 *   - The images
 */

body {
  color: rgb(51,51,51);
  font-family: sans-serif;

  margin: 0;
  padding: 2em;

  /* Sometimes, we want to use background
   * images on our web pages.
   * This is an easy way to do that.
  */

  background-image: url(https://s3.amazonaws.com/codecademy-content/courses/web-beginner-en-napln/images/picnic.jpg);
  /* The image we're using here is from Flickr
   * (http://www.flickr.com/photos/waferboard/4476314140/)
   * You can use your own!
   */
  background-attachment: fixed; /* Keep the image
                                   in place if we scroll */
  background-repeat: no-repeat; /* We usually use repeating
                                 * backgrounds for visual
                                 * textures, but in this case,
                                 * we just want the image to show
                                 * up once.
                                 */
  background-position: center center; /* Keep the image centered
                                         horizontally and vertically */
  background-size: cover; /* We want the image to cover the background */
}

/* *****************************
 * Make links look better
 * by giving them a nice color
 * and only showing the
 * underline when we hover
 * over them.
 */
a {
  text-decoration: none;
  color: #428bca;
}

a:hover {
  text-decoration: underline;
}
/* ***************************** */

/* *****************************
 * Styling the big
 * solid blocks that contain
 * all the content
 */
.info-block {
  background-color: white;
  border: 1px solid #ccc;

  width: 500px;
  margin: 0 1em 1em 0;
  padding: 2em;

  float: left;
}
/* *****************************

/* *****************************
 * Styling the section
 * of the page that displays
 * the name of the event
 */
#header {
  font-size: 1.4em;
}

.greeting {
  font-size: 1.4em;
}

h1 {
  margin: 0;
}
/* ***************************** */

/* *****************************
 * Styling the section with
 * the most important information:
 * when the event is and where it is.
 */
.general-info {
  margin: 0.5em 1em 1em 0;
  font-size: 1.1em;
}

.icon {
  position: relative;
  /* Elements that are positioned with
   *   "fixed", "absolute", or "relative"
   * can be moved around the page using the
   *   "top", "bottom", "left", and "right"
   * CSS properties.
   *
   * See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
   * for more information.
   */
  top: 5px;
}
/* ***************************** */

/* *****************************
 * For styling the map we got
 * from Google Maps.
 */
.map {
  font-size: 2em;
}

.map iframe {
  /* To put the map on its own line */
  display: block;
}

.map a {
  font-size: 0.6em;
}
/* ***************************** */

/* *****************************
 * Styling the section with an in-depth
 * explanation of the event.
 */
.description {
  font-size: 1.2em;
  padding-bottom: 0.5em; /* We want the
                          * border on the
                          * .rsvp-banner
                          * to be offset
                          * from the
                          * description text*/
}
/* ***************************** */

/* *****************************
 * We want the RSVP link to
 * be centered and offset from
 * the rest of the content.
 */
.rsvp-banner {
  border-top: 1px solid #ccc;
  padding-top: 1.7em;
  text-align: center;
}

/* *****************************
 * We want the RSVP link to
 * look like a big, clickable
 * button.
 */
.rsvp {
  color: white;
  background-color: #0A910C;
  border-color: #64BE42;
  border-style: solid;

  padding: 8px 13px;
  border-radius: 5px;

  font-size: 1.3em;

  display: inline-block;
}

.rsvp:hover {
  background-color: #64BE42;
  text-decoration: none;
}
/* *****************************
Created from scratch
0 forks
40 views

Browse more Codebits