Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

Coding

Uploaded by

Alvisa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

Coding

Uploaded by

Alvisa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Personal Blog</title>

<style>

/* Basic reset */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

/* Body style */

body {

font-family: Arial, sans-serif;

line-height: 1.6;

background-color: #f4f4f4;

color: #333;

padding: 20px;

/* Header style */

header {

text-align: center;

background-color: #007bff;
padding: 20px;

color: white;

margin-bottom: 20px;

nav a {

margin: 0 15px;

color: white;

text-decoration: none;

font-weight: bold;

nav a:hover {

color: #ffdd57;

/* Two-column layout */

.row {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

.post-text-box {

flex: 70%;

background-color: #fff;

padding: 20px;

margin-bottom: 20px;

border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

.profile {

flex: 30%;

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

text-align: center;

.profile img {

width: 150px;

height: auto;

border-radius: 50%;

margin-bottom: 10px;

/* Footer style */

footer {

text-align: center;

padding: 10px;

background-color: #007bff;

color: white;

margin-top: 20px;

footer a {
margin: 0 10px;

color: white;

text-decoration: none;

footer a:hover {

color: #ffdd57;

/* Responsive design */

@media (max-width: 768px) {

.row {

flex-direction: column;

.post-text-box, .profile {

flex: 100%;

margin-bottom: 20px;

</style>

</head>

<body>

<header>

<h1>My Personal Blog</h1>

<nav>

<a href="Index.html">Home</a>

<a href="blog.html">Game</a>
<a href="alvisaaja.html">About</a>

</nav>

</header>

<main>

<div class="row">

<div class="post-text-box">

<h1>New Post</h1>

<section>

<h2>First Post</h2>

<p>The first post content</p>

</section>

</div>

<div class="profile">

<h1>About Me</h1>

<img src="foto alvisa.jpg" alt="Author's Image">

<p>ALVISA MARETA ANANTA</p>

</div>

</div>

</main>

<footer>

<a href="https://twitter.com/author">Twitter</a>

<a href="https://facebook.com/author">Facebook</a>

<a href="https://instagram.com/author">Instagram</a>
</footer>

</body>

</html>

You might also like