Please tell me a couple of questions:

  1. Really make such a mold "Promotion! Only 18 days" and how?

  2. How to make the border that comes "Designer's departure and design project" and this is interrupted?

Img

    2 answers 2

    Example

    * { padding: 0; margin: 0; box-sizing: border-box; } .bg-action { min-height: 400px; background: url(http://cbsnews2.cbsistatic.com/hub/i/r/2017/01/01/5309e962-9cdf-414a-9725-86ecef4b4530/thumbnail/1200x630/2293ab016a39d09b16a77184387a8d4a/0101-sunmo-nature-butterflies-1221687-640x360.jpg) no-repeat center top; background-size: cover; } .b-action { max-width: 970px; margin: 0 auto; padding: 50px 15px; text-align: center; } .b-action-info { display: inline-block; vertical-align: middle; margin-bottom: 25px; background: #ddd; color: #000; padding: 10px; position: relative; padding: } .b-action-info:before, .b-action-info:after { content: ''; position: absolute; top: 0; width: 38px; height: 38px; background: #ddd; } .b-action-info:before { left: -20px; border-radius: 0 50% 0 50%; transform: rotate(-45deg); } .b-action-info:after { right: -20px; border-radius: 50% 0 50% 0; transform: rotate(45deg); } .b-action-info > span { position: relative; z-index: 1; } .b-form { max-width: 500px; margin: 25px auto; } .b-form fieldset { border: 1px solid #fff; color: #fff; font-size: 25px; } 
     <section class="bg-action"> <div class="b-action"> <div class="b-action-info"> <span>Info action</span> </div> <form action="#" method="post" class="b-form"> <fieldset> <legend>Title form</legend> <input type="text" required> <input type="submit" value="send"> </fieldset> </form> </div> </section>

    • Works in chrome, opera, legend in Fairfox is pressed to the left :( - YourDeveloper
    • for firefox <form align = "center"> Title form </ legend> - soledar10

    The title “Designer's departure and design project” should be arranged with a separate DIV, positioned it using position:relative (for example) and use z-index:100 (for the element to cover other elements).

     html, body, #entire-div { width:100%; height:100%; padding:0px; margin:0px; } #cont-div { position:relative; top:25%; left:25%; width:50%; height:50%; border:2px solid red; background-color:gray; opacity:0.5; } #frame-div { width:80%; height:50%; margin:10%; margin-top:8%; border:2px solid white; background-color:yellow; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:5%; } #header-div { position: relative; display:block; width:20%; height:10%; top:30%; left:40%; z-index:100; background-color:LightGreen; text-align:center; border:1px solid red; } 
     <div id='entire-div'> <div id='cont-div'> <div id='header-div'> Attention!!! </div> <div id='frame-div'> Blablabla LA LA </div> </div> </div>

    • Because there are already all sections for html, for css, for js. I made the edit. - VostokSisters
    • Well, now I will try, but what about the first question? This form really create? - YourDeveloper
    • @YourDeveloper, I have recently answered the first question - jQuery.mask - stackoverflow.com/questions/624201/… ... - Eugene Bartosh
    • @VostokSisters, thanks, I wanted to understand how they do it)) - Eugene Bartosh
    • @EugeneBartosh something went wrong