1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 " />
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1, shrink-to-fit=no " />
7+ < meta http-equiv ="x-ua-compatible " content ="ie=edge " />
8+ < title > Material Design for Bootstrap</ title >
9+ <!-- MDB icon -->
10+ < link rel ="icon " href ="img/mdb-favicon.ico " type ="image/x-icon " />
11+ <!-- Font Awesome -->
12+ < link rel ="stylesheet " href ="https://use.fontawesome.com/releases/v5.15.2/css/all.css " />
13+ <!-- Google Fonts Roboto -->
14+ < link rel ="stylesheet " href ="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap " />
15+ <!-- MDB -->
16+ < link rel ="stylesheet " href ="css/bootstrap-address-form.min.css " />
17+ </ head >
18+
19+ < body >
20+ <!-- Start your project here-->
21+ < style >
22+ .title-style {
23+ font-family : Georgia, 'Times New Roman' , Times, serif;
24+ font-weight : 700 ;
25+ font-size : 20px ;
26+ color : hsl (52 , 0% , 98% );
27+ }
28+ .title-quote {
29+ font-family : Georgia, 'Times New Roman' , Times, serif;
30+ font-weight : 400 ;
31+ color : hsl (52 , 0% , 98% );
32+ }
33+ </ style >
34+ < div class ="container py-5 ">
35+ < div class ="row d-flex justify-content-center align-items-center ">
36+ < div class ="col ">
37+ < div class ="card my-4 shadow-3 ">
38+ < div class ="row g-0 ">
39+ < div class ="col-xl-6 d-xl-block bg-image ">
40+ < img src ="https://mdbcdn.b-cdn.net/img/Others/extended-example/delivery.webp "
41+ alt ="Sample photo " class ="img-fluid " />
42+ < div class ="mask " style ="background-color: rgba(0, 0, 0, 0.6) ">
43+ < div class =" justify-content-center align-items-center h-100 ">
44+ < div class =" text-center " style ="margin-top: 220px; ">
45+ < i class ="fas fa-truck text-white fa-3x "> </ i >
46+ < p class ="text-white title-style "> Lorem ipsum delivery</ p >
47+ < p class ="text-white mb-0 "> </ p >
48+
49+ < figure class ="text-center mb-0 ">
50+ < blockquote class ="blockquote text-white ">
51+ < p class ="pb-3 ">
52+ < i class ="fas fa-quote-left fa-xs text-primary "
53+ style ="color: hsl(210, 100%, 50%) ; "> </ i >
54+ < span class ="lead font-italic "> Everything at your doorstep.</ span >
55+ < i class ="fas fa-quote-right fa-xs text-primary "
56+ style ="color: hsl(210, 100%, 50%) ; "> </ i >
57+ </ p >
58+ </ blockquote >
59+
60+ </ figure >
61+ </ div >
62+ </ div >
63+ </ div >
64+ </ div >
65+ < div class ="col-xl-6 ">
66+ < div class ="card-body p-md-5 text-black ">
67+ < h3 class ="mb-4 text-uppercase "> Delivery Info</ h3 >
68+
69+ < div class ="row ">
70+ < div class ="col-md-6 mb-4 ">
71+ < div class ="form-outline ">
72+ < input type ="text " id ="form3Example1m " class ="form-control form-control-lg " />
73+ < label class ="form-label " for ="form3Example1m "> First name</ label >
74+ </ div >
75+ </ div >
76+ < div class ="col-md-6 mb-4 ">
77+ < div class ="form-outline ">
78+ < input type ="text " id ="form3Example1n " class ="form-control form-control-lg " />
79+ < label class ="form-label " for ="form3Example1n "> Last name</ label >
80+ </ div >
81+ </ div >
82+ </ div >
83+
84+ < div class ="form-outline mb-4 ">
85+ < input type ="text " id ="form3Example8 " class ="form-control form-control-lg " />
86+ < label class ="form-label " for ="form3Example8 "> Address</ label >
87+ </ div >
88+
89+
90+
91+ < div class ="row ">
92+ < div class ="col-md-6 mb-4 ">
93+
94+ < select class ="select ">
95+ < option value ="1 "> State</ option >
96+ < option value ="2 "> Option 1</ option >
97+ < option value ="3 "> Option 2</ option >
98+ < option value ="4 "> Option 3</ option >
99+ </ select >
100+
101+ </ div >
102+ < div class ="col-md-6 mb-4 ">
103+
104+ < select class ="select ">
105+ < option value ="1 "> City</ option >
106+ < option value ="2 "> Option 1</ option >
107+ < option value ="3 "> Option 2</ option >
108+ < option value ="4 "> Option 3</ option >
109+ </ select >
110+
111+ </ div >
112+ </ div >
113+
114+ < div class ="form-outline mb-4 ">
115+ < input type ="text " id ="form3Example3 " class ="form-control form-control-lg " />
116+ < label class ="form-label " for ="form3Example3 "> Zip</ label >
117+ </ div >
118+
119+ < div class ="form-outline mb-4 ">
120+ < input type ="text " id ="form3Example2 " class ="form-control form-control-lg " />
121+ < label class ="form-label " for ="form3Example2 "> Email</ label >
122+ </ div >
123+
124+ < div class ="d-flex justify-content-end pt-3 ">
125+ < button type ="button " class ="btn btn-success btn-lg ms-2 "
126+ style ="background-color:hsl(210, 100%, 50%) "> Place order</ button >
127+ </ div >
128+
129+ </ div >
130+ </ div >
131+ </ div >
132+ </ div >
133+ </ div >
134+ </ div >
135+ </ div >
136+ <!-- End your project here-->
137+
138+ <!-- MDB -->
139+ < script type ="text/javascript " src ="js/mdb.min.js "> </ script >
140+ <!-- Custom scripts -->
141+ < script type ="text/javascript "> </ script >
142+ </ body >
143+
144+ </ html >
0 commit comments