Project:Boulder Furniture

In this example below you will see how to do a Project:Boulder Furniture with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 120hit, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 120hit ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Project:Boulder Furniture</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">

<head>
  <meta charset="UTF-8" />

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--W3.CSS -->
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
    <!--W3.CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/<font-></font->awesome.min.css">
    <!-- boot strap font awesome cdn -->
    <link rel="stylesheet" href="css/style.css">
    <!-- link to our css folder and style sheet -->
  </head>

  <body>
    <div class="w3-top">
      <div class="w3-bar w3-black w3-padding-4">
        <span class="branding w3-bar-item w3-mobile">Boulder Furniture</span>
        <span class="w3-right w3-mobile">
              <a class="w3-bar-item w3-button w3-mobile w3-hover-blue" href="#home">Home</a>
              <a class="w3-bar-item w3-button w3-mobile w3-hover-blue" href="#about">About
              <a class="w3-bar-item w3-button w3-mobile w3-hover-blue" href="#services">Services</a>
              <a class="w3-bar-item w3-button w3-mobile w3-hover-blue" href="#contact">Contact</a>
            </span>
      </div>
    </div>

    <!--showcase-->
    <section class="showcase">
      <div class="w3-container w3-center"></div>
      <h1 class="w3-text-shadow w3-animate-opacity"><center>Hand Crafted Furniture</center></h1>
      <hr />
      <p class="w3-textshadow w3-animate-opacity">
        <center>
          Our Furniture is made from qulaity wood, our professnial workers in Mexico hand crafts these marvelous items into life. With so much hype in Mexico, we decided to expand the company over to the USA where quality and price match your prefrences.
        </center>
      </p>
      <button class="w3-button w3-blue w3-large w3-opacity"><center>Start Here</center></button>
    </section>

    <!--SECTION 1(HOME)-->
    <section class="section w3-black w3-hover-opacity">
      <div class="w3-container w3-center">
        <i class="fa fa-home"></i>
        <h2>Home Furniture</h2>
        <hr>
        <p>Quality furnitures that showcases your enviroment </p>
      </div>
    </section>
    <hr>

    <!--SECTION 2(CRAFT)-->
    <section class="section w3-light-grey w3-hover-opacity">
      <div class="w3-container w3-center">
        <i class="fa fa-cog"></i>
        <h2>Let's craft</h2>
        <p>Our furniture crafters make top notch quality by crafting with high quality wood. </p>
      </div>
    </section>


    <!--ABOUT -->
    <section class="section">
      <div class="w3-container">
        <div class="w3-row-padding">
          <div class="w3-col m5">
            <!--5 collum div is m5-->
            <img src="https://s3.amazonaws.com/siteninja/multitenant/images/13775/images/original/1-2-2013_2-46-36_PM.png?1357141349" alt="a wood dinning table">
          </div>

          <div class="w3-col m7">
            <button onclick="AccFunction('what')" class="w3-btn-block w3-left-align"><center>
                  What We Craft</center></button>

            <div id="what" class="w3-container w3-show">
              <h3><center>High Quality Furniture</center></h3>
              <p class="wwc"> We craft high quality furniture and can be customized what the customer desires to certian extent. This kind of work requruries a higher payment of the furniture. </p>
            </div>
          </div>
        </div>


        <!--THE W3-SHOW ornigally was w3-hide, but we want to show the content right away so now its w3-show-->
        <script>
          function AccFunction(id) {
              var x = document.getElementById(id);
              if (x.className.indexOf("w3-show") == -1) {
                  x.className += " w3-show";
              } else {
                  x.className = x.className.replace(" w3-show", "");
              }
          }
        </script>

        <div class="w3-col m5">
          <!--5 collum div is m5-->
          <img src="http://assets.dornob.com/wp-content/uploads/2009/11/crafted-furniture.jpg" alt="a wood dinning table">
        </div>

        <div class="w3-col m7">
          <button onclick="AccFunction('who')" class="w3-btn-block w3-left-align">
            <center>Who We Are</center></button>

          <div id="who" class="w3-container w3-show">
            <h3><center>Boulder Furniture Company</center></h3>
            <p class="wwc"> We are a company dedicated to provide the customers with the highest level of Furniture produtcs. </p>
          </div>
        </div>


        <!--THE W3-SHOW ornigally was w3-hide, but we want to show the content right away so now its w3-show-->
        <script>
          function AccFunction(id) {
              var x = document.getElementById(id);
              if (x.className.indexOf("w3-show") == -1) {
                  x.className += " w3-show";
              } else {
                  x.className = x.className.replace(" w3-show", "");
              }
          }
        </script>
      </div>
      </div>
    </section>

  </body>

</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/120hit/projectboulder-furniture-peRwxr */
.branding{
  font-size: 17px;
}

.showcase{
  background:url('http://www.americanhome.com/product_images/uploaded_images/8343659-11130-strathmore-grp-2.jpg') no-repeat;
  background-position:center;
  height: 600px;
  padding: 140px 100px;
  width: auto;
  color:black;

}

.showcase h1{
  font-size:40px;
  font-weight:700;
  text-transform: uppercase;
}

.showcase hr{
  width: 36em;
  margin:auto;
  border-width: 2px;
  border-color:white;
}

.showcase hr{
  width: 36em;
  margin:auto;
  border-width: 2px;
  border-color:white;
}

.section hr{
  width: 13.7em;
  margin:auto;
  border-width: 2px;
  border-color:white;
}


.section{
  padding: 40px 0;
}

.section h2{
  padding: 0px;
  margin:0;
}

.section .fa{
  font-size:50px;
}

p{
  color: white;
  font-size: 20px;
}

.section img{
  width:100%;
}

.wwc{
  color: black;
}

/*the purpose of the media quirey is bcause in mobile mode the top home-about etc bar
  blocks the text of the showcase(hand crafted), that is why this css is added*/
@media only screen and (max-width:600px){
  body{
    margin-top:200px;
  }
}

.showcase{
  height:500px;
  padding:60px 0;
}

Comments