JavaScript - hacer responsive mi pagina web

 
Vista:
sin imagen de perfil
Val: 15
Ha aumentado su posición en 7 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer responsive mi pagina web

Publicado por lizeth (4 intervenciones) el 22/05/2019 10:07:39
buenos dias quisiera que me ayuden por favor en mi pagina web que hice tengo dos formularios que quiero volver responsive pero no puedo no se si me pueden ayudar
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer responsive mi pagina web

Publicado por joel (895 intervenciones) el 22/05/2019 10:40:00
Hola Lizeth, si, en que puedo ayudarte?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 15
Ha aumentado su posición en 7 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer responsive mi pagina web

Publicado por lizeth (4 intervenciones) el 22/05/2019 10:42:31
este es mi codigo css, pero ya intente de todo no se puedo hacer que sea responsive

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
 
body, html {
  height: 100%;
  font-family: Poppins-Regular, sans-serif;
}
 
h1,h2,h3,h4,h5,h6 {
  margin: 10px;
}
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-width: 1200px;
}
 
.container-contact100 {
  width: 100%;
  min-height: 100vh;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: #ffe6ff;
 
}
 
.wrap-contact100 {
  width: 1200px;
  background: #ffcccc;
  border-radius: 20px;
  overflow: hidden;
  padding: 62px 55px 90px 55px;
}
 
/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a #00ad5f background */
.container input:checked ~ .checkmark {
  background-color: #ff0066;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.form-title {
  display: block;
  width: 100%;
  font-family: Montserrat-Black;
  font-size: 39px;
  color: #000000;
  line-height: 1.2;
  text-align: center;
  padding-bottom: 59px;
}


.container-contact100-form-btn {

  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
  width: 100%;
}

.contact100-form-btn {

  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;
  background-color: #999;
  border-radius: 25px;

  font-family: Montserrat-Medium;
  font-size: 16px;
  color: #fff;
  line-height: 1.2;

}

.contact100-form-btn:hover {
  background-color: #ff4d4d;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer responsive mi pagina web

Publicado por joel (895 intervenciones) el 22/05/2019 11:46:28
Hola Lizeth, y el código HTML?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 15
Ha aumentado su posición en 7 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer responsive mi pagina web

Publicado por lizeth (4 intervenciones) el 22/05/2019 14:27:31
es este perdon la tardanza

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html>
   <head>
    <title>La Obesidad</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
    user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="css/fontello.css">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="short icon" href="img/pipo.jpg">
 
   </head>
 
   <body>
      <header>
         <div class="contenedor">
             <h1 class="icon-child">Test</h1>
             <input type="checkbox" id="menu-bar">
             <label class="icon-menu"for="menu-bar"></label>
             <nav class="menu">
                <a href="ini.html">Inicio</a>
                <a href="conse.html">Consecuencias</a>
                <a href="solu.html">Soluciones</a>
                <a href="cont.html">Contacto</a>
                <a href="test.html">Test</a>
             </nav>
         </div>
      </header>
 
      <main>
        <section id="banner">
          <img src="img/banner.jpg">
          <div class="contenedor">
             <h2>Test</h2>
             <a href="loco.html">Leer mas</a>
          </div>
        </section>
 
        <section>
            <div class="container-contact100">
    <div class="wrap-contact100">
      <form>
        <span class="form-title">
          Test de la huella ecologica
        </span>
 
        <h3>1.-¿Cuantas frutas y verduras producidas en tu region?</h3>
        <label class="container">Si y prefiero las que vienen sin envasar
          <input type="radio" value="2" name="p1" id="p1a"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">Si, aunque aveces las compro envasadas
          <input type="radio" value="10" name="p1" id="p1b"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">No, compro productos de otras regiones que, en muchas ocasiones, estan envasadas
          <input type="radio" value="20" name="p1" id="p1c"/>
          <span class="checkmark"></span>
        </label>
 
        <h3>2.-¿Que haces con los restos de comida que sobran?</h3>
        <label class="container">Los tiro directamente a la basura
          <input type="radio" value="150" name="p2" id="p2a"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">Procuro aprovecharlos
          <input type="radio" value="50" name="p2" id="p2b"/>
          <span class="checkmark"></span>
        </label>
 
        <h3>3.-¿Que transporte utilizas para tus actividades diarias?</h3>
        <label class="container">Transporte publico
          <input type="radio" value="5" name="p3" id="p3a"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">Voy en bici o caminando
          <input type="radio" value="3" name="p3" id="p3b"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">Uso el coche
          <input type="radio" value="70" name="p3" id="p3c"/>
          <span class="checkmark"></span>
        </label>
 
        <h3>4.-¿Cuando usas la lavadora?</h3>
        <label class="container">Espero a tener suficienteropa para llenarla
          <input type="radio" value="85" name="p4" id="p4a"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">La pongo en cuanto la necesito, sin importar la cantidad
          <input type="radio" value="100" name="p4" id="p4b"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">Espero a tener suficiente ropa y compre un modelo ahorrador
          <input type="radio" value="40" name="p4" id="p4c"/>
          <span class="checkmark"></span>
        </label>
 
        <h3>5.-¿Que tipo de calentador utilizas?</h3>
        <label class="container">Solar
          <input type="radio" value="5" name="p5" id="p5a"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">De gas
          <input type="radio" value="45" name="p5" id="p5b"/>
          <span class="checkmark"></span>
        </label>
 
        <h3>6.-Cuando no estas usando aparatos electricos, ¿Los desconectas?</h3>
        <label class="container">Casi siempre
          <input type="radio" value="5" name="p6" id="p6a"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">Nunca
          <input type="radio" value="40" name="p6" id="p6b"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">Algunas veces
          <input type="radio" value="30" name="p6" id="p6c"/>
          <span class="checkmark"></span>
        </label>
        <h3>7.-¿Qué haces con los residuro que produces en tu hogar?</h3>
        <label class="container">Los pongo en un unico bote
          <input type="radio" value="70" name="p7" id="p7a"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">Los trato de reutilizar o los separo y los comprimo
          <input type="radio" value="55" name="p7" id="p7b"/>
          <span class="checkmark"></span>
        </label>
 
        <h3>8.-Cuando lavas los trastes</h3>
        <label class="container">Abres solo la llava para enjuagar
          <input type="radio" value="5" name="p8" id="p8a"/>
            <span class="checkmark"></span>
        </label>
        <label class="container">Mantienes la llave abierta mientras los enjabonas
          <input type="radio" value="15" name="p8" id="p8b"/>
            <span class="checkmark"></span>
        </label>
 
        <h3>9.-¿Cuanto te tardas en bañarte?</h3>
        <label class="container">Menos de 5 minutos
          <input type="radio" value="5" name="p9" id="p9a"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">Entre 5 a 10 minutos
          <input type="radio" value="10" name="p9" id="p9b"/>
          <span class="checkmark"></span>
        </label>
        <label class="container">Mas de 10 minutos
          <input type="radio" value="15" name="p9" id="p9c"/>
          <span class="checkmark"></span>
        </label>
 
        <div class="container-contact100-form-btn">
          <button class="contact100-form-btn" onclick="resultado()">
            <span>
              Enviar
              <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
            </span>
          </button>
        </div>
      </form>
    </div>
  </div>
  <script type="text/javascript">
    function resultado(){
      var res = 0;
 
      var p1=document.getElementsByName("p1");
          for(var i=0;i<p1.length;i++){
              if(p1[i].checked)
                  res+= parseInt(p1[i].value);
          }
 
          var p2=document.getElementsByName("p2");
          for(var i=0;i<p2.length;i++){
              if(p2[i].checked)
                  res += parseInt(p2[i].value);
          }
 
          var p3=document.getElementsByName("p3");
          for(var i=0;i<p3.length;i++){
              if(p3[i].checked)
                  res += parseInt(p3[i].value);
          }
 
          var p4=document.getElementsByName("p4");
          for(var i=0;i<p4.length;i++){
              if(p4[i].checked)
                  res += parseInt(p4[i].value);
          }
 
          var p5=document.getElementsByName("p5");
          for(var i=0;i<p5.length;i++){
              if(p5[i].checked)
                  res += parseInt(p5[i].value);
          }
 
          var p6=document.getElementsByName("p6");
          for(var i=0;i<p6.length;i++){
              if(p6[i].checked)
                  res += parseInt(p6[i].value);
          }
 
          var p7=document.getElementsByName("p7");
          for(var i=0;i<p7.length;i++){
              if(p7[i].checked)
                  res += parseInt(p7[i].value);
          }
 
          var p8=document.getElementsByName("p8");
          for(var i=0;i<p8.length;i++){
              if(p8[i].checked)
                  res += parseInt(p8[i].value);
          }
 
          var p9=document.getElementsByName("p9");
          for(var i=0;i<p9.length;i++){
              if(p9[i].checked)
                  res += parseInt(p9[i].value);
          }
 
      alert("tu nota es "+res+", ¿Cuantos planetas necesitas para vivir?");
      resu(res);
    }
    function resu(res){
      if (res<200)
        alert("Tu estilo de vida se adapta perfectamente a la capacidad de carga del planeta y no consumes mas de lo que te corresponde.")
      if(res>400)
        alert("Tu nivel de consumo supera la capacidad de carga del planeta. Si todo el mundo viviera como tu, serian necesarios mas de dos tierras para abastecernos de recursos.")
      if(200<res && res<400)
        alert("Tu estilo de vida es insostenible, si todo el mundo consumiera los mismos recursos que tu, se necesitarian mas de tres tierras para mantener a toda la poblacion.")
    }
  </script>
        </section>
 
        </main>
        <div>
      <strong><h3>Respuestas</h3></strong>
      <ul>
        <li>Si tu puntuacion es menor a 200 puntos, tu estilo de vida se adapta perfectamente a la capacidad de carga del planeta y no consunmes mas de lo que te corresponde.</li><br>
        <li>si tu puntuacion esta entre 200 y 400 puntos significa que tu nivel de consumo supera la capacidad de carga del planeta. Si todo el mundo viviera como tu, serian necesarias mas de dos tierras para abastecernos de recursos.</li><br>
        <li>Si tu puntuacion es mayor a 400 puntos significa que tu estilo de vida es insostenible si todo el mundo consumiera los mismos recursos que tu se necesitaran mas de tres tierras para mantener a  toda la poblacion.</li>
      </ul>
    </div><br>
      <footer>
        <div class="contenedor">
          <p class="copy">La obesidad &copy; 2019</p>
          <div class="sociales">
            <a class="icon-facebook" href="#"></a>
            <a class="icon-twitter" href="#"></a>
            <a class="icon-instagram-1" href="#"></a>
            <a class="icon-whatsapp" href="#"></a>
          </div>
        </div>
         <div id="pie">
            <p><a href="mailto:elizasega24@gmail.com" target="_top">Enviar Comentarios</a></p>
         </div>
      </footer>
   </body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar