اطلب خدمتك الآن
!DOCTYPE html
html lang=en
head
meta charset=UTF-8
meta name=viewport content=width=device-width, initial-scale=1.0
titleGet a Quotation – Bahar Al-Ebdaatitle
style
root {
–dark-navy #0B1D2E;
–mid-blue #1A344A;
–brand-orange #FF9F00;
–white #ffffff;
}
body {
background-color var(–dark-navy);
color var(–white);
font-family ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif;
margin 0;
padding 0;
min-height 100vh;
}
Navigation
.nav-container {
max-width 1200px;
margin 0 auto;
padding 30px 20px 10px 20px;
}
.back-btn {
text-decoration none;
color var(–white);
font-size 0.85rem;
font-weight 600;
text-transform uppercase;
letter-spacing 1px;
padding 10px 20px;
border 1px solid rgba(255, 255, 255, 0.2);
border-radius 8px;
transition all 0.3s ease;
display inline-block;
}
.back-btnhover {
border-color var(–brand-orange);
color var(–brand-orange);
}
Main Content Wrapper
.main-wrapper {
max-width 1200px;
margin 20px auto 60px auto;
display flex;
gap 40px;
padding 0 20px;
align-items flex-start;
}
Left Side Branding & Info
.info-side {
flex 1;
position sticky;
top 40px;
}
.hero-card {
background-image linear-gradient(rgba(11, 29, 46, 0.6), rgba(11, 29, 46, 0.8)),
url(‘httpsi.postimg.cc15vzP0j3Gemini-Generated-Image-k4eca2k4eca2k4ec.png’);
background-size cover;
background-position center;
padding 60px 40px;
border-radius 20px;
border 1px solid rgba(255, 255, 255, 0.1);
box-shadow 0 20px 40px rgba(0,0,0,0.4);
margin-bottom 30px;
}
h1 {
margin 0;
font-size 2.5rem;
text-transform uppercase;
letter-spacing 4px;
line-height 1.2;
}
.highlight-text {
color var(–brand-orange);
display block;
font-size 1rem;
margin-top 15px;
letter-spacing 2px;
font-weight bold;
}
Right Side The Form
.form-side {
flex 1.2;
background-color var(–mid-blue);
padding 50px;
border-radius 20px;
box-shadow 0 15px 35px rgba(0,0,0,0.3);
border-top 5px solid var(–brand-orange);
}
.form-group { margin-bottom 25px; }
label {
display block;
font-size 0.8rem;
text-transform uppercase;
letter-spacing 1.5px;
margin-bottom 10px;
color var(–brand-orange);
font-weight 700;
}
input, select, textarea {
width 100%;
padding 16px;
background-color var(–dark-navy);
border 1px solid rgba(255, 255, 255, 0.05);
border-radius 10px;
color var(–white);
font-size 1rem;
box-sizing border-box;
transition all 0.3s ease;
}
inputfocus, selectfocus, textareafocus {
border-color var(–brand-orange);
background-color rgba(11, 29, 46, 0.8);
}
.row {
display flex;
gap 20px;
}
.row .form-group { flex 1; }
.submit-btn {
background-color var(–brand-orange);
color var(–dark-navy);
border none;
padding 20px;
font-size 1rem;
font-weight 800;
text-transform uppercase;
letter-spacing 2px;
border-radius 10px;
cursor pointer;
width 100%;
transition all 0.3s ease;
margin-top 10px;
}
.submit-btnhover {
background-color var(–white);
transform translateY(-3px);
}
Responsive Breakpoints
@media (max-width 1024px) {
.main-wrapper {
flex-direction column;
align-items stretch;
}
.info-side {
position relative;
top 0;
}
.form-side { padding 30px; }
}
@media (max-width 600px) {
.row { flex-direction column; gap 0; }
h1 { font-size 1.8rem; }
}
style
head
body
div class=nav-container
a href=httpsbahrebda3.comhomeenglishhome class=back-btn← Previous Pagea
div
div class=main-wrapper
div class=info-side
div class=hero-card
h1Request a brQuotationh1
span class=highlight-textElevating your digital presence.span
div
p style=opacity 0.7; line-height 1.6; padding 0 10px;
Fill out the form to help us understand your vision. Our team will analyze your requirements and get back to you with a tailored proposal.
p
div
div class=form-side
form
div class=form-group
labelFull Name Company Namelabel
input type=text placeholder=e.g. John Doe required
div
div class=row
div class=form-group
labelEmail Addresslabel
input type=email placeholder=email@example.com required
div
div class=form-group
labelPhone Numberlabel
input type=tel placeholder=+962 … required
div
div
div class=form-group
labelService Typelabel
select required
option value= disabled selectedSelect a service…option
optionBrand Strategy & Visual Identityoption
optionWeb Design & Developmentoption
optionGrowth Marketing & SEOoption
optionAI Solutions & Automationoption
option value=customCustomized Serviceoption
select
div
div class=form-group
labelProject Details & Commentslabel
textarea placeholder=Tell us more about your project goals…textarea
div
button type=submit class=submit-btnSubmit Requestbutton
form
div
div
body
html