Dev taliya

src/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import './App.css';
-import Personalities from './JSX-Components/Personalities';
+import Personalities from '../src/JSX-Components/Personalities';
 
 function App() {
  return (

src/JSX-Components/Personalities.jsx

@@ -3,7 +3,7 @@ import ZodiacTwins from "./ZodiacTwins";
 
 const Personalities = () => {
  return (
- <>
+ <div className="container">
 
  <div>
  <div className="set">
@@ -14,9 +14,10 @@ const Personalities = () => {
  alt=""
  />
  </div>
- <p className="date">March21- April19</p>
- </div>
+ <p className="date">(March21- April19)</p>
+
  {/* Aries Section */}
+
  <ZodiacTwins
  personalityName="Robert Dowry JR."
  personalityImage="https://media.gq.com/photos/5582d37609f0bee564401437/master/pass/entertainment-2013-05-robert-downey-jr-robert-downey-jr-96.jpg"
@@ -38,6 +39,7 @@ const Personalities = () => {
  personalityImage="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9ip6A7sDddPY3sXPQQsSBeTIRz36wuapQMqN9EPLzdmrVmQ24Pg"
  />
 
+
  {/* Taurus Section */}
  <div className="set">
  <h1 className="heading">Taurus</h1>
@@ -47,7 +49,7 @@ const Personalities = () => {
  alt=""
  />
  </div>
- <p className="date">April 20 - May 20</p>
+ <p className="date">(April 20 - May 20)</p>
  <ZodiacTwins
  personalityName="Tina Fay"
  personalityImage="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyjw4sN86CIchJ-x4xwe1JxJbrrWUSYY24_zziHqcyW9pdNTQR"
@@ -76,8 +78,8 @@ const Personalities = () => {
  src="https://png.pngtree.com/svg/20160317/gemini_591044.png"
  alt=""
  />
- <p className="date">May 21 - June 20</p>
  </div>
+ <p className="date">(May 21 - June 20)</p>
  <ZodiacTwins
  personalityName="Angelina Jolie"
  personalityImage="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvUR_SRNrW0mcBYEuLe1kgS1e24pQ6NTmmvL5l7C9O-f2cYnRS"
@@ -104,11 +106,11 @@ const Personalities = () => {
  <h1 className="heading">Cancer</h1>
  <img
  className="logo"
- src="https://tarot-astrology.co.uk/wp-content/uploads/2016/07/Inspirational-Quotes-for-Cancer-Zodiac-Sign.jpg"
+ src="https://cdn3.iconfinder.com/data/icons/zodiac-1-1/48/19-512.png"
  alt=""
  />
  </div>
- <p className="date">June 21 - July 22</p>
+ <p className="date">(June 21 - July 22)</p>
  <ZodiacTwins
 
  personalityName="Tom Cruise"
@@ -135,11 +137,11 @@ const Personalities = () => {
  <h1 className="heading">Leo</h1>
  <img
  className="logo"
- src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvKndHbXWm3zNZCKdJ1g4hWSg1unmm84_6Ig7ZQ-6Kgsp9LaWzWQ"
+ src="https://cdn3.iconfinder.com/data/icons/zodiac-1-1/48/21-512.png"
  alt=""
  />
  </div>
- <p className="date">July 23 - August 22</p>
+ <p className="date">(July 23 - August 22)</p>
  <ZodiacTwins
  personalityName="Barack Obama"
  personalityImage="https://www.biography.com/.image/t_share/MTE4MDAzNDEwNzg5ODI4MTEw/barack-obama-12782369-1-402.jpg"
@@ -165,11 +167,11 @@ const Personalities = () => {
  <h1 className="heading">Virgo</h1>
  <img
  className="logo"
- src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ82EvXE1VCyIXqBTdpeA2Tjz0Bn70mUKS2n76GiiP6xC24N579Jw"
+ src="https://cdn3.iconfinder.com/data/icons/zodiac-1-1/48/21-512.png"
  alt=""
  />
  </div>
- <p className="date">August 23 - September 22</p>
+ <p className="date">(August 23 - September 22)</p>
  <ZodiacTwins
  personalityName="Micheal Jackson"
  personalityImage="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzhHss2FXs5J9_e6M-id8huJvPrzidkaxtPr6uwsGDcvLpacp7ow"
@@ -199,7 +201,7 @@ const Personalities = () => {
  alt=""
  />
  </div>
- <p className="date">September 23 - October 22</p>
+ <p className="date">(September 23 - October 22)</p>
  <ZodiacTwins
  personalityName="Imran Khan"
  personalityImage="https://pbs.twimg.com/profile_images/1162267138842755075/zxLifsgg_400x400.jpg"
@@ -225,11 +227,11 @@ const Personalities = () => {
  <h1 className="heading">Scorpio</h1>
  <img
  className="logo"
- src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHGVjlsVxa_7n9Se-kTrY0_R4Lm8UpO-uCk0TQSIg0HEBaNXmK"
+ src="https://cdn0.iconfinder.com/data/icons/zodiac-signs-vol-2/100/Artboard_20-512.png"
  alt=""
  />
  </div>
- <p className="date">October 23 - November 21</p>
+ <p className="date">(October 23 - November 21)</p>
 
  <ZodiacTwins
  personalityName="Leonardo DiCarpio"
@@ -256,7 +258,7 @@ const Personalities = () => {
  <h1 className="heading">Sagittarius</h1>
  <img
  className="logo"
- src="https://icons-for-free.com/iconfiles/png/512/horoscope+sagittarius+shape+sign+zodiac+icon-1320085957614268876.png"
+ src="https://cdn0.iconfinder.com/data/icons/health-science-1/24/sagittarius-256.png"
  alt=""
  />
  </div>
@@ -321,7 +323,7 @@ const Personalities = () => {
  alt=""
  />
  </div>
- <p className="date">January 20 - February 18</p>
+ <p className="date">(January 20 - February 18)</p>
  <ZodiacTwins
 
  personalityName="Christano Ronaldo"
@@ -353,7 +355,7 @@ const Personalities = () => {
  alt=""
  />
  </div>
- <p className="date">February 19 - March 20</p>
+ <p className="date">(February 19 - March 20)</p>
  <ZodiacTwins
  personalityName="Rihana"
  personalityImage="https://pbs.twimg.com/profile_images/1133109643734130688/BwioAwkz_200x200.jpg"
@@ -373,7 +375,10 @@ const Personalities = () => {
  personalityName="Alex Kingston"
  personalityImage="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSI6kuA3e7haIWNs8xZxRwmtGKvspiAvE1NPMV43xpvlTiIUBj70Q"
  />
- </>
+ </div>
+
+ </div>
+
  );
 };
 

src/JSX-Components/ZodiacTwins.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react"; 
 import "../css-components/ZodiacTwins.css";
 
 const ZodiacTwins = props => {

src/css-components/ZodiacTwins.css

@@ -1,3 +1,17 @@
+body {
+ background-image: url(https://www.setaswall.com/wp-content/uploads/2019/03/Space-Fragments-Universe-Wallpaper-1440x3040-380x802.jpg);
+ margin: 0em;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background-size: 100% 100%;
+ height: 100%;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
 .logo {
  width: 80px;
  height: 80px;
@@ -12,7 +26,7 @@
 .set {
  display: flex;
  justify-content: center;
- margin: 0.5em;
+ margin: 1em;
 }
 
 .date {
@@ -25,24 +39,23 @@
  margin: 0;
  padding: 0;
  display: inline-flex;
- justify-content: cent0ner;
+ justify-content: center;
  align-items: center;
- /* min-height: 100vh; */
  font-family: sans-serif;
+ margin-bottom:100px;
 }
 
 .box {
- /* width: 1200px; */
  display: grid;
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
- grid-gap: 15px;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ grid-gap: 30px;
  margin: 0 auto;
 }
 
 .card {
  position: relative;
- width: 250px;
- height: 300px;
+ width: 200px;
+ height: 250px;
  background: #fff;
  margin: 0 auto;
  border-radius: 4px;

src/index.css

@@ -1,24 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- background: url('back.jpg');
- background-repeat: no-repeat;
- background-size: 100% 100%;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}