القائمة الرئيسية

الصفحات

تعديل المشاركة

Responsive-template html5

سومر للحلول البرمجية
(0)

Responsive-template html5


مرحبًا أيها القراء ،اقدم اليوم في هذه المدونة قالب او ثيم جاهز للويب وبالخصوص صالات اللياقة البدنية الابداعي باستخدام html5  ونقدم دائما كل ماهو حصري وجديد كل ماعليك هو حفظ هذه المدونة في جوجل كروم عندك والاطلاع على المزيد بشكل يومي ان شاء الله تكون نافعة لك اذا كنت مبرمج او مصمم ويب 

تعتبر هذه واجهة مستخدم داخل صفحة ويب تحتوي على صور كثيرة في موقع الويب. عادةً ما يتم عرض هذا المحرك في موقع الويب من اجل الانتقال بسهوله عن بين الصور

اليوم في هذه المدونة ، سأشارك معك هذا القالب متجاوب لاجهزة الهواتف.  ، نقوم هذا بضبط عرض ارتفاعها تلقائيًا وفقًا لعرض ارتفاع الجهاز. استخدم خاصية CSS Flex وmedia لجعل ذلك متوافقا قم باستخدام هذه الخاصية من اجل التوافق مع الهواتف النقالة
إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو يبين بشكل كامل عن هذا القالب

فيديو توضيحي للقالب الجاهز






كما رأيت في الفيديو ، فإن القالب هذا يكون متجاوب وجميل جدا. إذا كنت مبتدئًا في تصميم الويب ، فقد ساعدك هذا البرنامج التعليمي على فهم الرموز والمفاهيم الأساسية وراء إنشاء التصميم ذلك

إذا كنت تحب هذا القالب ) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الكود المصدري لهذا البرنامج. للحصول على رموز المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام هذا البرنامج في مشاريعك ومواقعك. إذا كنت تعرف html ,cssتمامًا ، فيمكنك بسهولة جعل التمرير الابداعي هذا عمليًا بإضافة بعض الاكواد الخاصه بهما

كما هو الحال دائمًا ، قبل مشاركة أكواد هذا القالب. دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <div>.بأسم الفئة "container" كما تعلم ، يتم استخدام علامة <div> بشكل كبير لإنشاء التقسيم الاول. ومع استخدامات للبوتستراب في العمل.
..
تقسيم الواجهه هيدر واضافات بداخل الهيدر بعض الامور التي من شأنها تعطي لمسة فنية مثل الزرار والنصوص 

في ملف CSS ، قمت أولاً بإعطاء لون خلفية للتمرير الابداعي ثم باستخدام الخاصية المرنة ، قمت بوضع العنصر في الوسط . ثم قمت بالتصميم الأساسي للتقسيم وعناصر اخرى أعطيت اللون وحجم الخط والحشو وما إلى ذلك. 

الآن ، لجعل التقسيمة مع التمرير الابداعي ، استخدمت خاصية transfrom. باستخدام هذه الخاصية ، يمكنك ان تعطي عرض التحريك عرض معين. ، قمت بتحريك واعطاء ايضا درجة معينة في التحريك في اليسارو وضعت عناصر وايضا يجب ان تضع حجم الايقونة اذا كنت تحب تكبيرها يمكن ذلك بخاصية font-size
بعد ذلك يمكنك ايضا ان تستخدمه اذا تحب في مشروعك أولاً ، تحتاج إلى إنشاء ملف، أحدهما ملف HTML . يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر من خلال الرابط المحدد. انقر هنا لتنزيل ملفات التعليمات البرمجية المصدر
github


Html file only



<!doctype html>
<!--
Fox by FreeHTML5.co
Twitter: https://twitter.com/fh5co
Facebook: https://fb.com/fh5co
URL: https://freehtml5.co
-->
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Fox - Free One Page Template, Free Fitness HTML5 Template by FreeHTML5.co</title>
<!-- Bootstrap CSS -->
<link href="css/animate.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid pl-0 pr-0 bg-img clearfix parallax-window2" data-parallax="scroll" data-image-src="images/banner2.jpg">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container">
<!-- Brand -->
<a class="navbar-brand mr-auto" href="#"><img src="images/logo.png" alt="FoxPro" /></a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#about-us">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Courses</a> </li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li>
</ul>
<ul class="navbar-nav ml-5">
<li class="nav-item"> <a class="nav-link btn btn-danger" href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> </li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="fh5co-banner-text-box">
<div class="quote-box pl-5 pr-5 wow bounceInRight">
<h2> FREE TEMPLATE <br><span>BY FREEHTML5.CO</span> </h2>
</div>
<a href="#" class="btn text-uppercase btn-outline-danger btn-lg mr-3 mb-3 wow bounceInUp"> What's new</a> <a href="#" class="btn text-uppercase btn-outline-danger btn-lg mb-3 wow bounceInDown"> Courses</a> </div>
</div>
</div>
<div class="container-fluid fh5co-network">
<div class="container">
<div class="row">
<div class="col-md-6">
<h4 class="wow bounceInUp">FOR NETWORK</h4>
<h2 class="wow bounceInRight">MEMBERS</h2>
<hr />
<h5 class="wow bounceInLeft">NETWORK SUMMER 2017</h5>
<p class="wow bounceInDown">The lowdown on Blood Flow Restriction training • FREE CEC/CPD • ​Let's compare ​Raw Vs Cooked • Building Ab, Core &amp; Pelvic strength • Get​ clients short-term wins from long-term goals • So you want to operate multiple clubs? + LOADS MORE</p>
</div>
<div class="col-md-6">
<figure class="wow bounceInDown"> <img src="images/about-img.jpg" alt="gym" class="img-fluid" /> </figure>
</div>
</div>
</div>
</div>
<div id="about-us" class="container-fluid fh5co-about-us pl-0 pr-0 parallax-window" data-parallax="scroll" data-image-src="images/about-us-bg.jpg">
<div class="container">
<div class="col-sm-6 offset-sm-6">
<h2 class="wow bounceInLeft" data-wow-delay=".25s">ABOUT US</h2>
<hr/>
<p class="wow bounceInRight" data-wow-delay=".25s">Trainers, athletes and serious clients alike are looking for the toughest, most brutally productive training techniques to spice up their workouts and provide a truly unique challenge for their body and mind. Think: one-arm push-ups, pistols, pull-ups, handstands, hanging levers and the like! If you want toeither for </p>
<a class="btn btn-lg btn-outline-danger d-inline-block text-center mx-auto wow bounceInDown">Learn More</a> </div>
</div>
</div>
<div class="container-fluid fh5co-content-box">
<div class="container">
<div class="row">
<div class="col-md-5 pr-0"><img src="images/rode-gym.jpg" alt="gym" class="img-fluid wow bounceInLeft" /> </div>
<div class="col-md-7 pl-0">
<div class="wow bounceInRight" data-wow-delay=".25s">
<div class="card-img-overlay">
<p>Great weekend, met lots of cool people and took away quite a bit. Thank you for the experience, and to you and your professional team for
making things seem </p>
</div>
<img src="images/gym-girls.jpg" alt="girls in gym" class="img-fluid" /> </div>
</div>
</div>
<div class="row trainers pl-0 pr-0">
<div class="col-12 bg-50">
<div class="quote-box2 wow bounceInDown" data-wow-delay=".25s">
<h2> TRAINERS </h2>
</div>
</div>
<div class="col-md-6 pr-5 pl-5">
<div class="card text-center wow bounceInLeft" data-wow-delay=".25s"> <img class="card-img-top rounded-circle img-fluid" src="images/trainers1.jpg" alt="Card image">
<div class="card-body mb-5">
<h4 class="card-title">JENIFERR</h4>
<p class="card-text">Trainers, athletes and serious clients alike are looking for the toughest, most brutally productive training techniques to spice up their workouts and provide a truly unique challenge</p>
</div>
</div>
</div>
<div class="col-md-6 pl-5 pr-5">
<div class="card text-center wow bounceInRight" data-wow-delay=".25s"> <img class="card-img-top rounded-circle img-fluid" src="images/trainers2.jpg" alt="Card image">
<div class="card-body mb-5">
<h4 class="card-title">JHON</h4>
<p class="card-text">Trainers, athletes and serious clients alike are looking for the toughest, most brutally productive training techniques to spice up their workouts and provide a truly unique challenge</p>
</div>
</div>
</div>
</div>
<div class="row gallery">
<div class="col-md-4">
<div class="card">
<div class="card-body mb-4 wow bounceInLeft" data-wow-delay=".25s">
<h4 class="card-title">FILEX</h4>
<p class="card-text">I just wanted to sincerely thank you for the opportunity to represent Precision Nutrition and the US at such an amazing event. </p>
</div>
<img class="card-img-top img-fluid wow bounceInRight" data-wow-delay=".25s" src="images/g1.jpg" alt="Card image"> </div>
</div>
<div class="col-md-4">
<div class="card"> <img class="card-img-top img-fluid wow bounceInUp" data-wow-delay=".25s" src="images/g2.jpg" alt="Card image">
<div class="card-body mt-4 wow bounceInDown" data-wow-delay=".25s">
<h4 class="card-title">IGNITING</h4>
<p class="card-text">I just wanted to sincerely thank you for the opportunity to represent Precision Nutrition and the US at such an amazing event. </p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body mb-4 wow bounceInRight" data-wow-delay=".25s">
<h4 class="card-title">PASSION</h4>
<p class="card-text">I just wanted to sincerely thank you for the opportunity to represent Precision Nutrition and the US at such an amazing event. </p>
</div>
<img class="card-img-top img-fluid wow bounceInLeft" data-wow-delay=".25s" src="images/g3.jpg" alt="Card image"> </div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-3 footer1 d-flex wow bounceInLeft" data-wow-delay=".25s">
<div class="d-flex flex-wrap align-content-center"> <a href="#"><img src="images/logo.png" alt="logo" /></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
dolor. Ae</p>
<p>&copy; 2018 Foxpro. All rights reserved.<br> Design by <a href="https://freehtml5.co" target="_blank">FreeHTML5</a>.</p>
</div>
</div>
<div class="col-md-6 footer2 wow bounceInUp" data-wow-delay=".25s" id="contact">
<div class="form-box">
<h4>CONTACT US</h4>
<table class="table table-responsive d-table">
<tr>
<td><input type="text" class="form-control pl-0" placeholder="NAME" /></td>
<td><input type="email" class="form-control pl-0" placeholder="EMAIL" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"><input type="text" class="form-control pl-0" placeholder="ADDRESS" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"><input type="text" class="form-control pl-0" placeholder="MESSAGES" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="text-center pl-0"><button type="submit" class="btn btn-dark">SEND</button></td>
</tr>
</table>
</div>
</div>
<div class="col-md-3 footer3 wow bounceInRight" data-wow-delay=".25s">
<h5>ADDRESS</h5>
<p>Lorem ipsum dolor sit
amet, consectetuer adipiscing elit.</p>
<h5>PHONE</h5>
<p>253232323232</p>
<h5>EMAIL</h5>
<p>email@example.com</p>
<div class="social-links">
<ul class="nav nav-item">
<li><a href="https://www.facebook.com/fh5co" class="btn btn-secondary mr-1 mb-2"><img src="images/facebook.png" alt="facebook" /></a></li>
<li><a href="#" class="btn btn-secondary mr-1 ml-1 mb-2"><img src="images/facebook.png" alt="facebook" /></a></li>
<li><a href="#" class="btn btn-secondary mr-1 ml-1 mb-2"><img src="images/facebook.png" alt="facebook" /></a></li>
<li><a href="#" class="btn btn-secondary ml-1 mb-2"><img src="images/facebook.png" alt="facebook" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Bootstrap JS, ... -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/parallax.js"></script>
<script src="js/wow.js"></script>
<script src="js/main.js"></script>
</body>
</html>

هل اعجبك الموضوع :

أخر المواضيع من قسم : Ui Desgin

تعليقات

إرسال تعليق