Open ArashMobaraki opened 8 months ago
<!DOCTYPE html>
======================================================= body { margin: 0; }
.icon-bar { width: 100%; background-color: #555; overflow: auto; }
.icon-bar a { float: left; width: 20%; text-align: center; padding: 12px 0; transition: all 0.3s ease; color: white; font-size: 36px; }
.icon-bar a:hover { background-color: #000; }
.active { background-color: #04AA6D; }
<!DOCTYPE html>
My Website
A website created by me.
About Me
Photo of me:
Some text about me in culpa qui officia deserunt mollit anim..
More Text
Lorem ipsum dolor sit ame.
TITLE HEADING
Title description, Dec 7, 2017
Some text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
TITLE HEADING
Title description, Sep 2, 2017
Some text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Footer
===============================================================================
body { font-family: Arial, Helvetica, sans-serif; margin: 0; }
.header { padding: 80px; text-align: center; background: #1abc9c; color: white; }
.header h1 { font-size: 40px; }
.navbar { overflow: hidden; background-color: #333; }
.navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; }
.navbar a.right { float: right; }
.navbar a:hover { background-color: #ddd; color: black; }
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.side { -ms-flex: 30%; flex: 30%; background-color: #f1f1f1; padding: 20px; }
.main { -ms-flex: 70%; flex: 70%; background-color: white; padding: 20px; }
.fakeimg { background-color: #aaa; width: 100%; padding: 20px; }
.footer { padding: 20px; text-align: center; background: #ddd; }
@media screen and (max-width: 700px) { .row { flex-direction: column; } }
@media screen and (max-width: 400px) { .navbar a { float: none; width: 100%; } } body { font-family: Arial; }
{ box-sizing: border-box; }
form.example input[type=text] { padding: 10px; font-size: 17px; border: 1px solid grey; float: left; width: 100%; background: #f1f1f1; margin:auto;max-width:140px }
form.example button { float: left; width: 20%; padding: 10px; background: #49ffdb; color: white; font-size: 17px; border: 1px solid grey; border-left: none; cursor: pointer; margin:auto;max-width:50px }
form.example button:hover { background: #1abc9c; }
form.example::after { content: ""; clear: both; display: table; }