هذه أول مرة استخدم الـbootstrap ولم أكن متوقعا سهولته!
هذه هي الصفحة التي صممتها سريعا:
والكود المستخدم:
<html>
<head>
<!-- Meta Rules -->
<!-- The general displaying rule for characters -->
<meta charset="utf-8">
<!-- Ensuring that Internet Explorer (IE) will use the best engine for rendering elements -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Enabling compitability for small screens -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page title -->
<title>Penguin Page</title>
<!-- Ending Meta Rules -->
<!-- Linking Section -->
<!-- Page icon on the browser tab -->
<link rel="shortcut icon" type="image/x-icon" href="http://via.placeholder.com/400x200">
<!-- Styling CSS Section -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<!-- Ending linking Section -->
</head>
<body>
<!-- Big container -->
<div class="container">
<!-- Header logo and titles -->
<div class="row">
<div class="col-md-6">
<img src="http://via.placeholder.com/100x100" alt="logo">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Nasr Galal</h1>
<h4>Front-end Classic Design</h4>
</div>
<!-- Ending Header logo and titles -->
<!-- Bottom Line -->
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<!-- Cover Photo -->
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://via.placeholder.com/1200x350" alt="cover">
</div>
</div>
</div>
<!-- Header End -->
<!-- Starting content -->
<!-- Content Head -->
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<!-- Ending Content Head -->
<!-- Row#1 Photos -->
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://via.placeholder.com/400x200" alt="pic1">
<h3>shot1</h3>
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://via.placeholder.com/400x200" alt="pic2">
<h3>shot2</h3>
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://via.placeholder.com/400x200" alt="pic3">
<h3>shot3</h3>
</div>
</div>
<!-- Row#2 Photos -->
<div class="row">
<div class="col-md-4">
<img src="http://via.placeholder.com/400x200" alt="pic4" class="img-responsive">
<h3>shot1</h3>
</div>
<div class="col-md-4">
<img src="http://via.placeholder.com/400x200" alt="pic5" class="img-responsive">
<h3>shot2</h3>
</div>
<div class="col-md-4">
<img src="http://via.placeholder.com/400x200" alt="pic6" class="img-responsive">
<h3>shot3</h3>
</div>
</div>
<!-- Row#3 Photos -->
<div class="row">
<div class="col-md-4">
<img src="http://via.placeholder.com/400x200" alt="pic7" class="img-responsive">
<h3>shot1</h3>
</div>
<div class="col-md-4">
<img src="http://via.placeholder.com/400x200" alt="pic8" class="img-responsive">
<h3>shot2</h3>
</div>
<div class="col-md-4">
<img src="http://via.placeholder.com/400x200" alt="pic9" class="img-responsive">
<h3>shot3</h3>
</div>
</div>
<!-- Ending Big container -->
<footer class="row">
<div class="col-md-12 text-center bg-warning">
<h4>This is a test page!</h4>
</div>
</footer>
</div>
</body>
</html>
ماذا بعد ذلك؟
في انتظار ملاحظاتكم!
