Skip to content

Instantly share code, notes, and snippets.

@o0pmitev

o0pmitev/blog.css

Last active December 18, 2018 22:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save o0pmitev/3b2635b1134c1ef69432e03219f943fb to your computer and use it in GitHub Desktop.
Save o0pmitev/3b2635b1134c1ef69432e03219f943fb to your computer and use it in GitHub Desktop.
Download ZIP
Blog Page
Raw
blog.css
html{
margin: 0;
padding: 0;
}
body {
font-family: "#";
font-size: 14pt;
background-color: #efefef;
padding: 10px;
margin: 0;
}
/***** HEADER *****/
h1 {
font-size: 15pt;
color: #20bcd5;
text-align: center;
padding: 18px 0 18px 0;
margin: 0 0 18px 0;
}
h1 span{
border: 4px dashed #20bcd5;
padding: 10px;
}
p {
padding: 0;
margin: 0;
font-family: 'Poor Story', sans-serif;
}
.section{
background-color: #fff;
padding: 15px;
margin-bottom: 10px;
border-radius: 10px;
}
.img-circle {
border :3px solid white;
border-radius: 50%;
}
#header img {
display: block;
width: 100px;
height: 100px;
margin: auto;
}
#header {
background-image: url(../img/backgr.jpg);
background-size: cover;
}
#header p {
font-size: 25pt;
color: #3b464c;
padding-top: 5px;
margin: 0;
font-weight: bold;
text-align: center;
}
/***** ABOUT *****/
.quote {
font-size: 12pt;
text-align: right;
margin-top: 10px;
}
/***** TABLE *****/
table {
width: 100%;
}
table th, td {
border: 2px solid #cecece;
border-collapse: collapse;
text-align: center;
table-layout: fixed;
}
.select {
background-color: coral;
font-weight: bold;
color: white;
}
li {
margin-bottom: 15px;
font-weight: bold;
}
progress {
width: 70%;
height: 20px;
color: #3fb6b2;
background: #efefef;
}
progress::-webkit-progress-bar {
background: #efefef;
}
progress::-webkit-progress-value {
background: #3fb6b2;
}
progress::-moz-progress-bar {
color: #3fb6b2;
background: #efefef;
}
iframe, audio {
display: block;
margin: 0;
border: 3px solid #3fb6b2;
margin-left: 35%;
margin-top: 10px
}
form {
text-align: center;
margin-top: 0;
}
.submit {
background-color: #3fb6b2;
padding: 12px 45px;
border-radius: 5px;
cursor: pointer;
color: #ffffff;
border: none;
outline: none;
margin: 0;
font-weight: bold;
}
textarea {
height: 100px;
}
input, textarea {
margin-bottom: 10px;
font-size: 11pt;
padding: 15px 10px 10px;
border: 1px solid #cecece;
background-color: #efefef;
color: #787575;
border-radius: 5px;
width: 50%;
outline: none;
}
.submit:hover {
background-color: #43a09d;
}
Raw
blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Oswald|Orbitron|KoHo|Cute+Font|Poor+Story">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" href="css/blog.css">
<title>Mr.Mitev</title>
</head>
<body>
<!-- Header -->
<div class="section" id="header">
<img class="img-circle" src="img/profile.jpg" alt="profile picture">
<p>Plamen Mitev</p>
</div><!-- /header -->
<!-- About-->
<div class="about_me section">
<h1><span>About me</span></h1>
<p>My name is <i>Plamen Mitev</i>. Born in 1989 in <i>Haskovo, Bulgaria</i>. I moved here in <i>Berlin</i>
in 2017 because my wife was living here. I have started using computer from 2002, mostly for
gaming. Since 2015 i have started using different "flavors" of <i>GNU/Linux</i> and exploring the world
of IT. This is the first professional course that i take and hope after the end of this course
i can serve all of your web development needs.My main goal for taking this course is to obtain the needed skill to become a successful
<i>Front-end Developer</i>. I am trying to change my career path and advance in the <i>Web Developers</i>
sphere. After finishing this course i want to be hired as an entry level developer or to become
a freelancer on full time working day.</p>
<p class="quote">"Learning never exhausts the mind. "</p>
</div><!-- /about_me -->
<!-- Scedule -->
<div class="scedule section">
<h1><span>My Scedule</span></h1>
<table>
<tr>
<th>Day</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
<tr>
<td>8:00-9:00</td>
<td class="select">Learn</td>
<td class="select">Learn</td>
<td class="select">Learn</td>
<td class="select">Learn</td>
<td class="select">Learn</td>
<td class="select">Learn</td>
<td class="select">Learn</td>
</tr>
<tr>
<td>9:00-10:00</td>
<td class="select">Practice</td>
<td class="select">Practice</td>
<td class="select">Practice</td>
<td class="select">Practice</td>
<td class="select">Practice</td>
<td class="select">Practice</td>
<td class="select">Practice</td>
</tr>
<tr>
<td>10:00-13:30</td>
<td class="select">Code</td>
<td class="select">Code</td>
<td class="select">Code</td>
<td class="select">Code</td>
<td class="select">Code</td>
<td class="select">Code</td>
<td class="select">Code</td>
</tr>
<tr>
<td>13:45-17:00</td>
<td class="select">B1 Course</td>
<td class="select">B1 Course</td>
<td class="select">B1 Course</td>
<td class="select">B1 Course</td>
<td class="select">B1 Course</td>
<td class="select">Learn</td>
<td class="select">Learn</td>
</tr>
<tr>
<td>17:00-22:00</td>
<td class="select">Learn</td>
<td class="select">Code</td>
<td class="select">Work</td>
<td class="select">Work</td>
<td class="select">Work</td>
<td class="select">Code</td>
<td class="select">Learn</td>
</tr>
<tr>
<td>22:00-1:30</td>
<td class="select">Break</td>
<td class="select">Break</td>
<td class="select">Learn</td>
<td class="select">Code</td>
<td class="select">Learn</td>
<td class="select">Code</td>
<td class="select">Code</td>
</tr>
<tr>
<td>1:30-8:00</td>
<td class="select">Sleep :)</td>
<td class="select">Sleep :)</td>
<td class="select">Sleep :)</td>
<td class="select">Sleep :)</td>
<td class="select">Sleep :)</td>
<td class="select">Sleep :)</td>
<td class="select">Sleep :)</td>
</tr>
</table>
</div><!-- Sceduel -->
<!-- Skill -->
<div class="my_skill section">
<h1><span>My Skills</span></h1>
<ul>
<li>HTML <br />
<progress min="0" max="100" value="10"</progres>
</li>
<li>CSS <br />
<progress min="0" max="100" value="10"</progres>
</li>
<li>Java Script <br />
<progress min="0" max="100" value="0"</progres>
</li>
</ul>
</div><!-- /my_skill -->
<!-- Video -->
<div class="video section">
<h1><span>Concentration</span></h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/0r6C3z3TEKw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div><!-- /video -->
<!-- Contacts -->
<div class="contact section">
<h1><span>Contact Me</span></h1>
<form>
<input name="name" type="text" /><br/>
<input name="email" type="email" /><br/>
<textarea name="message"></textarea>
<input type="submit" value="SEND" class="submit" />
</form>
</div><!-- /contact -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment