renx777
12/30/2017 - 9:30 AM

My Portofolio

My Portofolio

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />
body {
  position: relative;
  padding: 70px;
}
.navbar {
  background-color: orange;
   
  border: 1px solid transparent;
}

.navbar-nav {
  float: right;
}


.navbar-custom .navbar-nav > li>a {
  color: black;
 font-family:"Fredericka the Great";
  font-size: 20px;
}

.navbar-custom .navbar-brand {
  color: black;
 font-family:"zeyada";
  font-size: 30px;
}
.navbar-custom .navbar-brand:hover {
 
  color:red;
}
.navbar-custom .navbar-brand:active {
background-color:red;
  color:white;
}
.navbar-custom .navbar-brand:focus {
 background-color:red;
  color:white;
}





.navbar-custom .navbar-nav > li > a:hover{
  text-decoration: none;
  color:red;
  background-color: transparent;
}

.navbar-custom .navbar-nav > li > a:active{
  color:red;
  background-color: yellow;
  
}
.navbar-custom .navbar-nav > li > a:focus{
  color:red;
  background-color: red;
  
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: white;
    background-color: red;
}

#section1,
#section2,
#section3 {
 
}

#section1 {
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  margin-top:10px;
  text-align: center;
}

#dp {
  height: 350px;
  width:350px;
  border-radius: 50%;
  border:2px solid red;

}
em{
  color:green;
}
#proj{
  color:;
  font-family:zeyada;
  font-size:30px;
  text-align:center;
   
}
#about {
  font-family:zeyada;
  font-size: 30px;
  color: red;
}

#section2 {
  margin-top:50px;
 border-top:1px dotted red;
  
}

h2 {
  text-align: center;
  background-color:;
  color:maroon;
  font-family:"faster one";
  font-size:50px;
}

#section3 {
  background-color: white;
  border-top:1px dotted red;
 
  
}
.navbar-toggle{
  
  background-color:red;
  
}
.navbar-toggle:hover{
  
  background-color:yellow;
  
}
p{
  font-size:30px;
  font-family:pacifico;
  
  background-color:;
  text-align:center;
  
  }
img{
  height:150px;
  width:300px;
  border-radius:10px;
  
  
}
img:hover{
  opacity:0.8;
}
//#tri{
  padding-right:10px;
  padding-bottom:10px;
  border-right:2px solid skyblue;
  border-bottom:2px solid skyblue;
}

.f{
  margin-top:20px;
}

.x{
  border:5px solid grey;
  padding:20px 20px 20px 20px;
  border-radius:100%;
  cursor:pointer;
}


#section3{
  text-align:center;
  margin-top:50px;
}
h3{
  font-family:shadows into light;
  margin-top:40px;
  color:red;
  font-size:50px;  
}
.x:hover{
  color:red;
   border:5px solid red;
}
.y{
  margin-top:30px;
  
}
#z{
  
  
  cursor:pointer;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target="#myNavbar" data-offset="70">
  
  
    <nav id="myNavbar" class="navbar navbar-custom navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
                    <span class="sr-only">Toggle navigation</span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                </button>
                <a class="navbar-brand" href="#">Renuka Prasad A</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav active">
                    <li><a href="#section1">about</a></li>
                    <li><a href="#section2">portofolio</a></li>
                    <li><a href="#section3">contact</a></li>

                </ul>
            </div>
        </div>
    </nav>
   
       
  
  
  <div id="section1">
   <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12"><span id="about">Myself <em>Renuka Prasad A</em>,I'm an aspiring full stack javascript developer, with interest in web design and mobile app development.Currently iam trying to better my programming skills through FreeCodeCamp.My hobbies are video games,movies(big fan of star wars and Dr.Who franchise).In my spare time i like to blog about way the world works and ponder over the nature of life.
    </span></div>
      <div class=" col-md-6 col-sm-12"><img id="dp" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAPfAAAAJGNhYWFiOTY5LWVjOTctNDllNy05YzIxLWFlMDA0YjVlOWZhMg.jpg"></img></div>
    </div>
    </div>
   
  
    
  </div>
<div  id="section2">
 
<h2>Portofolio</h2>
  
  <div id="proj" class="container">
    
  <div class="row">
    <div class="col-md-4 col-sm-12 col-xs-12">
      <span>Tribute Page</span><br>
      <a href='https://codepen.io/renx777/full/JGgxJZ/' target='_blank'><img id="tri" src='https://s32.postimg.org/3xgp8dsz5/tribute_page.png' border='0' alt='postimage'/></a></div>
    <div class="col-md-4 col-sm-12 col-xs-12">
      <span>Random Quote Generator</span><br>
      <a href='https://codepen.io/renx777/full/OMWqWa/' target='_blank'><img src='https://s32.postimg.org/sovov9yf5/random_quote.png' border='0' alt='postimage'/></a></div>
    <div class="col-md-4 col-sm-12 col-xs-12">
      <span>Wiki Viewer</span><br>
      <a href='https://codepen.io/renx777/full/xVoNvR/' target='_blank'><img src='https://s32.postimg.org/6ezwcixoh/wiki_viewer.png' border='0' alt='postimage'/></a></div>
    
    
  </div>
    <div class="row f">
    <div class="col-md-4 col-sm-12 col-xs-12">
      <span>Twitch App</span><br>
      <a href='https://codepen.io/renx777/full/RammQx/' target='_blank'><img src='https://s31.postimg.org/ofj5o02zr/twitch_app.png' border='0' alt='postimage'/></a>
      </div>
      <div class="col-md-4 col-sm-12 col-xs-12">
        <span>Tic Tac Toe</span><br>
     
        <a href='https://codepen.io/renx777/full/jAGYbG/' target='_blank'><img src='https://s32.postimg.org/hwt2j5ztd/tic.png' border='0' alt='postimage'/></a>
      </div>
      <div class="col-md-4 col-sm-12 col-xs-12">
        <span>Calculator</span><br>
        <a href='https://codepen.io/renx777/full/zBYjqo/' target='_blank'><img src='https://s31.postimg.org/v6xmqu1hz/calc.png' border='0' alt='postimage'/></a>
    </div>
  
</div>
    <div class="row f">
      <div class="col-md-4 col-sm-12 col-xs-12 ">
        <span>Pomodoro Clock</span><br>
        <a href='https://codepen.io/renx777/full/rLVjVr/' target='_blank'><img src='https://s32.postimg.org/mpiyoklkh/pomo.png' border='0' alt='postimage'/></a></div>
      <div class="col-md-4 col-sm-12 col-xs-12">
        <span>Weather Widget</span><br>
      <a href='https://codepen.io/renx777/full/vKZYGb/' target='_blank'><img src='https://s32.postimg.org/pc9i2wnf5/weather_widget.png' border='0' alt='postimage'/></a>
      </div>
      <div class="col-md-4 col-sm-12 col-xs-12">
        <span>Simon Game</span><br>
        <a href='https://codepen.io/renx777/full/wWvaQq/' target='_blank'><img src='https://s31.postimg.org/km82xhmt3/simon.png' border='0' alt='postimage'/></a>
      </div>
    </div>
  </div>
</div>

  <div id="section3" class="container">
     <h3>Catch Me At <i id="d" class="fa fa-hand-o-down fa-1x" aria-hidden="true"></i></h3>
   <div class="row ">
    
     <div class="y col-md-12">
 <a href="https://github.com/renx777" target="_blank"> 
   <i class="x fa fa-github fa-3x" aria-hidden="true"></i></a>
   <a href="https://in.linkedin.com/in/renuka-prasad-a-02a028103" target="_blank">  <i class="x fa fa-twitter fa-3x" aria-hidden="true"></i></a>
     <a href="https://in.linkedin.com/in/renuka-prasad-a-02a028103" target="_blank">
       <i class="x fa fa-linkedin fa-3x" aria-hidden="true"></i></a>
     </div>
  </div>
</div>



</body>