Home Blog

Calculator – JavaScript

Preview

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container box">
      <div class="calculator">
        <div class="result">
          <p></p>
        </div>
        <div class="clear">C</div>
        <ul class="numbers keys">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li class="orangeColor">+</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li class="orangeColor">-</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li class="orangeColor">x</li>
          <li>0</li>
          <li class="orangeColor">.</li>
          <li class="equals">=</li>
          <li class="orangeColor">÷</li>
        </ul>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "poppins", sans-serif;
  font-size: 10px;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

.container {
  width: 30%;
  margin: 0 auto;
  padding: 0 20px;
}

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

.calculator {
  width: 20rem;
  margin: 0 auto;
  background-color: white;
  padding: 1.5rem;
  border-radius: 5px;
  position: relative;
  border: 3px solid #ffe8cc;
}

.result {
  color: #212529;
  background-color: #ffe8cc;
  height: 3.5rem;
  width: 67%;
  border-radius: 5px;
  margin-bottom: 5px;
  padding: 1rem;
  overflow: hidden;
}

.clear {
  width: 18%;
  background-color: #e8590c;
  padding: 0.5rem;
  position: absolute;
  right: 2rem;
  top: 1.6rem;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  text-align: center;
  font-size: 1.6rem;
}

.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: 1.6rem;
}

.keys li {
  list-style: none;
  width: 3rem;
  height: 3rem;
  background-color: white;
  margin: 0.5rem;
  padding: 0.3rem;
  border-radius: 3px;
  color: #212529;
  text-align: center;
  cursor: pointer;
  transition: all 0.1s;
}

.keys li:hover {
  background-color: #5f3dc4;
  color: white;
}

.keys .equals {
  background-color: #e8590c;
  color: white;
}

.orangeColor {
  color: #e8590c !important;
}

.orangeColor:hover {
  color: white !important;
}

JavaScript

const keys = document.getElementsByTagName("li");
const result = document.querySelector("p");
const clear = document.querySelector(".clear");

for (let i = 0; i < keys.length; i++) {
  if (keys[i].innerHTML === "=") {
    keys[i].addEventListener("click", calculate);
  } else {
    keys[i].addEventListener("click", addToCurrentValue(i));
  }
}

function addToCurrentValue(i) {
  return () => {
    if (keys[i].innerHTML === "÷") {
      result.innerHTML += "/";
    } else if (keys[i].innerHTML === "x") {
      result.innerHTML += "*";
    } else {
      result.innerHTML += keys[i].innerHTML;
    }
  };
}

function calculate() {
  return (result.innerHTML = eval(result.innerHTML));
}

clear.addEventListener("click", () => {
  result.innerHTML = "";
});

Character Counter

Preview

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="conatiner">
      <div class="containerDiv">
        <h1>Character Count</h1>
        <span class="count"></span>
        <div class="buttons">
          <input class="text" type="text" placeholder="Type here" />
        </div>
        <div class="btns">
          <button class="btn"><i class="icon far fa-copy"></i>Copy</button>
          <button class="btn2"><i class="icon fas fa-cut"></i>Cut</button>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "poppins", sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: white;
  overflow: hidden;
}

h1 {
  font-weight: 600;
}
.containerDiv {
  width: 30rem;
  border: 1px solid grey;
  padding: 1rem;
  background-color: blueviolet;
  text-align: center;
  border-radius: 5px;
}

.count {
  font-size: 2.5rem;
  padding: 0 50%;
}

input {
  width: 22rem;
}
input:focus {
  outline: none;
}

input,
button {
  padding: 15px;
  font-size: 20px;
  border: none;
  border-radius: 10px;
  margin: 10px;
}

button {
  background-color: #d0bfff;
  color: #495057;
  font-weight: 700;
}

input:focus {
  outline: none;
}

.btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 2.3rem;
}

.icon {
  margin-right: 4px;
}

JavaScript

const count = document.querySelector(".count");
const input = document.querySelector("input");

input.addEventListener("keyup", () => {
  count.innerHTML = input.value.length;
});

const btn = document.querySelector(".btn");
const text = document.querySelector(".text");
const btn2 = document.querySelector(".btn2");

btn.addEventListener("click", () => {
  text.focus();
  text.select();
  document.execCommand("copy");
  const oldtext = btn.innerHTML;
  btn.innerHTML = "copied";
  setTimeout(() => {
    btn.innerHTML = oldtext;
  }, 2000);
});

btn2.addEventListener("click", () => {
  text.select();
  document.execCommand("cut");
});

Currency Converter

Preview

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <section class="main">
      <h1>USD - INR Currency Converter</h1>
      <div class="container box">
        <div class="converter">
          <!-- base covertion -->
          <div class="baseConvert">
            <p>Exchange Rate</p>
            <span class="base">1 USD = 75 INR</span>
          </div>
          <!-- text from and to -->
          <div class="text">
            <p>From</p>
            <p>To</p>
          </div>
          <!-- main convertion -->
          <div class="mainConvertion">
            <!-- from  -->
            <div class="currencyBox">
              <div class="currency from">
                <img
                  src="https://www.worldometers.info/img/flags/small/tn_us-flag.gif"
                />
                <select class="currency1">
                  <option value="USD" selected>USD</option>
                  <option value="INR">INR</option>
                </select>
              </div>
              <input type="text" class="currency1Input" placeholder="0" />
            </div>
            <!-- switch button  -->
            <div class="switchCurrency">
              <div class="fas fa-exchange-alt rotate"></div>
            </div>
            <!-- to  -->
            <div class="currencyBox">
              <div class="currency to">
                <img
                  src="https://www.worldometers.info/img/flags/small/tn_in-flag.gif"
                />
                <select class="currency2">
                  <option value="USD">USD</option>
                  <option value="INR" selected>INR</option>
                </select>
              </div>
              <input type="text" class="currency2Input" placeholder="0.00" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <script src="script.js"></script>
  </body>
</html>

Preview

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 10px;
}
body {
  font-family: "Poppins", sans-serif;
}
p {
  font-size: 1.6rem;
  line-height: 1.5;
}
/* img {
  width: 100%;
} */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
section.main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
h1 {
  font-size: 2.2rem;
  font-weight: 600;
  padding-bottom: 1rem;
  color: #212529;
}
.box {
  /* border: 1px solid red; */
  width: 35rem;
  border-top: 5px solid #ced4da;
  padding: 4rem 2rem;
  background-color: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  border-radius: 0 0 5px 5px;
}
.baseConvert {
  background-color: #845ef7;
  padding: 1rem;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 5rem;
}
.baseConvert p {
  font-weight: 700;
  color: white;
}
.base {
  margin: 1rem 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #e5dbff;
}
.text {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #ced4da;
  padding-bottom: 2rem;
  font-weight: 600;
}
.text:nth-child(2) {
  padding-right: 7.7rem;
}
.mainConvertion {
  margin: 2rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.currencyBox {
  width: 30%;
}
.switchCurrency {
  width: 30%;
  text-align: center;
  font-size: 2rem;
  color: #5f3dc4;
  cursor: pointer;
  transition: all 0.5s;
}
.currency {
  border: 2px solid #ced4da;
  padding: 5px;
  margin: 15px 0;
  border-radius: 3px;
  width: 9rem;
  display: flex;
  align-items: center;
}
.currency img {
  width: 30%;
  margin-right: 3px;
}
.currency select {
  border: none;
  outline: none;
  cursor: pointer;
}
.currencyBox input {
  width: 9rem;
  border-radius: 3px;
  font-size: 1.5rem;
  outline: none;
  border: 2px solid #ced4da;
  margin-bottom: -2rem;
}
.rotate {
  transform: rotateY(180deg);
}
input {
  padding: 5px;
}

JavaScript

const cur1 = document.querySelector(".currency1");
const cur2 = document.querySelector(".currency2");
const cur1Input = document.querySelector(".currency1Input");
const cur2Input = document.querySelector(".currency2Input");
const baseRate = document.querySelector(".base");
const switchCur = document.querySelector(".switchCurrency");
const countries = [
  {
    name: "USD",
    flagURL: "https://www.worldometers.info/img/flags/small/tn_us-flag.gif",
  },
  {
    name: "INR",
    flagURL: "https://www.worldometers.info/img/flags/small/tn_in-flag.gif",
  },
];
// currency api
const apiURL = "https://v6.exchangerate-api.com/v6/";
const key = "093352694b431c8342cff984";
// get exchange rate
async function getExchangeRate() {
  const cur1Value = cur1.value;
  const cur2Value = cur2.value;
  const response = await fetch(`${apiURL}${key}/latest/${cur1Value}`);
  const data = await response.json();
  console.log(data);
  const rate = data.conversion_rates[cur2Value];
  baseRate.textContent = `1 ${cur1Value} = ${rate.toFixed(2)} ${cur2Value}`;
  cur2Input.value = (cur1Input.value * rate).toFixed(2);
}
getExchangeRate();
// add event listener
cur1.addEventListener("change", () => {
  getExchangeRate();
});
cur2.addEventListener("change", () => {
  getExchangeRate();
});
cur1Input.addEventListener("input", getExchangeRate);
cur2Input.addEventListener("input", getExchangeRate);
switchCur.addEventListener("click", () => {
  const cur1Val = cur1.value;
  cur1.value = cur2.value;
  cur2.value = cur1Val;
  switchCur.classList.toggle("rotate");
  getExchangeRate();
  getFlag();
});
// flags
function getFlag() {
  countries.forEach((country) => {
    // console.log(country.name);
    if (cur1.value == country.name) {
      const imgSrc = document.querySelector(".from img");
      imgSrc.setAttribute("src", country.flagURL);
    }
    if (cur2.value == country.name) {
      const imgSrc = document.querySelector(".to img");
      imgSrc.setAttribute("src", country.flagURL);
    }
  });
}

Number Dice

Preview

Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://kit.fontawesome.com/1935d064dd.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="container2">
        <h1>Number Dice</h1>
        <span class="number"></span>
        <hr />
        <div class="buttons">
          <button class="generate"><i class="fas fa-dice"></i> Roll</button>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Preview

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
  height: 100vh;
  overflow: hidden;
}
p {
  font-size: 1.6rem;
  line-height: 1.5;
}
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container2 {
  width: 40rem;
  border: 1px solid white;
  padding: 3rem;
  background-color: #5f3dc4;
  color: white;
  text-align: center;
  border-radius: 5px;
}
hr {
  width: 50%;
  margin: 10px auto 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.number {
  font-size: 4rem;
}
.buttons button {
  padding: 1rem;
  margin: 3rem 1rem 1rem;
  font-size: 1.5rem;
  color: black;
  font-weight: 700;
  border: none;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
}

JavaScript

const number = document.querySelector(".number");
const btn = document.querySelector(".generate");
const generateNumber = () => {
  const randomNumber = Math.floor(Math.random() * 6 + 1);
  number.innerHTML = randomNumber;
};
btn.addEventListener("click", generateNumber);
generateNumber();

Preview

27-8-21 Task

JavaScript Code

Preview Click Here

const tableData = [
  {
    studentName: "Abc",
    studentAge: 20,
    studentCity: "Hyd",
  },
  {
    studentName: "def",
    studentAge: 28,
    studentCity: "mumbai",
  },
  {
    studentName: "ghi",
    studentAge: 32,
    studentCity: "Delhi",
  },
];
var data = "<tbody>";
i = 0;
while (i < tableData.length) {
  data += "<tr>";
  data += "<td>" + tableData[i].studentName + "</td>";
  data += "<td>" + tableData[i].studentAge + "</td>";
  data += "<td>" + tableData[i].studentCity + "</td>";
  data += "</tr>";
  i++;
}
data += "</tbody>";
document.querySelector(".tableData").innerHTML = data;

HTML Code

<body>
    <table>
      <tr>
        <th>student Name</th>
        <th>student Age</th>
        <th>student City</th>
      </tr>
      <tbody class="tableData"></tbody>
    </table>
    <script src="script.js"></script>
  </body>

CSS Code

body {
  font-family: sans-serif;
}
table {
  border-collapse: collapse;
}
th,
tr,
td {
  border: 0.9px solid;
}
td {
  padding-right: 3px;
}
tr td:nth-child(2) {
  text-align: right;
}

Task HTML and CSS

HTML Code

Preview Click Here

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Task</title>
    <link rel="stylesheet" href="task.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9Si P4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"/>
  </head>
  <body>
    <div class="header">
      <div class="pageTitle"><strong>Studio Francesca</strong></div>
      <div class="menu">
        <ul>
          <li class="topMenu">Home</li>
          <li class="topMenu">Portofolio</li>
          <li class="topMenu">Blog</li>
          <li class="topMenu">Pages</li>
          <li class="topMenu">Features</li>
          <li class="topMenu">Contact</li>
        </ul>
      </div>
    </div>
    <div class="banner">
      <img
        class="bannerImage"
        src="https://veeravenkatasaidurgaprasad.com/wp-content/uploads/2021/08/banner.jpg"
        alt="bridge"
      />
      <div class="bannerText">
        <div class="dareto"><strong>Dare to</strong></div>
        <div class="dream"><strong>DREAM</strong></div>
      </div>
    </div>
    <div>
      <p class="quote">
        "Vision is the art of seeing what is invisible to others" - Jonathan
        Swift
      </p>
    </div>
    <div class="margin">
      <div class="grid">
        <div class="detailsGrid">
          <div class="icon fa fa-heart">
            <div class="iconTitle">Responsive Design</div>
            <div class="iconDescription">Across all major devices</div>
          </div>
        </div>
        <div class="detailsGrid">
          <div class="icon fa fa-bullhorn">
            <div class="iconTitle">Friendly Documentation</div>
            <div class="iconDescription">Straight to the point</div>
          </div>
        </div>
        <div class="detailsGrid">
          <div class="icon fa fa-user">
            <div class="iconTitle">Alternate Home Pages</div>
            <div class="iconDescription">Full slider, boxed or none</div>
          </div>
        </div>
        <div class="detailsGrid">
          <div class="icon fa fa-camera">
            <div class="iconTitle">Filterable Portofolio</div>
            <div class="iconDescription">Isotop & Pretty Photo</div>
          </div>
        </div>
      </div>
      <div class="center">
        <div>
          <hr />
          <hr />
          <hr />
        </div>
        <div class="whatwedo">What We Do</div>
        <div>
          <hr />
          <hr />
          <hr />
        </div>
      </div>
      <div class="grid">
        <div class="whatWeDoGridTitle">
          Photography
          <div class="paragraph">
            Swine short ribs meatball irure bacon nulla pork belly cupidatat
            meatloaf cow. Nulla corned beef sunt ball tip, qui bresaola enim
            jowl. Capicola short ribs minim salami nulla nostrud pastrami.
          </div>
          <div class="learnmore">Learn more</div>
        </div>
        <div class="whatWeDoGridTitle">
          Artwork
          <div class="paragraph">
            Swine short ribs meatball irure bacon nulla pork belly cupidatat
            meatloaf cow. Nulla corned beef sunt ball tip, qui bresaola enim
            jowl. Capicola short ribs minim salami nulla nostrud pastrami.
          </div>
          <div class="learnmore">Learn more</div>
        </div>
        <div class="whatWeDoGridTitle">
          Logos
          <div class="paragraph">
            Swine short ribs meatball irure bacon nulla pork belly cupidatat
            meatloaf cow. Nulla corned beef sunt ball tip, qui bresaola enim
            jowl. Capicola short ribs minim salami nulla nostrud pastrami.
          </div>
          <div class="learnmore">Learn more</div>
        </div>
      </div>
      <div class="gridBottom">
        <div class="footerParaRightBorder">
          <div class="footerParagraph">
            <em>
              "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. Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
              exercitation ullamco."
            </em>
          </div>
          <div class="by"><em>&ndash; SANDRA - LA</em></div>
        </div>
      </div>
    </div>
    <div class="footerContent">
      <div class="footer">
        <div class="footerGrid">
          <div class="footerTitle">
            ABOUT US
            <div class="footerP">Our goal is to keep clients satisfied!</div>
          </div>
        </div>
        <div class="footerGrid">
          <div class="footerTitle">
            GET SOCIAL
            <div class="footerIcon">
              <i class="fab fa-twitter-square"></i
              ><i class="fab fa-whatsapp-square"></i
              ><i class="fab fa-linkedin"></i
              ><i class="fab fa-instagram-square"></i
              ><i class="fab fa-google-plus-square"></i>
            </div>
          </div>
        </div>
        <div class="footerGrid">
          <div class="footerTitle">
            NEWS LETTER
            <div class="footerP">
              <div class="input">
                <input
                  type="email"
                  placeholder="Enter Your e-mail address..."
                />
                <div class="go">Go</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="copyright">
        <div class="test">© Test by <span>Teja Sir</span></div>
        <div class="design">Design by <span>Durga Prasad</span></div>
      </div>
    </div>
    </div>
  </body>
</html>

Preview Click Here

CSS Code

body {
  margin: 0;
  font-family: "Helvetica Neue", sans-serif;
  overflow-x: hidden;
}
.header {
  display: inline-block;
  background-color: white;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border-top: 4.1px solid #55a2a6;
}
.pageTitle {
  display: inline-block;
  padding: 22px;
  font-size: 27px;
  margin-right: 200px;
  cursor: pointer;
}
.menu {
  display: inline-block;
  float: right;
  padding: 22px;
  cursor: pointer;
}
.topMenu {
  list-style-type: none;
  display: inline-block;
  font-size: 15px;
  padding: 0 11px;
  color: #555;
}
.banner {
  position: relative;
}
.bannerImage {
  width: 100%;
}
.bannerText {
  position: absolute;
  top: 200px;
  margin: 0;
}
.dareto {
  background-color: #55a2a6;
  font-size: 40px;
  text-align: center;
  padding: 0 35px;
  color: white;
  margin-bottom: 15px;
}
.dream {
  background-color: #333;
  font-size: 50px;
  text-align: center;
  padding: 0 35px;
  color: white;
}
.quote {
  display: inline-block;
  width: 100%;
  height: 75px;
  background-color: #55a2a6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: white;
  font-weight: 400;
  margin-top: -4px;
}
.margin {
  margin: 0 250px;
  position: relative;
}
.grid {
  display: flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  overflow: hidden;
}
.detailsGrid {
  margin-top: -20px;
  color: #333;
  padding: 50px;
  width: 125px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
}
.detailsGrid:hover {
  background-color: black;
  color: rgb(238, 238, 238);
}
.icon {
  font-size: 60px;
  color: #333;
  text-align: center;
  display: inline-block;
}
.iconTitle {
  text-align: center;
  font-size: 20px;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 600;
  display: block;
  padding: 40px;
  opacity: 0.9;
  color: #333;
}
.iconTitle:hover {
  color: rgb(238, 238, 238);
}
.iconDescription {
  display: block;
  font-size: 14px;
  text-align: center;
  color: #666;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 600;
  opacity: 0.8;
}
hr {
  margin: 1px;
  border-top: 1px dotted grey;
  width: 380px;
  display: block;
}
.center {
  display: flex;
  justify-content: space-between;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  overflow: hidden;
}
.whatwedo {
  display: flex;
  flex-direction: column;
  padding: 50px;
  color: #222;
  font-weight: 700;
  font-size: 23px;
}
.whatWeDoGrid {
  margin-top: -20px;
  color: #333;
  padding: 50px;
  width: 125px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
}
.whatWeDoGridTitle {
  display: block;
  font-weight: 700;
  text-align: left;
  padding: 20px;
}
.paragraph {
  display: inline-block;
  font-weight: 500;
  text-align: left;
  font-size: 14px;
  margin: 20px 0;
  line-height: 22px;
  opacity: 0.9;
}
.learnmore {
  display: inline-block;
  background-color: #55a2a6;
  color: white;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 10px;
  cursor: pointer;
}
.gridBottom {
  margin-top: 50px;
}
.footerParagraph {
  font-size: 14px;
  line-height: 22px;
  opacity: 0.9;
  padding: 20px;
  color: #535151;
  display: inline-block;
}
.footerParaRightBorder {
  border-left: 5px solid #55a2a6;
}
.by {
  font-size: 15px;
  font-weight: 600;
  color: #55a2a6;
  padding-left: 20px;
}
.footerContent {
  /* display: flex; */
  background-color: black;
  opacity: 0.9;
  width: 100%;
  padding: 30px;
  color: white;
  margin-top: 60px;
  border-top: 5px solid #55a2a6;
}
.footer {
  display: flex;
  justify-content: space-between;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  overflow: hidden;
  margin: 0 250px;
}
.footerGrid {
  display: inline-block;
  color: #333;
  width: 325px;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.footerTitle {
  display: flex;
  flex-direction: column;
  color: rgb(218, 218, 218);
  font-weight: 700;
  font-size: 15px;
}
.footerP {
  display: inline-block;
  padding-top: 20px;
  font-weight: 500;
  font-size: 14px;
  opacity: 0.9;
  font-size: 13px;
  color: #666;
}
.footerIcon {
  padding-top: 20px;
  font-size: 40px;
}
.fab {
  padding-right: 5px;
  color: #444;
  cursor: pointer;
}
input {
  background-color: #151515;
  border: none;
}
.input {
  padding: 10px 80px 10px 10px;
  border: none;
  background-color: #151515;
  color: #999;
  position: relative;
}
.go {
  width: 30px;
  height: 30px;
  position: absolute;
  background-color: #444;
  right: 0;
  top: 0;
  height: 37px;
  width: 40px;
  border-radius: 5px;
  text-align: center;
  font-size: large;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
}
.bottom {
  background-color: black;
  opacity: 0.8;
}
.copyright {
  margin: 0 250px;
  font-size: 13px;
  color: #444;
  padding: 15px;
  display: block;
}
.test {
  display: inline-block;
}
.design {
  float: right;
}
span {
  color: rgb(238, 238, 238);
}
.Ads .Ad2 {
  width: 150px;
  height: 2500px;
  background-color: #555;
  position: absolute;
  top: 0;
}

Preview Click Here