App.js

import React from "react";
import bible from "../public/bible.jpg"
import cross from "../public/cross.jpg"
import ing from "../public/ing.jpg"
import olatunji from "../public/olatunji.jpg"

const App = () => {
  return (
    <div className="contacts">
      <div className="contact-card">
        <img src={`/${bible}`} alt="bible" />
        <h1>Name NumberOne</h1>
        <p>Phone No: 09033344422</p>
        <p>Email: nameOne@gmail.com</p>
      </div>
      <div className="contact-card">
      <img src={`/${cross}`} alt="bible" />
        <h1>Name NumberTwo</h1>
        <p>Phone No: 09033344422</p>
        <p>Email: nameTwo@gmail.com</p>
      </div>
      <div className="contact-card">
      <img src={`/${ing}`} alt="bible" />
        <h1>Name NumberThree</h1>
        <p>Phone No: 09033344422</p>
        <p>Email: nameThree@gmail.com</p>
      </div>
      <div className="contact-card">
      <img src={`/${olatunji}`} alt="bible" />
        <h1>Name NumberFour</h1>
        <p>Phone No: 09033344422</p>
        <p>Email: nameFour@gmail.com</p>
      </div>

    </div>
  )
}

export default App;