nikkie's cyberspace

O que anda acontecendo

Esse é o meu primeiro post nesta plataforma, é apenas um teste. Faz pelo menos 20 anos que nao vejo nada referente a HTML, costumava aprender bastante sobre o assunto pois amava personalizar meus blogs na adolescencia, tive até uma amiga que se ionteressou tanto que comecou a fazer template. Por sentir muita saudade desta época e odiar a internet de hoje, resolvi dar uma chance para os blogs.

<!DOCTYPE html>
<html lang="en">
<head>
<title>nikkie's cyberspace</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;}

/* Basics */  
  
body {
margin: 0;
width: 100%;
background: #Fff;
font:11px 'ms gothic', monospace, calibri, verdana;
line-height:14px;
color: #736868;
letter-spacing:1px;
text-align:justify;
text-shadow:0px 0px 1px #bbb;}
  
/* Links */

a:link, a:visited, a:active { 
color:#111;text-decoration:none;font-weight:normal;}
a:hover {color:#555;}
  
  
/* Scrollbar */

::-webkit-scrollbar-thumb {
background-color: #fff; 
border:1px solid #333;}
::-webkit-scrollbar {
width: 7px; height: 0px; 
background: transparent;}
  
  
/* Style for the titles */

.title {
text-align:left;
font:italic 16px georgia, times;
color:#bbb;
letter-spacing:3px;
border-bottom:1px solid #444;
padding-left:10px;
margin-bottom:4px;}
  
.maintitle {
text-align:center;
font:italic 20px georgia, times;
color:#bbb;
letter-spacing:3px;
border-bottom:1px solid #444;
margin-bottom:4px;}
  
   
/* Container */

.wrapper {
margin: 0 auto;
width: 100%;
max-width: 800px;
padding: 10px 0;
box-sizing: border-box;}
  
.layout {
max-width: 100%;
display: flex;
gap: 8px;
box-sizing: border-box;
justify-content: center;}
  
    
/* Header */

.header {
background: #ddd url(https://64.media.tumblr.com/cc0fa74e36ca482a2ad947b467634604/65f799882a23bd7e-18/s400x600/719f315c57541837df705f33526c54aa335c1ebc.webp);
text-align: center;
padding:30px;}
  
.header-image {height:250px;}
  
/* Style for the Navigation bar */

.navigation {
background: #eeeeee;
text-align: center;
padding: 4px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;}
  
/* Navbar links */

.navigation a {
color: #404040;
text-decoration: none;
margin: 0 4px;}
  
.navigation a:hover {color:#999;}
  
  
/* Sections */

.left  { flex: 0 0 25%; background: #Fefefe;padding:4px;
border:3.5px double;
box-sizing: border-box;}
.main  { flex: 0 0 50%; background: #f0f0f0;padding:4px;
border:3.5px double;
box-sizing: border-box;}
.right { flex: 0 0 25%; background: #Fefefe;padding:4px;
border:3.5px double;
box-sizing: border-box;}
  
  
/* Footer */

.footer {
background: transparent;
padding: 10px;
text-align: center;}
  
/* Responsive layout - when the screen is less than 640px wide, make the three columns stack on top of each other, instead of next to each other */

@media (max-width: 640px) { 
  .layout {
    flex-direction: column;
  }
  .left, .main, .right {
    flex: 1 1 100%;
  }
}

</style>
</head>
<body>
  
  
  
  

<div class="header">
<img src="https://64.media.tumblr.com/58429ee3246bf03ea70ab719a72ffd18/65f799882a23bd7e-71/s400x600/499886384e641f80176ea7e9ff9b9d95d7db819a.pnj" alt="x" class="header-image">
</div>
  
  
  

<div class="navigation"><a href="">Link</a> / <a href="">Link</a> / <a href="">Link</a> / <a href="">Link</a> / <a href="">Link</a> / <a href="">Link</a></div>
    
  
  

<div class="wrapper">
<div class="layout">
  
  

<div class="left">
      
<div class="title"><img src="https://64.media.tumblr.com/88e82dcfac50b5c013f83fe3b1619d1f/f9727194e0ec05c1-aa/s75x75_c1/fb0dd334bd80825e08b313f59f4b49e9d8583247.gifv" alt="x"> Sobre</div>   
Me chamo Monique, sou apenas uma pessoa curiosa, que está cansada da internet de hoje. <br><br>
   
<div class="title"><img src="https://64.media.tumblr.com/88e82dcfac50b5c013f83fe3b1619d1f/f9727194e0ec05c1-aa/s75x75_c1/fb0dd334bd80825e08b313f59f4b49e9d8583247.gifv" alt="x">  title here</div>   
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed vulputate lectus. Pellentesque consequat ultrices ultricies. Nullam euismod pulvinar nunc, sit amet egestas mi tempus a. <br><br>

</div>
    
  
  
  
    
<div class="main">
      
<div class="maintitle">Comecando aqui</div>   
Ainda nao sei direito como usar essa plataforma, faz pelo menos uns 20 anos que nao mexo com nada de HTML, costumava aprender sozinha para poder modificar meu blog. <br><br>
  
<div class="maintitle">title here</div>   
Duis laoreet ac enim quis vehicula. Curabitur finibus dolor tellus, sed fermentum diam interdum non. Nullam nisl neque, fringilla vel leo quis, lobortis porttitor tortor. Praesent condimentum arcu vitae efficitur suscipit. Fusce lectus ipsum, blandit sit amet interdum sed, interdum ut erat. Phasellus ultricies tellus dolor, nec viverra sem finibus a. Fusce velit leo, vehicula at pharetra eget, sagittis sit amet metus. Nulla venenatis neque eu sapien rhoncus faucibus. Vestibulum interdum venenatis lectus at feugiat. Aenean varius quam in ligula dignissim, a venenatis mauris luctus. Praesent id faucibus sem. Phasellus eget venenatis arcu. Etiam eget ante scelerisque, venenatis nibh in, ornare arcu.
</div>
    
   
  
  

   
<div class="right">
  
<div class="title"><img src="https://64.media.tumblr.com/88e82dcfac50b5c013f83fe3b1619d1f/f9727194e0ec05c1-aa/s75x75_c1/fb0dd334bd80825e08b313f59f4b49e9d8583247.gifv" alt="x">  title here</div>   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec ligula urna. Pellentesque imperdiet nisi purus, in maximus nulla feugiat vel. Suspendisse metus risus, finibus at commodo a, accumsan laoreet libero. <br><br>
  
<div class="title"><img src="https://64.media.tumblr.com/88e82dcfac50b5c013f83fe3b1619d1f/f9727194e0ec05c1-aa/s75x75_c1/fb0dd334bd80825e08b313f59f4b49e9d8583247.gifv" alt="x">  title here</div>   
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed vulputate lectus. Pellentesque consequat ultrices ultricies. Nullam euismod pulvinar nunc, sit amet egestas mi tempus a. <br><br>
  
<div class="title"><img src="https://64.media.tumblr.com/88e82dcfac50b5c013f83fe3b1619d1f/f9727194e0ec05c1-aa/s75x75_c1/fb0dd334bd80825e08b313f59f4b49e9d8583247.gifv" alt="x">  title here</div>   
Vestibulum ac ex eleifend, interdum orci in, egestas orci. Duis laoreet ac enim quis vehicula. Curabitur finibus dolor tellus, sed fermentum diam interdum non. Nullam nisl neque, fringilla vel leo quis, lobortis porttitor tortor. <br><br>
  
<div class="title"><img src="https://64.media.tumblr.com/88e82dcfac50b5c013f83fe3b1619d1f/f9727194e0ec05c1-aa/s75x75_c1/fb0dd334bd80825e08b313f59f4b49e9d8583247.gifv" alt="x">  title here</div>
Praesent condimentum arcu vitae efficitur suscipit. Fusce lectus ipsum, blandit sit amet interdum sed, interdum ut erat. Phasellus ultricies tellus dolor, nec viverra sem finibus a. Fusce velit leo, vehicula at pharetra eget, sagittis sit amet metus. <br><br>
  
<div class="title"><img src="https://64.media.tumblr.com/88e82dcfac50b5c013f83fe3b1619d1f/f9727194e0ec05c1-aa/s75x75_c1/fb0dd334bd80825e08b313f59f4b49e9d8583247.gifv" alt="x">  title here</div>   
Nulla venenatis neque eu sapien rhoncus faucibus. Vestibulum interdum venenatis lectus at feugiat. Aenean varius quam in ligula dignissim, a venenatis mauris luctus. Praesent id faucibus sem. Phasellus eget venenatis arcu. Etiam eget ante scelerisque, venenatis nibh in, ornare arcu.
  
</div>
    
  
  
</div> 
</div>

<div class="footer">Layout made by <a href="http://itinerae.blogspot.com" target="_blank">Itinerae.</a> Image from <a href="http://suskind.tumblr.com" target="_blank">Tumblr.</a><br>
  This layout is <i>responsive</i> and <b>valid</b> HTML / CSS.</div>
  
</body>
</html>

title here

Duis laoreet ac enim quis vehicula. Curabitur finibus dolor tellus, sed fermentum diam interdum non. Nullam nisl neque, fringilla vel leo quis, lobortis porttitor tortor. Praesent condimentum arcu vitae efficitur suscipit. Fusce lectus ipsum, blandit sit amet interdum sed, interdum ut erat. Phasellus ultricies tellus dolor, nec viverra sem finibus a. Fusce velit leo, vehicula at pharetra eget, sagittis sit amet metus. Nulla venenatis neque eu sapien rhoncus faucibus. Vestibulum interdum venenatis lectus at feugiat. Aenean varius quam in ligula dignissim, a venenatis mauris luctus. Praesent id faucibus sem. Phasellus eget venenatis arcu. Etiam eget ante scelerisque, venenatis nibh in, ornare arcu.