CSS ﺖﯾﺎﺳ ﺏﻭ ﯼﺪﻨﺑ ﺡﺮﻃ

فهرست مطالب

    نمایش فهرست مطالب

ﺖﯾﺎﺳ ﺏﻭ ﯼﺪﻨﺑ ﺡﺮﻃ

:ﺩﻮﺷ ﯽﻣ ﻢﯿﺴﻘﺗ ﯽﻗﺭﻭﺎﭘ ﻭ ﺍﻮﺘﺤﻣ ،ﺎﻫﻮﻨﻣ ،ﮒﺮﺑﺮﺳ ﻪﺑ ﺐﻠﻏﺍ ﺖﯾﺎﺳ ﺏﻭ ﮏﯾ

Header
Navigation Menu
Content
Main Content
Content
Footer

.ﺖﺷﺍﺩ ﻢﯿﻫﺍﻮﺧ ﻥﺁ ﻪﺑ ﺮﺗ ﻖﯿﻗﺩ ﯽﻫﺎﮕﻧ ﺵﺯﻮﻣﺁ ﻦﯾﺍ ﺭﺩ ﺎﻣ ﻭ ،ﺖﺳﺍ ﺎﻫ ﻦﯾﺮﺗ ﺞﯾﺍﺭ ﺯﺍ ﯽﮑﯾ ،ﻻ

ﺮﺘﯿﺗﺮﺳ

:ﺖﺳﺍ ﺖﯾﺎﺳ ﺏﻭ ﻡﺎﻧ ﺎﯾ ﻮﮔﻮﻟ ﮏﯾ ﯼﻭﺎﺣ ﺐﻠﻏﺍ .ﺩﺭﺍﺩ ﺭﺍﺮﻗ (ﻻﺎﺑ ﯼﺮﺑﻭﺎﻧ ﯼﻮﻨﻣ ﺮﯾﺯ ﺖﺳﺭﺩ ﺎﯾ)

ﻝﺎﺜﻣ

   .header {
  background-color: #F1F1F1;
  text-align: 
   center;
  padding: 20px;
}

ﻪﺠﯿﺘﻧ

Header

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

</body>
</html>

ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ

:ﺖﺳﺍ ﺎﻤﺷ ﺖﯾﺎﺳ ﺏﻭ ﯽﺑﺎﯾﺮﯿﺴﻣ ﺭﺩ ﻥﺎﮔﺪﻨﻨﮐﺪﯾﺩﺯﺎﺑ ﻪﺑ ﮏﻤﮐ ﯼﺍﺮﺑ ﺎﻫﺪﻧﻮﯿﭘ ﺯﺍ ﯽﺘﺴﯿﻟ ﯼﻭﺎﺣ ﺶ

ﻝﺎﺜﻣ

   /* The navbar container */
.topnav {
  overflow: hidden;
  
   background-color: #333;
}
/* Navbar links */
.topnav a {
  float: 
   left;
  display: block;
  color: 
   #f2f2f2;
  text-align: center;
  
   padding: 14px 16px;
  text-decoration: none;
}

   /* Links - change color on hover */
.topnav a:hover {
  
   background-color: #ddd;
  color: black;
}

ﻪﺠﯿﺘﻧ

Link Link Link

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

</body>
</html>

ﺍﻮﺘﺤﻣ

ﺖﺳﺍ ﻦﯾﺍ ﻥﺎﻣﺪﯿﭼ ﻦﯾﺮﺗ ﺞﯾﺍﺭ .ﺩﺭﺍﺩ ﯽﮕﺘﺴﺑ ﻑﺪﻫ ﻥﺍﺮﺑﺭﺎﮐ ﻪﺑ ﺐﻠﻏﺍ ﺶﺨﺑ ﻦﯾﺍ ﺭﺩ ﯼﺪﻨﺑ ﺡﺮﻃ

  • 1-ﯽﻧﻮﺘﺳ (ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻩﺍﺮﻤﻫ ﻦﻔﻠﺗ ﯼﺎﻫﺮﮔﺭﻭﺮﻣ ﯼﺍﺮﺑ ﺐﻠﻏﺍ)

  • ﯽﻧﻮﺘﺳ ﻭﺩ (ﻪﻧﺎﯾﺍﺭ ﯼﺍﺮﺑ ﺐﻠﻏﺍﭗﻟ ﻭ ﯽﺣﻮﻟ ﯼﺎﻫﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﭖ

  • ﯽﻧﻮﺘﺳ 3 ﯼﺪﻨﺑ ﺡﺮﻃ (ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺰﯿﻣﻭﺭ ﯼﺎﻫ ﻪﻧﺎﯾﺍﺭ ﯼﺍﺮﺑ ﻂﻘﻓ)

1-column:

 

2-column:

 

3-column:

:ﻢﯿﻫﺩ ﯽﻣ ﺮﯿﯿﻐﺗ ﯽﻧﻮﺘﺳ 1 ﯼﺪﻨﺑ ﺡﺮﻃ ﮏﯾ ﻪﺑ ﺍﺭ ﻥﺁ ﺮﺘﮑﭼﻮﮐ ﯼﺎﻫ ﻪﺤﻔﺻ ﺭﺩ ﻭ ﻢﯿﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ

ﻝﺎﺜﻣ

   /* Create three equal columns that float next to each other */
.column {
  
   float: left;
  width: 33.33%;
}
/* Clear floats after the 
   columns */
.row:after {
  content: "";
  
   display: table;
  clear: both;
}
/* Responsive 
   layout - makes the three columns stack on top of each other instead of next 
   to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 
   600px) {
  .column 
   {
    width: 100%;
  }
}

ﻪﺠﯿﺘﻧ

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
</div>

</body>
</html>

ﻪﺘﮑﻧ: ﺡﺮﻃ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑﻩﺮﯿﻏ ﻭ ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ٪25 ﺯﺍ ،ﯽﻧﻮﺘﺳ 4

ﻪﺘﮑﻧ: ﯽﻤﻧ ﺎﯾﺁﯽﻣ ﺭﺎﮐ ﻪﻧﻮﮕﭼ @ ﻪﻧﺎﺳﺭ ﻥﻮﻧﺎﻗ ﺪﯿﻧﺍﺩﺩﺭﻮﻣ ﺭ

ﻪﺘﮑﻧ: ﻥﺭﺪﻣ ﺵﻭﺭ ﮏﯾﺡﺮﻃ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﺮﺗﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ،ﻥﻮﺘﺳ

ﺮﺑﺍﺮﺑﺎﻧ ﯼﺎﻫ ﻥﻮﺘﺳ

.ﺖﺳﺍ ﺎﻤﺷ ﺖﯾﺎﺳ ﺶﺨﺑ ﻦﯾﺮﺘﻤﻬﻣ ﻭ ﻦﯾﺮﺘﮔﺭﺰﺑ ﯽﻠﺻﺍ ﯼﺍﻮﺘﺤﻣ

ﺎﻀﻓ ﺮﺘﺸﯿﺑ ﻪﮐ ﯼﺭﻮﻃ ﻪﺑ ،ﺖﺳﺍ ﺞﯾﺍﺭ ﺮﺑﺍﺮﺑﺎﻧ ﻥﻮﺘﺳ ﺽﺮﻋ ﺎﺑ

ﻝﺎﺜﻣ

   .column {
  float: left;
}
/* Left and right column */
   .column.side {
  width: 25%;
}
/* Middle column */
.column.middle 
   {
  width: 50%;
}
/* Responsive layout - makes 
   the three columns stack on top of each other instead of next to each other */
   @media screen and (max-width: 600px) {
  .column.side, .column.middle 
   {
    width: 100%;
  }
}

ﻪﺠﯿﺘﻧ

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="row">
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
  
  <div class="column middle">
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>
  
</body>
</html>

ﯽﻗﺭﻭﺎﭘ

ﻞﻣﺎﺷ ﺐﻠﻏﺍ .ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﺎﻤﺷ ﻪﺤﻔﺻ ﻦﯿﯾﺎﭘ ﺭﺩ ﯽﻗﺭﻭﺎﭘ

ﻝﺎﺜﻣ

   .footer {
  background-color: #F1F1F1;
  text-align: 
   center;
  padding: 10px;
}

ﻪﺠﯿﺘﻧ

Footer

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

/* Style the footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="row">
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
  
  <div class="column middle">
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>

<div class="footer">
  <p>Footer</p>
</div>
  
</body>
</html>

ﺍﺮﮔ ﺶﻨﮐﺍﻭ ﺖﯾﺎﺳ ﺏﻭ ﯼﺪﻨﺑ ﺡﺮﻃ

:ﺖﺳﺍ ﺕﻭﺎﻔﺘﻣ ﺽﺮﻋ ﻡﺎﻤﺗ ﯼﺎﻫﻥﻮﺘﺳ ﻭ ﻥﻮﺘﺳ ﻭﺩ ﻦﯿﺑ ﻪﺤﻔﺻ ﺽﺮﻋ ﻪﺑ ﻪﺘﺴﺑ ﻪﮐ ﻢﯾﺍﻩﺩ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Link</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>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.</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>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.</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me</h2>
      <div class="fakeimg" style="height:100px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024