أستاذ @Alhakem
شغال على المشروع انشاء اول موقع لسه بقى شوية شغل ويخلص , بس نظرة على الكود تعدل علية.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<mata name="viewport" content="width=device-width, initial-scale=1">
<title>site miri</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous|Titillium+Web|Josefin+Sans+Web&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<!-- start header -->
<header class="main-header">
<section id="logo">
<h1><a href="#">Site Miri</a></h1>
</section>
<nav class="nav-bar">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">contant</a></li>
<li><a href="#">support</a></li>
<li><a href="#">About</a></li>
<li><a href="#">miri</a></li>
</ul>
</nav>
</header>
<!-- End header -->
<!-- start main content -->
<main class="main-content">
<!-- start part -->
<section class="contener">
<section class="part">
<h2>Games overflow</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni ullam asperiores quis expedita laudantium aspernatur minus sit, rem reiciendis quidem, incidunt aliquid similique assumenda nobis inventore obcaecati enim fugit vitae voluptatem voluptas dolor? Expedita corporis optio laudantium, laboriosam amet aliquid nulla aspernatur quod, harum incidunt dolores, culpa quibusdam architecto blanditiis. ipsum dolor sit amet consectetur, adipisicing elit. Quidem commodi tenetur odit quia laborum numquam expedita. Cum, eveniet deserunt? Harum ex non tempora minus odio necessitatibus sequi incidunt, ratione modi architecto provident ipsa doloremque quod ipsum nihil. Veritatis, amet doloribus?</p>
<section class="img-cont">
<img src="images/miri.png" alt="img-miri">
<img src="images/miri.png" alt="img-miri">
<img src="images/miri.png" alt="img-miri">
<img src="images/miri.png" alt="img-miri">
</section>
</section>
</section>
<!-- End part -->
<!-- start content store -->
<section class="content-store">
<section class="contener">
<section class="header-store">
<h3>store miri</h3>
<p>best you want!</p>
</section>
<section class="parts-store">
<img src="images/newyork.jpg" alt="img-new">
<h4>fashion</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. dolorem?</p>
<a href="#">Buy</a>
</section>
<section class="parts-store">
<img src="images/newyork.jpg" alt="img-new">
<h4>fashion</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. dolorem?</p>
<a href="#">Buy</a>
</section>
<section class="parts-store">
<img src="images/newyork.jpg" alt="img-new">
<h4>fashion</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. dolorem?</p>
<a href="#">Buy</a>
</section>
</section>
</section>
<!-- End content store -->
<!-- start contact me -->
<section class="contact-me">
<section class="contener">
<section class="header">
<h3>contact</h3>
<p>Fan? Drop a note!</p>
</section>
<section class="info">
<section class="parts">
<p>
<span><i class="fa fa-map-marker"></i>Chicago, US</span>
<span><i class="fa fa-phone"></i>Phone: +00 151515</span>
<span><i class="fa fa-envelope"></i>Email: [email protected]</span>
</p>
</section>
</section>
</section>
</section>
<!-- End contact me -->
</main>
<!-- End main content -->
</body>
</html>
/* start global */
* {
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2;
font-family: 'Titillium Web', sans-serif;
}
.contener {max-width: 850px; margin: 20px auto;}
/* ENd global */
/* start header */
.main-header {
overflow: hidden;
height: 75px;
border-bottom: 1px solid #d9d9d9;
box-shadow: 0 0 1px 0 rgba(0,0,0,0.20),0 0 10px 0 rgba(0,0,0,0.12);
}
.main-header #logo {
font-size: 20px;
line-height: 70px;
float: left;
padding-left: 20px;
font-family: 'Righteous', cursive;
}
.main-header #logo h1 a {text-decoration:none;color:#0d0d0d;}
.main-header .nav-bar ul {
float: right;
list-style: none;
padding: 14px;
}
.main-header .nav-bar ul li {
display: inline-block;
padding: 9px;
text-transform: uppercase;
}
.main-header .nav-bar ul li a {
color: #777;
line-height: 30px;
display: block;
text-decoration: none;
transition-duration: 0.5;
}
.main-header .nav-bar ul li a:hover {
color: #F9CD95;
border-bottom: 1px solid #FDAA40;
}
/* End header */
/* start main content */
.main-content {
width: 100%;
overflow: hidden;
}
.main-content .part {
text-align: center;
overflow: hidden;
margin: 0 5px;
padding: 10px 10px;
font-family: 'Josefin Sans', sans-serif;
box-shadow: 0 1rem 3rem rgba(0,0,0,.200);
border-left: 5px solid rgb(231, 170, 90);
border-radius: 50px 2px 2px 2px;
}
.main-content .part h2 {
font-size: 30px;
color: #151515;
}
.main-content .part p {
text-align: justify;
line-height: 25px;
margin: 15px 0;
color: #555;
}
.main-content .part .img-cont img {
width: 200px;
height: 150px;
box-sizing: border-box;
}
/* End main content */
/* start content store */
.content-store {
color: #fff;
overflow: hidden;
background-color: #0d0d0d;
}
.content-store .header-store {
text-align: center;
padding: 30px 0;
}
.content-store .header-store h3 {
font-size: 40px;
letter-spacing: 3px;
}
.content-store .header-store p {color: #ccc;}
.content-store .parts-store {
overflow: hidden;
max-width: 250px;
display: inline-block;
margin: 0 10px;
color: #000;
background-color: #f1f1f1;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.content-store .parts-store img {
width: 400px;
height: 300px;
}
.content-store .parts-store h4 {
/* text-align: center; */
font-size: 20px;
letter-spacing: 1px;
padding: 0 3px;
}
.content-store .parts-store p {
/* text-align: justify; */
padding: 0 3px;
}
.content-store .parts-store a {
display: block;
margin: 3px 3px;
width: 60px;
height: 30px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #000;
border-radius: 2px 30px 2px 2px;
}
.content-store .parts-store a:hover {
color: #F88F09;
}
/* End content store */
/* start contact-me */
/* .contact-me {background-color: #ccc;} */
.contact-me .header {text-align: center;}
.contact-me .header h3 {
font-size: 40px;
letter-spacing: 3px;
padding: 10px 0;
}
.contact-me .header p {color:#555;}
.contact-me .info {
padding: 30px 10px;
overflow: hidden;
}
.contact-me .parts {
float: left;
max-width: 400px;
}
.contact-me .parts p span {
font-size: 20px;
display: block;
padding: 5px;
}
.contact-me .parts p span i {padding-right:10px;}
/* End contact-me */
.
