Build a Personal Portfolio Webpage

build-a-personal-portfolio-webpage.markdown

Build a Personal Portfolio Webpage

A Pen by Manzil Mudbari on CodePen.

License.

index.html

<linka
  href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
  integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
  crossorigin="anonymous"
/>
<link
  href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
  rel="stylesheet"
/>



<!-- START NAV -->
<nav class="nav" id="navbar">
  <ul class="nav-list">
    <li><a href="#welcome-section">About</a></li>
    <li><a href="#Work">Work</a></li>
    <li><a href="#Contact">Contact</a></li>
  </ul>
</nav>

<!-- Welcome section -->

<section class="welcome" id="welcome-section">
  <br><h1>Hy! I am Subodh khadka</h1>
  <p>I am basic front-end web developer</p>
  <p> I am learning basis python as well as selenium</p>
</section>

<!-- Start project section -->
<section id="Work" class="project-section">
  <h1><class="project-section-header">This are some of my project</h1>
    
    <div class="project-grid">
      <a 
         href="https://codepen.io/nexhan/pen/ZEbYZyW"
         traget="_blank"
         class="project project-tile">
        <img
             class="project-image"
             src="https://pmcdeadline2.files.wordpress.com/2020/03/10577674db.jpg"
             alt="project"
             />
        <p class="project-tile">
          <span class="code">&lt;</span>From to participate in soccer cup
          <span class="code">&#47;&gt;</span>
        </p>
      </a>
      <a 
         href="https://codepen.io/nexhan/pen/MWaYRmK"
         traget="_blank"
         class="project project-tile"
         >
        <img
             class="project-image"
             
             src="https://blog.hubspot.com/hubfs/product-page-design-examples.jpg"
             alt="project"
             />
        <p class="project-tile">
          <span class="code">&lt;</span>
          Product landing page
          <span class="code">&#47; &gt;</span>
        </p>
      </a>
    </div>
    
    <a
       href="https://codepen.io/nexhan"
       class="btn btn-show-all"
       target="_blank">Show all<i class="fas fa-chevron-right"></i
  ></a>
</section>
  
<!-- Start contact section -->
  
  <section id="Contact" class="contact-section">
    <div class="contact-section-header">
      <h2>Let's work together....</h2>
      <p>Anywhere, Anyime</p>
    </div>
    
    <div class="contact-links">
      
      <a
         id="profile-link"
         href="https://github.com/Nexhan"
         target="_blank"
         class="btn contact-details">
        <i class="fab fa-github"></i> Github</a>
      <a
         id="profile-link"
         href="https://twitter.com/nexhan1"
         target="_blank"
         class="btn contact-details">
        <i class="fab fa-twitter"></i> Twitter</a>
      <a
         id="profile-link"
         href="https://www.linkedin.com/in/subodh-khadka-30b07a152/"
         target="_blank"
         class="btn contact-deatils">
        <i class="fab fa-linkedin-in"></i>Linkedin</a>
    <a
       id="profile-link"
       href="Tel 555-555-555"
       target="_blank"
       class="btn contact-deatils">
       <i class="fab fa-cuttlefish"></i></i>Phone number</a>
    </div>
</section>

<!-- footer -->

<footer>
  <p>This protfolio is made for Free Code camp PROJECT five(5)</p>
  <p>
    &copy; created for
    <a href="https://www.freecodecamp.com/" target="_blank"
      >freeCodeCamp <i class="fab fa-free-code-camp"></i
    ></a>
  </p>
</footer>

         

  

style.css

/* custom properties variable */
:root {
  --main-black: #000000;
  --main-white: #F0FFFF;
  --main-orange: #FF7F50;
  --main-red: #DC143C;
  --main-light: #FFEFD5;
  --main-pink: #FF69B4;
}

/* reset base */
* {
  margin: 0;
  padding: 0;
}

/* box-sizing and font-sizing */
*,
*::before
*::after {
  box-sizing: inherit;
}

html {
  box-sizng: border-box;
  scroll-behaviour: smooth;
}

@media(max-width: 75em){
  html{
    font-size: 60%;
  }
}

@media(max-width: 61.25em){
  html{
    font-size: 58%;
  }
}

@media(max-width: 28.75em){
  html{
    font-size: 55%;
  }
}

/* Base styles */
body{
  font-family: 'Oswald', sans-serif;
  font-size: 1.8em;
  font-weight: 400;
  line-height: 1.4;
  color: var(--main-orange);
}

h1 {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  text-align: center;
  padding-top: 102px;
  font-size: 4.5rem;
}

h2 {
  text-align: center;
  font-size: 2rem;
  padding: 2px;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--main-black);
}

img {
  display: block;
  width: 100%;
}

/* nav-bar */
.nav{
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--main-light);
}

.nav-list {
  display: flex;
  margin-right: 2rem;
}

@media (max-width: 28.75em){
  .nav-list{
    justify-content: center;
  }
  
  .nav-list{
    margin: 0 1rem;
  }
}

.nav-list a{
  display: block;
  font-size: 2.2rem;
  padding: 2rem;
}

.nav-list a:hover{
  background-color: var(--main-red);
}

/* Welcome Section */

.welcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--main-red);
  color: var(--main-white);
}

.welcome > p {
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
}

/* project section */

.project-section {
  text-align: center;
  padding: 3rem 5rem;
  background-color: var(--main-pink);
  color: var(--main-white);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280pz;
  margin: 0 auto;
  margin-bottom: 4rem;
}

@media (max-width: 30.625em) {
  .project-section {
    padding: 6rem 1rem;
  }
  
  .project-grid {
    grid-template-columns: 1fr;
  }
}

.project {
  background: var(--main-black);
  border-radius: 2px;
  color: var(--main-white);
}

.code {
  color: var(--main-black);
  transition: color 0.3s ease-out;
}

.project:hover .code{
  color: var(--main-black);
}

/* contact section */
.contact-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  background: var(--main-light);
}

.contact-section-header > h2 {
  font-size: 3.5rem;
}

@media (max-width: 28.75em) {
  .contact-section-header > h2 {
    font-size: 2rem;
  }
}

.contact-section-header > p {
  font-style: italic;
}

.contact-links {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 980px;
  margin-top: 4rem;
}

/* footer */
footer {
  font-weight: 300;
  display: flex;
  justify-content: space-evenly;
  padding: 2rem;
  background: var(--main-light);
  border-top: 4px solid var(--main-black);
}

footer > p {
  margin: 2rem;
}

footer i {
  vertical-align: middle;
}

@media (max-width: 28.75em) {
  footer {
    flex-direction: column;
    text-align: center;
  }
}