revitalk/components.html

## components.html
<!doctype html>
<html lang="en">
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" href="css/cooking-design.css">
  </head>
  <body>
      <!-- ************* Text Components ****************** -->

      <!-- headings -->

      <h1>This is the main heading</h1>
      <h2>This is a secondary heading</h2>
      <h3>This is a third level heading</h3>

      <!-- Body text -->

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </p>

      <!-- Hyperlink -->

      <a href="#">This is sample hyperlink</a>

      <!-- List -->

      <ul>
          <li class="list">This is first list item</li>
          <li class="list">This is second list item</li>
          <li class="list">This is third list item</li>
          <li class="list">This is fourth list item</li>
          <li class="list">This is fifth list item</li>
      </ul>


      <!-- *********** Button *********** -->

      <button class="button">SUBMIT</button>

      <input type="submit" class="button"></input>

     <a href="#" class="button">SUBMIT</a>

    <a class="button">GO</a>


      <!-- *********** Card *********** -->


    <article class="card">
        <header class="card_header">
            <h1 class="card_title">Cardamom and Espresso Chocolate Chip Cookies</h1>
            <h2 class="card_subtitle">By Kim</h2>
        </header>
        <div class="card_img">
            <img src="images/cookies.jpeg" alt="cookies">
        </div>
        <p class="card_text">Add some zing to your chocolate chip cookies with a bit of espresso and cardamom flavor! These are somewhat thin and chewy cookies...</p>
              <button class="button card_button">SUBMIT</button>
      <button class="button">SUBMIT</button>
    </article>


    <!--- ************** nav bar ************* -->


    <nav class="navbar">
        <ul class="navbar_list">
            <li class="navbar_li"><a href="#">Link 1</a></li>
            <li class="navbar_li"><a href="#">Link 2</a></li>
            <li class="navbar_li"><a href="#">Link 3</a></li>
            <li class="navbar_li"><a href="#">Link 4</a></li>
            <li class="navbar_li"><a href="#">Link 5</a></li>
        </ul>
    </nav>

  </body>
</html>

## cooking-design.css
/* Components Styles  */

/* *********** General Styles ********** */
*{
    margin:0;
    padding:0;
}

body{
    font-family:Roboto, Arial, sans-serif;
    color:#333;
}

/* *********** Text Styles ********** */

h1{
    font-family:Roboto-light, Arial, sans-serif;
    font-size:3rem; /* three times the size of the default font-size */
    font-weight:normal;
    color:darkcyan;
}

h2{
    font-family:Roboto-medium, Arial, sans-serif;
    font-size:2rem; /* three times the size of the default font-size */
    margin-bottom:0.5em;
    font-weight:normal;

}


h3{
    text-transform: uppercase;
    margin-bottom:0.5em;
}

p{
    line-height:1.3em;
    margin-top:1em;
    margin-bottom:1em;
}

a{
    color:cornflowerblue;
    text-decoration: none;
}

ul{
    margin-top:1em;
    margin-bottom:1em;
}

.list{
    list-style-type: none;
    margin-top:0.5em;
    margin-bottom: 0.5em;
    border-bottom: solid 1px #ccc;
    padding-bottom:0.5em;
}

/* *********** Buttons Styles ********** */

.button{
    width:64px;
    border:none;
    font-size:.875em;
    text-transform:uppercase;
    text-align: center;
    background-color: teal;
    color:white;
    border-radius: 5px;
    padding:0.5em;
    box-shadow: 2px 2px 2px #999;
    display:inline-block; /* I can change the width of this element */
}

.button:active{
    background-color:black;
    border:none;
}


/* *********** Cards Styles ********** */

.card{
    max-width:344px;
    border:solid 1px #ccc;
    margin-top:1em;
    margin-bottom:1em;
    box-shadow: 2px 2px 2px #ccc;
}

.card_header{
    height:72px;
    padding-top:16px;
    padding-left:1em;
}

.card_title{
    font-size:1.2em;
    font-family: Roboto-bold;
}

.card_subtitle{
    font-size:1em;
}

.card_img{  /* div that contains the image */
    height:200px;
    overflow:hidden; /* controls the part of the image that does not fit its height */
}

.card_img img{  /* img is a child of an element with the card_img class */
    width:100%;  /* takes the width of its container */
}

.card_text{
    margin:1em;
}

.card_button{
    margin:0 0.5em 1em 1em;/* top, right, bottom, left */
}


/* *********** Navbar Styles ********** */

nav{
    background-color: darkcyan;
    padding:0.15em;
}

.navbar_list{
    display:flex;
    flex-direction: row;
    list-style-type: none;
}

.navbar_li{
    margin: 0 1em;
}

.navbar_li a{
    color:#fff;
}

## cooking-layout.css
.row{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left:-1em;
    height:100%;

}

.card{
    margin:1em;
}

.container{
    padding:1em;
}

@media (min-width:768px){

    .row{
    flex-direction: row;
    }

}

## index.html
<!doctype html>
<html lang="en">
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dessert Recipes</title>
	<link rel="stylesheet" href="css/cooking-design.css">
    <link rel="stylesheet" href="css/cooking-layout.css">
  </head>
  <body>
          <nav class="navbar">
        <ul class="navbar_list">
            <li class="navbar_li"><a href="#">Link 1</a></li>
            <li class="navbar_li"><a href="#">Link 2</a></li>
            <li class="navbar_li"><a href="#">Link 3</a></li>
            <li class="navbar_li"><a href="#">Link 4</a></li>
            <li class="navbar_li"><a href="#">Link 5</a></li>
        </ul>
    </nav>
    <div class="container">
   <h1>Dessert Recipes</h1>
   <h2>From Cookies to Pies</h2>

      <div class="row">
             <!-- new card starts-->
            <article class="card" id="cardamom_cookies">
                <header class="card_header">
                    <h1 class="card_title">Cardamom and Espresso Chocolate Chip Cookies</h1>
                    <h2 class="card_subtitle">By Kim</h2>
                </header>
                <div class="card_img">
                    <img src="images/cookies.jpeg" alt="cookies">
                </div>
                <p class="card_text">Add some zing to your chocolate chip cookies with a bit of espresso and cardamom flavor! These are somewhat thin and chewy cookies...</p>
                      <button class="button card_button">SUBMIT</button>
              <button class="button">SUBMIT</button>
            </article>

            <!-- new card starts-->
            <article class="card" id="ginger_cookies">
                <header class="card_header">
                    <h1 class="card_title">Big Soft Ginger Cookies
</h1>
                    <h2 class="card_subtitle">By Kim</h2>
                </header>
                <div class="card_img">
                    <img src="images/Ginger-Cookies.jpg" alt="cookies">
                </div>
                <p class="card_text">Add some zing to your chocolate chip cookies with a bit of espresso and cardamom flavor! These are somewhat thin and chewy cookies...</p>
                      <button class="button card_button">SUBMIT</button>
              <button class="button">SUBMIT</button>
            </article>

             <!-- new card starts-->

            <article class="card" id="apple_pie">
                <header class="card_header">
                    <h1 class="card_title">Our Favorite Apple Pie</h1>
                    <h2 class="card_subtitle">By Kim</h2>
                </header>
                <div class="card_img">
                    <img src="images/applepie.jpeg" alt="cookies">
                </div>
                <p class="card_text">Add some zing to your chocolate chip cookies with a bit of espresso and cardamom flavor! These are somewhat thin and chewy cookies...</p>
                      <button class="button card_button">SUBMIT</button>
              <button class="button">SUBMIT</button>
            </article>

      </div> <!-- ends row -->
      </div> <!-- ends container -->
  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" href="css/cooking-design.css">
	</head>
	<body>
	<!-- *********** Text Components **************** -->

	<!-- headings -->

	<h1>This is the main heading</h1>
	<h2>This is a secondary heading</h2>
	<h3>This is a third level heading</h3>

	<!-- Body text -->

	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</p>

	<!-- Hyperlink -->

	<a href="#">This is sample hyperlink</a>

	<!-- List -->

	<ul>
	<li class="list">This is first list item</li>
	<li class="list">This is second list item</li>
	<li class="list">This is third list item</li>
	<li class="list">This is fourth list item</li>
	<li class="list">This is fifth list item</li>
	</ul>



	<!-- ********* Button ********* -->

	<button class="button">SUBMIT</button>

	<input type="submit" class="button"></input>

	<a href="#" class="button">SUBMIT</a>

	<a class="button">GO</a>


	<!-- ********* Card ********* -->


	<article class="card">
	<header class="card_header">
	<h1 class="card_title">Cardamom and Espresso Chocolate Chip Cookies</h1>
	<h2 class="card_subtitle">By Kim</h2>
	</header>
	<div class="card_img">
	<img src="images/cookies.jpeg" alt="cookies">
	</div>
	<p class="card_text">Add some zing to your chocolate chip cookies with a bit of espresso and cardamom flavor! These are somewhat thin and chewy cookies...</p>
	<button class="button card_button">SUBMIT</button>
	<button class="button">SUBMIT</button>
	</article>


	<!--- ************ nav bar *********** -->


	<nav class="navbar">
	<ul class="navbar_list">
	<li class="navbar_li"><a href="#">Link 1</a></li>
	<li class="navbar_li"><a href="#">Link 2</a></li>
	<li class="navbar_li"><a href="#">Link 3</a></li>
	<li class="navbar_li"><a href="#">Link 4</a></li>
	<li class="navbar_li"><a href="#">Link 5</a></li>
	</ul>
	</nav>

	</body>
	</html>
	/* Components Styles */

	/* ********* General Styles ******** */
	*{
	margin:0;
	padding:0;
	}

	body{
	font-family:Roboto, Arial, sans-serif;
	color:#333;
	}

	/* ********* Text Styles ******** */

	h1{
	font-family:Roboto-light, Arial, sans-serif;
	font-size:3rem; /* three times the size of the default font-size */
	font-weight:normal;
	color:darkcyan;
	}

	h2{
	font-family:Roboto-medium, Arial, sans-serif;
	font-size:2rem; /* three times the size of the default font-size */
	margin-bottom:0.5em;
	font-weight:normal;

	}


	h3{
	text-transform: uppercase;
	margin-bottom:0.5em;
	}

	p{
	line-height:1.3em;
	margin-top:1em;
	margin-bottom:1em;
	}

	a{
	color:cornflowerblue;
	text-decoration: none;
	}

	ul{
	margin-top:1em;
	margin-bottom:1em;
	}

	.list{
	list-style-type: none;
	margin-top:0.5em;
	margin-bottom: 0.5em;
	border-bottom: solid 1px #ccc;
	padding-bottom:0.5em;
	}

	/* ********* Buttons Styles ******** */

	.button{
	width:64px;
	border:none;
	font-size:.875em;
	text-transform:uppercase;
	text-align: center;
	background-color: teal;
	color:white;
	border-radius: 5px;
	padding:0.5em;
	box-shadow: 2px 2px 2px #999;
	display:inline-block; /* I can change the width of this element */
	}

	.button:active{
	background-color:black;
	border:none;
	}


	/* ********* Cards Styles ******** */

	.card{
	max-width:344px;
	border:solid 1px #ccc;
	margin-top:1em;
	margin-bottom:1em;
	box-shadow: 2px 2px 2px #ccc;
	}

	.card_header{
	height:72px;
	padding-top:16px;
	padding-left:1em;
	}

	.card_title{
	font-size:1.2em;
	font-family: Roboto-bold;
	}

	.card_subtitle{
	font-size:1em;
	}

	.card_img{ /* div that contains the image */
	height:200px;
	overflow:hidden; /* controls the part of the image that does not fit its height */
	}

	.card_img img{ /* img is a child of an element with the card_img class */
	width:100%; /* takes the width of its container */
	}

	.card_text{
	margin:1em;
	}

	.card_button{
	margin:0 0.5em 1em 1em;/* top, right, bottom, left */
	}


	/* ********* Navbar Styles ******** */

	nav{
	background-color: darkcyan;
	padding:0.15em;
	}

	.navbar_list{
	display:flex;
	flex-direction: row;
	list-style-type: none;
	}

	.navbar_li{
	margin: 0 1em;
	}

	.navbar_li a{
	color:#fff;
	}
	.row{
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	margin-left:-1em;
	height:100%;

	}

	.card{
	margin:1em;
	}

	.container{
	padding:1em;
	}

	@media (min-width:768px){

	.row{
	flex-direction: row;
	}

	}