طراح/برنامه نویس/توسعه دهنده وب
طراحی و توسعه انواع وبسایت ها با استفاده از جدید ترین متد ها از html5 و css3 و برنامه نویسی و پیاده سازی جاوا اسکریپت
در حال حاضر در حوزه طراحی و برنامه نویسی وب فعالیت دارم.هدفم تبدیل به fullstack شدن بوده و در تمامی فعالیت هایم سعی میکنم جزو بهترین ها باشم. از نظرم کسب مهارت های جدید و تجارب مختلف در راستای علایق و اهداف امری ضروری و لذت بخش بوده و پیشنهادم به تمامی دوستان و اطرافیانم دنبال نمودن علایقشان است.
طراحی و توسعه انواع وبسایت ها با استفاده از جدید ترین متد ها از html5 و css3 و برنامه نویسی و پیاده سازی جاوا اسکریپت
انجام پروژه های seo جهت انواع وبسایت با استفاده از جدید ترین روش ها (رپورتاژ/google analytics/link building/...)
انجام انواع پروژه های وردپرس اعم از طراحی و ترجمه قالب/ ساخت انواع قالب شرکتی و فروشگاهی و ... / سئو و امنیت
انجام پشتیبانی و هاستینگ انواع وبسایت / به روز رسانی و بک آپ
طراحی ، ترجمه و توسعه انواع وبسایت و قالب ها بر روی انواع cms ها از جمله ورد پرس و دیتا لایف
بررسی کد های HTML , CSS صفحات و خطا یابی و تصیح بود. کدنویسی صفحات فیدبک و ثبت نام وبسایت .
کارآموزی و یادگیری جاوا اسکریپت .فراگیری seo و بهینه سازی وبسایت
تحصیل در دانشگاه ازاد کرج و دریافت مدرک دکترا
گذراندن دوره های طراحی وب در اموزشگاه پرنیان زیر نظر استاد پارسا قربانیان و دریافت مدرک وزارت علوم
گذراندن دوره وب ۱ در مجتمع فنی تهران و دریافت مدرک مجتمع فنی با نمره کامل
<script>
var _cc = [['سنگال', 221],['سوئد', 46],['سوئیس', 41],['سودان',249],['german',49],['USA', 1],['UK', 44],['iran', 98]]
var _oplist = [[0920, 'Rightel']]
var _person=[]
var _result= []
$(function(){
$('#zipcode').focusout(function(){
$('#zipcode').css('border', '2px solid rgba(145, 145, 145, 0.329)')
for(i=0;i< _cc.length; i++){
var temp= ''
if(_cc[i][1] == Number($('#zipcode').val()) || _cc[i][0] == $('#zipcode').val()){
temp = _cc[i][0]
_result[0] = '(' + _cc[i][1] + ')' + _cc[i][0]
break
}
}
if(temp == ''){
$('#zipcode').css('border', '2px solid red')
_result[0]= null
$('#operator').attr('disabled', 'disabled')
}else{
$('#zipcode').val(temp)
$('#zipcode').css('border', '2px solid green')
$('#operator').removeAttr('disabled')
}
})
//*********************** end zip code***************
$('#zipadd>section>button:first-of-type').click(function(){
var temp=[]
if(Number($('#zipadd>section>input:first-of-type').val()) > 9 && $('#zipadd>section>input:last-of-type').val() != '' && Number($('#zipadd>section>input:first-of-type').val()) != 0 ){
temp[1]= Number($('#zipadd>section>input:first-of-type').val())
temp[0]= $('#zipadd>section>input:last-of-type').val()
_cc.push(temp)
console.log(_cc)
$('#zipadd>section>input:first-of-type').val(null)
$('#zipadd>section>input:last-of-type').val(null)
$('#zipadd>section>input:first-of-type').focus()
}else{
$('#invalid').fadeIn(300)
$('#invalid').delay(1500).fadeOut(300)
}
})
// ***********************end zipp add*********************
$('#op>nav>button').click(function(){
$('#opadd').fadeIn(500)
$('main').css('filter', 'blur(5px)')
})
$('#zipp>nav>button').click(function(){
$('#zipadd').fadeIn(500)
$('main').css('filter', 'blur(5px)')
})
$('#opadd>section>button:last-of-type').click(function(){
$('#opadd').fadeOut(500)
$('main').css('filter', 'none')
})
$('#zipadd>section>button:last-of-type').click(function(){
$('#zipadd').fadeOut(500)
$('main').css('filter', 'none')
})
$('#operator').focus(function(){
$('#oplist').fadeIn(300)
})
$('#operator').focusout(function(){
$('#oplist').fadeOut(300)
})
// ***********add operator *************
$('#opadd>section>button:first-of-type').click(function(){
var temp=[]
if(Number($('#opadd>section>input:first-of-type').val()) > 9 && $('#opadd>section>input:last-of-type').val() != '' && Number($('#opadd>section>input:first-of-type').val()) != 0 ){
temp[0]= Number($('#opadd>section>input:first-of-type').val())
temp[1]= $('#opadd>section>input:last-of-type').val()
_oplist.push(temp)
$('#opadd>section>input:first-of-type').val(null)
$('#opadd>section>input:last-of-type').val(null)
$('#opadd>section>input:first-of-type').focus()
console.log(_oplist)
}else{
$('#invalid').fadeIn(300)
$('#invalid').delay(1500).fadeOut(300)
}
})
// ****************end add op***************
$('#operator').focusout(function(){
$('#operator').css('border', '2px solid rgba(145, 145, 145, 0.329)')
for(i=0;i< _oplist.length; i++){
var temp= ''
if(_oplist[i][0] == Number($('#operator').val()) || _oplist[i][1] == $('#operator').val()){
temp = _oplist[i][1]
_result[1] = _oplist[i][1]
_result[2] = _oplist[i][0]
break
}
}
if(temp == '' || _oplist == 0){
$('#operator').css('border', '2px solid red')
_result[1]= null
$('#phone').attr('disabled','disabled')
}else{
$('#operator').val(temp)
$('#operator').css('border', '2px solid green')
$('#phone').removeAttr('disabled')
}
})
// *****************end operator***************
$('#phone').focusout(function(){
if($('#phone').val() != '' && Number($('#phone').val()) >= 0 && $('#phone').val().length >= 6){
$('#phone').css('border', '2px solid green')
$('#pname').removeAttr('disabled')
if($('#phone').val().length < 11){
_result[2] += $('#phone').val()
_result[2] = Number(_result[2])
}else{
_result[2] = $('#phone').val()
_result[2] = Number(_result[2])
}
}else{
$('#phone').css('border', '2px solid red')
_result[2]= null
$('#pname').attr('disabled','disabled')
}
})
// *********************end number input*******************
$('#pname').focusout(function(){
if($('#pname').val() != '' && $('#pname').val().length >= 3){
$('#pname').css('border', '2px solid green')
_result[3]= $('#pname').val()
}else{
$('#pname').css('border', '2px solid red')
_result[3]= null
}
})
// ********************end name input*********************
$('#verify').click(function(){
$('#zipcode').focusout()
$('#operator').focusout()
$('#phone').focusout()
$('#pname').focusout()
if(_result[0] == null || _result[1] == null || _result[2] == null || _result[3] == null){
$('#invalid').fadeIn(300)
$('#invalid').delay(1500).fadeOut(300)
$('#zipcode').val(null)
$('#operator').val(null)
$('#phone').val(null)
$('#pname').val(null)
$('#zipcode').focusout()
$('#operator').focusout()
$('#phone').focusout()
$('#pname').focusout()
$('#zipcode').focus()
_result=[]
}else{
_person.push(_result)
_result=[]
$('#phone').val(null)
$('#pname').val(null)
$('#phone').focus()
alert('registery succeccfull')
}
})
//************************ end registery************************
$('#finish').click(function(){
$('#add').fadeOut(300)
$('#search').fadeIn(500)
})
$('#add-more').click(function(){
$('#search').fadeOut(300)
$('#add').fadeIn(500)
})
// ******************search part**************************
$('#searching').click(function(){
console.log($('#regsearch').val())
console.log(_person)
for(i=0;i< _person.length; i++){
if(_person[i][2] == Number($('#regsearch').val())){
$('#register').text('this number is registered')
$('#register').css('color', 'green')
$('#info>h4:nth-of-type(1)>strong').text(_person[i][0])
$('#info>h4:nth-of-type(2)>strong').text(_person[i][1])
$('#info>h4:nth-of-type(3)>strong').text(_person[i][3])
break
}else{
$('#register').text('this number is not registered')
$('#register').css('color', 'red')
$('#info>h4:nth-of-type(1)>strong').text('')
$('#info>h4:nth-of-type(2)>strong').text('')
$('#info>h4:nth-of-type(3)>strong').text('')
}
}
})
})
</script>
<body>
<section id="invalid">
<h2>invalid input</h2>
</section>
<section id="opadd">
<section>
<input type="text" placeholder="aperator number">
<input type="text" placeholder="aperator name">
<button>aDD</button>
<button>finish</button>
</section>
</section>
<section id="zipadd">
<section>
<input type="text" placeholder="zip code">
<input type="text" placeholder="country ">
<button>aDD</button>
<button>finish</button>
</section>
</section>
<main>
<section id="add">
<section>
<div id="zipp">
<nav>
<input type="text" placeholder="zip code" id="zipcode" >
<button><i class="fa fa-plus" aria-hidden="true"></i></button>
</nav>
</div>
<div id="op">
<nav>
<input type="text" placeholder="operator" id="operator" disabled>
<button><i class="fa fa-plus" aria-hidden="true"></i></button>
<ul id="oplist">
</ul>
</nav>
</div>
<input type="text" placeholder="phone number" id="phone" disabled>
<input type="text" placeholder="name" id="pname" disabled>
<button id="verify">add number</button>
<button id="finish">finish</button>
</section>
</section>
<section id="search">
<section>
<input type="text" placeholder="enter number" id="regsearch">
<button id="searching">search</button>
<button id="add-more">add more</button>
<section id="info">
<h3 id="register"></h3>
<h4>country: <strong></strong></h4>
<h4>operator: <strong></strong></h4>
<h4>registered name: <strong></strong></h4>
</section>
</section>
</section>
<section id="checklist"></section>
</main>
</body>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
main{
width: 100%;
height: 100vh;
float: left;
background-image: url(../img/bg.jpeg);
background-size: cover;
background-position: center;
position: relative;
}
#invalid{
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.699);
position: absolute;
display: none;
z-index: 1001;
}
#invalid>h2{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: red;
font-size: 30px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-transform: uppercase;
}
#opadd, #zipadd{
width: 300px;
height: 300px;
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
background-color: rgba(133, 10, 10, 0.692);
border-radius: 6px;
z-index: 100;
display: none;
}
#opadd>section, #zipadd>section{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
align-content: center;
}
#add, #search{
width: 450px;
height: 350px;
position: absolute;
left: calc(50% - 225px);
top: calc(50vh - 175px);
background-color: rgba(66, 123, 209, 0.781);
border-radius: 6px;
box-shadow: 0 0 10px 3px rgb(0, 0, 0);
}
#add>section, #search>section{
width: 100%;
height: 100%;
display: flex;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-around;
border-radius: 6px;
}
::placeholder{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-transform: capitalize;
color: whitesmoke;
}
#add>section>input, #op>nav>input, #opadd>section>input, #search>section>input, #zipp>nav>input, #zipadd>section>input{
width: 180px;
height: 30px;
border: 2px solid rgba(145, 145, 145, 0.329);
background-color: rgba(255, 255, 255, 0);
padding: 0 5px;
color: whitesmoke;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-transform: capitalize;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
#add>section>input:focus, #zipp>nav>input:focus, #op>nav>input:focus, #opadd>section>input:focus, #search>section>input:focus, #zipadd>section>input:focus{
border: 2px solid rgb(233, 233, 233);
}
#op, #zipp{
width: 120px;
height: 30px;
display: flex;
flex-wrap: wrap;
}
#op>nav, #zipp>nav{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
}
#op>nav>input, #zipp>nav>input{
width: 65%;
}
#oplist{
width: 87%;
max-height: 100px;
position: absolute;
overflow-y: scroll;
top: 100%;
display: none;
}
#oplist>li{
width: 100%;
height: 25px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
color: whitesmoke;
text-transform: capitalize;
font-size: 13px;
list-style: none;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
border-bottom: 1px solid rgba(255, 255, 255, 0.616);
}
#add>section>button, #op>nav>button, #opadd>section>button, #search>section>button, #zipp>nav>button, #zipadd>section>button{
width: 115px;
height: 35px;
border-radius: 3px;
border: 2px solid rgba(255, 255, 255, 0.568);
text-transform: capitalize;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0);
color: white;
line-height: 35px;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
font-weight: 550;
}
#add>section>button:hover, #op>nav>button:hover,#search>section>button:hover, #zipp>nav>button:hover{
color: rgba(66, 123, 209, 0.781);
background-color: #fff;
}
#opadd>section>button:hover, #zipadd>section>button:hover{
color: rgba(133, 10, 10, 0.692);
background-color: #fff;
}
#search>section>button:hover{
color: rgba(7, 94, 100, 0.815);
}
#op>nav>button, #zipp>nav>button{
width: 20%;
border-radius: 2px;
line-height: 30px;
height: 30px;
margin-left: 3px;
}
#search{
display: none;
background-color: rgba(7, 94, 100, 0.815);
flex-direction: column;
align-items: center;
}
#info{
width: 100%;
height: 40%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-content: space-around;
padding: 10px;
}
#info>*{
color: whitesmoke;
text-transform: uppercase;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#info>h4>strong{
color: yellowgreen;
margin-left: 10px;
}
<script>
var _cc = [['سنگال', 221],['سوئد', 46],['سوئیس', 41],['سودان',249],['german',49],['USA', 1],['UK', 44],['iran', 98]]
var _oplist = [[0920, 'Rightel']]
var _person=[]
var _result= []
$(function(){
$('#zipcode').focusout(function(){
$('#zipcode').css('border', '2px solid rgba(145, 145, 145, 0.329)')
for(i=0;i< _cc.length; i++){
var temp= ''
if(_cc[i][1] == Number($('#zipcode').val()) || _cc[i][0] == $('#zipcode').val()){
temp = _cc[i][0]
_result[0] = '(' + _cc[i][1] + ')' + _cc[i][0]
break
}
}
if(temp == ''){
$('#zipcode').css('border', '2px solid red')
_result[0]= null
$('#operator').attr('disabled', 'disabled')
}else{
$('#zipcode').val(temp)
$('#zipcode').css('border', '2px solid green')
$('#operator').removeAttr('disabled')
}
})
//*********************** end zip code***************
$('#zipadd>section>button:first-of-type').click(function(){
var temp=[]
if(Number($('#zipadd>section>input:first-of-type').val()) > 9 && $('#zipadd>section>input:last-of-type').val() != '' && Number($('#zipadd>section>input:first-of-type').val()) != 0 ){
temp[1]= Number($('#zipadd>section>input:first-of-type').val())
temp[0]= $('#zipadd>section>input:last-of-type').val()
_cc.push(temp)
console.log(_cc)
$('#zipadd>section>input:first-of-type').val(null)
$('#zipadd>section>input:last-of-type').val(null)
$('#zipadd>section>input:first-of-type').focus()
}else{
$('#invalid').fadeIn(300)
$('#invalid').delay(1500).fadeOut(300)
}
})
// ***********************end zipp add*********************
$('#op>nav>button').click(function(){
$('#opadd').fadeIn(500)
$('main').css('filter', 'blur(5px)')
})
$('#zipp>nav>button').click(function(){
$('#zipadd').fadeIn(500)
$('main').css('filter', 'blur(5px)')
})
$('#opadd>section>button:last-of-type').click(function(){
$('#opadd').fadeOut(500)
$('main').css('filter', 'none')
})
$('#zipadd>section>button:last-of-type').click(function(){
$('#zipadd').fadeOut(500)
$('main').css('filter', 'none')
})
$('#operator').focus(function(){
$('#oplist').fadeIn(300)
})
$('#operator').focusout(function(){
$('#oplist').fadeOut(300)
})
// ***********add operator *************
$('#opadd>section>button:first-of-type').click(function(){
var temp=[]
if(Number($('#opadd>section>input:first-of-type').val()) > 9 && $('#opadd>section>input:last-of-type').val() != '' && Number($('#opadd>section>input:first-of-type').val()) != 0 ){
temp[0]= Number($('#opadd>section>input:first-of-type').val())
temp[1]= $('#opadd>section>input:last-of-type').val()
_oplist.push(temp)
$('#opadd>section>input:first-of-type').val(null)
$('#opadd>section>input:last-of-type').val(null)
$('#opadd>section>input:first-of-type').focus()
console.log(_oplist)
}else{
$('#invalid').fadeIn(300)
$('#invalid').delay(1500).fadeOut(300)
}
})
// ****************end add op***************
$('#operator').focusout(function(){
$('#operator').css('border', '2px solid rgba(145, 145, 145, 0.329)')
for(i=0;i< _oplist.length; i++){
var temp= ''
if(_oplist[i][0] == Number($('#operator').val()) || _oplist[i][1] == $('#operator').val()){
temp = _oplist[i][1]
_result[1] = _oplist[i][1]
_result[2] = _oplist[i][0]
break
}
}
if(temp == '' || _oplist == 0){
$('#operator').css('border', '2px solid red')
_result[1]= null
$('#phone').attr('disabled','disabled')
}else{
$('#operator').val(temp)
$('#operator').css('border', '2px solid green')
$('#phone').removeAttr('disabled')
}
})
// *****************end operator***************
$('#phone').focusout(function(){
if($('#phone').val() != '' && Number($('#phone').val()) >= 0 && $('#phone').val().length >= 6){
$('#phone').css('border', '2px solid green')
$('#pname').removeAttr('disabled')
if($('#phone').val().length < 11){
_result[2] += $('#phone').val()
_result[2] = Number(_result[2])
}else{
_result[2] = $('#phone').val()
_result[2] = Number(_result[2])
}
}else{
$('#phone').css('border', '2px solid red')
_result[2]= null
$('#pname').attr('disabled','disabled')
}
})
// *********************end number input*******************
$('#pname').focusout(function(){
if($('#pname').val() != '' && $('#pname').val().length >= 3){
$('#pname').css('border', '2px solid green')
_result[3]= $('#pname').val()
}else{
$('#pname').css('border', '2px solid red')
_result[3]= null
}
})
// ********************end name input*********************
$('#verify').click(function(){
$('#zipcode').focusout()
$('#operator').focusout()
$('#phone').focusout()
$('#pname').focusout()
if(_result[0] == null || _result[1] == null || _result[2] == null || _result[3] == null){
$('#invalid').fadeIn(300)
$('#invalid').delay(1500).fadeOut(300)
$('#zipcode').val(null)
$('#operator').val(null)
$('#phone').val(null)
$('#pname').val(null)
$('#zipcode').focusout()
$('#operator').focusout()
$('#phone').focusout()
$('#pname').focusout()
$('#zipcode').focus()
_result=[]
}else{
_person.push(_result)
_result=[]
$('#phone').val(null)
$('#pname').val(null)
$('#phone').focus()
alert('registery succeccfull')
}
})
//************************ end registery************************
$('#finish').click(function(){
$('#add').fadeOut(300)
$('#search').fadeIn(500)
})
$('#add-more').click(function(){
$('#search').fadeOut(300)
$('#add').fadeIn(500)
})
// ******************search part**************************
$('#searching').click(function(){
console.log($('#regsearch').val())
console.log(_person)
for(i=0;i< _person.length; i++){
if(_person[i][2] == Number($('#regsearch').val())){
$('#register').text('this number is registered')
$('#register').css('color', 'green')
$('#info>h4:nth-of-type(1)>strong').text(_person[i][0])
$('#info>h4:nth-of-type(2)>strong').text(_person[i][1])
$('#info>h4:nth-of-type(3)>strong').text(_person[i][3])
break
}else{
$('#register').text('this number is not registered')
$('#register').css('color', 'red')
$('#info>h4:nth-of-type(1)>strong').text('')
$('#info>h4:nth-of-type(2)>strong').text('')
$('#info>h4:nth-of-type(3)>strong').text('')
}
}
})
})
</script>
<body>
<section id="invalid">
<h2>invalid input</h2>
</section>
<section id="opadd">
<section>
<input type="text" placeholder="aperator number">
<input type="text" placeholder="aperator name">
<button>aDD</button>
<button>finish</button>
</section>
</section>
<section id="zipadd">
<section>
<input type="text" placeholder="zip code">
<input type="text" placeholder="country ">
<button>aDD</button>
<button>finish</button>
</section>
</section>
<main>
<section id="add">
<section>
<div id="zipp">
<nav>
<input type="text" placeholder="zip code" id="zipcode" >
<button><i class="fa fa-plus" aria-hidden="true"></i></button>
</nav>
</div>
<div id="op">
<nav>
<input type="text" placeholder="operator" id="operator" disabled>
<button><i class="fa fa-plus" aria-hidden="true"></i></button>
<ul id="oplist">
</ul>
</nav>
</div>
<input type="text" placeholder="phone number" id="phone" disabled>
<input type="text" placeholder="name" id="pname" disabled>
<button id="verify">add number</button>
<button id="finish">finish</button>
</section>
</section>
<section id="search">
<section>
<input type="text" placeholder="enter number" id="regsearch">
<button id="searching">search</button>
<button id="add-more">add more</button>
<section id="info">
<h3 id="register"></h3>
<h4>country: <strong></strong></h4>
<h4>operator: <strong></strong></h4>
<h4>registered name: <strong></strong></h4>
</section>
</section>
</section>
<section id="checklist"></section>
</main>
</body>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
main{
width: 100%;
height: 100vh;
float: left;
background-image: url(../img/bg.jpeg);
background-size: cover;
background-position: center;
position: relative;
}
#invalid{
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.699);
position: absolute;
display: none;
z-index: 1001;
}
#invalid>h2{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: red;
font-size: 30px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-transform: uppercase;
}
#opadd, #zipadd{
width: 300px;
height: 300px;
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
background-color: rgba(133, 10, 10, 0.692);
border-radius: 6px;
z-index: 100;
display: none;
}
#opadd>section, #zipadd>section{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
align-content: center;
}
#add, #search{
width: 450px;
height: 350px;
position: absolute;
left: calc(50% - 225px);
top: calc(50vh - 175px);
background-color: rgba(66, 123, 209, 0.781);
border-radius: 6px;
box-shadow: 0 0 10px 3px rgb(0, 0, 0);
}
#add>section, #search>section{
width: 100%;
height: 100%;
display: flex;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-around;
border-radius: 6px;
}
::placeholder{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-transform: capitalize;
color: whitesmoke;
}
#add>section>input, #op>nav>input, #opadd>section>input, #search>section>input, #zipp>nav>input, #zipadd>section>input{
width: 180px;
height: 30px;
border: 2px solid rgba(145, 145, 145, 0.329);
background-color: rgba(255, 255, 255, 0);
padding: 0 5px;
color: whitesmoke;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-transform: capitalize;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
#add>section>input:focus, #zipp>nav>input:focus, #op>nav>input:focus, #opadd>section>input:focus, #search>section>input:focus, #zipadd>section>input:focus{
border: 2px solid rgb(233, 233, 233);
}
#op, #zipp{
width: 120px;
height: 30px;
display: flex;
flex-wrap: wrap;
}
#op>nav, #zipp>nav{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
}
#op>nav>input, #zipp>nav>input{
width: 65%;
}
#oplist{
width: 87%;
max-height: 100px;
position: absolute;
overflow-y: scroll;
top: 100%;
display: none;
}
#oplist>li{
width: 100%;
height: 25px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
color: whitesmoke;
text-transform: capitalize;
font-size: 13px;
list-style: none;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
border-bottom: 1px solid rgba(255, 255, 255, 0.616);
}
#add>section>button, #op>nav>button, #opadd>section>button, #search>section>button, #zipp>nav>button, #zipadd>section>button{
width: 115px;
height: 35px;
border-radius: 3px;
border: 2px solid rgba(255, 255, 255, 0.568);
text-transform: capitalize;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0);
color: white;
line-height: 35px;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
font-weight: 550;
}
#add>section>button:hover, #op>nav>button:hover,#search>section>button:hover, #zipp>nav>button:hover{
color: rgba(66, 123, 209, 0.781);
background-color: #fff;
}
#opadd>section>button:hover, #zipadd>section>button:hover{
color: rgba(133, 10, 10, 0.692);
background-color: #fff;
}
#search>section>button:hover{
color: rgba(7, 94, 100, 0.815);
}
#op>nav>button, #zipp>nav>button{
width: 20%;
border-radius: 2px;
line-height: 30px;
height: 30px;
margin-left: 3px;
}
#search{
display: none;
background-color: rgba(7, 94, 100, 0.815);
flex-direction: column;
align-items: center;
}
#info{
width: 100%;
height: 40%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-content: space-around;
padding: 10px;
}
#info>*{
color: whitesmoke;
text-transform: uppercase;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#info>h4>strong{
color: yellowgreen;
margin-left: 10px;
}
نظرات (0)