diff --git a/images/job.jpg b/images/job.jpg new file mode 100644 index 0000000..d0d0c95 Binary files /dev/null and b/images/job.jpg differ diff --git a/images/logo.jpg b/images/logo.jpg new file mode 100644 index 0000000..8506d9c Binary files /dev/null and b/images/logo.jpg differ diff --git a/images/price.png b/images/price.png new file mode 100644 index 0000000..d7515b9 Binary files /dev/null and b/images/price.png differ diff --git a/images/road.jpg b/images/road.jpg new file mode 100644 index 0000000..7ea58e5 Binary files /dev/null and b/images/road.jpg differ diff --git a/images/support.jpg b/images/support.jpg new file mode 100644 index 0000000..5d3b57b Binary files /dev/null and b/images/support.jpg differ diff --git a/index.html b/index.html index 8b13789..eb32df2 100644 --- a/index.html +++ b/index.html @@ -1 +1,547 @@ - + + + +Machine Learning Course + + + + + + + +
+ +

30% + 10% additional off site-wide till Oct 15th + + Enroll now + +

+ +
+ +
+ + + + + +
+ + + + + +
+ +
+ + + +
+ +

The best courses at your fingertips!

+ +

You can always complement what you learn in college.
+ + Pick up skills that help you land jobs.

+ +

Choose a course tailored for you.

+ + CONTACT US + + BROWSE COURSES + +
+ + + + + +
+ +
+ + + +
+ +
+ +

Upcoming Events

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
Webinar
+ +
11th Oct
+ +

Road to web development

+ + + + Register + + + +
+ +
+ +
+ + + +
+ +
+ +
+ +
New Batch
+ +
15th Oct onwards
+ +

Machine Learning

+ +

RS.6999/-

+ +
  • + +
      Live classroom training
    + +
      Build live capstone project
    + +
      24*7 doubt resolution
    + + Learn more + + Enroll now + +
  • + + + +
    + +
    + +
    + + + +
    + +
    + +
    + +
    New Batch
    + +
    15th Oct onwards
    + +

    MERN stack development

    + +

    RS.6999/-

    + +
  • + +
      Live classroom training
    + +
      Build live capstone project
    + +
      24*7 doubt resolution
    + + Learn more + + Enroll now + +
  • + +
    + +
    + +
    + +
    + + + +
    + + + +
    + +
    + + + + + +

    5000+

    + +

    Students empowered

    + + + +

    1500+

    + +

    Personalized live coaching

    + + + +

    500+

    + +

    Jobs and internships

    + + + + + +
    + +
    + + + +

    Why students choose us

    + + + +
    + +
    + + + +
    + + + +

    Instant Support

    + +
    + + + +
    + + + +

    Affordable Pricing

    + +
    + + + +
    + + + +

    Get job ready!

    + +
    + + + +
    + +
    + + + +
    + +
    + + + + + + + + + +
    + +
    +

    SELECT A COURSE THAT WORKS FOR YOU

    +
    +
    +
    + +
    + + + + + + + + + +
    +
    +

    Our Featured Courses include hand-picked courses
    that have received the most support.These courses are
    specially designed to help college students in their
    class and with future jobs.

    + +
    +
    +
    +
    +
    +

    EVENT 1

    +
    +
    +
    + +
    +
    +
    +

    EVENT 2

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    EVENT 3

    +
    +
    +
    +
    +
    +
    +

    EVENT 4

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +

    STUDENT TESTIMONIALS

    +
    +
    +
    +
    +
    +
    +
    +

    EVENT 1

    +
    +
    +
    + +
    +
    +
    +

    EVENT 2

    +
    +
    +
    +
    + +
    +
    +

    LOADING INDUSTRY MENTORS

    +
    +
    +
    +
    +
    +
    +
    +

    EVENT 1

    +
    +
    +
    + +
    +
    +
    +

    EVENT 2

    +
    +
    +
    + +
    +
    +
    +

    EVENT 3

    +
    +
    +
    +
    + +
    + +
    +
    + +
    +

    ABOUT US

    +
    +
    +

    WORK WITH US

    + + +
    + +
    +

    E-MAIL US

    + gupta172ishika@gmail.com +
    +
    + mishraayush2372000@gmail.com +
    +
    + +

    CONTACT US

    +
    + 0123456789 + +
    + +
    + + + + + diff --git a/main.css b/main.css index 7937e6a..cead559 100644 --- a/main.css +++ b/main.css @@ -1,557 +1,276 @@ -:root { - --base-color: #2af5eb; - --background-color: #0d4653; - --base-color2: #222831; - --text-gray: #9199a2; -} - -* { - padding: 0; - margin: 0; - font-family: "Mulish", sans-serif; - text-decoration: none; -} - -html, -body { - width: 100%; -} - -body { - background: var(--background-color); - color: #fff; -} - -header { - display: block; - text-align: center; - color: #000; - padding: 0.7rem; - background-color: #b7bea9; - font-size: 1rem; -} - -.btn { - border-radius: 0.5rem; - padding: 0.5em; - outline: none; - background: #fff; - cursor: pointer; - border: none; - margin: 0.5rem; - white-space: nowrap; - transition: 0.3s all; -} - -.btn--white { - font-weight: 700; - color: #000; - padding: 0.4rem 0.8rem; -} - -.content-section { - max-width: 1110px; - padding-left: 1rem; - padding-right: 1rem; - margin: auto; -} - -/* nav { - display: flex; - justify-content: flex-start; - align-items: center; -} */ - -.brand { - width: 146px; - padding-top: 0.2rem; -} - -.nav-container { - /* width: 663px; */ - /* position: absolute; */ - right: 0; - /* top: 2.6rem; */ - background-color: var(--base-color2); - color: var(--base-color); - border-bottom-left-radius: 26px; - box-shadow: -1px 4px 4px rgba(0, 0, 0, 0.5); -} - -.nav-element { - padding: 0 1rem; -} - -.nav-link { - display: inline-block; - color: inherit; - padding: 1.1rem 0; - position: relative; -} - -.nav-link::after { - content: ""; - background: var(--base-color); - height: 3px; - width: 100%; - position: absolute; - bottom: 0; - left: 0; - transform-origin: left; - transform: scaleX(0%); - transition: 0.3s transform; -} - -.nav-link:hover::after { - transform: scaleX(100%); -} - -a { - color: inherit; -} - -.secondary-nav { - display: flex; - justify-content: flex-start; - color: var(--base-color); - align-items: center; - margin-top: 2rem; - margin-bottom: 1rem; -} - -.secondary-nav a { - padding-right: 2.5rem; - position: relative; -} - -.secondary-nav a::after { - position: absolute; - right: 0.5rem; - content: url("https://cipherschools.com/static/media/breadcrumb_right_arrow.835f1d48.svg"); -} - -.secondary-nav a:last-child::after { - display: none; -} - -.active { - color: #fff; -} - -h1 { - font-size: 3.5rem; - font-weight: normal; -} - -h2 { - font-size: 2.5rem; -} - -h3 { - font-size: 1.5rem; - font-weight: normal; -} - -p { - margin-bottom: 0.5rem; -} - -/* .flex { - display: flex; - justify-content: space-between; - align-items: center; -} */ - -.mg-top { - margin-top: 0.5rem; -} - -.offer-card { - background-color: var(--base-color2); - border-radius: 0.5rem; - /* position: relative; */ - /* padding: 1.2rem 80px 1.2rem 100px; */ - /* display: flex; - text-align: center; - justify-content: space-between; */ -} - -.offer-card .offer-img { - position: absolute; - z-index: 100000000; - top: -5px; - width: 100px; - left: -8px; -} - -.offer-card-discount { - z-index: 10000000000000; - position: absolute; - top: 1.8rem; - left: -0.8rem; - font-size: 10px; - transform: rotate(-45deg); -} - -/* .offer-card-left { - width: 15rem; - margin-right: 10px; -} */ - -.btn--outline { - border: solid var(--base-color); - background: transparent; - color: #fff; -} - -.btn--outline:hover { - border-color: #16837d; -} - -.btn--phone { - /* padding: 0.5rem 0.6rem; */ - font-size: 0.8rem; - margin-left: 0; - margin-right: 0; - display: flex; - align-items: center; - justify-content: center; -} - -.phone-icon { - width: 15px; -} - -.text-muted { - color: var(--text-gray); -} - -.text-orange { - color: var(--base-color); -} - -.text-size-m { - font-size: 1.5rem; -} - -.text-size-l { - font-size: 2rem; -} - -/* .offer-card-right { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} */ - -.btn--main { - background: var(--base-color); - color: var(--base-color2); -} - -.btn-l { - text-transform: uppercase; - font-weight: 700; - width: 100%; -} - -.btn-l:hover { - background: var(--base-color); - box-shadow: 0 0 1rem var(--base-color); - color: var(--base-color2); -} - -.btn--padding-l { - padding: 1rem 2rem; -} - -iframe { - border: 3px solid var(--base-color2); - position: relative; - z-index: 1; - border-radius: 0.5rem; - width: 100%; - height: 265px; -} - -.video-container { - margin-top: 1.7rem; - position: relative; -} - -.video-container::before { - position: absolute; - content: ""; - height: 2rem; - width: 100%; - background: var(--base-color2); - top: -1.8rem; - border-radius: 0.5rem 0.5rem 0 0; - z-index: 0; -} - -.video-container::after { - content: "Watch a demo class in action"; - position: absolute; - top: -1.5rem; - font-weight: 700; - right: 0.5rem; - white-space: nowrap; -} - -.bg-white { - background: #eeeeee; - padding: 3rem 0; -} - -.card { - border-radius: 0.5rem; - background-color: var(--background-color); - padding: 0.8rem 0.6rem; -} - -.card--outline { - border: 3px solid var(--base-color); - position: relative; -} - -.card--shadow { - box-shadow: 0 0 1rem rgba(0, 0, 0, 0.8); -} - -.sub-card { - background: var(--base-color2); - border-radius: 0.5rem; - padding: 0.5rem; -} - -main { - padding-bottom: 1rem; -} - -.heading { - display: flex; - justify-content: space-between; - align-items: flex-end; -} - -.project-container { - display: flex; - justify-content: flex-start; - align-items: center; - margin: 0.8rem 0; - white-space: nowrap; -} - -.project-container img { - width: 80px; - padding-right: 0.8rem; -} - -.perks-container { - text-align: center; - display: flex; - justify-content: flex-start; -} - -.perks-container img { - width: 45px; - margin: 1rem; -} - -.overlay--cards { - display: flex; -} - -.card--behind { - border-left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - position: relative; - padding-left: 1rem; -} - -.card--behind::before { - content: ""; - height: 100%; - border: inherit; - border-left: 0; - border-right: 0; - position: absolute; - width: 2rem; - top: -3px; - left: -2rem; - background-color: var(--background-color); - border-top-left-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; -} - -.perks { - display: flex; - height: calc(100% - 2rem); - flex-direction: column; - justify-content: space-around; -} - -/* footer { - text-align: center; - padding-top: 1rem; - padding-bottom: 1rem; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - column-gap: 2rem; -} - -footer > * { - align-self: center; -} */ - -h2 { - grid-column: span 3; -} - -.white-link { - color: #fff; - font-size: 1rem; - display: block; - font-size: 1.2rem; -} - -.white-link:hover { - color: var(--base-color); -} - -.mentor { - margin-top: 4rem; -} - -.profile-pic { - width: 140px; - height: 140px; - border-radius: 50%; - overflow: hidden; - position: relative; - display: flex; - justify-content: center; - align-items: center; - align-self: center; - justify-self: center; -} - -.img-cover { - position: absolute; - width: 140px; - top: 0; - left: 0; -} - -.pic-frame { - z-index: 100; - width: 126px; - height: 126px; - border-radius: 63px; - overflow: hidden; -} - -.text-container { - display: grid; - grid-template-columns: 110px 1fr; - column-gap: 1rem; -} - -.first-mentor { - display: grid; - grid-template-columns: 190px 1fr; - column-gap: 1rem; - color: #222; -} - -/* .mentor { - display: grid; - grid-template-columns: 1fr 475px; - column-gap: 3rem; - grid-template-rows: min-content; -} */ - -.overflow--pic { - position: absolute; - left: 50%; - top: -70px; - transform: translateX(-50%); -} - -.card--mentor { - padding-top: 70px; - text-align: center; - margin-top: 80px; -} - -.card--feedback { - padding-bottom: 7rem; -} - -.syllabus { - padding: 2rem 0; -} - -.syllabus .sub-card { - padding: 1rem; - margin: 1rem; -} - -.card--dropdown h3 { - font-weight: 700; -} - -.card--dropdown p { - color: #cfd2d7; -} - -.card--dropdown { - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); - z-index: 1; - position: relative; - margin: 0.5rem 0; -} - -.card--dropdown::after { - content: "^"; - transform: rotate(180deg); - transition: 0.3s all; - position: absolute; - top: 1rem; - right: 1rem; - font-size: 1.5rem; - font-weight: 700; - color: var(--base-color); -} - -.card--dropdown:hover::after { - transform: rotate(0deg); -} - -.hidden { - display: none; -} - -.card--dropdown:hover .hidden, -.card--dropdown:hover hr { - display: block; -} - -.card--dropdown:hover { - border: 3px solid var(--base-color); -} - -footer h3 { - color: #cfd2d7; -} - -hr { - border: 3px solid var(--base-color); - border-radius: 0.5rem; - border-top: 0; - margin-bottom: 0.5rem; - display: none; -} +*{ + + margin: 0; + + padding: 0; + + box-sizing: border-box; + +} + + + +.header { + + margin:0; + + transition: 0.3s; + + padding: 0; + +} + +.container-fluid { + + height:50px; + + text-align:center; + + margin-bottom:30px; + +} + + + +a.btn-first { + + background-color: beige; + + color: black; + +} + +.brand { + + margin-top: 0; + +} + +.logo { + + padding: 2px 0; + + height: 100px; + + width:150px; + +} + +.navbar-style { + + margin-top: 10px 0; + + box-shadow: 0 3px 15px black; + + text-transform: uppercase; + + transition:0.3s; + + width:1345px; + + height: 40px; + + background-color:darkslategray; + +} + +.navbar-toggle { + + color: darkorange; + +} + +.icon-bar { + + background: darkorange; + +} + +.navbar-nav { + + color: darkorange; + +} + +a.btn { + + + + margin: 30px 10px; + + width: 150px; + + padding: 10px; + + border-radius: 20px; + +} + + + +a.btn-second { + + border: 2px solid darkorange; + + color: #fff; + +} + + + +a.btn-third { + + background-color: darkorange; + + border: 1px solid darkorange; + + color: #fff; + +} + + + +a.btn:hover { + + background: darkorange; + + border: none; + + color: white; + + box-shadow: 5px 5px 10px #999; + + transition: 0.3s; + +} + +.banner-image{ + + width:200px; + + height:150px; + +} + +.img-responsive { + + width:200px; + + height:150px; + +} + + + +.card: { + + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + + padding: 10px; + + color: darkslateblue; + + border : 2px solid darkorange; + +} + +.card:hover{ + +background:white; + +color: black; + +box-shadow: 10px 10px 10px black; + +border : 2px solid darkorange; + +transition: 0.3s; + +} + +.card-body { + + color: white; + + margin:10px; + +} + +a.btn-fourth { + + float:center; + + border: 2px solid darkorange; + + color: #fff; + +} + +a.btn-fifth { + + border: 2px solid darkorange; + + color: #fff; + +} + +a.btn-sixth { + + background-color: darkorange; + + border: 1px solid darkorange; + + color: #fff; + +} + + +} +.cont{ + font-size: 180%; + padding: 20px; + text-align: center; + margin: 0 auto; + text-align: center; + color: black; +} + .styled { + height:60px; + width:270px; + border: 0; + line-height: 2.5; + padding: 0 20px; + font-size: 2rem; + text-align:left; + color: white; + border-radius:10px; + text-shadow: 1px 1px 1px #000; + + background-color: #34495e; + /* background-image: linear-gradient(to top left, + rgba(0, 0, 0, .2), + rgba(0, 0, 0, .2) 30%, + rgba(0, 0, 0, 0)); + box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), + inset -2px -2px 3px rgba(0, 0, 0, .6);*/ +} + +.styled:hover { + background-color:#34495e ; + border-width:5px;border-style:solid;border-color:orange; +} + +.styled:active { + box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), + inset 2px 2px 3px rgba(0, 0, 0, .6); +} + +.card:hover{ + background:white; + color: black; + box-shadow: 10px 10px 10px black; + transition: 0.3s; +background-color:#34495e ; + border-width:5px;border-style:solid;border-color:orange; + border-radius:20px; + } diff --git a/twowaits/images/job.jpg b/twowaits/images/job.jpg new file mode 100644 index 0000000..d0d0c95 Binary files /dev/null and b/twowaits/images/job.jpg differ diff --git a/twowaits/images/logo.jpg b/twowaits/images/logo.jpg new file mode 100644 index 0000000..8506d9c Binary files /dev/null and b/twowaits/images/logo.jpg differ diff --git a/twowaits/images/price.png b/twowaits/images/price.png new file mode 100644 index 0000000..d7515b9 Binary files /dev/null and b/twowaits/images/price.png differ diff --git a/twowaits/images/road.jpg b/twowaits/images/road.jpg new file mode 100644 index 0000000..7ea58e5 Binary files /dev/null and b/twowaits/images/road.jpg differ diff --git a/twowaits/images/support.jpg b/twowaits/images/support.jpg new file mode 100644 index 0000000..5d3b57b Binary files /dev/null and b/twowaits/images/support.jpg differ diff --git a/twowaits/index.html b/twowaits/index.html new file mode 100644 index 0000000..eb32df2 --- /dev/null +++ b/twowaits/index.html @@ -0,0 +1,547 @@ + + + +Machine Learning Course + + + + + + + +
    + +

    30% + 10% additional off site-wide till Oct 15th + + Enroll now + +

    + +
    + +
    + + + + + +
    + + + + + +
    + +
    + + + +
    + +

    The best courses at your fingertips!

    + +

    You can always complement what you learn in college.
    + + Pick up skills that help you land jobs.

    + +

    Choose a course tailored for you.

    + + CONTACT US + + BROWSE COURSES + +
    + + + + + +
    + +
    + + + +
    + +
    + +

    Upcoming Events

    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    Webinar
    + +
    11th Oct
    + +

    Road to web development

    + + + + Register + + + +
    + +
    + +
    + + + +
    + +
    + +
    + +
    New Batch
    + +
    15th Oct onwards
    + +

    Machine Learning

    + +

    RS.6999/-

    + +
  • + +
      Live classroom training
    + +
      Build live capstone project
    + +
      24*7 doubt resolution
    + + Learn more + + Enroll now + +
  • + + + +
    + +
    + +
    + + + +
    + +
    + +
    + +
    New Batch
    + +
    15th Oct onwards
    + +

    MERN stack development

    + +

    RS.6999/-

    + +
  • + +
      Live classroom training
    + +
      Build live capstone project
    + +
      24*7 doubt resolution
    + + Learn more + + Enroll now + +
  • + +
    + +
    + +
    + +
    + + + +
    + + + +
    + +
    + + + + + +

    5000+

    + +

    Students empowered

    + + + +

    1500+

    + +

    Personalized live coaching

    + + + +

    500+

    + +

    Jobs and internships

    + + + + + +
    + +
    + + + +

    Why students choose us

    + + + +
    + +
    + + + +
    + + + +

    Instant Support

    + +
    + + + +
    + + + +

    Affordable Pricing

    + +
    + + + +
    + + + +

    Get job ready!

    + +
    + + + +
    + +
    + + + +
    + +
    + + + + + + + + + +
    + +
    +

    SELECT A COURSE THAT WORKS FOR YOU

    +
    +
    +
    + +
    + + + + + + + + + +
    +
    +

    Our Featured Courses include hand-picked courses
    that have received the most support.These courses are
    specially designed to help college students in their
    class and with future jobs.

    + +
    +
    +
    +
    +
    +

    EVENT 1

    +
    +
    +
    + +
    +
    +
    +

    EVENT 2

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    EVENT 3

    +
    +
    +
    +
    +
    +
    +

    EVENT 4

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +

    STUDENT TESTIMONIALS

    +
    +
    +
    +
    +
    +
    +
    +

    EVENT 1

    +
    +
    +
    + +
    +
    +
    +

    EVENT 2

    +
    +
    +
    +
    + +
    +
    +

    LOADING INDUSTRY MENTORS

    +
    +
    +
    +
    +
    +
    +
    +

    EVENT 1

    +
    +
    +
    + +
    +
    +
    +

    EVENT 2

    +
    +
    +
    + +
    +
    +
    +

    EVENT 3

    +
    +
    +
    +
    + +
    + +
    +
    + +
    +

    ABOUT US

    +
    +
    +

    WORK WITH US

    + + +
    + +
    +

    E-MAIL US

    + gupta172ishika@gmail.com +
    +
    + mishraayush2372000@gmail.com +
    +
    + +

    CONTACT US

    +
    + 0123456789 + +
    + +
    + + + + + diff --git a/twowaits/main.css b/twowaits/main.css new file mode 100644 index 0000000..cead559 --- /dev/null +++ b/twowaits/main.css @@ -0,0 +1,276 @@ +*{ + + margin: 0; + + padding: 0; + + box-sizing: border-box; + +} + + + +.header { + + margin:0; + + transition: 0.3s; + + padding: 0; + +} + +.container-fluid { + + height:50px; + + text-align:center; + + margin-bottom:30px; + +} + + + +a.btn-first { + + background-color: beige; + + color: black; + +} + +.brand { + + margin-top: 0; + +} + +.logo { + + padding: 2px 0; + + height: 100px; + + width:150px; + +} + +.navbar-style { + + margin-top: 10px 0; + + box-shadow: 0 3px 15px black; + + text-transform: uppercase; + + transition:0.3s; + + width:1345px; + + height: 40px; + + background-color:darkslategray; + +} + +.navbar-toggle { + + color: darkorange; + +} + +.icon-bar { + + background: darkorange; + +} + +.navbar-nav { + + color: darkorange; + +} + +a.btn { + + + + margin: 30px 10px; + + width: 150px; + + padding: 10px; + + border-radius: 20px; + +} + + + +a.btn-second { + + border: 2px solid darkorange; + + color: #fff; + +} + + + +a.btn-third { + + background-color: darkorange; + + border: 1px solid darkorange; + + color: #fff; + +} + + + +a.btn:hover { + + background: darkorange; + + border: none; + + color: white; + + box-shadow: 5px 5px 10px #999; + + transition: 0.3s; + +} + +.banner-image{ + + width:200px; + + height:150px; + +} + +.img-responsive { + + width:200px; + + height:150px; + +} + + + +.card: { + + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + + padding: 10px; + + color: darkslateblue; + + border : 2px solid darkorange; + +} + +.card:hover{ + +background:white; + +color: black; + +box-shadow: 10px 10px 10px black; + +border : 2px solid darkorange; + +transition: 0.3s; + +} + +.card-body { + + color: white; + + margin:10px; + +} + +a.btn-fourth { + + float:center; + + border: 2px solid darkorange; + + color: #fff; + +} + +a.btn-fifth { + + border: 2px solid darkorange; + + color: #fff; + +} + +a.btn-sixth { + + background-color: darkorange; + + border: 1px solid darkorange; + + color: #fff; + +} + + +} +.cont{ + font-size: 180%; + padding: 20px; + text-align: center; + margin: 0 auto; + text-align: center; + color: black; +} + .styled { + height:60px; + width:270px; + border: 0; + line-height: 2.5; + padding: 0 20px; + font-size: 2rem; + text-align:left; + color: white; + border-radius:10px; + text-shadow: 1px 1px 1px #000; + + background-color: #34495e; + /* background-image: linear-gradient(to top left, + rgba(0, 0, 0, .2), + rgba(0, 0, 0, .2) 30%, + rgba(0, 0, 0, 0)); + box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), + inset -2px -2px 3px rgba(0, 0, 0, .6);*/ +} + +.styled:hover { + background-color:#34495e ; + border-width:5px;border-style:solid;border-color:orange; +} + +.styled:active { + box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), + inset 2px 2px 3px rgba(0, 0, 0, .6); +} + +.card:hover{ + background:white; + color: black; + box-shadow: 10px 10px 10px black; + transition: 0.3s; +background-color:#34495e ; + border-width:5px;border-style:solid;border-color:orange; + border-radius:20px; + }