Dusan Randjelovic

In this example below you will see how to do a Dusan Randjelovic 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>Dusan Randjelovic</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="page1">
  <div class="deo1">
    
  <div class="header">
    <p>Dušan Ranđelović |</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="https://codepen.io/dusanrandjelovic/full/WdVzgb/" target="_blank">WordPress Websites</a></li>
      <li><a href="https://codepen.io/dusanrandjelovic/full/goVBPm/" target="_blank">Contact</a></li>
    </ul>
  </div>
    
    <h1>My Portfolio</h1>
  
    <h2>See my previous portfolio <a href="https://codepen.io/dusanrandjelovic/full/owrEZm/" target="_blank" class="btn">here</a></h2>
    
  </div>
  
  <div class="deo2">
    <h3>"For every problem I find solution, in every solution I find problem"</h3> <br /><h6>______________</h6>
  
  <p>I am an amateur in creating websites. For this purpose, I am using basic things: HTML5, CSS3, Bootstrap, and little JavaScript. Maybe my sites are not some "supersites", but they are functional and well designed. I like coding and playing with text, pictures, colors. <br /><br />
    In the examples, you can see what I have done. I am coding in CodePen, Atom (free editor) and I am creating websites in WordPress (free version). I am using free domain names and free hosting. So my sites, who are visible on Google search, have some suffix in their name and advertisements on their pages.</p>
    <h6>______________</h6>
  </div>
    
    <div class="deo3">
      <div class="col-sm-3">
      </div>
      <div class="col-sm-6">
    <img src="https://izradavebsajtova.files.wordpress.com/2017/07/ja.jpg?w=135&h=167" />
        <p>I have Master's degree in Adult Education. Because my average mark was 9.50 and through studies I finished professional practice and held number's of presentations and workshops, my principle was: 'I do not need any more volunteering. I do not need to work for free to gain experience.' But reality is different. Then, I started learning web development. Where I do not have diploma and where is normal to exist doubt about my knowledge, so here, practice is reality. <p/>
      </div>
      <div class="col-sm-3">
      </div>
  </div>
  
  <div class="deo4">
    <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/dusan-randjelovic-mpMXjB */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: Times;
}
body {
  background-color: Snow;
}
.deo1 {
  height: 600px;
  width: 100%;
  background-color: OrangeRed;
  margin-top: -20px;
  color: Snow;
}
.header p {
  padding-left: 50px;
  padding-top: 38px;
  float: left;
  font-size: 150%;
}
ul {
  list-style-type: none;
  float: right;
}
li {
  display: inline-block;
  padding-right: 50px;
  padding-top: 38px;
  font-size: 130%;
  letter-spacing: 0.02em;
}
a {
  color: Snow;
}
a:hover {
  color: SaddleBrown;
  text-decoration: none;
}
h1 {
  padding-top: 230px;
  text-align: center;
  font-size: 60px;
}
h2 {
  text-align: center;
}
.btn {
  border: 1px solid snow;
}
.btn:hover {
  color: OrangeRed;
  background-color: Snow;
}
h3 {
  text-align: center;
  margin-top: 50px;
}
h6 {
  text-align: center;
  color: OrangeRed;
}
.deo2 {
  color: black;
}
.deo2 p {
  text-align: center;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  margin-bottom: 60px;
  color: black;
  font-size: 20px;
}

.deo3 .col-sm-6 {
  margin-top: 60px;
  margin-bottom: 90px;
}
.col-sm-6 img {
  float: left;
}
.col-sm-6 p {
  float: right;
  width: 59%;
  color: black;
  font-size: 16px;
}

.deo4 {
  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;
}

Comments