Blog Post M

Developer
Kenny Mark
Size
3,964 Kb
Views
18,216
  1. Blog Post M Previews
  2. Blog Post M HTML Codes
  3. Blog Post M CSS Codes

How do I make an blog post m?

This is pen inspired by the beautiful design of goutham. I hope you guys like. What is a blog post m? How do you make a blog post m? This script and codes were developed by Kenny Mark on 28 September 2022, Wednesday.

Blog Post M Previews
IQ Test

Blog Post M - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blog Post M</title> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://allfont.net/allfont.css?fonts=montserrat-hairline" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="contentbox"> <div class="block1"> <header> <h1>be a man</h1> <h6>respect women</h6> <hr /> </header> <div class="person"> <div class="profile"> </div> <p class="name"> Hellen Beitzer</p> </div> </div> <div class="block2"> <i class="material-icons clear">clear</i> <p class="article"> People on the Internet. television, and places such as school and the workplace can be discourteous to each other. For example, if you watch videos online, there is always a troll in the comments section being extremely rude to others or not expressing their opinion in a well-mannered way. The way these trolls behave is disrespectful and they cause disharmony in the online com munity in which they are participating. <br /><br />I feel it is important to respect people. even people you might not particularly like. Not being respectful can show that you have poor character, are closed-minded. </p> <div class="lowericonfonts"> <i class="material-icons more">more_horiz</i> <i class="material-icons fav">favorite</i> </div> </div>
</div> <p class="notes">Designed by <a href="http://www.site.uplabs.io/users/talktogoutham/posts" target="_blank">Goutham</a> </p>
</body>
</html>

Blog Post M - Script Codes CSS Codes

body { background: #f9cd8f; font-family: "Varela Round", sans-serif; -webkit-font-smoothing: antialiased;
}
.contentbox { margin: 150px auto; width: 850px; height: 500px; border-radius: 10px; box-shadow: 0px 0px 30px 1px rgba(71, 70, 82, 0.3);
}
.block1 { float: left; width: 50%; height: inherit; background-color: #474652; border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
header { margin: 70px 0px 0px 60px; color: #fff; text-transform: uppercase; font-family: "Montserrat Hairline", arial; font-size: 30px; font-weight: 500;
}
header h1 { font-family: "Varela Round", sans-serif; font-style: bold; margin-bottom: 10px; font-weight: 300; font-size: 40px;
}
hr { margin-top: 20px; margin-left: 0; width: 60px; background: #f5755b; height: 4px; border: 0;
}
.person { position: relative; top: 40%; left: 50px; width: 80%; display: flex;
}
.person p.name { color: #cccccc; position: relative; top: 30px; left: 20px; text-transform: capitalize;
}
.profile { width: 80px; height: 80px; background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg); background-size: cover; border-radius: 50%; box-shadow: 0px 0px 20px 10px #42414c;
}
.block2 { float: right; width: 50%; background-color: white; height: inherit; border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
p.article::first-letter { font-size: 42px; color: #474652;
}
p.article { width: 80%; color: #777589; margin: 70px auto 20px; line-height: 1.4;
}
.clear { float: right; color: #474652; position: relative; top: 21px; right: 20px; font-size: 35px; font-style: bold; cursor: pointer;
}
.lowericonfonts { float: right; margin-right: 40px; position: relative;
}
.fav { color: #f5755b; font-size: 30px;
}
.more { font-size: 30px; color: #474652; margin-right: 20px;
}
p.notes { margin: 0 0 20px; font-size: 12px; text-align: center; color: #474652;
}
p.notes a { color: white;
}
::selection { background-color: #6b697b; color: aliceblue;
}
::-moz-selection { background-color: #535260; color: aliceblue;
}
Blog Post M - Script Codes
Blog Post M - Script Codes
Home Page Home
Developer Kenny Mark
Username kennymark
Uploaded September 28, 2022
Rating 3
Size 3,964 Kb
Views 18,216
Do you need developer help for Blog Post M?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kenny Mark (kennymark) Script Codes
Name
Twitter Todo List
Beautiful Weather App
Contact
Time Teller
About Fse
Get Movie Cast App
Word Editor
Random Quote Machine
Shopping
Login FSe
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!