wordpress website

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>wordpress website</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="page5">
  
<div class="header">
    <p><a href="https://codepen.io/dusanrandjelovic/full/mpMXjB/" target="_blank">Dušan Ranđelović |</a></p>
    <ul>
      <li><a href="https://codepen.io/dusanrandjelovic/full/XVevGq/" target="_blank">How I Started</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/PErdNZ/" target="_blank">CodePen Websites</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/aEgXXB/" target="_blank">Atom Websites and Logos</a></li>
      <li><a href="#" style="text-transform: uppercase;">WordPress Websites</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/goVBPm/" target="_blank">Contact</a></li>
    </ul>
  </div>
  
  <h1>My WordPress Websites</h1>
  <h6>Before coding, I learned to use WordPress. I wanted that my sites be on first google page after typing there name. And 9 of them are on first page. It not need to type subdomain.</h6>
  <p style="color: OrangeRed; text-align: center;">____________</p>
  
  <div class="poz">
    <h3>If you want to see my WordPress sites, click the button below.</h3>
    <p><a href="https://dusanrandjelovic.wordpress.com/" target="_blank" class="btn">WordPress portfolio</a></p>
    
    
  </div>
  
  <div class="footer">
    <div class="levo">
    <p>&copy; Dusan Randjelovic |</p>
      <p class="te">dusanrandjelovic92@gmail.com</p>
    </div>
    <div class="desno">
      <p>My LinkedIn profile:</p>
      <a href="https://www.linkedin.com/in/dusan-randjelovic-98a170134/" target="_blank"><img src="https://cdn4.iconfinder.com/data/icons/bubble-gradient-social-media-1/200/linkedin-128.png" /></a>
    </div>
  </div>
  
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dusanrandjelovic/wordpress-website-WdVzgb */
* {
  margin: 0;
  padding: 0;
}
body {
  color: black;
  background-color: Snow;
  font-family: Times;
}
.header {
  height: 70px;
  width: 100%;
  background-color: OrangeRed;
  color: Snow;
  position: fixed;
  z-index: 1000;
  opacity: 0.9;
  top: -8px;
}
.header p {
  padding-left: 50px;
  padding-top: 20px;
  float: left;
  font-size: 150%;
}
ul {
  list-style-type: none;
  float: right;
}
li {
  display: inline-block;
  padding-right: 50px;
  padding-top: 24px;
  font-size: 130%;
  letter-spacing: 0.02em;
}
a {
  color: Snow;
}
a:hover {
  color: SaddleBrown;
  text-decoration: none;
}
h1 {
  text-align: center;
  margin-top: 120px;
}
h6 {
  margin: auto;
  width: 50%;
  font-size: 18px;
  line-height: 1.6em;
  margin-top: 30px;
  margin-bottom: 50px;
}

.footer {
  clear: both;
  height: 110px;
  width: 100%;
  background-color: OrangeRed;
}
.levo {
  float: left;
  padding-left: 80px;
  padding-top: 30px;
}
.levo p {
  float: left;
  color: Snow;
  font-size: 140%;
}
.te {
  padding-left: 300px;
}
.desno {
  float: right;
}
.desno a img {
  height: 50px;
  padding-left: 44px;
}
.desno p {
  color: Snow;
  padding-top: 17px;
  padding-right: 70px;
  font-size: 16px;
}
.poz {
  background-image: url("https://pisanjeseminarskihradova.files.wordpress.com/2018/01/josh-rose-156917.jpg?w=264&h=183");
  background-size: cover;
  height: 280px;
  margin-top: 34px;
  text-align: center;
  color: Snow;
} 
h3 {
  padding-top: 75px;
}
.btn {
  border: 1px solid Snow;
  margin-top: 30px;
}
.btn:hover {
  color: OrangeRed;
  background-color: Snow;
}
.poz p a {
  color: Snow;
  font-size: 20px;
  padding: 10px;
}

Comments