Could anyone help me leave a content responsive?

Question

Could anyone help me leave a content responsive?

Navigation

#1 by (0 votes)

-3

Well I'm creating a one page vertical site, and I wanted to create a default content to use in all sections of the page (to be able to be centralized) can anybody help me? I was trying to work with%, but it did not work.

The page looks like this:

Iwantedtocreateadivwithclasscontentnametoleaveallthecontentofthesitewithinthatdivwithapredefinedsizeeg:

Itdoesnothavetobeexactlythatsizeifsomeonecanatleasthelpmewithanexample..

code:

html, body, .page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transition: all .6s ease-out;
  color: #fff;
  overflow: hidden; 
}

* {
  font-family: 'open sans', 'lato', 'helvetica', sans-serif;
}

.page {
  position: absolute;
  transition-delay: 1s;
}

#p1 {
  left: 0;
}

#p2, #p3, #p4, #p5 {
  left: -200%;
}

#p1 { background: darkslateblue; }
#p2 { background: tomato; }
#p3 { background: gold; }
#p4 { background: deeppink; }
#p5 { background: rebeccapurple; }

#t2:target #p2,
#t3:target #p3,
#t4:target #p4,
#t5:target #p5 {
  transform: translateX(200%);
  transition-delay: .2s !important;
}

#t2:target #p1 .icon, 
#t3:target #p1 .icon,
#t4:target #p1 .icon,
#t5:target #p1 .icon {
  -webkit-filter: blur(2px);
}

.icon {
  color: #fff;
  font-size: 18px;
  display: block;
}

ul .icon:hover {
  opacity: 0.5;
}

.page .icon .title {
  line-height: 2;
}




ul {
  background-color: seagreen;
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 100%;
  width: 20%;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }



a {
  text-decoration: none;
}

.title, .hint {
  display: block;
}

.title {
  font-size: 38px;
}

.hint {
  font-size: 13px;
}

#p4 .hint {
  display: inherit !important;
}

.hint a {
  color: yellow;
  transition: all 250ms ease-out;
  -webkit-transition: all 250ms ease-out;
  -moz-transition: all 250ms ease-out;
  -o-transition: all 250ms ease-out;
}

.hint a:hover {
  color: #FFF;
}

.line-trough {
  text-decoration: line-through;
}

.page .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10%;
  left: 0;
  width: 270px;
  height: 170px;
  margin: auto;
  text-align: center;
  font-size: 80px;
  line-height: 1.3;
  /*transform: translateX(360%);
  -webkit-transform: translateX(360%);
  -moz-transform: translateX(360%);
  -o-transform: translateX(360%);
  transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -webkit-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -moz-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -o-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);*/
}

.page#p1 .icon {
  height: 220px;
}

.page#p1 .icon {
  transform: translateX(10%) !important;
}

#t2:target .page#p2 .icon,
#t3:target .page#p3 .icon,
#t4:target .page#p4 .icon,
#t5:target .page#p5 .icon {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  -moz-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  transition-delay: 1s;
}



#_opcoes_main{
   font-size: 0;
   display: block;
   width: 100%;
   text-align: center;
   color: #444;
}

._opcoes_div{
   display: inline-block;
   margin: 10px 0;
   vertical-align: top;
   font-size: 18px;
   width: calc(100% / 3.5);
   min-width: 300px;
}

._opcoes_div em{
   color: #2896c8;
   font-size: 1.2em;
   font-weight: bold;
}

._opcoes_div p{
   font-size: .8em;
   font-weight: bold;
   margin: 3px 0;
}

._opcoes_div select{
   border: 1px solid #ddd;
   padding: 10px 15px;
   margin-bottom: 10px;
   width: 200px;
   font-size: .8em;
}

._opcoes_div img{
   height: 120px;
   margin: 70px 0 35px;
}

#_botao_valor{
   font-size: 0;
   border: 2px solid #000;
   margin-top: 20px;
   display: inline-block;
   cursor: pointer;
   padding: 0;
   filter: grayscale(100%);
   transition: all .2s ease-in-out;
}

#_botao_valor:hover{
   filter: grayscale(0%);
}

#_botao_valor div{
   font-size: 18px;
   display: inline-block;
}

#_botao_valor div:nth-child(1){
   font-weight: bold;
   background: #eff2f4;
   padding: 12px;
   border-right: 1px solid #000;
}

#_botao_valor div:nth-child(2){
   font-weight: bold;
   background: green;
   padding: 12px 20px;
   color: #fff;
}


#_errmsg{
   color: #f30;
   font-size: 18px;
   margin-top: 20px;
   display: inline-block;
}

#_botao label{
   font-size: 16px;
}

#_botao label #_email{
   font-size: 18px;
   border: 1px solid #bbb;
   padding: 10px;
   margin: 3px 0 20px;
   width: 270px;
}

#_modal{
   display: none;
   width: 276px;
   padding: 15px;
   background: #090;
   color: #fff;
   text-align: center;
   position: fixed;
   z-index: 99999999999999;
   border: 1px solid #000;
   -webkit-box-shadow: 0px 6px 14px -2px rgba(0,0,0,0.75);
   -moz-box-shadow: 0px 6px 14px -2px rgba(0,0,0,0.75);
   box-shadow: 0px 6px 14px -2px rgba(0,0,0,0.75);
   -webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);top:50%;left:50%;
   font-size: 20px;
}

#_modal_fecha{
   position: absolute;
   cursor: pointer;
   background: #000;
   border-radius: 100%;
   padding: 5px;
   top: -15px;
   right: -4px;
   width: 25px;
   height: 25px;
   line-height: 25px;
}

.contentpg{
	width: 1280px;
	top:50%;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>
	<link rel="stylesheet" href="style/ct.css">
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
		  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
	

	<div class="ct" id="t1">
  <div class="ct" id="t2">
    <div class="ct" id="t3">
      <div class="ct" id="t4">
         <div class="ct" id="t5">
          <ul id="menu">
            <a href="#t1">Vitorias/Wins</a>
            <a href="#t2">Elo Boost</a>
            <a href="#t3">Duo Boost</a>
            <a href="#t4">Melhor de 10</a>
  
          </ul>
          <div class="page" id="p1">
         <section ="EloJoob">
			 		<div class="contentpg">
			  <div id="_opcoes_main">
   <form target="_blank" action="elos2.php" id="_form" onsubmit="return valEmail()" method="post">
      <input type="hidden" id="_valortt" name="_valortt" />
      <div class="_opcoes_div">
         <em>1.</em> <strong>Selecione a Liga e Divisão atual</strong>
         <br />
         <img id="img_ligatual" src="img_bronze.jpeg" />
         <br />
         <p>Liga</p>
         <select name="lig_atu" id="lig_atu">
            <option value="bronze">Bronze</option>
            <option value="prata">Prata</option>
            <option value="ouro">Ouro</option>
            <option value="platina">Platina</option>
            <option value="diamante">Diamante</option>
         </select>
         <br />
         <p>Divisão</p>
         <select name="div_atu" id="div_atu">
            <option value="v">V</option>
            <option value="iv">IV</option>
            <option value="iii">III</option>
            <option value="ii">II</option>
            <option value="i">I</option>
         </select>
      </div>
      <div class="_opcoes_div">
         <em>2.</em> <strong>Selecione a Liga e Divisão desejada</strong>
         <br />
         <img id="img_ligades" src="img_bronze.jpeg" />
         <br />
         <p>Liga</p>

         <select name="lig_des" id="lig_des">
            <option value="bronze">Bronze</option>
            <option value="prata">Prata</option>
            <option value="ouro">Ouro</option>
            <option value="platina">Platina</option>
            <option value="diamante">Diamante</option>
         </select>
         <br />
         <p>Divisão</p>
         <select name="div_des" id="div_des">
            <option value="v">V</option>
            <option value="iv">IV</option>
            <option value="iii">III</option>
            <option value="ii">II</option>
            <option value="i">I</option>
         </select>
      </div>
      <div class="_opcoes_div">
         <em>3.</em> <strong>Selecione a Fila desejada</strong>
         <br />
         <img id="img_flex" src="img_soloduo.jpeg" />
         <br />
         <p>Fila</p>
         <select name="_fila" id="_fila">
            <option value="solo/duo">Solo/Duo</option>
            <option value="flex">Flex</option>
         </select>
      </div>
      <br clear="all" />
      <div id="_botao">
         <div id="_errmsg" style="display: none;">Erro</div>
         <div id="_botao_email" style="display: none;">
            <label>
               <strong>E-mail</strong>
               <br />
               <input onkeyup="$('#_botao #_botao_email label strong').html('E-mail').css('color','#444')" required="required" id="_email" name="_email" type="email" placeholder="Insira seu e-mail" />
            </label>
            <br />
            <button type="submit" id="_botao_valor">
               <div>
                  R$ 0,00
               </div>
               <div>
                  ADQUIRIR
               </div>
            </button>
         </div>
      </div>
   </form>
   <div id="_modal">
      Obrigado pela compra!
      <span id="_modal_fecha" onclick="$('#_modal').hide()">X</span>
   </div>
</div>
			 </div>

			  </section> 
          </div>
          <div class="page" id="p2">
            <section class="icon fa fa-keyboard-o"><span class="title">Type</span></section>
          </div>  
          <div class="page" id="p3">
            <section class="icon fa fa-rocket"><span class="title">Rocket</span></section>
          </div>
          <div class="page" id="p4">
            <section class="icon fa fa-dribbble">
              <span class="title">Dribbble</span>
              <p class="hint">
                <a href="https://dribbble.com/albertohartzet" target="_blank">Im ready to play, <span class="hint line-trough">invite me </span> find me</a>
              </p>
              <p class="hint">Already invited by <a href="http://www.dribbble.com/mrpeters" target="_blank">Stan Peters</a></p>
            </section>
          </div> 
          <div class="page" id="p5">
            <section class="icon fa fa-plus-circle">
              <span class="title">More</span>
              <p class="hint">
                <span>You love one page & CSS only stuff? </span><br/>
                <a href="https://codepen.io/hrtzt/details/pgXMYb/" target="_blank">check this pen "Pure CSS One page vertical navigation"</a>
              </p>
            </section>
          </div> 
        </div>
      </div>
    </div>
  </div>
</div>



</body>
</html>

An example: link

css

asked by anonymous 06.01.2018 / 20:38

1 answer

How to generate a small set of alphanumeric characters in PHP? [duplicate] Search the database and compare

score 0 · Answer 1

John, when you start developing a responsive layout, you need to add the tag responsible for telling the browser that that site is responsive.

I'll leave some links for you to study that will help you with this responsive layout issue.

First read this article, Responsive Design in practice 2: from layout to HTML , as it will give you an important foundation before you go next, Responsive Development and Viewport .