diff --git b/img/Moments__logo.png a/img/Moments__logo.png new file mode 100644 index 0000000..811d932 Binary files /dev/null and a/img/Moments__logo.png differ diff --git b/img/asset_about_bg.png a/img/asset_about_bg.png new file mode 100644 index 0000000..dd3df17 Binary files /dev/null and a/img/asset_about_bg.png differ diff --git b/img/asset_app_store.png a/img/asset_app_store.png new file mode 100644 index 0000000..f439d1a Binary files /dev/null and a/img/asset_app_store.png differ diff --git b/img/asset_google_play.png a/img/asset_google_play.png new file mode 100644 index 0000000..91e71f7 Binary files /dev/null and a/img/asset_google_play.png differ diff --git b/img/asset_left_bg.png a/img/asset_left_bg.png new file mode 100644 index 0000000..f75d549 Binary files /dev/null and a/img/asset_left_bg.png differ diff --git b/img/asset_phone.png a/img/asset_phone.png new file mode 100644 index 0000000..11a59b6 Binary files /dev/null and a/img/asset_phone.png differ diff --git b/img/asset_right_bg.png a/img/asset_right_bg.png new file mode 100644 index 0000000..e2d262b Binary files /dev/null and a/img/asset_right_bg.png differ diff --git b/img/asset_slider.png a/img/asset_slider.png new file mode 100644 index 0000000..8a30180 Binary files /dev/null and a/img/asset_slider.png differ diff --git b/img/asset_store_bg.png a/img/asset_store_bg.png new file mode 100644 index 0000000..0644f54 Binary files /dev/null and a/img/asset_store_bg.png differ diff --git b/img/foot.png a/img/foot.png new file mode 100644 index 0000000..637ddf9 Binary files /dev/null and a/img/foot.png differ diff --git b/img/matrimony_index_new.png a/img/matrimony_index_new.png new file mode 100644 index 0000000..89b081f Binary files /dev/null and a/img/matrimony_index_new.png differ diff --git b/matrimony.html a/matrimony.html new file mode 100644 index 0000000..5bb0e96 --- /dev/null +++ a/matrimony.html @@ -0,0 +1,634 @@ +<html> + <head> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> + <title>Matrimony</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <style> + /********************* first part********************************************************/ + .mt-firstpart{ + height: 100%; + background-image: url("../img/asset_slider.png"); + background-repeat: no-repeat; + background-size: cover; + } + .mt-firstpart_conta { + /* text-align: center;*/ + max-width: 1000px; + + + } + .mt_frst{ + color: rgb(234, 7,137); + font-size: 52px; + width: 30%; + /* margin-left: 164px; */ + text-align: center; + margin: 0 auto; + font-weight: 100; + } + .mt_fst_b{ + font-size: 55px; + font-weight: 600; + } + .mt-firstpart_head{ + /* margin-left: 60px;*/ + margin: 0 auto; + text-align: center + } + .mt_frst_para{ + /*margin-left: 44px;*/ + text-align: center; + margin: 0 auto; + width: 58%; + font-size: 18px; + margin-top: 15px; + color: #333; + } + .mt_frst_line{ + width: 48px; + /* margin-left: 292px;*/ + text-align: center; + + border-radius: 14px; + border-bottom: 4px solid rgb(0,173, 239); + } + /******************** carousel silde******************************************/ + .carousel-inner > .item > img, + .carousel-inner > .item > a > img { + width: 100%; + margin: auto; + } + /* .container {width: 980px !important;} */ + .carousel-inner{ + height: 100%; + } + .carousel-indicators{ + top: 620px; + left: 50%; + } + .carousel-indicators li { + border:1px solid rgb(234, 7,137); + margin-left: 10px; + } + .carousel-indicators .active{ + background-color: rgb(234, 7,137); + margin-left: 10px; + } + .carousel-caption{ + top: 331px; + left:14px; + right:14px ; + text-shadow: none; + } + .carousel-control .glyphicon-chevron-left, + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-prev, + .carousel-control .icon-next { + display: none; + } + .left .carousel-control{ + display: none; + } + .right .carousel-control{ + display: none; + } + /*******************second part****************************************/ + + + .m-second_imagecls .col-md-6{ + padding:0px; + } + .m-second_imagecls img{ + width:100%; + object-fit: cover; + object-position: center; + } + + + + /*************************About matrimony**************************************************/ + .m_abt_matrimony{ + text-align: center; + background: url("./img/asset_about_bg.png"); + background-repeat: no-repeat; + background-size: cover; + padding-bottom: 150px; + } + .abt_fsthead{ + font-size: 33px; + font-weight: 500; + } + .m_abt_head{ + margin-top: 40px; + } + .abt_fsthead_m{ + font-size: 28px; + margin-top: 0px; + } + .mt_snd_line{ + width: 45px; + margin-left: 538px; + border-radius: 14px; + border-bottom: 4px solid rgb(0,173, 239); + } + .m_abt_para_p{ + text-align: justify; + color: rgb(152,152,152); + } + /******************download**************************************/ + .m_download{ + background: url("./img/asset_store_bg.png"); + background-repeat: no-repeat; + } + .m_dwd_img_i{ + width: 60%; + margin-top: -110px; + margin-left: 60px; + } + .m_dwd_head{ + margin-top: 80px; + } + .m_dwd_head_h2{ + font-size: 33px; + font-weight: 600; + } + .m_dwd_head_h3{ + font-size: 26px; + } + .mt_dwd_line{ + width: 48px; + margin-left: 0px; + border-radius: 14px; + border-bottom: 4px solid rgb(0,173, 239); + } + .m_dwd_link_img{ + width: 25%; + } + .m_dwd_cnt{ + margin-left: -64px; + } + /*****************************foot*******************************/ + .m_foot{ + background-color: rgb(55, 56, 58); + /* height: auto;*/ + color: rgb(164, 164, 165) + } + .m_foot_img{ + text-align: end; + padding: 10px; + /* border-right: 1px solid rgb(164, 164, 165);*/ + } + .m_foot_img img{ + padding-right: 19px; + border-right: 1px solid rgb(164, 164, 165); + margin-right: 28px; + } + .m_foot_link{ + font-size: 16px; + padding: 24px; + padding-right: 278px; + } + .m_foot_text{ + font-size: 16px; + padding: 24px; + } + + a{ + cursor: pointer; + } + .m_foot_a{ + margin-left: 19px; + } + .m_foot_row{ + margin-left: 0px; + margin-right: 0px; + } + .navbar{ + background: transparent; + height: 0%; + position:absolute; + min-height: 0px; + } + .navbar-brand{ + z-index: 2; + text-align: center; + padding: 0; + margin: 0; + } + .navbar-brand img{ + width: 28%; + margin-top: 145px; + } + /* 01. Smartphones (portrait and landscape) ----------- */ + +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { + .navbar{ + + height: 0% !important; + + } + .navbar-brand img{ + width: 70%; + margin-top: 107px !important; + } + .mt_frst{ + + font-size: 25px !important; + width: 48% !important; + + + } + .mt_snd_line { + + margin-left: 145px !important; + +} + .mt_fst_b{ + font-size: 27px; + + } + .mt_frst_para{ + text-align: justify !important; + width: 100% !important ; + } + .carousel-caption{ + top: 214px !important; + + } + .carousel-indicators{ + top: 532px !important; + + } + .m_dwd_cnt{ + margin-left: 0px !important; + text-align: center !important; + background-color: rgba(55, 56, 58,.5); + margin-top: 0px !important; + } + .m_dwd_img{ + text-align: center !important; + } + .m_dwd_img_i{ + width: 65%; + margin-top: 0px; + margin-left: 0px !important; + } + .m_dwd_head { + margin-top: 30px !important; +} + .m_dwd_head_h2{ + font-size: 25px !important; + margin-top: 1px !important; + margin-bottom: 9px !important; + color: white; + } + .m_dwd_head_h3{ + font-size: 19px !important; + margin-top: 0px !important; + margin-bottom: 0px !important; + margin-left: -8px !important; + color: white; + } + .mt_dwd_line{ + width: 28px !important; + margin-top: 4px !important; + margin-bottom: 4px !important; + margin-left: 146px !important; + + } + .m_dwd_link{ + margin-left: -35px !important; + color: white; + } + .m_dwd_link_img{ + width: 29%; + margin-left: 10px; + padding-bottom: 12px; + + } + + .m_foot_img img{ + border-right:none !important; + padding: 29px !important; + margin-right: 239px !important; + } + .m_foot_text { + font-size: 14px !important; + padding: 23px !important; + margin-left: 186px !important; + right: 161px !important; +} + +.m_foot_link { + display: grid !important; + + left: 18px !important; + padding: 8px !important; + +} +.m_foot_a { + + margin-top: 8px !important; +} +} + +@media only screen and (min-width: 900px) and (max-device-width: 1249px) { + + } + + @media only screen and (min-width: 1250px) and (max-device-width: 1359px) { + .mt-firstpart { + height: 82% !important; +} + } + @media only screen and (min-width: 1360px) and (max-device-width: 1399px) { + + } + @media only screen and (min-width: 1400px) and (max-device-width: 1600px) { + .mt-firstpart { + height: 82% !important; +} + } + + + + /* 08.0 Large screens ----------- */ + + @media only screen and (min-width: 1824px) { + .mt-firstpart { + height: 92% !important; +} +.m_download { + + background-size: cover !important; +} +.carousel-caption { + top: 547px !important; + +} +.carousel-indicators { + top: 859px !important; + +} +.mt_frst { + + font-size: 61px !important; + width: 32% !important; + +} +.mt_fst_b { + font-size: 59px !important; + +} +.mt_frst_para { + font-size: 22px !important; +} + } + /* 04.0 iPads (portrait and landscape) ----------- */ + +@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { + .navbar { + height: 0% !important; +} +.navbar-brand img { + width: 42% !important; + +} +.m_dwd_img_i { + width: 77% !important; + margin-top: -66px !important; + margin-left: 0px !important; +} +.mt_snd_line { + + margin-left: 324px !important; + +} +.mt-firstpart { + height: 37% !important; + +} +.mt_frst{ + font-size: 40px !important; + width: 34% !important;} + .mt_fst_b{ + font-size: 46px !important; + } +.carousel-caption { + top: 108px !important; + +} +.navbar-brand img { + + margin-top: 0px !important; +} +.carousel-indicators{ + top:353px !important; +} +.m_foot_link{ + padding-right: 0px !important; +} +} + + +/* 10.0 iPhone 5 ----------- */ + +@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) { + .m_foot_img { + + + margin-left: 16px !important; + margin-right: 52px !important; +} +.m_foot_link{ + font-size: 16px; + padding: 24px; + width: 100% !important; + padding-left: 101px; + margin-left: 0px !important; + margin-right: 20px !important; +} +} +/* 09.0 iPhone 4 ----------- */ + +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { + .m_foot_img { + + + + margin-left: 16px !important; + margin-right: 52px !important; +} +.m_foot_link { + font-size: 16px; + padding: 24px; + width: 100% !important; + padding-left: 101px; + margin-left: 0px !important; + margin-right: 20px !important; +} +} + + </style> + </head> + <body> + <div class="matrmony-life"> + <nav class="navbar navbar-expand-sm justify-content-center"> + <a class="navbar-brand" href="#"><img src="./img/Moments__logo.png"></a> + + </nav> + <!----------------first part-----------------------------------------> + <div class="mt-firstpart"> + <div id="myCarousel" class="carousel slide" data-ride="carousel"> + + <ol class="carousel-indicators"> + <li data-target="#myCarousel" data-slide-to="0" class="active"></li> + <li data-target="#myCarousel" data-slide-to="1"></li> + <li data-target="#myCarousel" data-slide-to="2"></li> + </ol> + + <div class="carousel-inner" role="listbox"> + <div class="item active"> + + <div class="carousel-caption"> + <div class="container mt-firstpart_conta "> + <div class="mt-firstpart_head"> + <h3 class="mt_frst">Find Your <b class="mt_fst_b">life partner</b></h3> + <p class="mt_frst_para">Lorem ipsum dolo sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore + </p> + <hr class="mt_frst_line"> + </div> + </div> + </div> + </div> + <div class="item"> + <div class="carousel-caption"> + <div class="container mt-firstpart_conta "> + <div class="mt-firstpart_head"> + <h3 class="mt_frst">Find Your <b class="mt_fst_b">life partner</b></h3> + <p class="mt_frst_para">Lorem ipsum dolo sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore + </p> + <hr class="mt_frst_line"> + </div> + </div> + </div> + </div> + <div class="item"> + + <div class="carousel-caption"> + <div class="container mt-firstpart_conta "> + <div class="mt-firstpart_head"> + <h3 class="mt_frst">Find Your <b class="mt_fst_b">life partner</b></h3> + <p class="mt_frst_para">Lorem ipsum dolo sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore + </p> + <hr class="mt_frst_line"> + </div> + </div> + </div> + </div> + </div> + + <!---- <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> + <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> + <span class="sr-only">Previous</span> + </a> + <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> + <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> + <span class="sr-only">Next</span> + </a>---> + </div> + + <!----------------------second part -----------------------------------------------------> + + <div class="m-second_imagecls"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-6"> + <img class="m-snd_image" src="./img/asset_left_bg.png"> + </div> + <div class="col-md-6"> + <img class="m-snd_rhtimage" src="./img/asset_right_bg.png"> + </div> + </div> + </div> + </div> + <!---------------------------------About matrimony---------------------------------------------------------> + <div class="m_abt_matrimony"> + <div class="container"> + <div class="m_abt_head"> + <h2 class="abt_fsthead">About</h2> + <h3 class="abt_fsthead_m" > matrimony</h3> + <hr class="mt_snd_line"> + </div> + <div class="m_abt_para"> + <p class="m_abt_para_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laundantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem + quia voluptas sit aspernatur aut fugit, sed quia consequuntur magni dolores eos uqi ratione voluptatem sequi nesciunt. Neque + porro quisquam est, qui dolorem ipsum dolorem ipsum quia dolor sit amet, consectetur, adipsci velit, sed quia nion numquam eius modi tempora incididunt + ut labore et dolore maganam aliquam quaerat voluptatem. + </p> + </div> + </div> + </div> + <!------------------------------------download----------------------------------------------------------> + <div class="m_download"> + <div class="container"> + <div class="row"> + <div class="col-md-6 m_dwd_img"> + <img class="m_dwd_img_i" src="./img/asset_phone.png"> + </div> + <div class=" col-md-6 m_dwd_cnt"> + <div class="m_dwd_head"> + <h2 class="m_dwd_head_h2">Download</h2> + <h3 class="m_dwd_head_h3">Our app here</h3> + <hr class="mt_dwd_line"> + </div> + <div class="m_dwd_link"> + <p>Available for</p> + <img class="m_dwd_link_img" src="./img/asset_app_store.png"> + <img class="m_dwd_link_img" src="./img/asset_google_play.png"> + </div> + </div> + </div> + </div> + + </div> + <!----------------------------------footer----------------------------------------------------------> + <div class="m_foot"> + <div class="m_foot_cls"> + <div class="row m_foot_row"> + <div class="col m_foot_img"> <img src="./img/foot.png"> + + </div> + <div class="col m_foot_link"> + <a class="m_foot_a">Link 1</a> + <a class="m_foot_a">Link 2</a> + <a class="m_foot_a">Link 3</a> + <a class="m_foot_a">Link 4</a> + <a class="m_foot_a">Link 5</a> + + </div> + <div class="col m_foot_text"> <p>copyright matrimony 2018-2019</p></div> + + </div> + + </div> + + </div> + </div> + </body> + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> +</html> \ No newline at end of file