CSS Layout

css-layout.markdown

CSS Layout

A Pen by Brad / LearnWebCode on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

<div class="header">
  <h1>OurLogo</h1>

  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
  </ul>
</div>

<div class="hero">
  <div class="hero-inner">
    <h1>Welcome To Our Site!</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat nesciunt accusantium tempora voluptatem velit enim quaerat sapiente sed, repellat temporibus eaque dignissimos, saepe ab recusandae incidunt fuga veniam vero vitae!</p>
    <a href="#" class="button">Learn More</a>
  </div>
</div>

<div class="features">
  <div class="features-inner">
    <div class="featured-item">
      <h3>Cool Feature #1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga, quod, eligendi iusto tenetur culpa veniam animi minus odit cupiditate, ducimus accusamus quaerat numquam odio corporis earum cum harum dolorem.</p>
    </div>
    <div class="featured-item">
      <h3>Cool Feature #2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga, quod, eligendi iusto tenetur culpa veniam animi minus odit cupiditate, ducimus accusamus quaerat numquam odio corporis earum cum harum dolorem.</p>
    </div>
    <div class="featured-item">
      <h3>Cool Feature #3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga, quod, eligendi iusto tenetur culpa veniam animi minus odit cupiditate, ducimus accusamus quaerat numquam odio corporis earum cum harum dolorem.</p>
    </div>

    <div class="featured-item">
      <h3>Cool Feature #4</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga, quod, eligendi iusto tenetur culpa veniam animi minus odit cupiditate, ducimus accusamus quaerat numquam odio corporis earum cum harum dolorem.</p>
    </div>
    <div class="featured-item">
      <h3>Cool Feature #5</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga, quod, eligendi iusto tenetur culpa veniam animi minus odit cupiditate, ducimus accusamus quaerat numquam odio corporis earum cum harum dolorem.</p>
    </div>
    <div class="featured-item">
      <h3>Cool Feature #6</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga, quod, eligendi iusto tenetur culpa veniam animi minus odit cupiditate, ducimus accusamus quaerat numquam odio corporis earum cum harum dolorem.</p>
    </div>
    <div class="featured-item">
      <h3>Cool Feature #7</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga, quod, eligendi iusto tenetur culpa veniam animi minus odit cupiditate, ducimus accusamus quaerat numquam odio corporis earum cum harum dolorem.</p>
    </div>
    <div class="featured-item">
      <h3>Cool Feature #8</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga, quod, eligendi iusto tenetur culpa veniam animi minus odit cupiditate, ducimus accusamus quaerat numquam odio corporis earum cum harum dolorem.</p>
    </div>
    <div class="featured-item">
      <h3>Cool Feature #9</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga, quod, eligendi iusto tenetur culpa veniam animi minus odit cupiditate, ducimus accusamus quaerat numquam odio corporis earum cum harum dolorem.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>&copy; 2020 Fictional Company</p>
</div>

style.css

body {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
}

.header {
  padding: 0 45px;
  background-color: #283593;
  color: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nav a {
  color: #FFF;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease-out;
}

.nav a:hover {
  color: #c5cae9;
  transform: rotate(6deg);
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav li {
  margin-left: 20px;
}

.hero {
  background-color: #c5cae9;
  padding: 60px 45px;
  display: flex;
  justify-content: center;
}

.hero-inner {
  max-width: 760px;
}

.hero h1 {
  font-weight: normal;
  font-size: 4rem;
  margin: 0;
}

.hero p {
  font-size: 1.18rem;
  line-height: 1.6;
}

.button {
  background-color: #3949ab;
  color: #FFF;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1.18rem;
  display: inline-block;
}

.features {
  background-color: #e8eaf6;
  padding: 60px 45px;
}

.features-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-column-gap: 45px;
  grid-row-gap: 45px;
}

.featured-item h3 {
  color: #283593;
  font-size: 1.5rem;
  font-weight: normal;
  margin: 0;
}

.featured-item p {
  margin: 0;
  line-height: 1.6;
  color: #333;
}

.footer {
  text-align: center;
  padding: 20px 0;
  color: #999;
  font-size: .9rem;
}