FreeCodeCamp Second Project

freecodecamp-second-project.markdown

FreeCodeCamp Second Project

A Pen by Nikit-Singh on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css?family=Economica" rel="stylesheet">

<nav class="navbar navbar-expand bg-dark navbar-dark fixed-top">
  <div class="container">

    <a id="logo-font" class="navbar-brand" href="#">
      COSMOS
    </a>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item"><a id="about" class="nav-link" href="#my-info">About</a></li>
      <li class="nav-item"><a id="portfolio" class="nav-link" href="#my-port">Portfolio</a></li>
      <li class="nav-item"><a id="contact" class="nav-link" href="#my-cont">Contact</a></li>
    </ul>

  </div>

</nav>

<div class="container" id="my-info">
  <div class="row">
    <div class="col-md-12 col-lg-12 col-xl-8 col-sm-12 col-xs-12">
      <h5>Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.
      </h5>
      <h4>Web Developer - User Experience Designer - Graphic Artist
      </h4>
    </div>
    <div class="col-xl-4 col-md-12 col-lg-12 col-xs-12 col-sm-12">
      <img id="my-pp" class="rounded-circle img-fluid d-block mx-auto" src="https://vignette.wikia.nocookie.net/fairytail/images/a/a1/Frosch_anime_square.png/revision/latest?cb=20121012030551">
    </div>
  </div>
</div>

<div class="container" id="my-port">
  <h3 class="text-center border-bottom-light">Portforlio</h3>
  <div class="row" id="img-gal">
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 img-gal">
      <img class="thumbnail img-fluid" src="https://i.ytimg.com/vi/gqlsAr6mRec/maxresdefault.jpg" alt="website 1">
    </div>
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 img-gal">
      <img class="thumbnail img-fluid" src="https://i.ytimg.com/vi/j8BNOtXY7Qg/maxresdefault.jpg" alt="website 2">
    </div>
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 img-gal">
      <img class="thumbnail img-fluid" src="https://i.ytimg.com/vi/CPEx_JBxdP0/maxresdefault.jpg" alt="website 3">
    </div>
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 img-gal">
      <img class="thumbnail img-fluid" src="http://images.slideplayer.com/26/8575572/slides/slide_5.jpg" alt="website 4">
    </div>
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 img-gal">
      <img class="thumbnail img-fluid" src="https://vignette.wikia.nocookie.net/gtawiki/images/c/c1/Www.childrenofthemountain.com-FrontPageWebsite-GTAV.png/revision/latest?cb=20140207050314" alt="website 5">
    </div>
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 img-gal">
      <img class="thumbnail img-fluid" src="https://questforbricks.files.wordpress.com/2013/07/design_improvements_before1.jpg" alt="website 6">
    </div>
  </div>
</div>
<div class="container" id="my-cont">
  <h3 class="text-center" style="border-bottom: 3px solid #17252A">Contact Me</h3>
  <div class="row">
    <div class="col-xl-6 col-lg-6 col-md-12 col-xs-12 col-sm-12">
      <form action="url(https://www.google.com/)">
        <div class="form-group">
          <input type="text" class="form-control" id="userName" placeholder="Enter Your Name">
        </div>
        <div class="form-group">
          <input type="email" class="form-control" id="userEmail"  placeholder="Enter Your E-Mail">
        </div>
        <div class="form-group">
          <input type="number" class="form-control" id="userPhone" placeholder="Enter Phone Number">
        </div>
        <div class="form-group">
          <textarea class="form-control" id="userMessage" rows="20" placeholder="Message"></textarea>
        </div>
        <button type="submit" class="btn btn-light">Submit</button>
      </form>
    </div>
    <div id="info-text" class="col-xl-6 col-lg-6 col-md-12 col-xs-12 col-sm-12">
      <h4 class="text-left">Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Toronto... just feel free to drop me a line anytime.</h4>
      <br>
      <br>
      <h4 class="text-left">I promise to reply A.S.A.P.</h4>
    </div>
  </div>
</div>

<div id="social" class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12 col-sm-12">
        <h4 class="text-left">About This Page</h4>
        <p>Made with <i class="fas fa-heart"></i> by FreeCodeCamp Camper.</p>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12 col-sm-12 float-right">
        <h4 class="text-right">Around The Web</h4>
        <ul class="float-right">
          <li><a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a></li>
          <li><a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a></li>
          <li><a href="https://www.github.com"><i class="fab fa-github"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div id="copy-footer" class="container-fluid">
  <p class="text-center" id="footer-text">COSMOS © 2018. All Rights Reversed</p>
</div>

script.js

$("#about").click(function() {
  $('html, body').animate({
    scrollTop: $("#my-info").offset().top
  }, 1000);
});

$("#portfolio").click(function() {
  $('html, body').animate({
    scrollTop: $("#my-port").offset().top
  }, 1000);
});

$("#contact").click(function() {
  $('html, body').animate({
    scrollTop: $("#my-cont").offset().top
  }, 1000);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>

style.css

body {
  margin-top: 60px;
}

#logo-font{
    font-family: 'Economica', sans-serif;
    font-size: 2.8em;
}

#my-info {
  padding: 40px 25px;
  background-color:#DEF2F1;
  color:#17252A;
  overflow: auto;
}

h5 {
  text-align: right;
  line-height: 30px;
  margin-top:80px; 
  border-bottom : 2px solid #17252A;
  border-bottom-length: <20px>;
  padding-bottom : 20px;
  font-size: 1.3em;
}

h4 {
  text-align: right;
  font-size : 1.5em;
}

.img-fluid {
  margin : auto 0;
}

#my-pp {
  width: 300px;
  margin: auto;
  display: block;
  margin-top:20px;
}

#social{
  padding-top:25px;
  background-color:#3AAFA9;
  color:#FEFFFF;
  overflow: auto;
}

.fb-logo {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  color: white;
}

ul {
  display:flex;
  list-style:none;
}

i {
  color:white;
}

i:hover {
  background: white;
  color:#3AAFA9;
}

.fab {
  padding: 20px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 7px;
  border-radius: 50%;
  border: 2px solid white;
}

.logos {
   padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    border: 2px solid white;
}

#my-port {
  padding: 40px 25px;
  background-color:#3AAFA9;
  overflow: auto;
  color:#FEFFFF;
}

h3 {
  border-bottom: 3px solid #FEFFFF;
  padding-bottom: 20px;
  margin-bottom: 60px
}

.img-gal {
  margin-bottom: 30px;
}

#my-cont {
  padding: 40px 25px;
  background-color:#DEF2F1;
  color:#17252A;
  overflow: auto;
}

#info-text{
  padding: 0 100px;
}

@media only screen and (max-width: 1200px) {
  h5 {
    text-align: center;
  }
  h4{
    text-align:center;
  }
}

.thumbnail {
  border: 3px solid white;
}

@media only screen and (max-width: 1200px) {
  #info-text {
    padding:10px;
  }
}

#copy-footer {
  margin:auto;
  padding:20px 0 5px 0;
  background-color:#343440;
  color: #FEFFFF;
  overflow: auto;
}

@media only screen and (max-width: 992px) {
  #info-text {
    padding:10px;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.0.0/css/fontawesome-iconpicker.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet" />