add buttons to index.html file

marusoft · Jul 31, 2019 · 8d48d52 · 8d48d52
1 parent 9127ca3
commit 8d48d52
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 47 deletions.
diff --git a/UI/css/style.css b/UI/css/style.css
@@ -131,9 +131,9 @@ p {
  margin: 25px auto;
  transition: all 0.5s;
 }
-.card:hover {
+/* .card:hover {
  filter: brightness(1.2);
-}
+} */
 img {
  width: 100%;
  height: 150px;
@@ -151,10 +151,17 @@ img {
 .car-price {
  text-align: left;
  margin: 5px;
- margin-top: 25px;
+ margin-top: 10px;
 }
 /* CARD END SECTION */
-
+.view {
+ background-color: #efefef; 
+ border: 1px solid #ddd;
+ color: #010165;
+ width: auto;
+ padding: 10px 20px;
+ margin: 3px;
+}
 /* FOOTER SECTION */
 #footer p {
  color: #010165;

diff --git a/UI/index.html b/UI/index.html
@@ -39,6 +39,10 @@ <h2>Vehicle Showcase</h2>
  <img src="./img/nissan-navara.jpg" alt="nissan-navara">
  <p class="car-name">Nissan</p>
  <p class="car-price">N2,500,000</p>
+ <div class="view-buy">
+ <button class="view details" id="details">View</button>
+ <button class="view buy-now" id="buy-now">Buy now</button>
+ </div>
  </div>
  <!-- car-card-two -->
  <div class="card">
@@ -48,26 +52,26 @@ <h2>Vehicle Showcase</h2>
  </div>
  <!-- car-card-three -->
  <div class="card">
- <img src="./img/minivan-41476_640.png" alt="minivan">
- <p class="car-name">Nissan</p>
+ <img src="./img/toyota-4R.jpg" alt="Toyota 4Runner">
+ <p class="car-name">Toyota</p>
  <p class="car-price">N3,500,000</p>
  </div>
  <!-- car-card-four -->
  <div class="card">
- <img src="./img/oldtimer.jpg" alt="oldtimer">
- <p class="car-name">Mercedes Benz</p>
+ <img src="./img/prius.jpg" alt="Volkswagen">
+ <p class="car-name">Volkswagen</p>
  <p class="car-price">N1,500,000</p>
  </div>
  <!-- car-card-five -->
  <div class="card">
-  <img src="./img/passenger-car-150155_640.png" alt="nissan-navara">
- <p class="car-name">BMW</p>
+ <img src="./img/honda-suv.jpg" alt="Honda SUV">
+ <p class="car-name">Honada SUV</p>
  <p class="car-price">N3,000,000</p>
  </div>
  <!-- car-card-six -->
  <div class="card">
- <img src="./img/prius.jpg" alt="prius">
- <p class="car-name">Volkswagen</p>
+ <img src="./img/mercedes-benz1.jpg" alt="Mercedes Benz">
+ <p class="car-name">Mercedes Benz</p>
  <p class="car-price">N3,500,000</p>
  </div>
  <!-- car-card-seven -->
@@ -78,8 +82,8 @@ <h2>Vehicle Showcase</h2>
  </div>
  <!-- car-card-eight -->
  <div class="card">
- <img src="./img/toyota-4R.jpg" alt="toyota-4R">
- <p class="car-name">toyota-4R</p>
+ <img src="./img/nissanleaf.jpg" alt="toyota-4R">
+ <p class="car-name">Nissan</p>
  <p class="car-price">N2,500,000</p>
  </div>
  <!-- car-card-nine -->
@@ -90,8 +94,8 @@ <h2>Vehicle Showcase</h2>
  </div>
  <!-- car-card-ten -->
  <div class="card">
- <img src="./img/vsg1.png" alt="vsg1">
- <p class="car-name">Volkswagen</p>
+ <img src="./img/mercedes-benz3.jpg" alt="vsg1">
+ <p class="car-name">Mercedes Benz</p>
  <p class="car-price">N2,500,000</p>
  </div>
  <!-- car-card-eleven -->

diff --git a/UI/js/view.js b/UI/js/view.js
@@ -6,15 +6,15 @@ const closeBtn1 = document.querySelector('.close1');
 // create a function to open modal
 const viewCarModal1 = () => {
  modalView1.style.display = 'block';
-}
+};
 const closeCarModal1 = () => {
  modalView1.style.display = 'none';
-}
+};
 
-const closeCarModalOnClickOuterArea1 = event => {
+const closeCarModalOnClickOuterArea1 = (event) => {
  event.target == modalView1
- ? ( modalView1.style.display = "none")
- : ( modalView1.style.display = false);
+ ? (modalView1.style.display = 'none')
+ : (modalView1.style.display = false);
 };
 viewBtn1.addEventListener('click', viewCarModal1);
 closeBtn1.addEventListener('click', closeCarModal1);
@@ -28,15 +28,15 @@ const closeBtn2 = document.querySelector('.close2');
 // create a function to open modal
 const viewCarModal2 = () => {
  modalView2.style.display = 'block';
-}
+};
 const closeCarModal2 = () => {
  modalView2.style.display = 'none';
-}
+};
 
-const closeCarModalOnClickOuterArea2 = event => {
+const closeCarModalOnClickOuterArea2 = (event) => {
  event.target == modalView2
- ? ( modalView2.style.display = "none")
- : ( modalView2.style.display = false);
+ ? (modalView2.style.display = 'none')
+ : (modalView2.style.display = false);
 };
 viewBtn2.addEventListener('click', viewCarModal2);
 closeBtn2.addEventListener('click', closeCarModal2);
@@ -50,15 +50,15 @@ const closeBtn3 = document.querySelector('.close3');
 // create a function to open modal
 const viewCarModal3 = () => {
  modalView3.style.display = 'block';
-}
+};
 const closeCarModal3 = () => {
  modalView3.style.display = 'none';
-}
+};
 
-const closeCarModalOnClickOuterArea3 = event => {
+const closeCarModalOnClickOuterArea3 = (event) => {
  event.target == modalView3
- ? ( modalView3.style.display = "none")
- : ( modalView3.style.display = false);
+ ? (modalView3.style.display = 'none')
+ : (modalView3.style.display = false);
 };
 viewBtn3.addEventListener('click', viewCarModal3);
 closeBtn3.addEventListener('click', closeCarModal3);
@@ -72,15 +72,15 @@ const closeBtn4 = document.querySelector('.close4');
 // create a function to open modal
 const viewCarModal4 = () => {
  modalView4.style.display = 'block';
-}
+};
 const closeCarModal4 = () => {
  modalView4.style.display = 'none';
-}
+};
 
-const closeCarModalOnClickOuterArea4 = event => {
+const closeCarModalOnClickOuterArea4 = (event) => {
  event.target == modalView4
- ? ( modalView4.style.display = "none")
- : ( modalView4.style.display = false);
+ ? (modalView4.style.display = 'none')
+ : (modalView4.style.display = false);
 };
 viewBtn4.addEventListener('click', viewCarModal4);
 closeBtn4.addEventListener('click', closeCarModal4);
@@ -94,15 +94,15 @@ const closeBtn5 = document.querySelector('.close5');
 // create a function to open modal
 const viewCarModal5 = () => {
  modalView5.style.display = 'block';
-}
+};
 const closeCarModal5 = () => {
  modalView5.style.display = 'none';
-}
+};
 
-const closeCarModalOnClickOuterArea5 = event => {
+const closeCarModalOnClickOuterArea5 = (event) => {
  event.target == modalView5
- ? ( modalView5.style.display = "none")
- : ( modalView5.style.display = false);
+ ? (modalView5.style.display = 'none')
+ : (modalView5.style.display = false);
 };
 viewBtn5.addEventListener('click', viewCarModal5);
 closeBtn5.addEventListener('click', closeCarModal5);
@@ -116,16 +116,16 @@ const closeBtn6 = document.querySelector('.close6');
 // create a function to open modal
 const viewCarModal6 = () => {
  modalView6.style.display = 'block';
-}
+};
 const closeCarModal6 = () => {
  modalView6.style.display = 'none';
-}
+};
 
-const closeCarModalOnClickOuterArea6 = event => {
+const closeCarModalOnClickOuterArea6 = (event) => {
  event.target == modalView6
- ? ( modalView6.style.display = "none")
- : ( modalView6.style.display = false);
+ ? (modalView6.style.display = 'none')
+ : (modalView6.style.display = false);
 };
 viewBtn6.addEventListener('click', viewCarModal6);
 closeBtn6.addEventListener('click', closeCarModal6);
-window.addEventListener('click', closeCarModalOnClickOuterArea6);
+window.addEventListener('click', closeCarModalOnClickOuterArea6);