+2347067162698
tclassified.com@gmail.com

HTML, CSS, FLEXBOX and GRID

Educational Technology and ICT

Created with Sketch.

HTML, CSS, FLEXBOX and GRID

In this project we will build a custom website using HTML5 and modern CSS techniques such as CSS Grid, Flexbox, animation and more.
We will also deploy to Netlify and add form functionality.
to get started, lets get the meaning of HTML, and CSS

WHAT IS HTML.
HTML stands for Hyper Text Markup Language, it is also the standard markup language for creating Web pages.

WHAT IS CSS
CSS stands for Cascading Style Sheets. it saves a lot of work. and helps in controlling the layout of multiple web pages all at once.

so lets get started.
go to your desktop and create a folder and call it TCLASSIFIEDHORUKI-WEBSITE, then open your vscode and open that folder on your vscode.
so on the folder, create a file and call it [index.html]. which is our home page, and on the TCLASSIFIEDHORUKU-WEBSITE create a folder and call it [CSS]
now on your CSS create a file and call it [tcstyle.css] to style your webpage.

so on your index.html lets begin by typing this codes.

............
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TCLASSIFIEDHORUKU | Cloud Hosting For Everyone</title>
</head>
<body>

</body>
</html>
............

now lets add a link under the <meta> tag

......
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/tcutilities.css">
    <link rel="stylesheet" href="css/tcstyle.css">
......

when you are done, lets start with the navbar section, and that section would be inside the body tag, in this navbar section it will carry the logo section.
so where you see the <body></body>, write the below codes.
...........
<body>
    <!-- Navbar -->
    <div class="navbar">
        <div class="container flex">
            <h1 class="logo">TCLASSIFIEDHORUKI-.</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="docs.html">Docs</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>
............

now ensure you have liveserver installed on your vscode, if you dont have it, just go to your extensions and type liverserver on the above space, and then install.

so when you are done with the download proceed by right clicking and click on open with liveserver.

now lets style the webpaage. and in doing that lets go our [tcstyle.css] and write the below line of code.

............
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  body {
    font-family: 'Lato', sans-serif;
    color: #333;
    line-height: 1.6;
  }
  
  ul {
    list-style-type: none;
  }
  
  a {
    text-decoration: none;
    color: #333;
  }
  
  h1,
  h2 {
    font-weight: 300;
    line-height: 1.2;
    margin: 10px 0;
  }
  
  p {
    margin: 10px 0;
  }
  
  img {
      width: 100%;
  }
............

now lets style the navbar section. and in doing that, lets write out the below lines  of codes on our [tcstyle.css]

.........
/* Navbar */
.navbar {
background-color: #047aed;
color: #fff;
height: 70px;
}

.navbar ul {
display: flex;
}

.navbar a {
color: #fff;
padding: 10px;
margin: 0 5px;
}

.navbar .flex {
justify-content: space-between;
}

.navbar a:hover {
border-bottom: 2px #fff solid;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
}

.flex{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.........

now go to your browser and refresh and lets see the difference.
............

now lets build out the next section, which we call the showcase section. and under this section we will have a link bulit out for our feautures.html,
and also a form built out. so to do that lets write this below lines of code under the first division

.........
    <!-- Showcase -->
    <section class="showcase">
        <div class="container grid">
            <div class="showcase-text">
                <h1>Easier Deployment</h1>
                <p>Deploy web apps of all kinds, from large scale enterprise APIs to static websites for individuals. Fill out the form to try a demo of our platform</p>
                <a href="features.html" class="btn btn-outline">Read More</a>
            </div>

            <div class="showcase-form card">
                <h2>Request a Demo</h2>
                <form name="contact" netlify-honeypot="bot-field" method="POST" data-netlify="true">
                    <input type="hidden" name="form-name" value="contact">
                    <div class="form-control">
                        <input type="text" name="name" placeholder="Name" required>
                    </div>
                    <div class="form-control">
                        <input type="text" name="company" placeholder="Company Name" required>
                    </div>
                    <div class="form-control">
                        <input type="email" name="email" placeholder="Email" required>
                    </div>
                    <input type="submit" value="Send" class="btn btn-primary">
                </form>
            </div>
        </div>
    </section>
.........

so when you take a look at your webpage it is not looking stylish. and for that we will need to style it by going to our tcstyle.css to write out the below lines of codes under the aready established css.
but before we do that lets comment out the tcutilites, which is a class we will be using all around the website. so to do that,
on the container section in your [tcstyle.css]. just write this on it [/* tcutilites */]

so back to wanting to style the showcase section, lets write this below codes.
............
/* Showcase */
.showcase {
  height: 400px;
  background-color: var(--primary-color);
  color: #fff;
  position: relative;
}

.showcase h1 {
  font-size: 40px;
}

.showcase p {
  margin: 20px 0;
}

.showcase .grid {
  overflow: visible;
  grid-template-columns: 55% auto;
  gap: 30px;
}

.showcase-text {
  animation: slideInFromLeft 1s ease-in;
}

.showcase-form {
  position: relative;
  top: 60px;
  height: 350px;
  width: 400px;
  padding: 40px;
  z-index: 100;
  justify-self: flex-end;
  animation: slideInFromRight 1s ease-in;
}

.showcase-form .form-control {
  margin: 30px 0;
}

.showcase-form input[type='text'],
.showcase-form input[type='email'] {
  border: 0;
  border-bottom: 1px solid #b4becb;
  width: 100%;
  padding: 3px;
  font-size: 16px;
}

.showcase-form input:focus {
  outline: none;
}

.showcase::before,
.showcase::after {
  content: '';
  position: absolute;
  height: 100px;
  bottom: -70px;
  right: 0;
  left: 0;
  background: #fff;
  transform: skewY(-3deg);
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
}
............

now underneath the container lets create a card 
and to do that we will comment it by calling it [/* tcutilites */] utilites are classes that are used all around the website.

................
.card {
  background-color: #fff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin: 10px;
}

.btn {
  display: inline-block;
  padding: 10px 30px;
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 5px;
}

.btn-outline {
  background-color: transparent;
  border: 1px #fff solid;
}

.btn:hover {
  transform: scale(0.98);
}
................

also under your [.flex] in your [tcstyle.css] and write this below line of under it.

..........
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
..........
now instead of us writing out differnt colors for the background. it is best to set our root to a particular color that can run through our webpage
so to do that, go above the [tcstyle.css] under the import and put a root, anfd putting the color as primary color.
somethings like this.
........
:root {
  --primary-color: #047aed;
}
............

now scroll up, to your navbar section of your [tcstyle.css]
replace the bacgkground color to primary color.
something like this 

........
.navbar {
  background-color: var(--primary-color);
  color: #fff;
  height: 70px;
}
........

now lets refreash our browser and take a look on it.

now back to our index.html let create a stat section  on our webpage, and to do that 
lets write this below code under the second <div>

............
<!-- Stats -->
        <section class="stats">
            <div class="container">
                <h3 class="stats-heading text-center my-1">
                    Welcome TCLASSIFIEDHORUKI it is the best platform for building applications of all types with modern architecture and scaling, lets get started.
                </h3>
    
                <div class="grid grid-3 text-center my-4">
                    <div>
                        <i class="fas fa-server fa-3x"></i>
                        <h3>50,349,879</h3>
                        <p class="text-secondary">Deployments</p>
                    </div>
                    <div>
                        <i class="fas fa-upload fa-3x"></i>
                        <h3>1,009.567 TB</h3>
                        <p class="text-secondary">Published</p>
                    </div>
                    <div>
                        <i class="fas fa-project-diagram fa-3x"></i>
                        <h3>6,343,670</h3>
                        <p class="text-secondary">Projects</p>
                    </div>
                </div>
            </div>
        </section>
............

now go back to your [tcsyle.css] to sytle the [stat] section. 
and  to do that, write the below line of codes under the [showcase section] in your [tcsytle.css]

...............
/* Stats */
.stats {
  padding-top: 100px;
  animation: slideInFromBottom 1s ease-in;
}

.stats-heading {
  max-width: 500px;
  margin: auto;
}

.stats .grid h3 {
  font-size: 35px;
}

.stats .grid p {
  font-size: 20px;
  font-weight: bold;
}
...............

now lets spilit our css into two, lets have a tcutilites.css and then the tcstyle.css.
so to do that, go to your [TCLASSIFIEDHORUKI-WEBSITE] on your vscode and click on your [css folder] and click on new file and create a file and give it a name [tcutilities.css]
now on that new file, go to [tcstyle.css] and under the [tcutilities section] copy downward and paste on that new file.

[tcutilites.css]

..............
/* tcutilites */

.container {
  max-width: 1100px;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
}

.card {
  background-color: #fff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin: 10px;
}

.btn {
  display: inline-block;
  padding: 10px 30px;
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 5px;
}

.btn-outline {
  background-color: transparent;
  border: 1px #fff solid;
}

.btn:hover {
  transform: scale(0.98);
}

.flex{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.............. 


now on our [tcutilites.css] lets create a margin and paddings betwwen the word and the icons on the stat section.
and to do that, under the grid-3 in utilies. write the below codes there.

................
/* Margin */
.my-1 {
  margin: 1rem 0;
}

.my-2 {
  margin: 1.5rem 0;
}

.my-3 {
  margin: 2rem 0;
}

.my-4 {
  margin: 3rem 0;
}

.my-5 {
  margin: 4rem 0;
}

.m-1 {
  margin: 1rem;
}

.m-2 {
  margin: 1.5rem;
}

.m-3 {
  margin: 2rem;
}

.m-4 {
  margin: 3rem;
}

.m-5 {
  margin: 4rem;
}

/* Padding */

.py-1 {
  padding: 1rem 0;
}

.py-2 {
  padding: 1.5rem 0;
}

.py-3 {
  padding: 2rem 0;
}

.py-4 {
  padding: 3rem 0;
}

.py-5 {
  padding: 4rem 0;
}

.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 1.5rem;
}

.p-3 {
  padding: 2rem;
}

.p-4 {
  padding: 3rem;
}

.p-5 {
  padding: 4rem;
}

................

lets take a look at our browser. and see our the webpage is looking.


now lets get our images and get them on our webpage 
and to do that, create a folder and call it [images] which we have all our images in it.

the first images we will be using is called [cli.png]

now back to our [index.html] lets create a [cli section] and to do that write this below lines of codes under the [stats section]

...............
<!-- Cli -->
    <section class="cli">
        <div class="container grid">
            <img src="images/cli.png" alt="">
            <div class="card">
                <h3>Easy to use, cross platform CLI and API</h3>
            </div>
            <div class="card">
                <h3>Deploy in seconds</h3>
            </div>
        </div>
    </section>
...............

now lets style the above section, and to do that go to your [tcstyle.css] and below, write the lines of codes you are seeing below.

................
/* Cli */
.cli .grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.cli .grid > *:first-child {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

................

now lets go to the next section and lets call it clouds
and to do that, go to the [index.html] and under the thrid section and write below this codes.

.............
<!-- Cloud -->
    <section class="cloud bg-primary my-2 py-2">
        <div class="container grid">
            <div class="text-center">
                <h2 class="lg">Extreme Cloud Hosting</h2>
                <p class="lead my-1">Cloud hosting like you've never seen. Fast, efficient, easy to use and scalable with just a click.</p>
                <a href="features.html" class="btn btn-dark">Read More</a>
            </div>
            <img src="images/cloud.png" alt="">
        </div>
    </section>
.............

now lets go to our [tcstyle.css] and on our (root) lets add other colors. so to do thta lets type this below lines of codes there.
.........
:root {
  --primary-color: #047aed;
  --secondary-color: #1c3fa8;
  --dark-color: #002240;
  --light-color: #f4f4f4;
}
.........
now since the images looks white, when we go to our browser we will not be able to see any image, and for that we need to add a background color.
and to do that, go to your [tcutilites.css] and under the btn-hover section, write this below codes there.

..........
/* Backgrounds & colored buttons */

.bg-primary,
.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
}

.bg-secondary,
.btn-secondary {
  background-color: var(--secondary-color);
  color: #fff;
}

.bg-dark,
.btn-dark {
  background-color: var(--dark-color);
  color: #fff;
}

.bg-light,
.btn-light {
  background-color: var(--light-color);
  color: #333;
}

.bg-primary a,
.btn-primary a,
.bg-secondary a,
.btn-secondary a,
.bg-dark a,
.btn-dark a {
  color: #fff;
}
..........

now we need to style the clouds section, and to do that we need to go our tcstyle.css and write the below code.

.............
/* Cloud */
.cloud .grid {
  grid-template-columns: 4fr 3fr;
}

.............

now lets get to set a [text color] and a [text xize]. and to do that lets go to [tcutilites.css] and write the below codes there 

..............
  /* Text sizes */
  .lead {
    font-size: 20px;
  }
  
  .sm {
    font-size: 1rem;
  }
  
  .md {
    font-size: 2rem;
  }
  
  .lg {
    font-size: 3rem;
  }
  
  .xl {
    font-size: 4rem;
  }
  
  .text-center {
    text-align: center;
  }
..............

now lets create a section on our [index.html] and call it, languages.
and then write this below lines of codes there.

..............
<!-- Languages -->
    <section class="languages">
        <h2 class="md text-center my-2">
            Supported Languages
        </h2>
        <div class="container flex">
            <div class="card">
                <h4>Node.js</h4>
                <img src="images/logos/node.png" alt="">
            </div>
            <div class="card">
                <h4>Python</h4>
                <img src="images/logos/python.png" alt="">
              </div>
              <div class="card">
                <h4>C#</h4>
                <img src="images/logos/csharp.png" alt="">
              </div>
              <div class="card">
                <h4>Ruby</h4>
                <img src="images/logos/ruby.png" alt="">
              </div>
              <div class="card">
                <h4>PHP</h4>
                <img src="images/logos/php.png" alt="">
              </div>
              <div class="card">
                <h4>Scala</h4>
                <img src="images/logos/scala.png" alt="">
              </div>
              <div class="card">
                <h4>Clojure</h4>
                <img src="images/logos/clojure.png" alt="">
              </div>
        </div>
    </section>

..............

now lets create a folder on our image folder, and call that folder [logos]
this folder will contain all our logos, which we will  be displaying on our webpage.

now lets go to our [tcstyle.css] and cooment out languages and type in the below codes. to style the languages section.

...............
/* Languages */

.languages .flex {
  flex-wrap: wrap;
}

.languages .card {
  text-align: center;
  margin: 18px 10px 40px;
  transition: transform 0.2s ease-in;
}

.languages .card h4 {
  font-size: 20px;
  margin-bottom: 10px;
}

.languages .card:hover {
  transform: translateY(-15px);
}
...............

now lets create our footer section. and to do that lets go to our [index.html] and type the below lines of codes.

.............
<!-- Footer -->
    <footer class="footer bg-dark py-5">
        <div class="container grid grid-3">
            <div>
                <h1>TCLASSIFIEDHORUKI
                </h1>
                <p>Copyright &copy; 2020</p>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="docs.html">Docs</a></li>
                </ul>
            </nav>
            <div class="social">
                <a href="#"><i class="fab fa-github fa-2x"></i></a>
                <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
                <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
                <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
            </div>
        </div>
    </footer>
.............

now lets give a margin to  our footer section
.........
/* Footer */
.footer .social a {
  margin: 0 10px;
}

.........

now we need to make our webpage visible on tablet and on moblie. and what that means is that, when someone wants to use
his or her moblie phone, our webpage should be compartable with it. also when someone decides to use his or her tablet, our webpage 
should also be compartable with it.

to do that, below the footer section, in the [tcstyle.css] lets type this codes there.

.............
/* Tablets and under */
@media (max-width: 768px) {
  .grid,
  .showcase .grid,
  .stats .grid,
  .cli .grid,
  .cloud .grid,
  .features-main .grid,
  .docs-main .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .showcase {
    height: auto;
  }

  .showcase-text {
    text-align: center;
    margin-top: 40px;
    animation: slideInFromTop 1s ease-in;
  }

  .showcase-form {
    justify-self: center;
    margin: auto;
    animation: slideInFromBottom 1s ease-in;
  }

  .cli .grid > *:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .features-head,
  .features-sub-head,
  .docs-head {
    text-align: center;
  }

  .features-head img,
  .features-sub-head img,
  .docs-head img {
    justify-self: center;
  }

  .features-main .grid > *:first-child,
  .features-main .grid > *:nth-child(2) {
    grid-column: 1;
  }
}

/* Mobile */
@media (max-width: 500px) {
  .navbar {
    height: 110px;
  }

  .navbar .flex {
    flex-direction: column;
  }

  .navbar ul {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  .showcase-form {
    width: 300px;
  }
}

.............

now lets work on the inner pages, that is , the feactures pages and the doc page.
and to do that,

go to index.html copy all the codes you have there.
open a new file and call it [feature.html]
and paste all the codes you have copied there.
then clean up the other section of the codes and leave the navbar and footer section.

you should have something like this below, on your [features.html]

..................
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/tcutilities.css">
    <link rel="stylesheet" href="css/tcstyle.css">
    <title>Loruki | Cloud Hosting For Everyone</title>
</head>
<body>
    <!-- Navbar -->
    <div class="navbar">
        <div class="container flex">
            <h1 class="logo">TCLASSIFIEDHORUKI.</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="docs.html">Docs</a></li>
                </ul>
            </nav>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer bg-dark py-5">
        <div class="container grid grid-3">
            <div>
                <h1>TCLASSIFIEDHORUKI
                </h1>
                <p>Copyright &copy; 2020</p>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="docs.html">Docs</a></li>
                </ul>
            </nav>
            <div class="social">
                <a href="#"><i class="fab fa-github fa-2x"></i></a>
                <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
                <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
                <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
            </div>
        </div>
    </footer>
</body>
</html>
..................

so when you go to your webpage and click on the features icon on top, it will  direct you to the next page.
 now on the features.html, lets add a some head sections 

so to do that, on your features.html
paste the below lines of codes there.

...............
 <!-- Head -->
     <section class="features-head bg-primary py-3">
        <div class="container grid">
            <div>
                <h1 class="xl">Features</h1>
                <p class="lead">
                    Check out the features of TCLASSIFIEDHORUKI that separate us from the
						competition, and makes us the best.
                </p>
            </div>
            <img src="images/server.png" alt="">
        </div>
    </section>
...............

Now lets style the head section page. so go to your tcstyle.css and type this codes above the footer tag.

...........
/* Features */
.features-head img,
.docs-head img {
  width: 200px;
  justify-self: flex-end;
}

.features-sub-head img {
  width: 300px;
  justify-self: flex-end;
}

.features-main .card > i {
  margin-right: 20px;
}

.features-main .grid {
  padding: 30px;
}

.features-main .grid > *:first-child {
  grid-column: 1 / span 3;
}

.features-main .grid > *:nth-child(2) {
  grid-column: 1 / span 2;
}

...........

so lets add new section, known as the sub section
and type this below codes there, under the frist section, on your features.html

......................
<!-- Sub head -->
    <section class="features-sub-head bg-light py-3">
        <div class="container grid">
            <div>
                <h1 class="md">The TCLASSIFIEDHORUKI Platform</h1>
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor cupiditate dignissimos temporibus perspiciatis quae! Suscipit qui, consectetur ea consequatur, doloribus repellendus quasi, aut corporis nam alias culpa. Nostrum, inventore accusantium!
                </p>
            </div>
            <img src="images/server2.png" alt="">
        </div>
    </section>

......................

Now underneth this section, lets create another section known as the main section
and to do that, in your features.html type the below codes there.

..............
<section class="features-main my-2">
        <div class="container grid grid-3">
            <div class="card flex">
                <i class="fas fa-server fa-3x"></i>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nemo saepe corrupti et dolorem voluptate at, nostrum rem voluptatem ab alias quia molestiae ea, libero nihil deserunt. Molestias, eum? Necessitatibus!</p>
            </div>
            <div class="card flex">
                <i class="fas fa-network-wired fa-3x"></i>
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus
                    recusandae perferendis culpa, reiciendis a itaque debitis qui vel
                    dignissimos ipsum!
                </p>
            </div>
            <div class="card flex">
                <i class="fas fa-laptop-code fa-3x"></i>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
                    magnam.
                </p>
            </div>
            <div class="card flex">
                <i class="fas fa-database fa-3x"></i>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, a!
                </p>
            </div>
            <div class="card flex">
                <i class="fas fa-power-off fa-3x"></i>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
                    magnam.
                </p>
            </div>
            <div class="card flex">
                <i class="fas fa-upload fa-3x"></i>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis,
                    magnam.
                </p>
            </div>
        </div>
    </section>
..............

now take a look at your webpage and see how beautiful it looks.

>>>lets continue!

now lets go to our doc.html and work on it.

now copy all what you have on  the features.html and paste in the docs.html leaving only the head section, and the footer section.
so you should have somethings on your docs.htnl as seen below.

.........
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/tcutilities.css">
    <link rel="stylesheet" href="css/tcstyle.css">
    <title>TCLASSIFIEDHORUKI | Cloud Hosting For Everyone</title>
</head>
<body>
    <!-- Navbar -->
    <div class="navbar">
        <div class="container flex">
            <h1 class="logo">TCLASSIFIEDHORUKI.</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="docs.html">Docs</a></li>
                </ul>
            </nav>
        </div>
    </div>

     <!-- Head -->
    <section class="docs-head bg-primary py-3">
        <div class="container grid">
            <div>
                <h1 class="xl">Docs</h1>
                <p class="lead">
                    Learn how to work with the TCLASSIFIEDHORUKI platform
                </p>
            </div>
            <img src="images/docs.png" alt="">
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer bg-dark py-5">
        <div class="container grid grid-3">
            <div>
                <h1>TCLASSIFIEDHORUKI
                </h1>
                <p>Copyright &copy; 2020</p>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="docs.html">Docs</a></li>
                </ul>
            </nav>
            <div class="social">
                <a href="#"><i class="fab fa-github fa-2x"></i></a>
                <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
                <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
                <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
            </div>
        </div>
    </footer>
</body>
</html>
...........

now go and add some sections on your [docs.html]
and call that section, maindocs

..........
 <!-- Docs main -->
    <section class="docs-main my-4">
        <div class="container grid">
            <div class="card bg-light p-3">
                <h3 class="my-2">Essentials</h3>
                <nav>
                    <ul>
                        <li><a class="text-primary" href="#">Introduction</a></li>
                        <li><a href="#">About TCLASSIFIEDHORUKI</a></li>
                        <li><a href="#">Installation</a></li>
                    </ul>
                </nav>

                <h3 class="my-2">Deployment</h3>
                <nav>
                    <ul>
                        <li><a href="#">Setting up a container</a></li>
							<li><a href="#">Using the CLI</a></li>
							<li><a href="#">Managing resources</a></li>
							<li><a href="#">Upgrade & downgrade</a></li>
                    </ul>
                </nav>
            </div>
            <div class="card">
                <h2>Introduction</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio illo facere perferendis laborum? Similique recusandae incidunt eos dolorum aliquam ipsam unde perspiciatis laudantium totam quam laborum velit, at maxime minus?</p>

                <div class="alert alert-success">
                    <i class="fas fa-info"></i> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, animi?
                </div>

                <h3>Lorem, ipsum dolor.</h3>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima totam magni eius vitae velit id, atque veritatis! At, vero porro.</p>
                <a href="#" class="btn btn-primary">Install CLI</a>

                <h3>Requirements</h3>
                <ul>
                    <li>Windows 10, Mac OSX, Linux</li>
                    <li>Node.js v12 or higher</li>
                </ul>

                <h3>Install</h3>
                <p>Mac (Homebrew)</p>
                <pre><code>$ brew install TCLASSIFIEDHORUKI-cli</code></pre>
                <p>NPM</p>
                <pre><code>$ npm install TCLASSIFIEDHORUKI-cli</code></pre>
                <p>Yarn</p>
                <pre><code>$ yarn install TCLASSIFIEDHORUKI-cli</code></pre>

            </div>
        </div>
    </section>
 
..........

now lets go to our tcstyle.css and style this above section.
so on your tcstyle.css  paste this below codes there.
and that should be right above the footer section 
...........
/* Docs */
.docs-main h3 {
  margin: 20px 0;
}

.docs-main .grid {
  grid-template-columns: 1fr 2fr;
  align-items: flex-start;
}

.docs-main nav li {
  font-size: 17px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px #ccc solid;
}

.docs-main a:hover {
  font-weight: bold;
}
...........

now lets take a look at the webpage.

now go to your tcutilites.css and above the (.flex),  type the below lines of codes to add add background and margin in our document section. 
we will comment this out with the name [/* Alert */] 
..............
/* Alert */

.alert {
  background-color: var(--light-color);
  padding: 10px 20px;
  font-weight: bold;
  margin: 15px 0;
}

.alert i {
  margin-right: 10px;
}

.alert-success {
  background-color: var(--success-color);
  color: #fff;
}

.alert-error {
  background-color: var(--error-color);
  color: #fff;
}
..............


now lets add some variable color, on the root section of our tcstyle.css

..........
:root {
  --primary-color: #047aed;
  --secondary-color: #1c3fa8;
  --dark-color: #002240;
  --light-color: #f4f4f4;
  --success-color: #5cb85c;
  --error-color: #d9534f;
}
..........

so lets style the codes we have on the webpage of the docs cection, 
and to do that go to your tcstyle.css above the navbar tag, type the below code, commenting it out as pre code

..........
code,
pre {
  background: #333;
  color: #fff;
  padding: 10px;
}
..........

now let create an animation, on our webpage and to do that, go to your tcstyle.css, under the footer section, type the below codes there.

.............
/* Animations */
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateX(0);
  }
}
.............
 
now talk a final look at the webpage and see how beautiful .looks

Leave a Reply

Your email address will not be published. Required fields are marked *

Open chat