survey

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<div class="survey-container survey--state-load hide survey--state-up" style="display: block; height: 200px;">

	<div class="survey-content">

		<h3>Customer Survey</h3>
		<h4>Thanks for visiting Screwfix. Help us improve our service to you by answering these quick questions</h4>

		<div>
			<div class="lg-4 md-6 sm-12 cols">
				<button class="btn btn--lg fill survey-yes">Yes</button>
			</div>
			<div class="lg-5 md-7 sm-12 cols">
				<button class="btn btn--lg fill survey-no">No thanks</button>
			</div>
		</div>

	</div>
	
</div>

CSS

.survey-container {
    width: 100%;
    position: fixed;
    z-index: 21;
    background: #000;
    background-color: rgba(0,0,0,.8);
    bottom: 0;
    transition: bottom .5s ease-in-out
}

.survey-container .survey-content {
    padding: 40px 0;
    margin: 0 88px;
    overflow: hidden
}

@media only screen and (min-width: 40.063em) and (max-width:64em) {
    .survey-container .survey-content {
        margin:0 58px
    }
}

@media only screen and (max-width: 40em) {
    .survey-container .survey-content {
        padding:20px 0;
        margin: 0 15px
    }
}

.survey-container h3 {
    font-size: 22px;
    line-height: 17px;
    color: #fff;
    margin: 0 0 18px
}

.survey-container h4 {
    font-size: 18px;
    line-height: 17px;
    color: #fff;
    margin: 0 0 22px
}

@media only screen and (max-width: 64em) {
    .survey-container h4 {
        font-size:16px;
        line-height: 18px
    }
}

.survey--state-down {
    bottom: 0
}

.survey--state-up {
    bottom: -300px
}

.survey--state-load {
    bottom: 0!important
}