Page looks different when using VScode

1

Hello! Here is the problem:

i’m currently working on my portdolio page, and i decided to upload it to my github via VSstudio/Codepen, and it looks completely different than on FreeCodeCamp preview. Most obvious is photo - CSS styling don’t apply for some reason. But there other problems too, like margins being completely ommited in a few places. Here is a picture of how it looks in the preview.

image
image1108×943 174 KB

Here is the code:

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="description" content="Web developer portfolio">
      <meta name="keywords" content="Portfolio, web-design, HTML, CSS, JavaScript">
      <meta name="author" content="Ilia Shatnev">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="styles.css">
      <link href="https://fonts.cdnfonts.com/css/proxima-nova-2" rel="stylesheet">

      <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />

  </head>
  <body>
    <nav id="navbar">
      <ul>
        <li class="nav-link"><a class="button nav-link" href="#">Home</a></li>
        <li class="nav-link"><a class="button" href="#">About</a></li>
        <li class="nav-link"><a class="button" href="#">Skills</a></li>
        <li class="nav-link"><a class="button " href="#">Projects</a></li>
        <li class="nav-link"><a class="button" href="#">Contact</a></li>
      </ul>  
    </nav>
    <div class="divider-wide"></div>
  <section id="welcome-section">
    <div id="w-s-left-box">
      <div id="w-s-text">
    <p>Hello! My name is</p>
    <h1>Ilia Shatnev</h1>
    <p>I'm an aspiring web developer learning to create resposive and enjoyable user expiriences.</p>
      </div>
    <div id="w-s-bottom">
    <div class="nav-link">
      <a class="button" href="#">Contact me</a>
    </div>
    <ul  id="contact-icons">
      <a class="button"><i class="fab fa-github "></i></a>
      <a class="button"><i class="fab fa-linkedin-in"></i></a>
      <a class="button"><i class="fab fa-facebook "></i></a>
    </ul>
    </div>

    </div>
      <div id="photobox">
    <img id="photo" src="https://i.imgur.com/d8hr2J6.jpg">
      <div id="shadow1"></div>
      

    </div>
  </section>
 <div class="divider-wide"></div>
  <section id="About-me">
    <h1>About me</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
  </section>


<section id="projects" class="projects-section">
      <h2 class="projects-section-header">These are some of my projects</h2>

      <div class="projects-grid">
        <a href="#" target="_blank" class="project project-tile">
          <img class="project-image" src="https://i.imgur.com/3BVJBtv.jpg" alt="project">
          <p class="project-title button">
            Project 1
          </p>
        </a>
        <a href="#" target="_blank" class="project project-tile">
          <img class="project-image" src="https://i.imgur.com/3BVJBtv.jpg" alt="project">
          <p class="project-title button">
            
            Project 2
            
          </p>
        </a>
        <a href="#" target="_blank" class="project project-tile">
          <img class="project-image" src="https://i.imgur.com/3BVJBtv.jpg" alt="project">
          <p class="project-title button">
           
            Project 3
            
          </p>
        </a>
        <a href="#" target="_blank" class="project project-tile" >
          <img class="project-image" src="https://i.imgur.com/3BVJBtv.jpg" alt="project">
          <p class="project-title button">
            
            Project name really loooong
            
          </p>
        </a>
        <a href="#" target="_blank" class="project project-tile">
          <img class="project-image" src="https://i.imgur.com/3BVJBtv.jpg" alt="project">
          <p class="project-title button">
            
            Project 4
            
          </p>
        </a>
        <a href="#" target="_blank" class="project project-tile">
          <img class="project-image" src="https://i.imgur.com/3BVJBtv.jpg" alt="project">
          <p class="project-title button">
            Project 5
          </p>
        </a>
      </div>

      <a href="#" class="button" target="_blank">Show all</a>
    </section>
  
  </body>
</html>

:root {
    --main-gradient:linear-gradient(84deg,#dc85d4, #c56ef4);
}


* {
    background-color: white;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: 'Proxima Nova', sans-serif;
}

.divider-wide {
  margin-top: 200;
}

@media (max-width: 28.75em) {
  .divider-wide {
    margin-top: 20;
  }
}

nav {
  margin: 20 auto;
  width: 100%;
  z-index: 10;
  max-width: 1200px;
  position: fixed;
  top:0;
  right: 0;
  background: transparent;
}

nav > ul {
    display: flex;
    flex-direction: row;
    justify-content: right;
    list-style-type: none;
    min-width: min-content;
    width: 100%;
    background: transparent;
}

nav > ul > li {
    margin: 0 5;
    flex: 1 1 0px;
    max-width: 110px;
    background: transparent;
}

.button {
    padding: 10;
    border-radius: 25px;
    color: Purple;
    font-size: 20;
    transition: color 0.5s ease, background-color 0.5s ease;
}


nav a:hover {
    color: white;
    background: #dc85d4;
}


#welcome-section {
display: flex;
flex-direction: row;
width: 90%;
margin: auto;
justify-content: center;
margin-top: 50;
max-width: 1200px;
}

#welcome-section a:hover {
    color: white;
    background: #dc85d4;
}

@media (max-width: 28.75em) {
  #welcome-section {
    flex-direction: column;
  }
}

#photo
{
  width: 300;
  height: 400;
  object-fit: cover;
  border-radius: 20px;
  position: absolute;
  z-index: 2;
  margin: 10
}

#shadow1 {
  background-color: #dc85d4;
  margin: 10 30;
  width: 310;
  height: 400;
  z-index: 1;
  border-radius: 20px;
  transform: rotate(4deg)
}

#w-s-text {
  max-width: 400;
  font-size: 1.2em;
}

#w-s-text > h1 {
  font-size: 3em;
  color: Purple;
} 

#w-s-left-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 10 40;
}

#w-s-bottom {
 display: flex;
 justify-content: space-between;
 max-width: 400;
 align-items: center;
}

#contact-icons{
    width: 100;
}

#w-s-bottom > ul {
    display: flex;
    justify-content: space-between;
    font-size: 20;
    transition: color 0.5s ease, background-color 0.5s ease;
}

i {
    background: transparent;
}

#about-me{
width: 90%;
margin: 40 auto ;
justify-content: center;
margin-top: 50;
max-width: 800px;
}

#about-me > h1{
  color: purple;
}


.projects-section {
  text-align: center;
  padding: 5rem 2rem;
}

.projects-section-header {
  max-width: 640px;
  margin: 0 auto 6rem auto;
  text-align: center;
}

@media (max-width: 28.75em) {
  .projects-section-header {
    font-size: 4rem;
  }
}

/* "Automagic" image grid using no media queries */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
  .projects-section {
    padding: 6rem 1rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.project {
  background: dc85d4;
  border-radius: 2px;
}

.project-image {
  height: calc(100% - 6.8rem);
  width: 100%;
  object-fit: cover;
}

.project-title {
  font-size: 2rem;
  margin: 10
}

.project-title:hover {
    color: white;
    background: #dc85d4;
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 2px;
}

.btn-show-all {
  font-size: 2rem;
  background: var(--main-gray);
  transition: background 0.3s ease-out;
}

.btn-show-all:hover {
  background: var(--main-red);
}

.btn-show-all:hover > i {
  transform: translateX(2px);
}

.btn-show-all > i {
  margin-left: 10px;
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}
2

Looks like i figured it out, i HAVE to use proper unit of measure, like “px”, instead of just typing a number.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.