Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

gio kupra
seal-mask
.a{fill-rule:evenodd;}techdegree
gio kupra
Front End Web Development Techdegree Student 388 Points
Posted by gio kupra
.a{fill-rule:evenodd;}techdegree
gio kupra
Front End Web Development Techdegree Student 388 Points

front-end project 2 CSS

when I use float on some screens it crashes on some it does not. I have clearfix done.

gio kupra
seal-mask
.a{fill-rule:evenodd;}techdegree
gio kupra
Front End Web Development Techdegree Student 388 Points
gio kupra
.a{fill-rule:evenodd;}techdegree
gio kupra
Front End Web Development Techdegree Student 388 Points 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="./css/normalize.css">
   <link rel="stylesheet" href="./css/styles.css">

   <title>Kupra's Blog</title>
</head>
<body>
   <header class="container clearfix">
      <h1 class="clearfix">
         Giorgi kuprashvili
      </h1>
      <nav class="main-nav">
         <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#contact">Contact</a></li>
         </ul>
      </nav>
   </header>
   <div class="container clearfix">
      <img src="./images/responsive-layout-profile.png" alt="" class="top-pad">
      <p class="margin">Hey! I'm a front end developer working on a responsive design and css. I'm currently working on my TeamTreeHouse Front
      End Web Developer Tech Degree and am excited to use what I've learned so far</p>
   </div>

   <h6 class="title clearfix" id="portfolio">
      Portfolio
   </h6>
   <div class="container clearfix">
   <div class=" portfolio col1">
      <img src="./images/portfolio-1.png" alt="">
      <h4>Marketing Page</h4>
      <p>This project shows the front page of a marketing website meant for specific businesses I'm interested in</p>
   </div>


   <div class=" portfolio clearfix col2">
      <img src="./images/portfolio-2.png" alt="">
      <h4>Search Page</h4>
      <p>This project searches through a database to find information the user is trying to look up.

         </p>
      </div>




   <div class=" portfolio clearfix col1">
      <img src="./images/portfolio-4.png" alt="">
      <h4>Travel App</h4>
      <p>This app is pretty simple. It tells you which mode of transport is fastest.</p>
   </div>


   <div class=" portfolio clearfix col2">
      <img src="./images/portfolio-5.png" alt="">
      <h4>Map of Favorite Spots</h4>
      <p>This project uses an API to map my favorite spots in Fallout 4</p>
   </div>


   <div class=" portfolio clearfix col1">
      <img src="./images/portfolio-6.png" alt="">
      <h4>Photo Gallery</h4>
      <p>profile picture 6
      Calculator
      Someone can enter in the numbers they want and press the big blue button to get the result</p>
   </div>


      <div class=" portfolio clearfix col2">
         <img src="./images/portfolio-3.png" alt="">
         <h4>Calculator</h4>
         <p>omeone can enter in the numbers they want and press the big blue button to get the result</p>
      </div>
      <div class="skills clearfix clear" id="skills">
         <h3 class="skillhead">Future Skills Include</h3>
      <img src="./images/skill-html.png" alt="html">
         <img src="./images/skill-css.png" alt="css">

      <img src="./images/skill-js.png" alt="js">
      </div>
   </div>
      <hr>


      <footer class="main-footer clearfix">
         <h3 id="contact">Contact</h3>

         <p>If you're interested in chatting or want more information about what you've witnessed today, I'd love for you to reach
         out!</p>

         <ul>
            <li>Phone (995) 592-261-261</li>
            <li>Email kuprashviligiorgi3@gmail.com</li>
         </ul>
      </footer>

</body>
</html>
gio kupra
seal-mask
.a{fill-rule:evenodd;}techdegree
gio kupra
Front End Web Development Techdegree Student 388 Points
gio kupra
.a{fill-rule:evenodd;}techdegree
gio kupra
Front End Web Development Techdegree Student 388 Points 
/* General rules */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}
h3,
h4 {
  margin: 4%;
  font-size: 1.2em;
}
body {
  font-size: 1.25em;
}
p {
  margin: 7%;
}
img {
  max-width: 100%;
  padding-bottom: 3%;
  padding-top: 3%;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: black;
}
a:hover {
  color: blue;
}
.container {
  text-align: center;
  margin: 0 auto;
  width: 80%;
}
/* Nav */
.main-nav ul li {
  margin: 2%;
  padding: 2%;
}
nav ul {
  padding: 0;
}
nav li {
  font-size: 1.2em;
  font-weight: bold;
}
/* main content */
.top-pad {
  padding-top: 3%;
}
.margin {
  margin: 7%;
}
.title {
  margin-top: 10%;
  margin-left: 4%;
  margin-right: 4%;
  margin-bottom: 4%;
  font-size: 1.2em;
}

.skills img {
  width: 30%;
  display: inline-block;
  padding-top: 2%;
}
.main-footer h3 {
  margin-top: 7%;
}
.main-footer ul {
  margin-bottom: 7%;
}
@media (min-width: 766px) {
  .main-nav li {
    display: inline-block;
  }
  .top-pad {
    float: right;
    margin: 0;
    padding-top: 0;
  }
  .margin {
    float: left;
    width: 48%;
    margin: 0;
    text-align: left;
  }
  .col1 {
    float: left;
    width: 48%;
  }
  .col2 {
    float: right;
    width: 48%;
  }
  img {
    max-width: 100%;
    padding-bottom: 0;
    padding-top: 0;
  }
  .container {
    width: 90%;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 1.75em;
  }

  h1 {
    float: left;
    display: inline-block;
    margin-left: 4%;
  }

  nav ul {
    float: right;
    display: inline-block;
    width: 50%;
  }
}

/* 
clearfix
*/

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clear {
  clear: both;
}