Блог

 /*
Fall 2021

    Plain Red       #f60d41
    Rich Red        #f6130d
    Orioles Orange  #f64d0d
    Sunset Orange   #f6870d
    Golden Yellow   #f6c10d
    Burnt Orange    #c93c07
*/


/* Global settings */

h1 {
  text-align: center;
  font-family: Papyrus
}

h2 {
  text-align: center;
  color: #f6130d;
  text-decoration: underline
}

.wrapper {
  width: 85%;
  margin: 0 auto;
  max-width: 960px;
}


/* Nav Section */

.nav {
  width: 85%;
  margin: 0 auto;
  background-color: #f6130d;
  text-align: center;
}

.menu {
  float: left;
  width: 25%
}


/* Main section */

.banner {
  justify-content: center;
  background-color: #f6c10d;
  text-align: center;
}

.bulletPoints ul {
  display: inline-block;
  text-align: left;
  color: #c93c07;
}

section {
  background-color: #f6870d;
  color: #f60d41;
  font-style: italic;
  margin: 25px 50px 75px;
}

.image1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figcaption {
  text-align: center;
}

.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}


/* Footer section */

* {
  box-sizing: border-box;
}

.footer {
  text-align: center;
  background-color: #f6130d;
  color: #f6c10d;
}

.box {
  float: left;
  width: 33.33%
}

.footer::after {
  content: "";
  clear: both;
}


/* Copyright section */

.copyright {
  text-align: center;
  background-color: #f6130d;
  color: #f6c10d;
}


/* Two colmn Main*/

.flex-container {
  display: flex;
  width: 100%;
}

.col {
  max-width: 50%;
  flex: 0 0 50%;
}


/*contact form*/

body {
  background: #f29107;
  color: #fff;
  font-weight: 400;
  font-size: 1em;
  font-family: 'Lato', Arial, sans-serif;
  margin: 0;
  padding: 0;
  padding-bottom: 60px;
}

.ccheader {
  margin: 0 auto;
  padding: 2em;
  text-align: center;
}

.ccheader h1 {
  margin: 0;
  font-weight: 300;
  font-size: 2.5em;
  line-height: 1.3;
}

.ccheader {
  margin: 0 auto;
  padding: 2em;
  text-align: center;
}

.ccheader h1 {
  margin: 0;
  font-weight: 300;
  font-size: 2.5em;
  line-height: 1.3;
}


/* Form CSS*/

.ccform {
  margin: 0 auto;
  width: 800px;
}

.ccfield-prepend {
  margin-bottom: 10px;
  width: 100%;
}

.ccform-addon {
  color: #f8ae45;
  float: left;
  padding: 8px;
  width: 8%;
  background: #FFFFFF;
  text-align: center;
}

.ccformfield {
  color: #000000;
  background: #FFFFFF;
  border: none;
  padding: 15.5px;
  width: 91.9%;
  display: block;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 14px;
}

.ccformfield {
  font-family: 'Lato', Arial, sans-serif;
}

.ccbtn {
  display: block;
  border: none;
  background: #f8ae45;
  color: #FFFFFF;
  padding: 12px 25px;
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
}

.ccbtn:hover {
  background: #d8850e;
}


/*shop*/

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
  display: inline-block;
}

.price {
  color: grey;
  font-size: 22px;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}


/* Media Queries */

@media print {
  header,
  nav,
  footer {
    display: none;
  }
  #main {
    width: 100%;
  }
}


/* Midsize breakpoint*/

@media only screen and (max-width:600px) {
  nav {
    float: none;
    width: 100%;
  }
  .menu {
    float: none;
    width: 100%;
  }
  #main {
    float: none;
    width: 100%;
  }
  #myCopy {
    display: none;
  }
  .midHide {
    display: block;
  }
  .midShow {
    display: none;
  }
} 

 <nav class="nav">
  <div class="menu">
    <a href="index.html">Home</a>
  </div>
  <div class="menu">
    <a href="shopnow.html">Shop</a>
  </div>
  <div class="menu">
    <a href="events.html">Events</a>
  </div>
  <div class="menu">
    <a href="about.html">Contact Us</a>
  </div>
  <br/>
  <br/>
</nav>
<main class="wrapper">

  <div class="banner">
    <h1><span class="name">Augie's Custom T-shirts</span></h1>
    <h2>Custom T-shirts for you or your party.</h2>

    <div class="bulletPoints">

      <ul>
        <li>Birthday parties</li>
        <li>Vacation groups</li>
        <li>Bachelorette Parties</li>
        <li>Family reunions</li>
        <li>Work team rewards</li>
        <li>Business promotions</li>
      </ul>
    </div>
    <br/>


  </div>

  <div class="flex-container">
    <div class="col">
      <div class="row">
        <div class="column">
          <img src="images/gorilla.jpg" alt="Gorilla" style="width:100%">
        </div>
        <div class="column">
          <img src="images/pink.jpg" alt="Pink" style="width:100%">
        </div>
        <div class="column">
          <img src="images/skull.jpg" alt="Skull" style="width:100%">
        </div>
      </div>
      <figure>
        <img src="images/t-shirt-colors.jpeg" alt="T-shirt colors" class="image1">
        <figcaption>Choose from are variety of t-shirt colors!</figcaption>
      </figure>
    </div>
    <div class="col">
      <p id="Catch">
        Do you have an event coming up, and want everyone to get in the spirit? T-shirts can bring a group together, make everyone feel connected, and let everyone know what you're celebrating.
      </p>
      <p>T-shirts can also be a great gift to someone that acknowledges their special interest or hobby.</p>
      <p>Choose from one of our unique designs, or let us put your own design on a shirt for you.</p>
      <h2>How it works:</h2>
      <p>Browse our selection of unique designs, select the size and colors of the shirts you would like, and place your order. We will ship your shirts within three business days for in-stock shirts, or five days for custom size and colors.</p>
      <p>Have a design of your own? Can't find the right sentiment? Call or email us to discuss the possibilities or get some ideas for your event.</p>
      <p>Please note there will be a one time $15 charge for any custom graphics design.</p>
    </div>
  </div>

  <h2><em>Contact us today!</em></h2>


</main>

<footer class="footer">
  <div class="box">
    <p>Augie's Custom T-shirts</p>
    <p>(478) 555-1212</p>
    <p>augieB@augiesTees.com</p>
    <br/>
  </div>
  <div class="box">
    <p>Check out are Social Media for updates!</p>
    <p>Facebook:</p>
    <p>Instagram:</p>
    <p>Twitter:</p>
  </div>
  <div class="box">
    <p>Locations:</p>
    <br/>
    <p>100 Tanger Dr, Locust Grove, GA</p>
    <p>2954 Watson Blvd Suite 100, Warner Robins, GA</p>
  </div>
</footer>

<div class="copyright">
  <h3> @copyright: Landon Byrd</h3>
  <p>Fall 2021, All Rights Reserved</p>
</div>

<p>
  <a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
  </a>
</p>