Build a Responsive Page

Quick Copy Boxes

/* All elements width includes borders and padding*/
* {
    box-sizing: border-box;
}

/* Rows*/
.row::after {
    content: "";
    clear: both;
    display: table;
}

/* Classes containing "col-"*/
[class*="col-"] {
    float: left;
    padding: 15px;
}

/* Column width for small devices (i.e. smart phones)*/
[class*="col-"] {
    width: 100%;
}

/* Column width for large devices (i.e. computers)*/
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/* Column width for large devices (i.e. tablets)*/
  @media only screen and (min-width: 600px) {
    .col-t-1 {width: 8.33%;}
    .col-t-2 {width: 16.66%;}
    .col-t-3 {width: 25%;}
    .col-t-4 {width: 33.33%;}
    .col-t-5 {width: 41.66%;}
    .col-t-6 {width: 50%;}
    .col-t-7 {width: 58.33%;}
    .col-t-8 {width: 66.66%;}
    .col-t-9 {width: 75%;}
    .col-t-10 {width: 83.33%;}
    .col-t-11 {width: 91.66%;}
    .col-t-12 {width: 100%;}
}

CSS: Responsive Layout

HTML: Resonsive Skeleton

CSS: Responsive Top Menu

HTML: Responsive Top Menu

<!DOCTYPE html>
<html lang="en-us">
  <head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" type="text/css" href="responsive.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <title>Coding Commanders</title>
    <style>
      /* Element sizing includes padding and border*/
      * {
          box-sizing: border-box;
      }
      /* "row class"-->*/
      .row::after {
          content: "";
          clear: both;
          display: table;
      }
      /* Columns containing "col-"*/
      [class*="col-"] {
          float: left;
          padding: 15px;
      }
      /* Column size for small devices (phones)*/
      [class*="col-"] {
          width: 100%;
      }
      /* Column size for large devices (computers)*/
      @media only screen and (min-width: 768px) {
          /* For Large Devices*/
          .col-1 {width: 8.33%;}
          .col-2 {width: 16.66%;}
          .col-3 {width: 25%;}
          .col-4 {width: 33.33%;}
          .col-5 {width: 41.66%;}
          .col-6 {width: 50%;}
          .col-7 {width: 58.33%;}
          .col-8 {width: 66.66%;}
          .col-9 {width: 75%;}
          .col-10 {width: 83.33%;}
          .col-11 {width: 91.66%;}
          .col-12 {width: 100%;}
      }
      /* Header Container*/
      .topContainer{
        width: 97%;
        margin-left: 1.5%;
        background-color: #050937;
        box-shadow: 4px 4px 2.5px black;
        border-radius: 9px;
      }
      /* Page Heading*/
      .headline{
        display: inline-block;
        color: #FFECD8;
        float: right;
      }
      /*Top Menu Bar*/
      .topMenu {
        overflow: hidden;
        background-color: #820808;
        border-radius: 9px;
      }
      /* Navigation links in "topMenu" container*/
      .topMenu a {
        float: left;
        display: block;
        color: #E7F0D8;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
      }
      /* Navigation links in "topMenu" container: On mouse hover*/
      .topMenu a:hover {
        background-color: blue;
        color: lightyellow;
      }
      /* Visited navigation links in "topMenu" container: On mouse hover*/
      .topMenu a:visited:hover {
        background-color: blue;
        color: lightyellow;
      }
      /* Nav link text color in paragraphs*/
      p a {
        color: red;
      }
      /* Page Body*/
      body {
        background-color: #F0D2CB;
        color: #02052A;
        font-family: helvetica, arial, sans-serif;
        font-size: 16px;
      }
      /* Header Image*/
      img.topImage {
        max-width: 150px;
        float: left;
      }
      /* Question labels*/
      .redLabel {
        color: darkred;
        font-size: 16px;
        font-weight:800;
      }
      /* Bordered Container*/
      div.bordered {
        font-size: 18px;
        font-weight: bold;
        color: #09326B;
        background-color: white;
        border-style: solid;
        border-color: #09326B;
        border-width: 4px;
        padding: 10px;
        margin: 50px;
        width: 90%;
      }
      /*Form class*/
      form.myForm {
        border-style: double;
        border-color: #050937;
        border-width: 1px;
        color: #050937;
        padding-left: 15px;
        padding-bottom: 15px;
      }
    </style>
  </head>
  <body>
    
    <div class = "topContainer">
      
      <div class = "topMenu">
        <a  href = "https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ" class= "fa fa-youtube"> YouTube</a>
        <a href= "https://www.facebook.com/codingcommanders/" class= "fa fa-facebook"> Facebook</a>
        <a href= "https://www.instagram.com/codingcommanders" class= "fa fa-instagram"> Instagram</a>
        <a href= "https://twitter.com/codingCommander" class= "fa fa-twitter"> Twitter</a>
        <a href= "https://plus.google.com/102944579677628755090" class= "fa fa-google"> Google+</a>
        <a href= "https://github.com/codingCommanders/" class= "fa fa-github"> Github</a>
        <a href = "photoGallery.php" class="fa fa-camera" aria-hidden="true"> Photos</a>
      </div>
      
      <div class = "row">
        <div class = "col-4">
             
             <img class = "topImage" src = "http://i67.tinypic.com/2gu04rr.png">
        </div>
        <div class = "col-6">
          
          <div class = "headline">
            <h1>Page Heading</h1>
            <strong><i>Tagline...</i></strong>
         </div>
       </div>
    </div>
    <br><br>
    </div>
    
    
    <div class = "row">
      <div  align = "center" class = "bordered">Introduction</div>
  </div>
    
    <div class = "row">
      
      <div class = "col-3">
        (Left-side content here)
      </div>
      
      <div class = "col-6">
        
        <form class= "myForm" method= "post" action= "main.php">
          <h2>Form Heading</h2>
          
         <label class = "redLabel" for = "firstName">First Name</label><br>
         <input type="text" name="firstName" placeholder="First Name" required><br>
         <label class = "redLabel" for = "lastName">Last Name</label><br>
         <input type="text" name="lastName" placeholder="Last Name"><br>
         <label class = "redLabel" for = "userEmail">Email Address:</label><br>
         <input type="email" name="userEmail" placeholder="youremail@email.com" required><br>
         <br><br>
          
          <label class = "redLabel" for = "mySelect">Question or Heading</label><br>
          <select name = "mySelect">
            <option></option>
            <option for = "mySelect" value = "1">Option 1</option>
            <option for = "mySelect" value = "2">Option 2</option>
            <option for = "mySelect" value = "3">Option 3</option>
            <option for = "mySelect" value = "4">Option 4</option>
          </select><br>
          <br><br>
          
          <label class = "redLabel" for = "myRadio">Question or Heading</label><br>
            <input type = "radio" name = "myRadio" value = "1">Option 1<br>
            <input type = "radio" name = "myRadio" value = "2">Option 2<br>
            <input type = "radio" name = "myRadio" value = "3">Option 3<br>
            <input type = "radio" name = "myRadio" value = "4">Over 100<br>
          <br><br>
         
         <label class = "redLabel" for = "myChecks">Question or Heading</label><br>
           <input type = "checkbox" name = "myChecks" value = "1">  Option 1<br>
           <input type = "checkbox" name = "myChecks" value = "2">  Option 2<br>
           <input type = "checkbox" name = "myChecks" value = "3">  Option 3<br>
           <br><br>
            
            <input type="submit" value="Submit">
        </form>
      </div>
      
      <div class = "col-3">
        (Right-side content here)
      </div>
    </div>
   </body>
 </html>

Responsive Form Template

In this lesson, we will build a respnsive web page.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Below is all the code used to make the example responsive page.

Below certain code block, you will find an orange information button. Click the EXAMPLE button.

When you click the button, it will display information about the above code block. This may include descriptions or links to the appropriate lessons.
Now, click it again to make the information disappear. Happy Coding, my trusted Coding Cadet!

CSS Code


* {
    box-sizing: border-box;
}

➼ * {...;} - The * means we are applying this code to ALL elements.
➼ box-sizing: border-box; - The the height and width of the content will include padding and borders.
For more information on box-sizing visit Responsive CSS


[class*="col-"] {
    float: left;
    padding: 15px;
}

➼ [class*="col-"]/span> - This code applies to all code containing "col-" in the class name - Responsive CSS
➼ float - left - Align & Position
➼ padding - 15px - (CSS Padding)


.row::after {
    content: "";
    clear: both;
    display: table;
}

➼ row::after - Stuff we are putting after a "row" class element's content - Responsive CSS
<ul class = 'myMenu'>
➼ content: ""; - content to insert after - Responsive CSS
➼ clear: both; - Floating elements are not allowed on either side of the element - Align & Position
➼ display: table; - table elements have rows & columns - Responsive CSS, CSS Menus
Basically, we are clearing our rows to make sure no floating elements get in the way. Each row will take the full width of the device's screen. Floating columns ("col-") will be places inside the bounds of the rows.


/***** RESPONSIVE DESIGN CSS*****/

/* For Small Devices*/
[class*="col-"] {
    width: 100%;
}

Here we are defining the width of columns for small devices, like cell phones. (CSS Classes)
➼ [class*="col-"] - all classes containing "col-" (our column classes) - Responsive CSS
➼ width - 100% (of the device's display screen) - Responsive CSS


/* For Large Devices*/
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

This code defines our column classes ("col-") for large screen devices - Responsive CSS
➼ @media only screen and (min-width: 768px) Media Query for devices that are at lease 768px wide.
➼ .col-1 {width: 8.33%;} - "col-1" width is 8.33% (1/12) the total screen width
➼ .col-2 {width: 16.66%;} - "col-2" width is 16.66% (2/12) the total screen width
➼ .col-3 {width: 25%;} - "col-3" width is 25% (3/12) the total screen width
➼ .col-4 {width: 33.33%;} - "col-4" width is 33.33% (4/12) the total screen width
➼ .col-5 {width: 41.66%;} - "col-5" width is 41.66% (5/12) the total screen width
➼ .col-6 {width: 50%;} - "col-6" width is 50% (6/12) the total screen width
➼ .col-7 {width: 58.33%;} - "col-7" width is 58.33% (7/12) the total screen width
➼ .col-8 {width: 66.66%;} - "col-8" width is 66.66% (8/12) the total screen width
➼ .col-9 {width: 75%;} - "col-9" width is 75% (9/12) the total screen width
➼ .col-10 {width: 83.33%;} - "col-10" width is 83.33% (10/12) the total screen width
➼ .col-11 {width: 91.66%;} - "col-11" width is 91.66% (11/12) the total screen width
➼ .col-12 {width: 100%;} - "col-12" width is 100% (12/12) the total screen width


/***** HEADER CSS: top menu, logo, page heading*****/

/* Container for Page Header*/
.topContainer{
  width: 97%;
  margin-left: 1.5%;
  background-color: #050937;
  box-shadow: 4px 4px 2.5px black;
  border-radius: 9px;
}

➼ .topContainer - Container for our page Header (will contain top menu, logo and page heading)
➼ width: 97%; - Will take up 97% of the screen width
➼ margin-left: 1.5%; - CSS margins
➼ background-color: #050937; - CSS Colors
➼ box-shadow: 4px 4px 2.5px black; - CSS Box-shaddowing
➼ border-radius: 9px; - CSS Border Radius


/* Page Heading*/
.headline{
  display: inline-block;
  color: #FFECD8;
  float: right;
}

Container for our page heading:
Related lessons: Align & Position, CSS Colors, Menus


/*Top Menu*/
.topMenu {
  overflow: hidden;
  background-color: #820808;
  border-radius: 9px;
}

Related lessons: Related lessons: CSS Menus, CSS Colors, Border Radius


/* Links in the Top Menu*/
.topMenu a {
  float: left;
  display: block;
  color: #E7F0D8;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* On mouse hover: unvisited links*/
.topMenu a:hover {
  background-color: blue;
  color: lightyellow;
}

/* On mouse hover: visited links*/
.topMenu a:visited:hover {
  background-color: blue;
  color: lightyellow;
}

Related Lessons: CSS Links, CSS Colors


/* Header image*/
img.topImage {
  max-width: 150px;
  float: left;
}

Related Lessons: Media Elements, CSS Align & Position


/******* PAGE BODY********/
body {
  background-color: #F0D2CB;
  color: #02052A;
  font-family: helvetica, arial, sans-serif;
  font-size: 16px;
}

Related Leddons: CSS Colors, CSS Fonts, HTML Body


/* Link inside paragraphs*/
p a {
color: red;
}

Related Lesson: CSS Links, HTML paragraphs


/* Labels*/
.myLable {
  color: #050937;
  font-size: 26px;
  font-weight:800;
}

.redLable {
  color: darkred;
  font-size: 26px;
  font-weight: 800;
}

Related lessons: CSS Colors, CSS Fonts


   /* side logos*/
   img.side {
     display: inline-block;
     width: 80%;
     float: center;
   }

Related lessons: CSS Align & Position, HTML divs, Media Elements


/* Bordered Container*/
div.bordered {
  font-size: 18px;
  font-weight: bold;
  color: #09326B;
  background-color: white;
  border-style: solid;
  border-color: #09326B;
  border-width: 4px;
  padding: 10px;

}

Related lessons: HTML divs, CSS Colors, CSS Colors, CSS Borders, CSS Padding


 /******* SIDE NAVIGATION******/

 /* unordered list: "sideMenu"*/
 ul.sideMenu {
   list-style-type: none;
   padding-top:20px;
   padding-bottom: 20px;
 }

 /* links in "sideMenu" unordered lists*/
 ul.sideMenu a {
   display:block;
   width = 70%;
   border-style: solid;
   border-width: 1px;
   border-color: red;
   padding: 5px;
   font-size: 20px;
   background-color: #050937;
   color: white;
   border-radius: 18px;
   text-decoration: none;
   padding: 5px;
   margin: 5px;
   text-align: center;
 }

 /* on hover: links in ul class = "sideMenu"*/
 ul.sideMenu a:hover {
   background-color: red;
 }

List and Menu Lessons: CSS links, CSS Menus, CSS Lists


/****** FORM CONTAINER*****/
form.signUp {
  border-style: double;
  border-color: #050937;
  border-width: 1px;
  color: #050937;
  padding-left: 15px;
  padding-bottom: 15px;
}

Related lessons: HTML Forms

HTML Code

<!DOCTYPE html>
<html lang="en-us">
  <head>
     <!-- Meta Viewport-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- CSS Stylesheet -->
     <link rel="stylesheet" type="text/css" href="responsive.css">
     <!-- Font Awesome Stylesheet: Social Media (and other) icons: http://fontawesome.io/ -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!-- Page Title-->
     <title>Coding Commanders</title>
  </head>

➼ "viewport" meta tag - Important for responsive design - Meta tags: Viewport
➼ CSS Stylesheet - Link to the file containing the CSS code for our page - Links & Filepath
➼ fontawesome stylesheet - Link to include fontawesome icons - CSS Menus
➼ Page Title - Title Tag
You may also find these lessons helpful:
Head Tags
Meta Tags


  <body>
     <!--- HEADER------------------------>
     <div class = 'topContainer'>
       <!-- Top Menu-->
       <div class = 'topMenu'>
         <a  href = 'https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ' class='fa fa-youtube'> YouTube</a>
         <a href='https://www.facebook.com/codingcommanders/' class='fa fa-facebook'> Facebook</a>
         <a href='https://www.instagram.com/codingcommanders' class='fa fa-instagram'> Instagram</a>
         <a href='https://twitter.com/codingCommander' class = 'fa fa-twitter'> Twitter</a>
         <a href='https://plus.google.com/102944579677628755090' class='fa fa-google'> Google+</a>
         <a href='https://github.com/codingCommanders/' class='fa fa-github'> Github</a>
         <a href = "photoGallery.php" class="fa fa-camera" aria-hidden="true"> Photos</a>
       </div>
       <div class = 'row'>
         <div class = 'col-4'>
            <!-- Logo-->
            <img class = "topImage" src = 'usaLogo.png'>
         </div>
         <div class = 'col-6'>
             <!-- Heading-->
             <div class = 'headline'>
                <h1>Coding Commanders:  Annihilating Bugs</h1>
                <strong><i>One line of code at a time...</i></strong>
            </div>
        </div>
      </div>
     <br><br>
    </div>

➼ Header - Includes: top menu, logo and page heading
➼ Top Menu - Menus, CSS Links, HTML Links, Links & Filepath
➼ Logo Image - HTML Media
➼ Page Heading - HTML Headings, HTML Font Styles


     <!--- MAIN CONTENT------------------------>
     <!-- Row 1-->
     <div class = "row">
       <p align = "center">Coding Commanders uses web development to fight the alien-bug invasions.  We believe Earth should, once again,
       belong to the humans.  Join the fight!  The Human Resistance is currently recruiting Coding Cadets.</p>
   </div>

➼ class = "row" - This is the first row of our main content. It will take up 100% of the screen's width. There are no columns in this row. - Responsive CSS,
➼ paragraph This is the content inside row 1 - HTML paragraphs


    <!-- Row 2-->
    <div class = "row">
      <!-- Column 1, takes up 3/12 horizontal space-->
      <div class = "col-3">
        <img class = "side" src = "Logo2.png">
      </div>
      <!-- Column 2, takes up 6/12 horizontal space-->
      <div class = "col-6">
        <div class = "bordered">
          <label class = "myLable">Coding Cadet Benefits</label><br>
          <ol>
             <li>You will learn full stack web development.</li>
             <li>It's fun!  Writing code is like playing a strategy game or solving a puzzles.</li>
             <li>You will be a hero.  Humanity wants Earth back and the Bugs gone.  By joining Coding Commanders you will be a hero.</li>
             <li>You get to help people.</li>
             <li>You get to annihilate bugs!</li>
          </ol>
          <p align = "center">Together we can debug Earth!</p>
        </div>
      </div>
     <div class = "col-3">
      <img class = "side" src = "fullLogo.png">
    </div>
  </div>

➼ class = "row" - 2nd Row of our Main content area.
➼ class = "col-3" - 1st Column in this row - 33.33% screen width
➼ class = "col-6" - 2nd Column in this row - 50% screen width
➼ class = "col-3" - 3st Column in this row - 33.33% screen width
Related Lessons: HTML Lists, CSS Lists, HTML Media, Responsive CSS


     <!-- Row 3-->
        <div class = "row">
         <!-- Side Menu: Column 1, takes up 3/12 horizontal space-->
         <div class = "col-3">
           <ul class = "sideMenu">
             <label class = "redLable"> Try HTML</label>
             <li><a href="htmlL/element.php">What is an element? </a> </li>
             <li><a href="htmlL/heading.php">Headings</a> </li>
             <li><a href="htmlL/links.php">Links</a> </li>
             <li><a href="htmlL/media.php">Media</a> </li>
             <li><a href="htmlL/paragraphs.php">Paragraph</a> </li>
             <li><a href="htmlL/span.php">Span</a> </li>
             <li><a href="htmlL/list.php">List</a> </li>
           </ul>

           <ul class = "sideMenu">
             <label class = "redLable"> Try CSS</label>
             <li><a href="cssL/css.php">What is CSS?</a> </li>
             <li><a href="cssL/colors.php">Colors</a> </li>
             <li><a href="cssL/font.php">Font</a> </li>
             <li><a href="cssL/list.php">Lists</a> </li>
             <li><a href="cssL/border.php">Border</a> </li>
           </ul>

           <ul class = "sideMenu">
             <label class = "redLable"> Try PHP</label>
             <li><a href="phpL/datatypesM.php">Data Types</a> </li>
             <li><a href="phpL/echoM.php">Echo</a> </li>
             <li><a href="phpL/mathOperators.php">Math Operator</a> </li>
             <li><a href="phpL/stringOperators.php">String Operator</a> </li>i>
           </ul>
       </div>

➼ class = "col-3" - 33.33% screen width - contains side menu
➼ "class = "sideMenu" (1st) - 1st Side Menu group - HTML Links
➼ "class = "sideMenu" (2nd) - 2st Side Menu group - CSS Links
➼ "class = "sideMenu" (3rd) - 3st Side Menu group - PHP Links
*Note: sideMenu is a class we made in the CSS. The side Menu is made up of HTML lists that contain navigation links
Related Lessons: Menus, HTML Links, CSS Links, HTML Lists, CSS Lists, Links & Filepath, Responsive CSS


        <!-- Column 2, takes up 6/12 horizontal space-->
        <div class = "col-6">
           <!-- Sign up Form-->
           <form class = "signUp" method = 'post' action = 'signUp.php'>
             <!-- Heading-->
             <h1>The Human Resistance Sign Up<</h1>
             <!-- Text imput fields-->
             <h4>First Name</h4>
             <input type= "text" name= "firstName" placeholder= "First Name" required><br>
             <h4>Last Name</h4>
             <input type="text" name= "lastName" placeholder= "Last Name" ><br>
             <h4>Email</h4>
             <input type= "email" name= "userEmail" placeholder= "youremail@email.com" required><br>
             <!-- Select-->
             <h4>Which volunteer squad will you be joining?</h4>
             <select name = "squad" >
               <option></option>
               <option for = "squad" value = "4">Infintry</option>
               <option for = "squad" value = "3">Child Protection</option>
               <option for = "squad" value = "2">Domestic</option>
               <option for = "squad" value = "1">Research</option>
             </select>
             <br>
             <!-- Radio buttons-->
               <h4>How many Bugs have you annihilated?</h4>
                 <input type = "radio" name = "exp" value = "1">None<br>
                 <input type = "radio" name = "exp" value = "2">Less than 10<br>
                 <input type = "radio" name = "exp" value = "3">Less than 100<br>
                 <input type = "radio" name = "exp" value = "4">Over 100<br>
               <br>
               <!-- Submit Button-->
               <input type="submit" value="Submit">
           </form>
         </div>

➼ class = "col-6" - 2nd Column in Row 3 contains our Signup Form - 50% screen width
➼ <form> - Our form contains text input, selects, radio buttons and a submit button
➼ text input - first name, last name and email
➼ selects - Which volunteer squad will you be joining?
➼ radios - How many Bugs have you annihilated?
➼ Submit Button - Submits the form, runs PHP script included in form tag
*Note: We will learn to write the PHP for the form (to make it work) in the PHP tutorials
Related Lessons: HTML Forms, Text Input, Selects, Radios, Buttons


       <!-- Column 3, 3/12 horizontal space-->
       <div class = "col-3">
           <br><br><br>
           <div class = "bordered">
             Save our children!<br>
             Save humanity!<br>
             Save Earth!<br>
           </div>
           <br><br><br>
           <div class = "bordered">
             <h3>Let's debug!</h3>
           </div>
           <br><br><br>
           <div class = "bordered">
             <h3>Let's debug!</h3>
           </div>
      </div>
      
       
       
          
          ➼ class = "col-3" - 3nd Column in Row 3 - 33.33% screen width

      
    </div>
  </body>
</html>

Now take a look at the page we just build: Example Responsive Page. Play with changing the size of the window and observe how the page is viewed.

Color Selector

Hex:

RBG:

Build a Responsive Page

CSS Code

HTML Code

Applied Project