Real Estate Landing Page

index.markdown

McLennan & Company

Open main menu Close main menu

• Home
• Featured Listings
• Login
• Your Home's Value
• Contact Me
• Mortgage Calculator

Welcome to the Pinergy Consumer Website

Here you'll be able to obtain information on properties that have been matched to you by our automated system.

Please feel free to contact me with any questions!

• Irving Caraballo
• Century 21 McLennan & Company
• 188 Broadway Methuen MA 01844

Send us a message

Your name

Skype

Email Address

Topic

Write your message <textarea name="" id="" cols="30" rows="7"></textarea>

Send

Privacy Policy Copyright Policy Unsubscribe

real-estate-landing-page.markdown

Real Estate Landing Page

Redesigning a home page for Real Estate Agent profile

A Pen by Rafael on CodePen.

License.

style.css

/* Tag Resets
----------------------- */

body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Normalize CSS
http://necolas.github.com/normalize.css/
---------------------------------------- */
html { 
  height: 100%;
  font-size: 100%;
  -webkit-font-size-adjust: 100%;
  -ms-font-size-adjust: 100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, audio, canvas, video {
  display: block;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

b, strong {
  font-weight: 600;
}

abbr[title] {
  border-bottom: 1px dotted;
}

input, textarea, button, select {
  margin: 0;
  font-size: 100%;
  line-height: normal;
  vertical-align: baseline;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  appearance: button;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
}

textarea {
  overflow: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* General Styles
----------------------- */
* {
  box-sizing: border-box;
}

body {
  min-height: 100%;
  font-size: 100%;
  font-family: 'Roboto Slab';
}

container {
  display: flex;
}

p {
  font-size: 1.em;
  line-height: 1.3;
  margin: 1.25rem .5rem;
  color: white;
  font-weight: 400;
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
  padding: 10px 0;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4 {
  color: #F0AD00;
  margin: 0 auto;
  font-weight: inherit;
  line-height: 1.2;
  text-align: center;
}

h1 {
  font-size: 2.959em;
  /* 3 x 1.125em(font-size)-three-quarter scale */
}

h2 {
  font-size: 1.834em;
}

h3 {
  font-size: 1.61em;
  /* 1.125(font) x 1.8(scale) */
  font-weight: 500;
}

h4 {
  font-size: .75em;
}

small, .font_small {
  font-size: .125em;
}

a {
  color: #ffba49;
}

a:hover {
  text-decoration: none;
}

.uppercase {
  text-transform: uppercase;
}

/* Header & Footer
----------------------- */

.agent-page__header {
  flex: 0 1 auto;
  width: 100%;
  height: 15.63rem;
  background: linear-gradient( rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)),
              url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/31828/C21_Black_Logo.svg) no-repeat fixed;/* url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/31828/C21_Black_Logo.svg) no-repeat center; */
  background-size: 100% 15.63rem;
}

.agent-page__footer {
  background: black;
}
.agent-page__footer--flex {
  display: flex;
  justify-content: space-around; 
}
.footer--flex-child {
  text-align: center;
}

/* Off-canvas Navigation
------------------------- */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Button styling */
.menu-toggle {
  display: inline-block;
  padding: .75em;
  line-height: 1em;
  font-size: 1em;
  color: #ffba49;
}

.menu-toggle:hover,
.menu-toggle:focus {
  color: #ffba49;
}

/*
 Default styles + Mobile first
 Offscreen menu style
*/
.main-menu {
  position: absolute;
  left: -200px;
  top: 0;
  height: 100%;
	overflow-y: scroll;
	overflow-x: visible;
	transition: left 0.3s ease,
				      box-shadow 0.3s ease;
	z-index: 999;
}

.main-menu ul {
  list-style: none;
  margin: 0;
  padding: 2.5em 0 0;
  /* Hide shadow w/ -8px while 'closed' */
  -webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
     -moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
          box-shadow: -8px 0 8px rgba(0,0,0,.5);
  min-height: 100%;
  width: 200px;
  background: #050505;
}

.main-menu a {
  display: block;
  padding: .75em 15px;
  line-height: 1em;
  font-size: 1em;
  color: #F0AD00;
  text-decoration: none;
  border-bottom: 1px solid #383838;
}

.main-menu li:first-child a {
  border-top: 1px solid #383838;
}

.main-menu a:hover,
.main-menu a:focus {
  background: #333;
  text-decoration: underline;
}

.main-menu .menu-close {
  position: absolute;
  right: 0;
  top: 0;
}

/*
 On small devices, allow it to toggle...
*/
/*
 :target for non-JavaScript
 aria-expanded="true/false" will be for JavaScript
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
  left: 0;
  outline: none;
  -moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
  -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
  box-shadow: 3px 0 12px rgba(0,0,0,.25);
}

.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
  z-index: 1001;
}

.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
  position: relative;
  z-index: 1000;
}

/* 
 We could use `.main-menu:target:after`, but
 it wouldn't be clickable.
*/
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop {
  position: absolute;
  display: block;  
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: #000;
  background: rgba(0,0,0,.85);
  cursor: default;
}

@supports (position: fixed) {
  .main-menu,
  .main-menu:target + .backdrop,
  .main-menu[aria-expanded="true"] + .backdrop {
    position: fixed;
    overflow: hidden;
  }
}

/* Main Content
----------------------- */

.content-wrap {
  background-color: black;
  width: 100%;
  margin: 0 auto;
  padding: 1.2rem;
  overflow: hidden;
}

/* Form
----------------------- */
.contain {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}

form p {
  color: black;
} 

h3,
ul {
  margin: 0;
}

h3 {
  margin-bottom: 1rem;
}

input:focus,
textarea:focus {
  outline: 3px solid gold;
}

input,
textarea,
button {
  width: 100%;
  border: 1px solid #000;
}

.wrapper {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.wrapper > * {
  padding: 1em;
}

ul {
  list-style: none;
  padding: 0;
}

.contacts {
  background: lightgrey;
}

.form {
  background: #fff;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

form label {
  display: block;
}

form p {
  margin: 0;
}

.full-width {
  grid-column: 1 / 3;
}

button,
input,
textarea {
  padding: 1em;
}

button {
  background: lightgrey;
  width: 100%;
  border: 0;
}

button:hover, button:focus {
  background: #F0AD00;
  outline: 0;
}

/* Media Queries
----------------------- */
/* Off-Canvas Menu
 Larger screen styling
 Horizontal menu
*/
@media (min-width: 625px) {
  .menu-toggle,
  .main-menu .menu-close {
    display: none;
  }
  
  /* Undo positioning of off-canvas menu */
  .main-menu {
    position: relative;
		left: auto;
		top: auto;
		height: auto;
  }  
  .main-menu ul {
    display: flex;
    justify-content: space-around;
    /* Undo off-canvas styling */
    padding: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    height: auto;
    width: auto;
    background: none;
  }  
  .main-menu li {
    text-align: center;
  }  
  .main-menu a {
    color: #F0AD00;
    border: 0 !important; /* Remove borders from off-canvas styling */
  }  
  .main-menu a:hover,
  .main-menu a:focus {
    background: none; /* Remove background from off-canvas styling */
    color: #ffba49;
    text-decoration: underline;
  }
/* Form on larger screens */  
  .contain {
    padding: 0;
  }
  
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
  .wrapper > * {
    padding: 2em 2em;
  }
  .agent-page__footer--flex {
    justify-content: center; 
  }
  .footer--flex-child:first-child, .footer--flex-child:nth-child(3n) {
    padding: 0 .5rem;
  }
}