Pristine

In this example below you will see how to do a Pristine with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by GeekBomber, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright GeekBomber ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pristine</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header>
  <h1 class="title">
    Christine's Pristines
  </h1>
  <img class="diamond" src="https://gem-a.com/images/diamond.png" />
  <div class="specials">
    <h3 class="spectit">
      Mother's Day!
    </h3>
    <p class="specdesc">
      Special offer: 25% off all items in the Mother Gift Section.
    </p>
    <a href="#"><img class="flower" src="" /></a>
  </div>
  <a href="#">
    <h2 class="Link">
      Gallery
    </h2>
    <h2 class="Link">
      Contact
    </h2>
    <h2 class="Link">
      Find Us
    </h2>
  </a>
</header>
<div class="space"></div>
<div class="magazine">
  <div class="listing">
    <h3 class="smltit">
      Ruby Necklace
    </h3>
    <h3 class="priced">
      £215.00
    </h3>
    <img class="RubNeck" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAHkAeQMBIgACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAAAQQDBQcGAgj/xAAyEAACAQMCAwYEBQUAAAAAAAAAAQIDBBEFIRIxUQYTQWFxgQcUIpFSobHR8DI0NXLB/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAEDBf/EABwRAQADAQADAQAAAAAAAAAAAAABAgMRBSFBMf/aAAwDAQACEQMRAD8A7iAAIMdemq1CpSfKcWs9DIAKOlOSp1aM04ypzxwuWWsrP7l41tWUqGrRml9NWKUnl77pcvJtb+ZsiQAAKAAAq6lPgsqi8ZfSl1z4GSzoK2t4Uko7c+FYWfQqX8ZV762opfTFqb+/Rp+C6p7mxIAAKBBIAkAAQAAKmqQcrOc4/wBdNqcXjk085M1tVdajGco8Mt1KOc4a2ZkklJNNZT2aKNhKFvcVrJLEYvip781hbe385EF8AFAAw3lV0aEpRzxco4Te/smBV06Uq11c12001GMfLGduRsCtpsFCxoqKW8VLbxzuWSQAAKAAAkAAQwSyABr7+EaFxTvG+GKklN5xjfn9smwMN5R7+2nT8Xut2t0880JGYFTS5uVooyjwypycHH8Pl9sFsAUNQ4a9xb2sk2pT4pNLbZPb+dC+ULSMa99XuVwtQfBF435LPsSRfABQAAAAASAAIYAAAADXR4rfVp7Yp1ks9M428eqfJeO5sSnqsZ/K95SwqtOUZRb9V6bGe1rK4oQqrH1LfDys+O/iQReTdO1qzWzUXj1Mem0O4tUmsSk+JrCX6JfoYNTzWrUbaPi1JrOHz58ny36fkbEAACgAAAAAkAAQCSAAIJAiUVOLjJZi1ho1tvdU7OVzTuasKdKk3NTnLlHxz+/r0NmeZ1+FzTv+8q06U7SrF01JLdZi0+Lrvj2bJKtrp9T5m9uK/wDVDhUacvLMuW3J4W++epsTz3Y+rc1rGnUlRo0rbu1H6Y4lOaeHLPj69c9N/QiEAAUAAAAAEgAAQySGBAAAk1+vRUtLr52xHK9UXzTdo6jlSjbRu6VqpxlmpUWYqSWylusLrutlzXMkkNhpdCNtptrQiklToxjt6Fo1+iqcLaVCdbvlSnwQm+copL/uV7F8okEACQEAAAAkAACHyJIfICAAB5D4ha9W0mwlbW86lO4uqUu5qU2k4tY59M55o4Ve09Qo6rK80+dZVZxy6kd+LrnryR2f4waRWvdBhqFrFynZOTqJc+7ljL9ml7ZOYaJeqvTVCajxwWF1kupjf99u74vPK9OT9ebhfajT1KeoXV1eRv21Lv1Nqa885/I/Qnw97RrtBY1+G8+b+UkqUq0qfBKo/CTWFzXhj78zgOr3aubhyjHEF9K/c7d8G9Dq6T2Wdzcxcat/U75Raw1TxiP33fo0WnqTymOdM4mJe9BANXCSCAAAAH0AAAAAjBB9BgfEoqUXGSTi1hprKaOO9rfhrdWeqO87PTpRtKmZKFSo4ujL8K6rp08TshQ1r/HVPYkx1tjvfGe1co7BfDCvXvVqfaWEI28J5p2qal3zT5yxsoeXj5Ln2VJJYWyRjtf7aj/pH9DIIjhtvfa3byAArEAAEgIkD//Z" />
    <p class="smltxt">
      Beautiful Red Glimmer and fabulous quality, will match any loved one and makes a great gift.
    </p>
  </div>
  <div class="listing">
    <p>
      stuff
    </p>
  </div>
  <div class="listing"></div>
  <div class="listing"></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/GeekBomber/pristine-mWjeyp */
@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://fonts.googleapis.com/css?family=Oswald");
header {
  font-size: 25px;
  font-family: "Roboto";
  height: 150px;
  background-color: #ff2343;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 1000%;
}

.title {
  text-decoration: underline;
  color: #21ceff;
  position: relative;
  top: -20px;
  left: 5px;
}

.Link {
  float: left;
  padding-right: 20px;
  position: relative;
  top: -60px;
}

.diamond {
  height: 60px;
  width: auto;
  position: absolute;
  left: 450px;
  top: 20px;
}

.specials {
  height: 130px;
  width: 300px;
  position: absolute;
  right: 30px;
  top: 10px;
  background-color: #fff;
  border: 2px dashed;
  border-radius: 5%;
}

.spectit {
  text-decoration: underline;
  position: relative;
  top: -40px;
  font-size: 45px;
}

.specdesc {
  font-size: 22px;
  position: relative;
  bottom: 70px;
}

.flower {
  height: 30px;
  width: auto;
  position: absolute;
  bottom: 2px;
  right: 10px;
}

a {
  color: #21bed9;
}

.space {
  height: 150px;
  width: 100%;
  position: relative;
  top: 0px;
  left: 0px;
  background-color: transparent;
}

.magazine {
  height: 500px;
  width: 80%;
  margin: auto;
  border: 2px dashed;
  font-family: "Oswald";
}

.listing {
  width: 50%;
  float: left;
}

.RubNeck {
  height: 120px;
  width: auto;
  border: 2px dashed;
}

.smltit {
  text-decoration: underline;
}

.priced {
  color: #168118;
  padding-left: 10px;
  position: relative;
  top: -20px;
}
.priced :hover {
  text-decoration: underline;
}

Comments