FCC-Basic Frontend Project-Portofolio

In this example below you will see how to do a FCC-Basic Frontend Project-Portofolio with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ADondi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ADondi ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <!--Font awesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-default navbar-light fixed-top">
  <button class="navbar-toggler" type="button" data-target="#myNavBar" data-toggle="collapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="myNavBar">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active"><a class="navbar-brand" href="#home">Alexandru Dondera</a></li>
      <li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
      <li class="nav-item"><a class="nav-link" href="#portofolio">Portofolio</a></li>
      <li class="nav-item"><a class="nav-link" href="#social">Social</a></li>
    </ul>
  </div>
</nav>

<div class="container-fluid">
  
<!--Home-->
<div id="home" class="row">
  <div class="col-lg-12 col-md-12 col-12 text-center">
    <img class="img-fluid" src="https://www.dropbox.com/s/cawirvoqblpsp52/red_crop.jpg?raw=1">
    </div>
  </div>
    <h1 class="headerHome">Alexandru Dondera</h1>
    <!--<h4 class="slogan">"If it doesn't challange you it wont change you"</h4>-->
    <h6 class="description">I am a structural engineer living in Copenhagen, Denmark.<br> I have always been passionate about IT and wanted to learn coding.<br> I love problem solving and by joining Free Code Camp I get to do just that!<br> Hopefuly in the near future I will have the opportunity of choosing a different career.</h6>
 <!--Base img--> 
  <div class="row padBot">
    <div class="col-lg-12 col-md-12 col-12 text-center">
      <img class="img-fluid" src="https://www.dropbox.com/s/s909zp64082c79p/red_crop%20-%20Copy.jpg?raw=1">
    </div>
  </div>

  <!--Skills-->
  <div id="skills" class="row">
     <div class="col-lg-12 col-md-12 col-12 text-center">
      <img class="img-fluid" src="https://www.dropbox.com/s/7styc03sau4z9zh/green_crop.jpg?raw=1">
    </div>
  </div>
    <h1 class="headerSkills">Skills</h1>
  <!--Row 1-->
  <div class="row">
    <div class="col-lg-2 col-md-2 col-2 offset-5">
      <button class="btn btn-outline-success btn-block">Python</button>
    </div>
  </div>
  <div class="row" style="margin-top: 20px">
    <div class="col-lg-2 col-md-2 col-2 offset-5">
      <button class="btn btn-outline-warning btn-block">Learning Front-end</button>
    </div>
  </div>  

 

  <!--Base img--> 
  <div class="row padBot">
    <div class="col-lg-12 col-md-12 col-12 text-center">
      <img class="img-fluid" src="https://www.dropbox.com/s/qblbvqoqzrebsqj/green_crop%20-%20Copy.jpg?raw=1">
    </div>
  </div>

  <!--Portofolio-->
  <div  id="portofolio" class="row">
     <div class="col-lg-12 col-md-12 col-12 text-center">
      <img class="img-fluid" src="https://www.dropbox.com/s/zujjtaffe8s8ifb/gray_crop.jpg?raw=1">
    </div>
  </div>
    <h1 class="headerPorto">Portofolio</h1>
  <!--Projects-->
  <!--First row-->
  <div class="row">
    <div class="col-lg-2 col-md-2 col-2 text-center offset-4">
         <a href="https://codepen.io/ADondi/pen/ZKogqY" target="_blank"><img class="img-fluid" src="https://www.incimages.com/uploaded_files/image/970x450/elon-musk_31838.jpg"><p>Elon Musk - Trubute page</p></a>
    </div>
      
    <div class="col-lg-2 col-md-2 col-2 text-center">
      <a href="#" target="_blank"><img class="img-fluid" src="https://www.incimages.com/uploaded_files/image/970x450/elon-musk_31838.jpg"><p>Project 2</p></a>
      </div>
  </div>
 <!--Second row--> 
  <div class="row">
    <div class="col-lg-2 col-md-2 col-2 text-center offset-4">
      <a href="#" target="_blank"><img class="img-fluid" src="https://www.incimages.com/uploaded_files/image/970x450/elon-musk_31838.jpg"><p>Project 3</p></a>
    </div>
    
    <div class="col-lg-2 col-md-2 col-2 text-center">
      <a href="#" target="_blank"><img class="img-fluid" src="https://www.incimages.com/uploaded_files/image/970x450/elon-musk_31838.jpg"><p>Project 4</p></a>
    </div>

  </div>

  <!--Base img--> 
  <div class="row padBot">
    <div class="col-lg-12 col-md-12 col-12 text-center">
      <img class="img-fluid" src="https://www.dropbox.com/s/1jh4etgq96pwzsb/gray_crop%20-%20Copy.jpg?raw=1">
    </div>
  </div>
 
  <!--Social-->
  <div  id="social" class="row">
     <div class="col-lg-12 col-md-12 col-12 text-center">
      <img class="img-fluid" src="https://www.dropbox.com/s/cawirvoqblpsp52/red_crop.jpg?raw=1">
    </div>
  </div>
    <h1 class="headerSocial">Social</h1>
  <!--Social media links-->
  <!--First row-->
  <div class="row">
    <div class="col-lg-2 col-md-2 col-2 offset-4">
      <a href="https://www.linkedin.com/in/alexandrudondera/" target="_blank"><button class="btn btn-outline-danger btn-block"><i class="fa fa-linkedin fa-col"></i></button></a>
    </div>
    <div class="col-lg-2 col-md-2 col-2">
      <a href="https://github.com/ADondi" target="_blank"><button class="btn btn-outline-danger btn-block"><i class="fa fa-github fa-col"></i></button></a>
    </div>
  </div>
  <!--Second row-->  
    <div class="row" style="margin-top:20px">
      <div class="col-lg-2 col-md-2 col-2 offset-4">
        <a href="https://www.freecodecamp.com/adondi" target="_blank"><button class="btn btn-outline-danger btn-block"><i class="fa fa-free-code-camp fa-col"></i></button></a>
      </div>
      <div class="col-lg-2 col-md-2 col-2">
        <a href="http://stackoverflow.com/users/8040456/dondi?tab=profile" target="_blank"><button class="btn btn-outline-danger btn-block"><i class="fa fa-stack-overflow fa-col"></i></button></a>
      </div>
    </div>
  
  <!--Base img--> 
  <div class="row">
    <div class="col-lg-12 col-md-12 col-12 text-center">
      <img class="img-fluid" src="https://www.dropbox.com/s/s909zp64082c79p/red_crop%20-%20Copy.jpg?raw=1">
    </div>
  </div>  
  
<!--Credits-->
    <p class="text-center" style="margin-top: 50px">-Developed and coded by Alexandru Dondera fro Free Code Camp-</p>
  <p class="text-center">-May 2017-</p>
  

</div>


/*Downloaded from https://www.codeseek.co/ADondi/fcc-basic-frontend-project-portofolio-XRyNQJ */
    body{
  background-color: white;
  margin-top: 0px;
  padding-top: 0px;
}
.padBot{
  padding-bottom: 300px;
}
#home{
  padding-top:50px;
 }
.headerHome{
  font-family: Broadway;
  color: indianred;
  text-align: center;
}
.slogan{
  font-family: Century School Italic;
  color: indianred;
  text-align: center;
}
.description{
  font-family: Century School Italic;
  color: indianred;
  text-align: center;
}

#skills{
  padding-top:70px;
}
.headerSkills{
  font-family: Broadway;
  color: lightgreen;
  text-align: center;
}
.skills{
  font-family: Century School Italic;
  color: lightgreen;
  text-align: center;  
}

#portofolio{
  padding-top:70px;
}
.headerPorto{
  font-family: Broadway;
  color: gray;
  text-align: center;
}

#social{
  /*padding-top:0px;*/
}
.headerSocial{
  font-family: Broadway;
  color: indianred;
  text-align: center;
}
.fa-col {
  color: black;
}



/*Downloaded from https://www.codeseek.co/ADondi/fcc-basic-frontend-project-portofolio-XRyNQJ */
    

Comments