Hi, everyone? i need help in this program am bit confused how to complete this


Style Guide

  <!-- ------------------------Steps 4-8------------------------------ -->

  <h3>
    Color Palette
  </h3>
  <!--  The colors you choose for a website are one of the most important decisions you will make. Follow the instructions on the activity in iLearn then return and replace the color codes below with the hex color codes (the 6 digit numbers that show at the bottom of each color) for the colors you have chosen below.  You should have at least 2 colors but do not have to fill in all 4 if you do not need them.  -->

  <!-- Copy and paste the URL to your finished palette below Make sure to paste it into both spots -->
  Palette URL: <a href="https://coolors.co/palette/0d3b66-faf0ca-f4d35e-ee964b-f95738" target="_blank">https://coolors.co/396e94-e7c24f-a43312-381d2a-aabd8c</a>


  <table class="colors">
    <tr><th>Prtypoimary</th><th>Secondary</th><th>Accent 1</th><th>Accent 2</th></tr>
    <!-- Replace the numbers in the boxes below with your hex color codes. Then switch to the site-plan.css file and change your colors there as well. -->
    <tr><td class="primary">[#396E94]</td><td class="secondary">[#E7C24F]</td><td class="accent1">[#A43312]</td><td class="accent2"></td></tr>
  </table>

  <!-- ------------------------Step 9------------------------------ -->

  <h3>
    Typography
  </h3>
  <!-- Choose a font for your paragraphs (body copy) and headlines. What font(s) have you chosen? Why did you choose what you did?  Make sure to review the list of web safe fonts at W3Schools.org as a starting point.  Think also about which of your colors above you might use for background and font colors. -->

  <h4>
    Heading Font: [Font Name here]  <!-- change this -->
  </h4>
  <h4>
    Paragraph Font: [Font Name here]  <!-- change this -->
  </h4>
  <h3>
    Normal paragraph example
  </h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <h3>
    Colored paragraph example
  </h3>
  <p class="colored">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  </p>

  <!-- ------------------------Step 10------------------------------ -->

  <h3>
    Navigation
  </h3>
  <!-- Think about how you want your navigation bar to look. In the site-plan.css file change the colors to your colors to get the look you desire. --> 
  <nav>
    <a href="#">Home</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
  </nav>
  <hr>
  <h2>
    Site Map
  </h2>
  <div class="sitemap">
    <div class="sm-home">
      Home
    </div>
    <div class="sm-page2">
      [Page2] <!-- change this -->
    </div>
    <div class="sm-page3">
      [Page3]  <!-- change this -->
    </div>

    <div class="top">
      &nbsp;
    </div>
    <div class="left">
      &nbsp;
    </div>
    <div class="right">
      &nbsp;
    </div>

  </div>

  <!-- --------Content Section -------------- -->
  <hr>
  <h2>
    Content
  </h2>
  <h3>Home page</h3>
  <p>
    [Written copy for the home page here]
  </p>
  <p>Images for the Home page</p>
    <img src="#" alt="image for homepage">
    <img src="#" alt="image for homepage">

  </ul>
  <h3>[Page 2]</h3>
  <p>
    [Written copy for the Page 2 here]
  </p>
  <p>Images for the Page 2</p>
    <img src="#" alt="image for page">
    <img src="#" alt="image for page">

  </ul>
  <h3>[Page 3]</h3>
  <p>
    [Written copy for the Page 3 here]
  </p>
  <p>Images for the Page 3</p>
    <img src="#" alt="image for page3">
    <img src="#" alt="image for page3">

  </ul>
  <hr>
  <h2>
    Wireframes
  </h2>
  <p>
    Create three wireframes for your site. One for each page and list them here</p>

  <h3>Home</h3>
  <p>         
    [Any additional details about home that the wireframe does not make clear]
  </p>
  <img src="#" alt="home page wireframe">

  <h3>[Page 2]</h3>
  <p>         
    [Any additional details about page 2 that the wireframe does not make clear]
  </p>
  <img src="#" alt="page 2 wireframe">

  <h3>[Page 3]</h3>
  <p>         
    [Any additional details about page 3 that the wireframe does not make clear]
  </p>
  <img src="#" alt="page 3 wireframe">
</main>

Hello! We really want to help you! But we’re kind of lost. You have to describe more about your issues. Learning how to formulate a problem is an important part of programming!

Happy coding! :+1: :wink:

1 Like

i just started coding and am a bit confused from Style Guide and about Color Palette and going downwards. please can you guide me how to do that?

Site Plan

Web Developer & Design Site Plan

Freedom Mukanza

WDD 130-B9

  <!-- ------------------------Steps 2-3------------------------------ -->
  <hr>
  <h2>Experienced and creative web designerss and programmers</h2>
  <p>
      Whether you're an experienced developer or just starting in the world of design and programming, our platform aims to be your central resource for inspiration, education, and community building. With a strong technical background and years of industry experience, We excel at turning complex ideas into elegant, intuitive, and functional web solutions. Our expertise lies in front-end and back-end development technologies, allowing us to craft seamless and responsive web and programmers that deliver exceptional user experiences.
  </p>
  <h3>Purpose</h3>
  <p>The purpose of this website is to serve as a creative portfolio showcase. This website will exhibit our skills, projects, and expertise to potential employers, clients, and collaborators. It will be a platform where we can demonstrate our abilities, display our work, and share our passion for various projects.</p>  <!-- change this -->


  <h3>Audience</h3>
  <p>The intended audience for our website includes potential employers, freelance clients, collaborators, and anyone interested in viewing our creative portfolio. It is designed to appeal to individuals and businesses seeking creative services, such as web development, design, and content creation.</p>  <!-- change this -->

  <hr>
  <h2>FM Creative Technoloy</h2>
  <h3></h3>
  <!-- Replace this with some sort of logo for your site.  A logo can be as simple as the name of your site in a nice font :) -->
  <img src="images/logo.png" alt="Logo image">
  <hr>
  <h2>
    Style Guide
  </h2>

  <!-- ------------------------Steps 4-8------------------------------ -->

  <h3>
    Color Palette
  </h3>
  <!--  The colors you choose for a website are one of the most important decisions you will make. Follow the instructions on the activity in iLearn then return and replace the color codes below with the hex color codes (the 6 digit numbers that show at the bottom of each color) for the colors you have chosen below.  You should have at least 2 colors but do not have to fill in all 4 if you do not need them.  -->

  <!-- Copy and paste the URL to your finished palette below Make sure to paste it into both spots -->
  Palette URL: <a href="https://coolors.co/palette/0d3b66-faf0ca-f4d35e-ee964b-f95738" target="_blank">https://coolors.co/396e94-e7c24f-a43312-381d2a-aabd8c</a>


  <table class="colors">
    <tr><th>Prtypoimary</th><th>Secondary</th><th>Accent 1</th><th>Accent 2</th></tr>
    <!-- Replace the numbers in the boxes below with your hex color codes. Then switch to the site-plan.css file and change your colors there as well. -->
    <tr><td class="primary">[#396E94]</td><td class="secondary">[#E7C24F]</td><td class="accent1">[#A43312]</td><td class="accent2"></td></tr>
  </table>

  <!-- ------------------------Step 9------------------------------ -->

  <h3>
    Typography
  </h3>
  <!-- Choose a font for your paragraphs (body copy) and headlines. What font(s) have you chosen? Why did you choose what you did?  Make sure to review the list of web safe fonts at W3Schools.org as a starting point.  Think also about which of your colors above you might use for background and font colors. -->

  <h4>
    Heading Font: [Font Name here]  <!-- change this -->
  </h4>
  <h4>
    Paragraph Font: [Font Name here]  <!-- change this -->
  </h4>
  <h3>
    Normal paragraph example
  </h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <h3>
    Colored paragraph example
  </h3>
  <p class="colored">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  </p>

  <!-- ------------------------Step 10------------------------------ -->

  <h3>
    Navigation
  </h3>
  <!-- Think about how you want your navigation bar to look. In the site-plan.css file change the colors to your colors to get the look you desire. --> 
  <nav>
    <a href="#">Home</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
  </nav>
  <hr>
  <h2>
    Site Map
  </h2>
  <div class="sitemap">
    <div class="sm-home">
      Home
    </div>
    <div class="sm-page2">
      [Page2] <!-- change this -->
    </div>
    <div class="sm-page3">
      [Page3]  <!-- change this -->
    </div>

    <div class="top">
      &nbsp;
    </div>
    <div class="left">
      &nbsp;
    </div>
    <div class="right">
      &nbsp;
    </div>

  </div>

  <!-- --------Content Section -------------- -->
  <hr>
  <h2>
    Content
  </h2>
  <h3>Home page</h3>
  <p>
    [Written copy for the home page here]
  </p>
  <p>Images for the Home page</p>
    <img src="#" alt="image for homepage">
    <img src="#" alt="image for homepage">

  </ul>
  <h3>[Page 2]</h3>
  <p>
    [Written copy for the Page 2 here]
  </p>
  <p>Images for the Page 2</p>
    <img src="#" alt="image for page">
    <img src="#" alt="image for page">

  </ul>
  <h3>[Page 3]</h3>
  <p>
    [Written copy for the Page 3 here]
  </p>
  <p>Images for the Page 3</p>
    <img src="#" alt="image for page3">
    <img src="#" alt="image for page3">

  </ul>
  <hr>
  <h2>
    Wireframes
  </h2>
  <p>
    Create three wireframes for your site. One for each page and list them here</p>

  <h3>Home</h3>
  <p>         
    [Any additional details about home that the wireframe does not make clear]
  </p>
  <img src="#" alt="home page wireframe">

  <h3>[Page 2]</h3>
  <p>         
    [Any additional details about page 2 that the wireframe does not make clear]
  </p>
  <img src="#" alt="page 2 wireframe">

  <h3>[Page 3]</h3>
  <p>         
    [Any additional details about page 3 that the wireframe does not make clear]
  </p>
  <img src="#" alt="page 3 wireframe">
</main>

CSS
/* if you are using any Google fonts change the font names below to your fonts.
Any spaces in your font name should be replaced with a +.
Fonts are separated by a | */
@import url(‘https://fonts.googleapis.com/css?family=IM+Fell+French+Canon+SC|Lato’);

:root {
/* change the values below to your colors from your palette */
–primary-color: #0d3b66 ;
–secondary-color: #f4d35e ;
–accent1-color: #f95738;
–accent2-color: #faf0ca;

/* change the values below to your chosen font(s) */
–heading-font: “IM Fell French Canon SC”;
–paragraph-font: Lato, Helvetica, sans-serif;

/* these colors below should be chosen from among your palette colors above /
–headline-color-on-white: #0d3b66; /
headlines on a white background /
–headline-color-on-color: #faf0ca; /
headlines on a colored background /
–paragraph-color-on-white: #0d3b66; /
paragraph text on a white background /
–paragraph-color-on-color: #faf0ca; /
paragraph text on a colored background */
–paragraph-background-color: #0d3b66 ;
–nav-link-color: #0d3b66;
–nav-background-color: #D4AC0D;
–nav-hover-link-color: #faf0ca;
–nav-hover-background-color: #0d3b66;
}

/* Look around below…but DON’T CHANGE ANYTHING! */

body {
max-width: 1200px;
margin: 0 auto;
padding: 4em;
font-size: 18px;
text-align: center;
}
img {
display: block;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(–heading-font);
color: var(–headline-color-on-white);
}
h2 {
text-align: center;
}
hr {
height: 3px;
margin: 35px 0;
background: var(–accent1-color);
}
header {
padding: 1em;
text-align: center;
color: var(–headline-color-on-color);
background-color: var(–paragraph-background-color);
}
header > h1, header > h2 {
color: var(–headline-color-on-color);
}

p {
font-family: var(–paragraph-font);
color: var(–paragraph-color-on-white);
padding: 1em;
}
.colors {
width: 100%;
min-width: 350px;
margin: 30px auto;
text-align: center;
}
.colors th {
background-color: #999;
}
.colors td{
width: 25%;
height: 3em;
}

.primary {
background-color: var(–primary-color);
}
.secondary {
background-color: var(–secondary-color);
}
.accent1 {
background-color: var(–accent1-color);
}
.accent2{
background-color: var(–accent2-color);
}

p.colored {
background-color: var(–paragraph-background-color);
color: var(–paragraph-color-on-color);
}

nav {
background-color: var(–nav-background-color);
line-height: 3em;
text-align: center;
font-size: 1.2em;
}
nav {
list-style-type: none;
display: flex;

}
nav a {
padding:1em;
min-width: 120px;
text-decoration: none;
padding: 10px;

}
nav a:link, nav a:visited {
color: var(–nav-link-color);
}
nav a:hover {
color: var(–nav-hover-link-color);
background-color: var(–nav-hover-background-color);
}

.sitemap {
display: grid;
justify-content: center;

grid-template-columns: repeat(6, 15%);
grid-template-rows: 3em 1.5em 1.5em 3em;
grid-template-areas: “. . home home . .”
“. . . top . .”
“. left left right right .”
“page2 page2 . . page3 page3”;
}
.sitemap > div {

text-align: center;

}
.sm-home {
grid-area: home;
background-color: #ccc;
line-height: 3em;
}
.sm-page2 {
grid-area: page2;
background-color: #ccc;
line-height: 3em;
}
.sm-page3 {
grid-area: page3;
background-color: #ccc;
line-height: 3em;
}

.top {
grid-area: top;
border-left: 1px solid;
}

.left {
grid-area: left;
border-top: 1px solid;
border-left: 1px solid;
}

.right {
grid-area: right;
border-top: 1px solid;
border-right: 1px solid;
}

hi, am a bit confused from Style Guide and about Color Palette and going downwards. please can you guide me how to do that?

Site Plan

Web Developer & Design Site Plan

Freedom Mukanza

WDD 130-B9

  <!-- ------------------------Steps 2-3------------------------------ -->
  <hr>
  <h2>Experienced and creative web designerss and programmers</h2>
  <p>
      Whether you're an experienced developer or just starting in the world of design and programming, our platform aims to be your central resource for inspiration, education, and community building. With a strong technical background and years of industry experience, We excel at turning complex ideas into elegant, intuitive, and functional web solutions. Our expertise lies in front-end and back-end development technologies, allowing us to craft seamless and responsive web and programmers that deliver exceptional user experiences.
  </p>
  <h3>Purpose</h3>
  <p>The purpose of this website is to serve as a creative portfolio showcase. This website will exhibit our skills, projects, and expertise to potential employers, clients, and collaborators. It will be a platform where we can demonstrate our abilities, display our work, and share our passion for various projects.</p>  <!-- change this -->


  <h3>Audience</h3>
  <p>The intended audience for our website includes potential employers, freelance clients, collaborators, and anyone interested in viewing our creative portfolio. It is designed to appeal to individuals and businesses seeking creative services, such as web development, design, and content creation.</p>  <!-- change this -->

  <hr>
  <h2>FM Creative Technoloy</h2>
  <h3></h3>
  <!-- Replace this with some sort of logo for your site.  A logo can be as simple as the name of your site in a nice font :) -->
  <img src="images/logo.png" alt="Logo image">
  <hr>
  <h2>
    Style Guide
  </h2>

  <!-- ------------------------Steps 4-8------------------------------ -->

  <h3>
    Color Palette
  </h3>
  <!--  The colors you choose for a website are one of the most important decisions you will make. Follow the instructions on the activity in iLearn then return and replace the color codes below with the hex color codes (the 6 digit numbers that show at the bottom of each color) for the colors you have chosen below.  You should have at least 2 colors but do not have to fill in all 4 if you do not need them.  -->

  <!-- Copy and paste the URL to your finished palette below Make sure to paste it into both spots -->
  Palette URL: <a href="https://coolors.co/palette/0d3b66-faf0ca-f4d35e-ee964b-f95738" target="_blank">https://coolors.co/396e94-e7c24f-a43312-381d2a-aabd8c</a>


  <table class="colors">
    <tr><th>Prtypoimary</th><th>Secondary</th><th>Accent 1</th><th>Accent 2</th></tr>
    <!-- Replace the numbers in the boxes below with your hex color codes. Then switch to the site-plan.css file and change your colors there as well. -->
    <tr><td class="primary">[#396E94]</td><td class="secondary">[#E7C24F]</td><td class="accent1">[#A43312]</td><td class="accent2"></td></tr>
  </table>

  <!-- ------------------------Step 9------------------------------ -->

  <h3>
    Typography
  </h3>
  <!-- Choose a font for your paragraphs (body copy) and headlines. What font(s) have you chosen? Why did you choose what you did?  Make sure to review the list of web safe fonts at W3Schools.org as a starting point.  Think also about which of your colors above you might use for background and font colors. -->

  <h4>
    Heading Font: [Font Name here]  <!-- change this -->
  </h4>
  <h4>
    Paragraph Font: [Font Name here]  <!-- change this -->
  </h4>
  <h3>
    Normal paragraph example
  </h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <h3>
    Colored paragraph example
  </h3>
  <p class="colored">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  </p>

  <!-- ------------------------Step 10------------------------------ -->

  <h3>
    Navigation
  </h3>
  <!-- Think about how you want your navigation bar to look. In the site-plan.css file change the colors to your colors to get the look you desire. --> 
  <nav>
    <a href="#">Home</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
  </nav>
  <hr>
  <h2>
    Site Map
  </h2>
  <div class="sitemap">
    <div class="sm-home">
      Home
    </div>
    <div class="sm-page2">
      [Page2] <!-- change this -->
    </div>
    <div class="sm-page3">
      [Page3]  <!-- change this -->
    </div>

    <div class="top">
      &nbsp;
    </div>
    <div class="left">
      &nbsp;
    </div>
    <div class="right">
      &nbsp;
    </div>

  </div>

  <!-- --------Content Section -------------- -->
  <hr>
  <h2>
    Content
  </h2>
  <h3>Home page</h3>
  <p>
    [Written copy for the home page here]
  </p>
  <p>Images for the Home page</p>
    <img src="#" alt="image for homepage">
    <img src="#" alt="image for homepage">

  </ul>
  <h3>[Page 2]</h3>
  <p>
    [Written copy for the Page 2 here]
  </p>
  <p>Images for the Page 2</p>
    <img src="#" alt="image for page">
    <img src="#" alt="image for page">

  </ul>
  <h3>[Page 3]</h3>
  <p>
    [Written copy for the Page 3 here]
  </p>
  <p>Images for the Page 3</p>
    <img src="#" alt="image for page3">
    <img src="#" alt="image for page3">

  </ul>
  <hr>
  <h2>
    Wireframes
  </h2>
  <p>
    Create three wireframes for your site. One for each page and list them here</p>

  <h3>Home</h3>
  <p>         
    [Any additional details about home that the wireframe does not make clear]
  </p>
  <img src="#" alt="home page wireframe">

  <h3>[Page 2]</h3>
  <p>         
    [Any additional details about page 2 that the wireframe does not make clear]
  </p>
  <img src="#" alt="page 2 wireframe">

  <h3>[Page 3]</h3>
  <p>         
    [Any additional details about page 3 that the wireframe does not make clear]
  </p>
  <img src="#" alt="page 3 wireframe">
</main>

CSS

/* if you are using any Google fonts change the font names below to your fonts.
Any spaces in your font name should be replaced with a +.
Fonts are separated by a | */
@import url(‘https://fonts.googleapis.com/css?family=IM+Fell+French+Canon+SC|Lato’);

:root {
/* change the values below to your colors from your palette */
–primary-color: #0d3b66 ;
–secondary-color: #f4d35e ;
–accent1-color: #f95738;
–accent2-color: #faf0ca;

/* change the values below to your chosen font(s) */
–heading-font: “IM Fell French Canon SC”;
–paragraph-font: Lato, Helvetica, sans-serif;

/* these colors below should be chosen from among your palette colors above /
–headline-color-on-white: #0d3b66; /
headlines on a white background /
–headline-color-on-color: #faf0ca; /
headlines on a colored background /
–paragraph-color-on-white: #0d3b66; /
paragraph text on a white background /
–paragraph-color-on-color: #faf0ca; /
paragraph text on a colored background */
–paragraph-background-color: #0d3b66 ;
–nav-link-color: #0d3b66;
–nav-background-color: #D4AC0D;
–nav-hover-link-color: #faf0ca;
–nav-hover-background-color: #0d3b66;
}

/* Look around below…but DON’T CHANGE ANYTHING! */

body {
max-width: 1200px;
margin: 0 auto;
padding: 4em;
font-size: 18px;
text-align: center;
}
img {
display: block;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(–heading-font);
color: var(–headline-color-on-white);
}
h2 {
text-align: center;
}
hr {
height: 3px;
margin: 35px 0;
background: var(–accent1-color);
}
header {
padding: 1em;
text-align: center;
color: var(–headline-color-on-color);
background-color: var(–paragraph-background-color);
}
header > h1, header > h2 {
color: var(–headline-color-on-color);
}

p {
font-family: var(–paragraph-font);
color: var(–paragraph-color-on-white);
padding: 1em;
}
.colors {
width: 100%;
min-width: 350px;
margin: 30px auto;
text-align: center;
}
.colors th {
background-color: #999;
}
.colors td{
width: 25%;
height: 3em;
}

.primary {
background-color: var(–primary-color);
}
.secondary {
background-color: var(–secondary-color);
}
.accent1 {
background-color: var(–accent1-color);
}
.accent2{
background-color: var(–accent2-color);
}

p.colored {
background-color: var(–paragraph-background-color);
color: var(–paragraph-color-on-color);
}

nav {
background-color: var(–nav-background-color);
line-height: 3em;
text-align: center;
font-size: 1.2em;
}
nav {
list-style-type: none;
display: flex;

}
nav a {
padding:1em;
min-width: 120px;
text-decoration: none;
padding: 10px;

}
nav a:link, nav a:visited {
color: var(–nav-link-color);
}
nav a:hover {
color: var(–nav-hover-link-color);
background-color: var(–nav-hover-background-color);
}

.sitemap {
display: grid;
justify-content: center;

grid-template-columns: repeat(6, 15%);
grid-template-rows: 3em 1.5em 1.5em 3em;
grid-template-areas: “. . home home . .”
“. . . top . .”
“. left left right right .”
“page2 page2 . . page3 page3”;
}
.sitemap > div {

text-align: center;

}
.sm-home {
grid-area: home;
background-color: #ccc;
line-height: 3em;
}
.sm-page2 {
grid-area: page2;
background-color: #ccc;
line-height: 3em;
}
.sm-page3 {
grid-area: page3;
background-color: #ccc;
line-height: 3em;
}

.top {
grid-area: top;
border-left: 1px solid;
}

.left {
grid-area: left;
border-top: 1px solid;
border-left: 1px solid;
}

.right {
grid-area: right;
border-top: 1px solid;
border-right: 1px solid;
}