A Pen by Chelly

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

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Chelly</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html>

<head>
  <title>Chelly's Profile</title>
  <meta charset="UTF-8">
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'/>
  <link href="https://fonts.googleapis.com/css?family=Bitter|Lora" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Bitter|Oxygen" rel="stylesheet">
  <link href="StyleSheet.css" rel="stylesheet">
</head>
<!--header-->

<body>
  <header>
    <h1>Chelly Park</h1>
  </header>

  <!--navigation-->
  <nav>
    <ul class="hover">
      <li><a href="#">About</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Etc</a></li>
      <li><a href="#">Etc</a></li>
      <li><a href="#">Etc</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!--main header-->
  <div class="mainheader">
    <div class="mainheaderimg"></div>
    <h1 class="mainheadertext">Web Design and Development</h1>
  </div>

  <!--photo section-->
  <div class="photos">
    <ul class="photocontainer">
        <li class="photocard">
          <img src="https://img.clipartfest.com/aa38bb6bbd8e432df0ab72de1eca8cbf_computer-clipart-black-and-computer-clipart-images-black-and-white_236-236.jpeg" alt="Computer Clip Art" style='width:30%'>
          <p class="x">Gluten-free four dollar toast swag pitchfork meditation.</p>
        </li>

        <li class="photocard">
          <img src="https://openclipart.org/download/256894/1470107303.svg" alt="Tablet Clip Art" style='width:20%'>
          <p class="x">Salvia truffaut live-edge, meggings selvage pop-up man bun occupy keytar.</p>
        </li>

      <li class="photocard" id="globe">
        <img class="globe" src="http://images.clipartpanda.com/globe-clipart-black-and-white-clear-globe-md.png" alt="Globe Clipart" style='width:23%'>
    <p class="x">Mustache taxidermy thundercats organic copper mug.</p>
      </li>
    </ul>
  </div>

  <!--mission statement-->
  <div class="mission">
    <div class="missionimg"></div>
    <p class="missiontext">Readymade stumptown direct trade, keffiyeh cold-pressed tumeric taxidermy selfies bicycle rights put a bird on it.</p>
  </div>

</body>

</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/chelly182/a-pen-by-chelly-VpNONr */
*, *:before, *:after{
  box-sizing: border-box;
}

body{
  margin: 0;
}

header h1{
  text-align: center;
  font-family: 'Oxygen', sans-serif;
  font-size: 2.5em;
  margin-bottom: 18px;
}

nav{
  text-align: center;
  font-family: 'Oxygen', sans-serif;
  margin: 0;
}

nav ul, .photos ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav li {
  display: inline-block;
  padding: 10px;
  margin: 3%;
}

nav a {
  text-decoration: none;
  color: black;
  transition: .5s ease;
}

.mainheader {
  position: relative;
  top: 10px;
}

.mainheaderimg {
  background-image: url("https://chrisdent.co.uk/wp-content/uploads/2013/10/long-island-city-tf-cornerstone-chris-dent.jpg");
  height: 550px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  filter: grayscale(40%);
}

.mainheadertext {
  color: rgba(184, 34, 55, 0.9);
  font-size: 3em;
  font-family: 'Bitter', serif;
  font-weight: bold;
  position: inline-block;
  text-align: center;
  position: absolute;
  top: 40%;
  width: 100%;
}

.photos{
  position: relative;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}

.photos ul{
  display: flex;
}

.photocontainer{
  list-style:none;
}

.photocard{
  font-family:font-family: 'Bitter', serif;
  font-size: 1.25em;
  font-weight: bold;
  margin: 0;
  width: 50%;
}

.x {
  position: relative;
  right: 50px;
  bottom: 10%;
  float: right;
  max-width: 50%;
  padding-left: 6%;
}

.mission {
  margin: 10px;
  padding: 0;
  position: relative;
  top: 10%;
}

.missiontext{
  font-family: 'Bitter', serif;
  font-size: 1.5em;
  color: rgba(51,168,88,1);
  display: inline-block;
  position: absolute;
  top: 20%;
  left: 40%;
  float: right;
}

.missionimg {
  background-image: url("https://chrisdent.co.uk/wp-content/uploads/2013/10/new-york-skyline-personal-project-chris-dent.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 300px;
  min-width:75%;
  opacity: 0.5;
}

img.globe{
  opacity: 0.5;
}

.hover a:hover {
  border-bottom: 5px solid #D5FFE6;

}


/*responsive portion*/

@media screen and (max-width: 600px) {
  .photocard{
    width: 100%;
    margin: 10px;
  }

  .x{
    margin-left: 5px;
    min-width: 40%;
  }

  .photos ul{
    display: block;
  }

  #globe{
  margin-top: 40px;
}

  .mission p{
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: 5%;
  }

Comments