mentorship.html

<!DOCTYPE html>
<html lang="en">
  <head>
     <!-- <link rel="stylesheet" href="mentorship.css"  />  -->
    <link rel="stylesheet" href="navigation-bar.css" !important />
    <link rel="stylesheet" href="main.css" !important/>
    <link rel="stylesheet" href="footer.css" !important/>

    <style>
      .title {
  margin-left: 50px;
  font-family: 'JejuGothic';
  font-style: normal;
  font-weight: 1;
  font-size: 50px;
  line-height: 76px;
  color: #000000;
  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.25);
  margin-left: 43%;
}

.card,
.card .img-area,
.social-icons a,
.buttons button{
background-color: rgba(255,255,255,0.13);
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
margin-left: 7%;
}

.card{
position: relative;
width: 350px;
padding: 30px;
border-radius: 10px;
display: inline-block;
align-items: center;
justify-content: center;
flex-direction: column;
}                                      

.card .img-area{                    
height: 150px;
width: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.img-area .inner-area{
height: calc(100% - 25px);
width: calc(100% - 25px);
border-radius: 50%;
}
.inner-area img{
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}
.card .name{                        
font-size: 30px;
font-weight: 900;
color: rgb(126, 126, 126);
margin: 10px 0 5px 0;
}
.card .about{
color: #000000;
font-weight: 400;
font-size: 16px;
font-style: italic;
}
.card .social-icons{
margin: 15px 0 25px 0;
}
.social-icons a{
position: relative;
height: 40px;
width: 40px;
margin: 0 5px;
display: inline-flex;
text-decoration: none;
border-radius: 50%;
}                                      
.social-icons a:hover::before,
.card .icon:hover::before,
.buttons button:hover:before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background: #ecf0f3;
box-shadow: inset -3px -3px 7px #ffffff,
        inset 3px 3px 5px #ceced1;
}
.buttons button:hover:before{
z-index: -1;
border-radius: 5px;
}

.buttons button:hover{
color: black;
}                                      
.social-icons a i{
position: relative;
z-index: 3;
text-align: center;
width: 100%;
height: 100%;
font-size: 20px;
line-height: 35px;
}
.social-icons a:nth-last-child(1) i{
color: #13d151;
}
.social-icons a:nth-last-child(2) i{
color: #e6ba12;
}
.social-icons a:nth-last-child(3) i{    
color: #1da9e9;
}
.social-icons a:nth-last-child(4) i{
color: #f23400;
}

.card .buttons{
display: flex;
width: 100%;
justify-content: space-between;
}
.buttons button{
position: relative;
width: 100%;
border: none;
outline: none;
padding: 12px 0;
color: #000000;                                                              
font-size: 17px;
font-weight: 400;
border-radius: 5px;
cursor: pointer;
z-index: 4;
}
.buttons button:first-child{
margin-right: 10px;
}
.buttons button:last-child{
margin-left: 10px;
}
    </style>

  </head>
  <body>
    <nav>
      <div class="wrapper">
        <img class="nav-logo" src="Upraise-logo-2.png" alt="" />
        <div class="logo"><a href="#">UPRAISE</a></div>
        <input type="radio" name="slider" id="menu-btn" />
        <input type="radio" name="slider" id="close-btn" />
        <ul class="nav-links">
          <label for="close-btn" class="btn close-btn"
            ><i class="fas fa-times"></i
          ></label>
          <li><a href="index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li>
            <a href="#" class="desktop-item">Log in/Sign up</a>
            <input type="checkbox" id="showDrop" />
            <label for="showDrop" class="mobile-item">Log in/Sign up</label>
            <ul class="drop-menu">
              <li><a href="Register-now-button.html">Sign up</a></li>
              <li><a href="Register-now-button.html">log in</a></li>
            </ul>
          </li>
          <li>
            <a href="#" class="desktop-item">Menu</a>
            <input type="checkbox" id="showMega" />
            <label for="showMega" class="mobile-item">Menu</label>
            <div class="mega-box">
              <div class="content">
                <div class="row">
                  <img src="Upraise-logo-2.png" alt="" />
                </div>
                <div class="row">
                  <header>Services</header>
                  <ul class="mega-links">
                    <li><a href="#Features">Get Mentorship</a></li>
                    <li><a href="#Features">Raise Funds</a></li>
                    <li><a href="#Features">Revenue Growth</a></li>
                    <li><a href="#">Hunt Co-Founders </a></li>
                  </ul>
                </div>
                <div class="row">
                  <header>Features</header>
                  <ul class="mega-links">
                    <li><a href="#">Challenges</a></li>
                    <li><a href="#Features">Programmes</a></li>
                    <li><a href="#Blog-Section">Blogs</a></li>
                    <li><a href="#">Newsletter</a></li>
                  </ul>
                </div>
                <div class="row">
                  <header>Other</header>
                  <ul class="mega-links">
                    <li><a href="#">Our Socials</a></li>
                    <li><a href="#">Careers</a></li>
                    <li>
                      <a
                        href="https://docs.google.com/forms/d/e/1FAIpQLSezQDSmG22WLQtOGcn4EfwzoDdsi_q5TEFS5qhLv2BgcFMmBQ/viewform"
                        >feedback</a
                      >
                    </li>
                    <li><a href="#Contact-US">Contact Us</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li>
            <a href="#" class="desktop-item" href="#">Profile </a>
            <input type="checkbox" id="showDrop" />
            <label for="showDrop" class="mobile-item">Profile</label>
            <ul class="drop-menu">
              <li><a href="profilecard.html">View profile</a></li>
              <li>
                <a
                  href="https://docs.google.com/forms/d/e/1FAIpQLSezQDSmG22WLQtOGcn4EfwzoDdsi_q5TEFS5qhLv2BgcFMmBQ/viewform"
                  >Feedback</a
                >
              </li>
              <li><a href="Register-now-button.html">Log out</a></li>
            </ul>
          </li>
        </ul>
        <label for="menu-btn" class="btn menu-btn"
          ><i class="fas fa-bars"></i
        ></label>
      </div>
    </nav>
    <h1>COMMUNICATION SKILLS EVERY ENTREPRENEUR MUST KNOW ABOUT</h1>
    <br /><br />
    <h1><b class="title">Mentors</b></h1> <br><br><br>

    <!-- 1st mentor details -->
    <div class="card">
      <div class="img-area">
        <div class="inner-area">
        <img src="Mentors/mentor-1.jpg" alt="">
        </div>
      </div>
 
      <div class="name">
        Bradly Haney</div>
      <div class="about">
        Co-founder @NodeBits    
      </div>
      <div class="social-icons">
        <a href="#" class="gl"><i class="fab fa-youtube"></i></a>
        <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
        <a href="#" class="insta"><i class="fab fa-google"></i></a> 
        <a href="#" class="yt"><i class="fab fa fa-whatsapp"></i></a>
 
      </div>
      <div class="buttons">
        <button>Message</button>
        <button>Subscribe</button>
      </div>
 
    </div>

    <!-- 2nd mentor details -->

    <div class="card">
      <div class="img-area">
        <div class="inner-area">
          <img src="Mentors/mentor-2.jpg" alt="">
        </div>
      </div>
 
      <div class="name">
        Irwin Rollins</div>
      <div class="about">
Founder @Top Gear
   </div>
      <div class="social-icons">
        <a href="#" class="gl"><i class="fab fa-youtube"></i></a>
        <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
        <a href="#" class="insta"><i class="fab fa-google"></i></a> 
        <a href="#" class="yt"><i class="fab fa fa-whatsapp"></i></a>
 
      </div>
      <div class="buttons">
        <button>Message</button>
        <button>Subscribe</button>
      </div>
 
    </div>

    <!-- 3rd mentor details -->

    
    <div class="card">
      <div class="img-area">
        <div class="inner-area">
          <img src="Mentors/mentor-3.jpg" alt="">
        </div>
      </div>
 
      <div class="name">Antone Lindsey</div>
      <div class="about">
        Founder @Infotank
        Co-founder @Artek Technologies
   </div>
      <div class="social-icons">
        <a href="#" class="gl"><i class="fab fa-youtube"></i></a>
        <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
        <a href="#" class="insta"><i class="fab fa-google"></i></a> 
        <a href="#" class="yt"><i class="fab fa fa-whatsapp"></i></a>
 
      </div>
      <div class="buttons">
        <button>Message</button>
        <button>Subscribe</button>
      </div>
 
    </div>
<br> <br> <br>
    <!-- 4th mentor details -->
    <div class="card">
      <div class="img-area">
        <div class="inner-area">
          <img src="Mentors/mentor-4.jpg" alt="">
        </div>
      </div>
 
      <div class="name">
        Dustin Lam</div>
      <div class="about">
Co-founder @Autozone
   </div>
      <div class="social-icons">
        <a href="#" class="gl"><i class="fab fa-youtube"></i></a>
        <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
        <a href="#" class="insta"><i class="fab fa-google"></i></a> 
        <a href="#" class="yt"><i class="fab fa fa-whatsapp"></i></a>
 
      </div>
      <div class="buttons">
        <button>Message</button>
        <button>Subscribe</button>
      </div>
 
    </div>

    <!-- 5th mentor details -->
    <div class="card">
      <div class="img-area">
        <div class="inner-area">
          <img src="Mentors/mentor-5.jpg" alt="">
        </div>
      </div>
 
      <div class="name">Monalisha Roy</div>
      <div class="about">
Founder @GraphLabs   </div>
      <div class="social-icons">
        <a href="#" class="gl"><i class="fab fa-youtube"></i></a>
        <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
        <a href="#" class="insta"><i class="fab fa-google"></i></a> 
        <a href="#" class="yt"><i class="fab fa fa-whatsapp"></i></a>
 
      </div>
      <div class="buttons">
        <button>Message</button>
        <button>Subscribe</button>
      </div>
 
    </div>

    <!-- 5th mentor details -->

    <div class="card">
      <div class="img-area">
        <div class="inner-area">
          <img src="Mentors/mentor-6.jpg" alt="">
        </div>
      </div>
 
      <div class="name">
        Erich Richmond</div>
      <div class="about">
Founder @Nordic Builders 
  </div>
      <div class="social-icons">
        <a href="#" class="gl"><i class="fab fa-youtube"></i></a>
        <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
        <a href="#" class="insta"><i class="fab fa-google"></i></a> 
        <a href="#" class="yt"><i class="fab fa fa-whatsapp"></i></a>
 
      </div>
      <div class="buttons">
        <button>Message</button>
        <button>Subscribe</button>
      </div>
 
    </div>


  <script src="javascript.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<footer class="ct-footer">
      <div class="container">
        <form name="contentForm" enctype="multipart/form-data" method="post" action="">
          <div class="ct-footer-pre text-center-lg">
            <div class="inner">
              <span>Join Upraise to receive updates, news & events!</span>
            </div>
            <div class="inner">
              <div class="form-group">
                <input name="formfields[nl_email]" id="nl_email" class="validate[required]" placeholder="Enter your email address" type="text" value=""> <label for="nl_email" class="sr-only">Email Address</label> <button type="submit" class="btn btn-motive">Join</button>
              </div>
            </div>
          </div>
        </form>
        <ul class="ct-footer-list text-center-sm">
          <li>
            <h2 class="ct-footer-list-header">Learn More</h2>
            <ul>
              <li>
                <a href="">Company</a>
              </li>
              <li>
                <a href="">Clients</a>
              </li>
              <li>
                <a href="">News</a>
              </li>
              <li>
                <a href="">Careers</a>
              </li>
            </ul>
          </li>
          <li>
            <h2 class="ct-footer-list-header">Services</h2>
            <ul>
              <li>
                <a href="">Design</a>
              </li>
              <li>
                <a href="">Marketing</a>
              </li>
              <li>
                <a href="">Sales</a>
              </li>
              <li>
                <a href="">Programming</a>
              </li>
              <li>
                <a href="">Support</a>
              </li>
            </ul>
          </li>
          <li>
            <h2 class="ct-footer-list-header">The Industry</h2>
            <ul>
              <li>
                <a href="">Thought Leadership</a>
              </li>
              <li>
                <a href="">Webinars</a>
              </li>
              <li>
                <a href="">Events</a>
              </li>
              <li>
                <a href="">Sponsorships</a>
              </li>
              <li>
                <a href="">Advisors</a>
              </li>
              <li>
                <a href="">Training Program</a>
              </li>
              <li>
                <a href="">Activities & Campaigns</a>
              </li>
            </ul>
          </li>
          <li>
            <h2 class="ct-footer-list-header">Public Relations</h2>
            <ul>
              <li>
                <a href="">Upraise Blog</a>
              </li>
              <li>
                <a href="">Programmes</a>
              </li>
              <li>
                <a href="">Videos</a>
              </li>
              <li>
                <a href="">News Releases</a>
              </li>
              <li>
                <a href="">Newsletters</a>
              </li>
            </ul>
          </li>
          <li>
            <h2 class="ct-footer-list-header">About</h2>
            <ul>
              <li>
                <a href="">FAQ</a>
              </li>
              <li>
                <a href="">Our Board</a>
              </li>
              <li>
                <a href="">Our Staff</a>
              </li>
              <li>
                <a href="">Contact Us</a>
              </li>
            </ul>
          </li>
        </ul>
        <div class="ct-footer-meta text-center-sm">
          <div class="row">
            <div class="col-sm-6 col-md-2">
              <img alt="logo" src="Upraise-logo-2.png">
            </div>
            <div class="col-sm-6 col-md-3">
              <address>
                <span>UPRAISE<br></span>123 Easy Street<br>
                _MP, India, 466114<br>
                <span>Phone: <a href="tel:5555555555">(+91) 777-8899</a></span>
              </address>
            </div>
            <div class="col-sm-6 col-md-2 ct-u-paddingTop10">
              <a href="" target="_blank"><img alt="app store" src="Social-logos/app-store.png"></a>
            </div>
            <div class="col-sm-6 col-md-2 ct-u-paddingTop10">
              <a href="" target="_blank"><img alt="google play store" src="Social-logos/google-play.png"></a>
            </div>
            <div class="col-sm-6 col-md-3">
              <ul class="ct-socials list-unstyled list-inline">
                <li>
                  <a href="" target="_blank"><img alt="facebook" src="Social-logos/facebook.png"></a>
                </li>
                <li>
                  <a href="" target="_blank"><img alt="twitter" src="Social-logos/twitter.png"></a>
                </li>
                <li>
                  <a href="" target="_blank"><img alt="youtube" src="Social-logos/youtube.png"></a>
                </li>
                <li>
                  <a href="" target="_blank"><img alt="instagram" src="Social-logos/instagram.png"></a>
                </li>
                <li>
                  <a href="" target="_blank"><img alt="pinterest" src="Social-logos/pinterest.png"></a>
                </li>
              </ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="ct-footer-post">
        <div class="container">
          <div class="inner-left">
            <ul>
              <li>
                <a href="#about">FAQ</a>
              </li>
              <li>
                <a href="">News</a>
              </li>
              <li>
                <a href="">Contact Us</a>
              </li>
            </ul>
          </div>
          <div class="inner-right">
            <p>Copyright © 2022 UPRAISE&nbsp;<a href="#">Privacy Policy</a></p>
            <p><a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by Group 95</p>
          </div>
        </div>
      </div>
    </footer>


  </body>
</html>