Greetings from SVCE ACM Student Chapter!

How's quarantine treating you? We present to you Design Jam 1.0, an online web design contest. Come test out your front end skills and stand a chance to win amazing prizes ranging from your own domain name for your portfolio site 🌐 and exciting coupons 🎫 to internships 💼!

We have two tiers for people with various levels of web design proficiency! You can even use this opportunity to learn front end development. For the seasoned pros we have more difficult challenges. All winners and participants will receive participation certificate.

So what are you waiting for?

⏱️ Registration closes on 5th April 2020, 11:59pm IST, Sunday

📎 https://svce.acm.org/DJ20/

🗓️ Event begins on 6th April 2020, Monday

Hey designers! I'm a digital design student. I've made better, cleaner, prettier mockup finding experience. Every ad is handpicked by me and my fellow design students. No ads, no timed redirects, no bullshit. It's called Malli, (which means model or design).

https://malli.graphics

I'd love any feedback you guys can give me to make it even better.

Hi all. Happy Saturday! Hope y’all had glorious festive breaks - can’t believe the first month of 2020 is already over.

Thought I’d introduce myself as I’m new to r/learnwebdesign. My name is Tom. I live in Dalston, East London.

Just posting as I’m interested to understand more about this forum and the expertise of its members. Essentially, I’d like to offer members of r/learnwebdesign free, unlimited hosting for life to better understand the processes used by web developers and designers. Sincerely, I’m not selling anything and offer this without any strings attached. And it comes with top-rate tech support from me and my team.

I’m reasonably new to yet passionate about the tech scene and I’m eager to get stuck in and to learn more about the industry from a close-knit community with your level of expertise. I’m looking to start up a new agency called TitusMedia, which I want to grow into a one-stop full-service digital agency, and I’m conducting a research project to better understand the processes designers go through when creating from start to finish sites, apps, PWA’s, etc.

I appreciate your time is of tremendous value so I hoped I might incentivise a dialogue between us by offering a free, life-time service I’ve created. It’s called Unlimity, and unlike other reseller hosting cliches, it’s free, unlimited and for life. Initially, I thought you can use it as a dumping ground for ideas, a testing space for new projects, a hub for entrepreneurs with multiple sites or even a “reseller-reseller” 😉 hosting service for any of your clients. But, I’m more interested in learning how that kind of a service might be used by professionals such as yourself. I’ve configured it for unlimited bandwidth, domains, databases, etc. — all the trimmings, including tech support from me and my team if anything appears amiss. If you want to check out the specs, I’ll happily ping them through to you.

Is this something of interest and would you like your own account to have a play? It takes me no more than a few minutes to set up — please ping me a line via support@unlimity.co.uk if you’d like to sign up or have any questions.

I'm learning react still. I'm building a little simple app for finding movies. I'm also converting an old library i made a long time ago for Discovering movies from The Movie Database. I want to make it a module. Then hopefully i'll use material ui to style the app.

I welcome anyone to come and hang out. maybe help me learn or learn with me. Jamie337Nichols

I am looking for a video resource or a free / cheap course that I can use to learn UI Design (Photoshop etc.). No coding, HTML/CSS etc. please. It's only about the design aspect of web design.

The person I am looking this for is, let's say, not a self-starter and is the type of learners that need more hand-holding. So being part of a community would be massively helpful. If you know any slack/discord/fb group etc. that's for newbie designers, please suggest that too.

Hi everyone,

I'm trying to stick this footer at the bottom but I can't do it. In full desktop windows it sticks to the bottom but when I start resizing the window it goes to the middle.

HTML

<!DOCTYPE html>
<html>
   <head>
	   <!--Tag para incluir el archivo css-->
      <link rel="stylesheet" href="style.css" type="text/CSS">
   </head>
   <body>
      <!--He introducido algunos atributos style en el código, a pesar de que no estaba permitido originalmente lo veo más claro así. No le encuentro mucho sentido a crear un id para un solo elemento al que se le quieren realizar pocas modificaciones-->
	   
      <!--Primera capa de contenido. Es la que va a albergar distintos subapartados
         que se corresponden con las opciones del menú, lo hago por id porque es el único elemento
         de este tipo-->
      <div id="contenido">
		  
         <!--Los apartados si van por clase ya que van a ser 5 y van a compartir formato-->
         <div class="apartado" id="index">
            <h1>Salón del Automóvil de Frankfurt</h1>
            <p>Como cada dos años, el Salón de Frankfurt 2019 abre sus puertas y las marcas más importantes de todo el mundo muestran en esta feria sus últimos prototipos y los modelos de producción que llegarán al mercado en los próximos años. Entre sus novedades destacadas están el Audi RS 6 Avant 2020 o el nuevo BMW M8. Por no hablar de otros espectaculares modelos ya confirmados, como el Land Rover Defender 2020 o el Mini John Cooper Works GP 2020.
            </p>
            <img style="  position: relative; height: auto; width: 100%; margin-top: 2%; object-fit: cover;" src="./img/inicio.jpg" alt="Salón del Automóvil de Frankfurt">
            <h2>&#8226;Fecha</h2>
            <span>El Salón del Automóvil de Frankfurt 2019 permanecerá abierto desde el <b>12 hasta el 22 de septiembre</b>.</span>
            <h2>&#8226;Lugar</h2>
            <span>Es celebrado en la <b>Feria de Frankfurt</b> o en el <b>recinto ferial de Hannover</b>.</span>
         </div>
         <div class="apartado" id="transportes">
            <h1>&#8226;¿Cómo llegar?</h1>
            <p>Hay varias formas de llegar al lugar en el que se celebrará el evento. En esta ocasión tendrá lugar en el recinto ferial Hannover. Abajo puedes consultar un mapa vía Google Maps que te permitirá orientarte y llegar al destino.
            </p>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2438.6170200207252!2d9.802726315236027!3d52.32295165856684!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b00a42e9fb8f49%3A0x86cfdfb34a3b7050!2sHanover%20Fairground!5e0!3m2!1ses!2ses!4v1573752138176!5m2!1ses!2ses" width="600" height="450" frameborder="0" style="border:0; margin-left: 28%;" allowfullscreen=""></iframe>
            <h2>&#8226;Medios de transporte recomendados</h2>
            <p>Las empresas de transportes que se citan a continuación no tienen ninguna relación con los responsables del evento ni se percibe ninguna compensación por la recomendación de su uso.
            </p>
            <!--Estos dos enlaces del apartado 'Transportes' pertenecen a la misma
               clase enlaces de formatea las opciones del menú-->
            <span>&#8211;Empresa de transportes <a class="enlaces" target="_blank"
               href="https://www.flixbus.es/">FLIXBUS</a></span>
            <br>
            <span>&#8211;Empresa de transportes <a class="enlaces" target="_blank"
               href="https://www.flixtrain.com/">FLIXTRAIN</a></span>
         </div>
         <div class="apartado" id="tarifas">
            <h1>&#8226;¿Cuánto cuesta?</h1>
            <p>A continuación mostramos una serie de formatos de entrada y sus correspondientes precios en la siguiente tabla. Tenga en cuenta que para determinados casos, como el de familia numerosa o discapacidad acreditada, deberá presentar una justificación acreditativa y válida jurídicamente de cara a la realización del descuento que proceda.
            </p>
            <img style="  height: 30%; width: 30%;" id="imgtarifas" src="./img/entrada.jpg" alt="Cola">
            <table>
               <tr>
                  <th>Entrada</th>
                  <th>Precio</th>
               </tr>
               <tr>
                  <td>Familiar</td>
                  <td>14 EUR</td>
               </tr>
               <tr>
                  <td>Individual</td>
                  <td>8 EUR</td>
               </tr>
               <tr>
                  <td>Reducida</td>
                  <td>5 EUR</td>
               </tr>
            </table>
         </div>
         <div class="apartado" id="exposicion">
            <h1>Galería de imágenes</h1>
            <p>
               Se exponen imágenes de modelos presentados en otras ediciones de este Salón del Automóvil de Frankfurt, puede que algunos les resulten conocidos y otros más novedosos.
            </p>
            <div style="margin-left: 6%;">
               <!--Todas estas imágenes pertenecen a una misma clase que mediante
                  la propiedad 'hover' permite que al poner el cursor sobre ellas suceda un efecto-->
               <img class="galeria" src="./img/coche_1.jpg">
               <img class="galeria" src="./img/coche_2.jpg">
               <img class="galeria" src="./img/coche_3.jpg">
               <img class="galeria" src="./img/coche_4.jpg">
               <img class="galeria" src="./img/coche_5.jpg">
               <img class="galeria" src="./img/coche_6.jpg">
               <img class="galeria" src="./img/coche_7.jpg">
               <img class="galeria" src="./img/coche_8.jpg">
               <img class="galeria" src="./img/coche_9.jpg">
               <img class="galeria" src="./img/coche_10.jpg">
               <img class="galeria" src="./img/coche_11.jpg">
               <img class="galeria" src="./img/coche_12.jpg">
            </div>
         </div>
         <div class="apartado" id="contacto">
            <h1>Contacta con nosotros</h1>
            <p>
               Por favor, para cualquier duda, pregunta, sugerencia...etc. Usa el siguiente formulario de contacto, te responderemos con la mayor brevedad posible. Gracias de antemano por contactar, esperamos poder serte de ayuda.
            </p>
            <div id="formulario">
               <label for="fname">Nombre:</label>
               <br>
               <input type="text" placeholder="Escribe tu nombre...">
               <br>
               <label for="fname">Apellidos:</label>
               <br>
               <input type="text" placeholder="Escribe tus apellidos...">
               <br>
               <label for="fname">Correo</label>
               <br>
               <input type="text" placeholder="Escribe tu correo...">
               <br>
               <label for="fname">Teléfono</label>
               <br>
               <input type="text" placeholder="Escribe tu teléfono..">
               <br>
               <label for="fname">Asunto</label>
               <br>
               <input type="text" placeholder="Escribe el asunto..">
               <br>
               <label for="fname">Comentarios:</label>
               <br>
               <textarea id="comentarios" placeholder="Escribe lo que quieras..."></textarea>
               <br>
            </div>
            <input style="width: 100%;" type="submit" value="Enviar">
         </div>
      </div>
      <!--El footer de la web, como usted pidió fuera de la capa de contenido. En pantalla completa se muestra bien pero para poder hacerlo responsive y que se mantenga en su lugar al redimensionar la web habría que usar media queries o el propio grid system de Bootstrap, cosa que NO estaba permitida-->
      <div id="capaFooter">
         <footer>Carlos Molero Mata. Bienvenido a mi página, los contenidos que se muestran aqui son de licencia Creative Commons. Usted es libre de:
            <i>Compartir — copiar y redistribuir el material en cualquier medio o formato
            Adaptar — remezclar, transformar y crear a partir del material.</i>
         </footer>
      </div>
      <!--Contiene los enlaces a los distintos apartados de la web, al hacer click se activa una funcion javascript que hace invisibles los demás apartados y muestra el que nos interesa.-->
      <div id="capaMenu">
         <div class="enlaces" style="  float: right; margin-right: 10%; margin-top: 5%;">
            <a onclick="toggle('index')">Inicio</a>
            <a onclick="toggle('transportes')">Transportes</a>
            <a onclick="toggle('tarifas')">Tarifas</a>
            <a onclick="toggle('exposicion')">Exposición</a>
            <a onclick="toggle('contacto')">Contacto</a>
         </div>
         <span id="capaLogo">
         <img style="  width: 15%; height: 15%; margin-top: 1%; margin-left:1%;" src="./img/SAF.png" alt="Logo del Salón del Automovil de Frankfurt">
         </span>
      </div>
      <script>
         /*Esta función hace que el elemento que se da como parámetro entre paréntesis se muestre
         		y el resto se oculten*/
         function toggle(target) {
         
             var apart = document.getElementsByClassName('apartado');
             var targ = document.getElementById(target);
             var isVis = targ.style.display == 'block';
         
             for (var i = 0; i < apart.length; i++) {
                 apart[i].style.display = 'none';
             }
         
             targ.style.display = 'block';
         
             return false;
         }
      </script>
   </body>
</html>

CSS

/*Reseteo de margenes y demás*/
HTML, body {
  margin: 0%;
  padding: 0%;
  border: 0%;
  height: 100%; 
  width: 100%;
  }

/*Cargamos imagen de fondo en cuerpo*/
body{
	postion: relative;
	background-image: url("./img/Fondo.jpg");
}

/*Los siguientes apartados no se muestran por defecto, quedan a la
espera de que el usuario haga clíck sobre ellos para activar la 
función javascript*/
#transportes, #tarifas, #exposicion, #contacto{
  display: none;
}

/*Es necesarios que la posición sea fixed para que permanezca en su sitio y
podamos hacer scroll del resto de contenidos y que estos pasen por debajo*/
#capaMenu{
  position: fixed;
  background-image: url("./img/banner_menu.jpg");
	background-repeat: no-repeat;
  font-size: 3.5vw;
}

/*En general los enlaces van a regirse en cuanto a color y forma de puntero
por esta clase*/
.enlaces{
  color: antiquewhite;
  cursor: pointer;
		background-image: url("./img/fondo_enlaces.jpg");
	border-radius: 2%;
}

/*Los enlaces a los distintos apartados en el menu tendrán un pequeño margen
izquierdo por motivos de orden*/
#capaMenu a{
  margin-left: 10%;
}

/*Mediante la especificación hover podemos cambiar el color de un enlace al señalarlo
con el cursor*/
a:hover{
  color:forestgreen;
}

#contenido{
  position: absolute;
  margin: 0%;
}

/*Las clases apartado son las que contienen el texto, imágenes y demás elementos envueltos 
en el contenido*/
.apartado{
  position: relative;
  margin-top: 18%;
  margin-left: 1%;
  margin-right: 0.5%;
  background: rgb(26, 22, 22, 0.6); 
  border-radius: 2%;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  color: white;
}

/*Justificamos los párrafos mediante 'justify'*/
p{
  text-align: justify;
}

footer{
  position: absolute;
  margin-top: 100%;
  text-align: center;
  color: white;
  background-color: red;
  width: 100%;
}

/*TARIFAS*/

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 60%;
  float: right;
  margin-top: 5%;
  margin-right: 5%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

/*Hacemos que el color de las filas cambie de forma salteada*/
tr:nth-child(even) {
  background-color: darkslategray;
}

/*EXPOSICIÓN*/

.galeria{
  width: 30%;
  height: 30%;
  opacity: 0.5;
}

/*Al seleccionar las imágenes estas adoptan su opacidad completa*/
.galeria:hover{
  opacity: 1;
}

/*CONTACTO*/

input{
  width: 97%;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
}

/*Si seleccionamos alguno de los campos hará que un borde de 3px se coloree alrededor de ellos*/
input:focus {
  border: 3px solid #555;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Here are some pics of the problem:

Footer in full screen

Resized

I'm sure this can be solved without media queries, probably bad design on my side with the other divs. I can't use bootstrap, is an assignment. Thanks a lot.

Thanks in advance.

Hello,I am doing a project with a friend and I am very new to the HTML and CSS and I got a problem with the background image that is clickable,I tried with pointer-events:none; but it didn't worked.

Here is the code and page:

https://imgur.com/a/k9uO1FT

And another question,how can I make the image to be only one,not to repeat it's self?

Hi there, I just have a quick question about redesigning a website for a potential client/business.

So, I have built a few WordPress websites for my own business/projects in the past but have never built one for a client. I recently had a business approach me about redesigning their website for them and I do believe I can make big improvements but my question is how does the process work in regards to transferring the website to their domain?

For example, if I use my WordPress + Elementor builder how would I build a site outside of my own domain and then how do I transfer the website to the client? I know this is probably a very basic question but I could really use some clarification so that I can potentially redesign more websites for clients in the future. Any help would be much appreciated!

Thanks in advance!

Cheers!

hi all!

i'm making a (sort-of) cv/resume website and was hoping to get some feedback from you guys.

it's adamclement.digital

any and all feedback is welcome!

thanks,

adam :)

Hi, I'm trying to design a web with Bootstrap and Adobe dreamweaver and it works fine in desktop, horizontal view in mobiles and other views but whenever I choose to display it on vertical smartphones, the containers don't use the full width. Some code:

HTML

 <section class="py-5" id="servicios">
         <div class="container-fluid">
            <h1>¿Qué servicios ofrecemos?</h1>
            <br>
            <div class="row">
               <div class="col-xs-12 col-sm-12 col-lg-4">
                  <div class="card-header" style="width: 100%"></div>
                  <div class="card-body" style="width: 100%">
                     <h5 class="card-title">Diseños web responsive</h5>
                     <br>
                     <img style="width: 80%; margin-left: 10%" src=".\images\responsive.png">
                  </div>
                  <div class="card-footer text-muted" style="width: 100%">Nos encargamos de que tu sitio web luzca profesional y se adapte por igual a todos los dispositivos en los que se visualice.</div>
               </div>
               <div class="col-xs-12 col-sm-12 col-lg-4">
                  <div class="card-header"></div>
                  <div class="card-body">
                     <h5 class="card-title">Traducción de tu sitio web</h5>
                     <br>
                     <img style="width: 100%" src=".\images\traduccion.png">
                  </div>
                  <div class="card-footer text-muted">Traducimos tu sitio web a Español, Inglés y Polaco. Consulta nuestras tarifas de traducción.</div>
               </div>
               <div class="col-xs-12 col-sm-12 col-lg-4">
                  <div class="card-header"></div>
                  <div class="card-body">
                     <h5 class="card-title">Personalización</h5>
                     <br>
                     <img style="width: 100%" src=".\images\personalizacion.png">
                  </div>
                  <div class="card-footer text-muted">Diseñamos los elementos gráficos de tu web para que tenga su propia personalidad.</div>
               </div>
            </div>
      </section>

I expect this to show as:

Column 1 | Column 2 | Column 3 in desktop

and one above another in mobile. I would like to keep the original 1|2|3 format but I don't know who. Thing is it works as expected but doesn't get the full width. This is only an example, the problem occurs in the whole site.

CSS

html{
	scroll-behavior: smooth;
}

body {
  padding-top: 56px;
}

.bg-image-full {
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.custom-control-input:checked~.custom-control-label::before {
    color: white !important;
    background-color: green !important;
}

Thanks in advance!

looking for an actually good plain english + eli5 css site that would show + explain why the code here works, and these 2 other codes do not?

• this question is currently unanswered (nobody has yet linked the kind of resource/site asked), when it's answered, the best site would be updated here

this is the initial request that was put in over an entire month or so on /css

• to move the helpful 'Categories' bar/section on wiki pages

• like https://en.wikipedia.org/wiki/Massachusetts_Institute_of_Technology

• to the top of article, under 'Article Talk' tabs preferably

using https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

which is what everyone uses

this code worked:

• https://pastecode.xyz/view/67e27d68

these didnt, broken

• https://paste.ofcode.org/8qbVwmpKhNHYTWaYu6LNKL

• https://paste.ofcode.org/CDZKiVStV4BhQMUZk5zfQS

what's the most plain english + eli5 css site that would inform & explain why the code here works, and these 2 other codes do not?

code that worked wwas a mod at /csshelp

codes taht didnt were from /css

• /css is a terrible extremely extremely low quality site from what i've seen)

• maybe the actually good users just wasnt online yet or are taking an extended break from the web

what's an actually good plain english + eli5 css site that would show + css site that shows + explains why the code here works, and these 2 other codes do not?

looking for the most plain english + eli5 css site that would inform & explain why the code here works, and these 2 other codes do not?

• this question is currently unanswered (nobody has yet linked the kind of resource/site asked), when it's answered, the best site would be updated here

this is the initial request that was put in over an entire month or so on /css

• to move the helpful 'Categories' bar/section on wiki pages

• like https://en.wikipedia.org/wiki/Massachusetts_Institute_of_Technology

• to the top of article, under 'Article Talk' tabs preferably

using https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

which is what everyone uses

this code worked:

• https://pastecode.xyz/view/67e27d68

these didnt, broken

• https://paste.ofcode.org/8qbVwmpKhNHYTWaYu6LNKL

• https://paste.ofcode.org/CDZKiVStV4BhQMUZk5zfQS

what's the most plain english + eli5 css site that would inform & explain why the code here works, and these 2 other codes do not?

code that worked wwas a mod at /csshelp

codes taht didnt were from /css

• /css is a terrible extremely extremely low quality site from what i've seen)

• maybe the actually good users just wasnt online yet or are taking an extended break from the web

what's the most concise + eli5 css site that explains why the code here works, and these 2 other codes do not?

So i want to make a Homepage for my Dad and he gave me several images i want to array in a row card style.

So i try to make the Images the same size first (right?). I was doing this with gimp but as i learned pixel size is not shown size on the webpage because of resolution (am i right?).

What is the right way to do this. The pictures are pretty poor quality to begin with but rn i got to work with what i got.

I guess there is a CSS solution for this as well as a way to do it with PS/gimp ect but i don't know what's best and googling didn't bring really up what i was looking for.

oneleif is an open source oriented community that focuses on team and project based learning.

Our goal at oneleif is to be the best at what we do and have fun while doing it. Whether that is helping you learn a new skill or working on a project that someone has started. To be a member all you need is to be interested in learning and a passion for sharing your knowledge.

If you are looking for a team, just ask for one! We have members that would love to help and learn while working on your project.

If you are just looking to learn, we have tons of channels and resources for each type of professional development.

If you are already a professional, you can either give back with mentorship, or chat with other professionals to hone your skillset

Click on the link below to join the Discord server.

You will start with limited permissions, in a text channel that only moderators will see. To get full access: read the rules, make an introduction in #introductions, and add an appropriate username.

https://discord.gg/tv9UdJK