17/09/2017
Creating a Blog
Throughout this course, we'll help you practice and create your own unique blog project, so you'll retain what you've learned and be able to put it to use. Just keep going and follow the instructions in the TASK section. This is what your finished blog page will look like.
TASK: Tap Try It Yourself to see the code and its output.
HTML code
My Blog
Sankalp choudhary
About Me
Hey! I'm sankalp. Coding has changed my world. It's not just about apps. Learning to code gave me problem-solving skills and a way to communicate with others on a technical level. I can also develop websites and use my coding skills to get a better job. And I learned it all at SoloLearn where they build your self-esteem and keep you motivated. Join me in this rewarding journey. You'll have fun, get help, and learn along the way!
"Declare variables, not war"
My Coding Schedule
Day
Mon
Tue
Wed
Thu
Fri
8-8:30
Learn
9-10
Practice
1-1:30
Play
3:45-5
Code
6-6:15
Discuss
My Skills
HTML
JavaScript
Python
My Media
Contact Me
Follow Me
© 2017 My Blog. All rights reserved.
CSS code
html {
margin: 0;
padding: 0;
}
body {
font-family: 'Handlee', cursive;
font-size: 13pt;
background-color: ;
padding: 10px;
margin: 0;
}
h1 {
font-size: 15pt;
color: ;
text-align: center;
padding: 18px 0 18px 0;
margin: 0 0 10px 0;
}
h1 span {
border: 4px dashed ;
padding: 10px;
}
p {
padding: 0;
margin: 0;
}img-circle {
border: 3px solid white;
border-radius: 50%;
}section {
background-color: ;
padding: 15px;
margin-bottom: 10px;
border-radius: 10px;
}
{
background-image: url("https://www.sololearn.com/Uploads/header.jpg");
background-size: cover;
}
img {
display: block;
width: 80px;
height: 80px;
margin: auto;
}
p {
font-size: 25pt;
color: ;
padding-top: 5px;
margin: 0;
font-weight: bold;
text-align: center;
}quote {
font-size: 12pt;
text-align: right;
margin-top: 10px;
}
table {
width: 100%;
}
table, th, td {
border: 2px solid ;
border-collapse: collapse;
text-align: center;
table-layout: fixed;
}selected {
background-color: ;
font-weight: bold;
color: white;
}
li {
margin-bottom: 15px;
font-weight: bold;
}
progress {
width: 70%;
height: 20px;
color: ;
background: ;
}
progress::-webkit-progress-bar {
background: ;
}
progress::-webkit-progress-value {
background: ;
}
progress::-moz-progress-bar {
color: ;
background: ;
}
iframe, audio {
display: block;
margin: 0 auto;
border: 3px solid ;
}
hr {
border: 0;
height: 1px;
background: ;
}
form {
text-align: center;
margin-top: 0;
}submit {
background-color: ;
padding: 12px 45px;
border-radius: 5px;
cursor: pointer;
color: ;
border: none;
outline: none;
margin: 0;
font-weight: bold;
}submit:hover {
background-color: ;
}
textarea {
height: 100px;
}
input, textarea {
margin-bottom: 10px;
font-size: 11pt;
padding: 15px 10px 10px;
border: 1px solid ;
background-color: ;
color: #787575;
border-radius: 5px;
width: 70%;
outline: none;
}face {
transform: scale(0.4);
margin: 0 auto;
display: block;
margin-top: -35px;
margin-bottom: -25px;
}
img {
height: 50px;
width: 50px;
margin-left: 7px;
margin-right: 7px;
}
a {
text-decoration: none;
}
img:hover {
opacity: 0.8;
}
{
text-align: center;
}copyright {
font-size: 8pt;
text-align: right;
padding-bottom: 10px;
color: grey;
}
Don't be afraid of long codes. By the time you complete the course, everything will make complete sense and look highly doable. We guarantee it!
TASK:
1. Open the code.
2. On the top header, change the name to your own name.
3. Change the page title. Remember, the page title is located inside the tag in the of the page.
Credit:solo learn app