واجهه كاملة للقالب
وانتظروا كل جديد " مذهل ويب "
واجهه كاملة للقالب
انتظرونا في موضوع جديد " مذهل ويب "
اي استفسار لاتردد :
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/><style>#RLMenu{width: 240px;
height: 100%;
position: fixed;
}
.RLMenu-left{
right: -180px;
top: 0px;
transition:right 1s;
}
.RLMenu-left:hover{
right:0px;
}
/*################## RIGHT MENU ##############*/
.RLMenu-right{
right: -180px;
top: 0px;
direction: rtl;
transition:right 1s;
}
.RLMenu-right ul>li i,#toggle{
right: 200px;
}
.RLMenu-right:hover{
right:0px;
}
#menuHeader{
width: 100%;
height: 60px;
cursor: pointer;
}
#toggle{
position: absolute;
right: 195px;
top: 10px;
}
#menuLogo{
position: absolute;
top: 10px;
left:70px;
}
#RLMenu ul>li{
position: relative;
height: 45px;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
list-style: none;
}
#RLMenu ul>li a{
color: #fff;
line-height: 48px;
margin: 50px;
font-family: ge_ss_threeregular;
transition: color 0.5s;
text-decoration: none;
}
#RLMenu ul>li i{
position: absolute;
right: 200px;
top:15px;
color: rgba(255, 255, 255, 0.3);
transition: color 0.5s;
}
#social{
width: 85%;
height: 100px;
margin: 20px 23px;
}
#social a{
text-decoration: none;
}
#social i{
width: 36px;
height: 36px;
color: #fff;
text-align: center;
line-height: 37px;
border: 1px solid rgba(255, 255, 255, 0.03);
transition: background 0.5s;
}
.define h3:hover{
color#169aff;
border-top:3px solid #169aff;
border-bottom:3px solid #169aff;
}
.define h3{
text-transform: uppercase;
text-align:center;
}
#social .fa-facebook:hover{
background: #305891;
}
#social .fa-twitter:hover{
background: #2CA8D2;
}
#social .fa-youtube:hover{
background: #C82828;
}
#social .fa-google-plus:hover{
background: #CE4D39;
}
#RLMenu{
background: #222222;
z-index:999;
color: #fff;
}
#menuHeader{
background: #24AAE9;
}
#RLMenu ul>li:hover a{
color: #24AAE9;
}
#RLMenu ul>li:hover i{
color: #24AAE9;
}
</style>
<div class='RLMenu-left' id='RLMenu'>
<div id='menuHeader'>
<div id='toggle'><i class='fa fa-bars fa-2x'/></i></div>
<div id='menuLogo'><img alt='RLMenu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbrv2tb31PHpSlPGKYeBBoJfZeXY_28olbdkSbbXW1TT3lwSaDrWi9t9eolT7wE6BD625dowwKwObGWuqD56HlV4tK41UWi1aqc5NEZMtqrL7DkO6gNO5rZFuymg0umw-zOT5l6ugjceg/s1600/hereyourlogo.png'/></div>
</div>
<nav>
<ul>
<li>
<a href='#'>
الرئيسية <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='#'>
من أنا <i class='fa fa-user'/>
</i></a>
</li>
<li>
<a href='#'>
سياسة الإستخدام <i class='fa fa-users'/>
</i></a>
</li>
<li>
<a href='#'>
المتجر <i class='fa fa-shopping-cart'/>
</i></a>
</li>
<li>
<a href='#'>
أخبار التكنلوجيا <i class='fa fa-file'/>
</i></a>
</li>
<li>
<a href='#'>
خدماتي <i class='fa fa-laptop'/>
</i></a>
</li>
<li>
<a href='#'>
المدونة <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='#'>
فريق العمل <i class='fa fa-group'/>
</i></a>
</li>
<li>
<a href='#'>
مقالات <i class='fa fa-folder'/>
</i></a>
</li>
<li>
<a href='#'>
راسلني<i class='fa fa-envelope'/>
</i></a>
</li>
</ul>
</nav>
<div id='social'>
<a href='#'>
<i class='fa fa-facebook fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-google-plus fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-twitter fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-youtube fa-2x'/>
</i></a>
</div>
</div>
<style>/*
* ----------- www.ar1web.com -------------- *
*/
.menu-btn {background: #0AF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QAIXPljLT9MIMq2yzZZo_ygyn9MSUPFmjwrxdKrKAHZ49cao5JXumEBS3PpL0v5o-EFqOKwO7wWvQ5ICYMQmfNs7K0wEmTqfFse-KtzKEdheRaGg8IpZAuQCkHPYE0r9C1beSlv_f1q1/s1600/icon_slidetoggle-menus.png) no-repeat center center;
width: 30px;
height: 30px;
padding: 4px;
position: fixed;
top: 25px;
right: 25px;
z-index: 99999;
text-indent: -900px;
overflow: hidden;}
#menu-ar1web a{text-decoration: none;
color: #FFF;
font-family: ge_ss_threeregular;
font-size: 20px;
font-weight: bold;}
#menu-ar1web{position: fixed;
top:0;
bottom: 0;
right:0;
background: #444;
color:#fff;
height: 100%;
width:250px;
padding: 0 25px 0 25px;
z-index: 999;
overflow: auto;}
.ar1web-2 {background: #0AF;
width: 30px;
height: 30px;
padding: 4px;
position: fixed;
top: 25px;
right: 25px;
z-index: 99999;
overflow: hidden;
text-align: center;
line-height: 28px;}
.title-ar1web {color: #888;
font: normal 18px ge_ss_threeregular;
text-align: right;
border-bottom: 1px solid #0AF;
float: right;
position: relative;
top: 26px;
right: 38px;
line-height: 28px;
display: block;
padding-bottom: 8px;
padding: 0 12px 8px 93px;}
.menu-a-ar1web {color: #EEE;
text-align: right;
font: normal 17px ge_ss_threeregular;
margin: 13px 0;
display: block;
transition: all .5s;}
.like-box-ar1web { position: fixed;
background: #444;
bottom: 0;
top: auto;
right: 0;
left: auto;
padding: 0 25px;
width: 250px;}
.menu-ul-ar1web { float:right; width: 100%;}
.menu-li-ar1web { list-style: none;}
.ar1web-1 , .ar1web-2 {cursor: pointer}
#menu-ar1web , .ar1web-2 {display: none;}
.menu-li-ar1web:hover .menu-a-ar1web {color:#0AF!important;}
</style>
<a class='menu-btn ar1web-1'></a>
<div id='menu-ar1web' class='menu-ar1web ar1web.com'>
<a class="ar1web-2">x</a>
<h2 class='title-ar1web'>اقسام الموقع</h2>
<br/><br/><br/>
<ul class='menu-ul-ar1web ar1web.com'>
<li class='menu-li-ar1web ar1web.com'><a href='http://www.ar1web.com' class='menu-a-ar1web ar1web.com'>الصفحة الرئيسية</a></li>
<li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>اعمالنا</a></li>
<li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>عملائنا</a></li>
<li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>اتصل بنا</a></li>
<li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>تابعنا على الفيسبوك</a></li> <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>تابعنا على جوجل +</a></li>
</ul>
<!-- like box -->
<div class='like-box-ar1web' id='ar1web.com'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Farabe1web&width=250&height=250&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
</div></div>
<!-- script -->
<script>
$(".ar1web-1").click(function(){
$(".ar1web-2,#menu-ar1web").fadeIn(500)
$(".ar1web-1").fadeOut(500)
});
$(".ar1web-2").click(function(){
$("#menu-ar1web,.ar1web-2").fadeOut(500)
$(".ar1web-1").fadeIn(500)
});
</script>إنتهينا كل ماتبقى لك أن تخصص اسماء والروابط لتستمتع بقائمتك الجديدة أي مشكل نحن في الخدمة
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>/* CSS Button Style Simple*/
.button{float:right;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {opacity:1;padding:7px 14px!important;background:#9eb2c0;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download {opacity:1;padding:7px 14px!important;background:#fe4e3f;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download2:hover,.demo2:hover,.demo1:hover,.demo:hover,.download1:hover,.download:hover {opacity:0.9;transition:opacity .4s ease-in-out;}
.demo:before {content:'\f06e';display:inline-block;;margin-left:10px;
width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out; }
.download:before {content:'\f019';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.download1 {opacity:1;padding:7px 14px!important;background:#FEC93F;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download1:before {content:'\f07b';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.demo1 {opacity:1;padding:7px 14px!important;background:#FE843F;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.demo1:before {content:'\f013';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.demo2 {opacity:1;padding:7px 14px!important;background:#FE3F9B;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.demo2:before {content:'\f0ee';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.download2 {opacity:1;padding:7px 14px!important;background:#3FA2FE;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download2:before {content:'\f0c1';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
/* CSS Button Style Flat */
.buttonhm{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.buttonhm li{display:inline;margin:0;padding:0;}
.buttonhm li a{background:#3498db;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}
.buttonhm li a:hover{background:#2980b9;}
.buttonhm1 li a:hover{background:#C22D2D;}
.buttonhm1{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.buttonhm1 li{display:inline;margin:0;padding:0;}
.buttonhm1 li a{background:#DB3434;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}/* CSS Button Style Ar1web */
.buttonar1web{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.buttonar1web li{display:inline;margin:0;padding:0;}
.buttonar1web li a{padding:7px 20px;margin:auto 5px;font-size:13px;font-weight:bold;cursor:pointer;border-radius:2px;border:1px solid #ccc;text-shadow:1px 1px 0 #fff;color:#555 !important;background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));background:-webkit-linear-gradient(top, #fff, #f2f2f2);background:-moz-linear-gradient(top, #fff, #f2f2f2);background:-ms-linear-gradient(top, #fff, #f2f2f2);background:-o-linear-gradient(top, #fff, #f2f2f2);box-shadow:0 1px 2px #ddd;font-family: electrolize;}
.buttonar1web li a:hover{border-color:#bbb;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);color:#111 !important;}
<div style='text-align: center;'>
<ul class='button'>
<li><a class='demo' href='#'>معاينة</a></li>
<li><a class='demo1' href='#'>تخصيص</a></li>
<li><a class='demo2' href='#'>رفع مباشر</a></li>
<li><a class='download' href='#'>تحميل مباشر</a></li>
<li><a class='download1' href='#'>تحميل الملف</a></li>
<li><a class='download2' href='#'>الرابط مرفق</a></li>
</ul>
<div class='clear'/><div style='text-align: center'>
<ul class='buttonhm'>
<li><a href='#' target='_blank'>Live Demo</a></li>
<li><a href='#' target='_blank'>Download</a></li>
</ul>
<ul class='buttonhm1'>
<li><a href='#' target='_blank'>Live Demo</a></li>
<li><a href='#' target='_blank'>Download</a></li>
</ul>
</div>
<div class='clear'/><div style='text-align: center'>
<ul class='buttonar1web'>
<li><a href='#' target='_blank'><i class='icon-eye-open'/> Live Demo</a></li>
<li><a href='#' target='_blank'><i class='icon-link'/> Download</a></li>
</ul>
</div>
<div class='clear'/>ميعادنا في الجزء القادم تحياتي
<style>.tabadol a{display: block;color: #FFF;background: none repeat scroll 0% 0% #ADADAD;margin: 2px;padding: 4px 21px;padding-bottom: 8px;text-align: center;margin-top: 2px;border-radius: 3px;border-bottom: 2px solid #9C9C9C;width: 95px;float: right;}.tabadol a:hover{display: block;color: #FFF;background: none repeat scroll 0% 0% #3cacbb;margin: 2px;padding: 4px 21px;padding-bottom: 8px;text-align: center;margin-top: 2px;border-radius: 3px;border-bottom: 2px solid #2C949C;width: 95px;float: right;}</style><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/" style=" color: #FFFFFF;background: none repeat scroll 0% 0% #3CACBB;padding: 6px 21px;text-align: center;margin-top: 5px;border-bottom: 4px solid #3094A2;width: 237px;"><font size="2">اضف موقعك</font></a></span>
<style>.tabadol a{display: block;color: #FFF;background: none repeat scroll 0% 0% #ADADAD;margin: 2px;padding: 4px 21px;padding-bottom: 8px;text-align: center;margin-top: 2px;border-radius: 3px;border-bottom: 2px solid #9C9C9C;width: 150px;float: right;}.tabadol a:hover{display: block;display: block;color: #FFF;background: none repeat scroll 0% 0% #FF5C5C;margin: 2px;padding: 4px 21px;padding-bottom: 8px;text-align: center;margin-top: 2px;border-radius: 3px;border-bottom: 2px solid #E03A3A;width: 150px;float: right;}</style><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/"><font size="2">مذهل ويب</font></a></span><span class="tabadol" lang="ar-bh"><a target="_blank" href="http://www.modhilweb.blogspot.com/" style=" color: #FFFFFF;background: none repeat scroll 0% 0% #FF5C5C;padding: 6px 21px;text-align: center;margin-top: 5px;border-bottom: 4px solid #E03A3A;"><font size="2">اضف موقعك</font></a></span>
موقع مذهل ويب. موقع عربي تقني تم انشائه في عام 2014 شتنبر . يحاول جدب اكبر عدد ممكن من شاب العربي عبر مواضيع حصرية تخص مجالات معينة مثل بلوجر والعاب وبرامج وحلقات مصورة علي اليوتيوب والعديد تجده في مدونة مروان تك