Jump to content

Cyperpunk-girl-333

Circle Member
  • Posts

    195
  • Joined

  • Last visited

Everything posted by Cyperpunk-girl-333

  1. <canvas></canvas> <script id="vertexShader" type="shader"> attribute vec3 aPosition; (((((I tired to add the new postion here)))))) it didn't work uniform mat4 u_modelMatrix; uniform mat4 u_viewMatrix; uniform mat4 u_projectionMatrix; uniform float u_time; varying vec3 color; //Noise from https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);} vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} float snoise(vec3 v){ const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); // x0 = x0 - 0. + 0.0 * C vec3 x1 = x0 - i1 + 1.0 * C.xxx; vec3 x2 = x0 - i2 + 2.0 * C.xxx; vec3 x3 = x0 - 1. + 3.0 * C.xxx; // Permutations i = mod(i, 289.0 ); vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); // Gradients // ( N*N points uniformly over a square, mapped onto an octahedron.) float n_ = 1.0/7.0; // N=7 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z *ns.z); // mod(p,N*N) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ *ns.x + ns.yyyy; vec4 y = y_ *ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); vec4 s0 = floor(b0)*2.0 + 1.0; vec4 s1 = floor(b1)*2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w; // Mix final noise value vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); } void main() { color = aPosition; float displacement = snoise(aPosition) * u_time; vec3 direction = aPosition - vec3(0.); vec3 position = aPosition + direction * displacement ; gl_Position = u_projectionMatrix * u_viewMatrix * u_modelMatrix * vec4(position, 1.0); gl_PointSize = 0.75; } </script> <script id="fragmentShader" type="shader"> precision mediump float; varying vec3 color; void main() { gl_FragColor = vec4(color.x, color.y, 1., 1.); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <script> class GL { constructor() { this.CANVAS_WIDTH = window.innerWidth; this.CANVAS_HEIGHT = window.innerHeight; this.cvs; this.gl; this.pointsLength = 300000; this.time = 0.; this.modelMatrix = mat4.create(); this.viewMatrix = mat4.create(); this.projectionMatrix = mat4.create(); this.fragment = document.getElementById('fragmentShader').innerHTML; this.vertex = document.getElementById('vertexShader').innerHTML; this.parameters = {}; this.initGL(); this.initShaders(); this.initGeometry(); this.initProgram(); this.initUniform(); let t = [0, 0, -2.5]; mat4.translate(this.modelMatrix, this.modelMatrix, t); this.render(); } initGL() { this.cvs = document.querySelector('canvas'); this.gl = this.cvs.getContext('webgl'); this.gl.enable(this.gl.DEPTH_TEST); this.cvs.style.width = this.CANVAS_WIDTH + 'px'; this.cvs.style.height = this.CANVAS_HEIGHT + 'px'; this.cvs.width = this.CANVAS_WIDTH; this.cvs.height = this.CANVAS_HEIGHT; } initShaders() { this.vShader = this.gl.createShader(this.gl.VERTEX_SHADER); this.gl.shaderSource(this.vShader, this.vertex); this.gl.compileShader(this.vShader); this.fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER); this.gl.shaderSource(this.fShader, this.fragment); this.gl.compileShader(this.fShader); if (!this.gl.getShaderParameter(this.vShader, this.gl.COMPILE_STATUS)) { console.log(this.gl.getShaderInfoLog(this.vShader)); } if (!this.gl.getShaderParameter(this.fShader, this.gl.COMPILE_STATUS)) { console.log(this.gl.getShaderInfoLog(this.fShader)); } } initUniform() { this.u_time = this.gl.getUniformLocation(this.program, "u_time"); this.u_modelMatrix = this.gl.getUniformLocation(this.program, "u_modelMatrix"); this.u_viewMatrix = this.gl.getUniformLocation(this.program, "u_viewMatrix"); this.u_projectionMatrix = this.gl.getUniformLocation(this.program, "u_projectionMatrix"); } initGeometry() { let vertices = this.createSphere(this.pointsLength, 0.5); this.positionsBuffer = this.gl.createBuffer(); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionsBuffer); this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null); } initProgram() { this.program = this.gl.createProgram(); this.gl.attachShader(this.program, this.vShader); this.gl.attachShader(this.program, this.fShader); this.gl.linkProgram(this.program); this.gl.useProgram(this.program); this.positionAttribLoc = this.gl.getAttribLocation(this.program, 'aPosition'); if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) { console.log(this.gl.getProgramInfoLog(this.program)); } } createSphere(count, size) { var len = count * 3; var positions = new Float32Array(len); for (var i = 0; i < len; i += 3) { let v = {}; let phi = Math.random() * 2 * Math.PI; let costheta = Math.random() * 2 - 1; let u = Math.random(); let theta = Math.acos(costheta); let r = size * Math.cbrt(u); v.x = r * Math.sin(theta) * Math.cos(phi); v.y = r * Math.sin(theta) * Math.sin(phi); v.z = r * Math.cos(theta); positions[i] = v.x; positions[i + 1] = v.y; positions[i + 2] = v.z; } return positions; } render() { this.gl.clearColor(0., 0., 0., 1); this.gl.clear(this.gl.COLOR_BUFFER_BIT); this.gl.viewport(0, 0, this.CANVAS_WIDTH, this.CANVAS_HEIGHT); this.gl.useProgram(this.program); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionsBuffer); this.gl.enableVertexAttribArray(this.positionAttribLoc); this.gl.vertexAttribPointer(this.positionAttribLoc, 3, this.gl.FLOAT, false, 0, 0); this.time += 0.1; this.time = this.time % 40.; this.gl.uniform1f(this.u_time, this.time); let fov = 60; mat4.perspective(this.projectionMatrix, fov * (Math.PI / 180), this.CANVAS_WIDTH / this.CANVAS_HEIGHT, 0.1, 100.0); this.gl.uniformMatrix4fv(this.u_modelMatrix, false, this.modelMatrix); this.gl.uniformMatrix4fv(this.u_viewMatrix, false, this.viewMatrix); this.gl.uniformMatrix4fv(this.u_projectionMatrix, false, this.projectionMatrix); this.gl.drawArrays(this.gl.POINTS, 0, this.pointsLength / 3); }} let xp = new GL(); function raf() { requestAnimationFrame(raf); xp.render(); } raf(); </script>
  2. No it's the space with the codepen you helped me apply on the freebies page (coming soon) i will attach the link here https://www.spacept.com.au/freebies-css-javascript-for-squarespace-websites/code-plugins-for-squarespace
  3. @tuanphan would you know how to remove that space that is correct
  4. this is the full code on mine ? I'm not sure i understand what you're asking me //neon box shop page// .neoncontainer { display: flex; position: relative; width: 260px; height: 200px; justify-content: center; align-items: center; margin: 40px 30px; transition: 0.5s; } .neoncontainer .box::before { content:' '; position: absolute; top: 0; left: 50px; width: 50%; height: 100%; text-decoration: none; background: #fff; border-radius: 8px; transform: skewX(15deg); transition: 0.5s; } .neoncontainer .box::after { content:''; position: absolute; top: 0; left: 50; width: 50%; height: 100%; background: #fff; border-radius: 8px; transform: skewX(15deg); transition: 0.5s; filter: blur(30px); } .neoncontainer .box:hover:before, .neoncontainer .box:hover:after { transform: skewX(0deg); left: 20px; width: calc(100% - 90px); } .neoncontainer .box:nth-child(1):before, .neoncontainer .box:nth-child(1):after { background: linear-gradient(315deg, #233FFF, #ED26B5) } .neoncontainer .box:nth-child(2):before, .container .box:nth-child(2):after { background: linear-gradient(315deg, #233FFF, #ED26B5) } .neoncontainer .box:nth-child(3):before, .neoncontainer .box:nth-child(3):after { background: linear-gradient(315deg, #ED26B5, #00d0ff) } .neoncontainer .box span { display: box; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; } .neoncontainer .box span::before { content:''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); opacity: 0; transition: 0.1s; animation: animate 2s ease-in-out infinite; box-shadow: 0 5px 15px rgba(0,0,0,0.08) } .neoncontainer .box:hover span::before { top: -50px; left: 50px; width: 100px; height: 100px; opacity: 1; } .neoncontainer .box span::after { content:''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 8px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); opacity: 0; transition: 0.5s; animation: animate 2s ease-in-out infinite; box-shadow: 0 5px 15px rgba(0,0,0,0.08); animation-delay: -1s; } .neoncontainer .box:hover span:after { bottom: -50px; right: 50px; width: 100px; height: 100px; opacity: 1; } @keyframes animate { 0%, 100% { transform: translateY(10px); } 50% { transform: translate(-10px); } } .neoncontainer .box .content { position: relative; left: 0; padding: 20px 40px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 8px; z-index: 1; transform: 0.5s; color: #fff; } .neoncontainer .box:hover .content { left: -25px; padding: 60px 40px; } .neoncontainer .box .content h2 { font-size: 2em; color: #fff; margin-bottom: 10px; } .neoncontainer .box .content p { font-size: 1.1em; margin-bottom: 10px; line-height: 1.4em; } .neoncontainer .box .content a { display: inline-block; font-size: 1.1em; color: #111; background: #fff; padding: 10px; border-radius: 4px; text-decoration: none; font-weight: 700; margin-top: 5px; } .neoncontainer .box .content a:hover { background: #ffcf4d; border: 1px solid rgba(255, 0, 88, 0.4); box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2); }
  5. I added that code and it went all jumbled. please check my site page with that code added
  6. Yes that looks perfect on desktop 🙂 Can they stack on mobile view veridical?
  7. password is : thankyou https://www.spacept.com.au/spacept-website-designs/digital-marketing/website-design/branding-gold-coast
  8. Please click add to cart to view the page with the code injection on the additional product information, please review in desktop and mobile. padding is crammed. https://www.spacept.com.au/spacept-website-designs/digital-marketing/website-design/branding-gold-coast/p//logo-design-gold-coast/3-new-logo-designs/website-design-digital-marketing-australia-/sqaurespace-website-designs
  9. How would i remove that unwanted space @tuanphan
  10. https://www.spacept.com.au/spacept-website-designs/digital-marketing/website-design/branding-gold-coast Password: thankyou, code on the product 🙂 in the aditional information section
  11. i would like some help with my code pen on squarespace This is the codepen .neoncontainer .flex { position: relative; width: 260px; height: 200px; display: flex; justify-content: center; align-items: center; margin: 40px 30px; transition: 0.5s; } .neoncontainer .box::before { content:' '; position: absolute; top: 0; left: 50px; width: 50%; height: 100%; text-decoration: none; background: #fff; border-radius: 8px; transform: skewX(15deg); transition: 0.5s; } .neoncontainer .box::after { content:''; position: absolute; top: 0; left: 50; width: 50%; height: 100%; background: #fff; border-radius: 8px; transform: skewX(15deg); transition: 0.5s; filter: blur(30px); } .neoncontainer .box:hover:before, .neoncontainer .box:hover:after { transform: skewX(0deg); left: 20px; width: calc(100% - 90px); } .neoncontainer .box:nth-child(1):before, .neoncontainer .box:nth-child(1):after { background: linear-gradient(315deg, #ffbc00, #ff0058) } .neoncontainer .box:nth-child(2):before, .container .box:nth-child(2):after { background: linear-gradient(315deg, #03a9f4, #ff0058) } .neoncontainer .box:nth-child(3):before, .neoncontainer .box:nth-child(3):after { background: linear-gradient(315deg, #4dff03, #00d0ff) } .neoncontainer .box span { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; } .neoncontainer .box span::before { content:''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); opacity: 0; transition: 0.1s; animation: animate 2s ease-in-out infinite; box-shadow: 0 5px 15px rgba(0,0,0,0.08) } .neoncontainer .box:hover span::before { top: -50px; left: 50px; width: 100px; height: 100px; opacity: 1; } .neoncontainer .box span::after { content:''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 8px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); opacity: 0; transition: 0.5s; animation: animate 2s ease-in-out infinite; box-shadow: 0 5px 15px rgba(0,0,0,0.08); animation-delay: -1s; } .neoncontainer .box:hover span:after { bottom: -50px; right: 50px; width: 100px; height: 100px; opacity: 1; } @keyframes animate { 0%, 100% { transform: translateY(10px); } 50% { transform: translate(-10px); } } .neoncontainer .box .content { position: relative; left: 0; padding: 20px 40px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 8px; z-index: 1; transform: 0.5s; color: #fff; } .neoncontainer .box:hover .content { left: -25px; padding: 60px 40px; } .neoncontainer .box .content h2 { font-size: 2em; color: #fff; margin-bottom: 10px; } .neoncontainer .box .content p { font-size: 1.1em; margin-bottom: 10px; line-height: 1.4em; } .neoncontainer .box .content a { display: inline-block; font-size: 1.1em; color: #111; background: #fff; padding: 10px; border-radius: 4px; text-decoration: none; font-weight: 700; margin-top: 5px; } .neoncontainer .box .content a:hover { background: #ffcf4d; border: 1px solid rgba(255, 0, 88, 0.4); box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2); } I've added it to my product pages and I've change the colour #hex codes and I've removed the buttons In mobile and desktop view the boxes and crammed on top of each other and overlapping. My question is this.. is there a way I can add some space between each box so they display better on desktop and mobile? Maybe it would be better if they stacked on mobile but displayed in a row on desktop? Do you know how to achieve this? This is the link to the URL I've been playing with today with your help. https://www.spacept.com.au/sqaurespace-websites/p/32g3zcipummrllgffz4114v6b5ptcr-lgpam-bbp8n https://codepen.io/kodplay/pen/oNBreRJ this is the original code pen I removed the code for the container, I also removed the buttons I just want them to stack on mobile and display horizontal on desktop view with padding either side of the boxes so they're not crammed
  12. I added that? It removes the entire price? I just want to display it without the .00's
  13. Hi I just finished building this website for a client. - there's a few pages to tiny up e.g. 1. code container on (freebies page). 2. Transitioning information boxes on the store pages. I need help aligning the gradient boxes to flex ( side by side horizontally) with spacing and padding between each box. and to stack below each other on mobile with out the space slider getting distorted. any help with that would be appreciated. I've a lot of help from with CSS from @creedon , @tuanphan and @Beyondspace and the rest of the circle community which I am extremely grateful for. I would love some general feedback on the UX design, User Experience, Branding, Design and style. The clients guidelines were.. Create a logo for Spacept Build a brand and website based around a gaming, arcade gaming, late 80's website design Theme and style influence: Cyber punk, retro arcade some paid and non paid plugins via @ghostplugins Please visit www.spacept.com.au I would really like some or any feedback! try to keep it positive and or constructive. I look forward to reading your feedback and applying edits if they will help with the usability and customer trust
  14. .search-input { outline-color: transparent !important; } Add to Design CSS
  15. Yes correct i mean that space, ideally i would like the code pen to be behind the navigation and buy me a coffee button and then also in the first section and the moment it's in a bit of a weird container also is there a way to resize the area where a subscriber would add the email ? ideally lining it up with the length of the title text
  16. That worked perfectly, thank you. Can i change the default grey text and black text to white?
  17. Hi Creedon, I'm hoping you can help me with my codepen 

     

    .neoncontainer .flex
    {
      position: relative;
      width: 260px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 40px 30px;
      transition: 0.5s;
    }

    .neoncontainer .box::before
    {
      content:' ';
      position: absolute;
      top: 0;
      left: 50px;
      width: 50%;
      height: 100%;
      text-decoration: none;
      background: #fff;
      border-radius: 8px;
      transform: skewX(15deg);
      transition: 0.5s;
    }

    .neoncontainer .box::after
    {
      content:'';
      position: absolute;
      top: 0;
      left: 50;
      width: 50%;
      height: 100%;
      background: #fff;
      border-radius: 8px;
      transform: skewX(15deg);
      transition: 0.5s;
      filter: blur(30px);
    }

    .neoncontainer .box:hover:before,
    .neoncontainer .box:hover:after
    {
      transform: skewX(0deg);
      left: 20px;
      width: calc(100% - 90px);
      
    }

    .neoncontainer .box:nth-child(1):before,
    .neoncontainer .box:nth-child(1):after
    {
      background: linear-gradient(315deg, #ffbc00, #ff0058)
    }

    .neoncontainer .box:nth-child(2):before,
    .container .box:nth-child(2):after
    {
      background: linear-gradient(315deg, #03a9f4, #ff0058)
    }

    .neoncontainer .box:nth-child(3):before,
    .neoncontainer .box:nth-child(3):after
    {
      background: linear-gradient(315deg, #4dff03, #00d0ff)
    }

    .neoncontainer .box span
    {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
      pointer-events: none;
    }

    .neoncontainer .box span::before
    {
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      opacity: 0;
      transition: 0.1s;  
      animation: animate 2s ease-in-out infinite;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08)
    }

    .neoncontainer .box:hover span::before
    {
      top: -50px;
      left: 50px;
      width: 100px;
      height: 100px;
      opacity: 1;
    }

    .neoncontainer .box span::after
    {
      content:'';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      opacity: 0;
      transition: 0.5s;
      animation: animate 2s ease-in-out infinite;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
      animation-delay: -1s;
    }

    .neoncontainer .box:hover span:after
    {
      bottom: -50px;
      right: 50px;
      width: 100px;
      height: 100px;
      opacity: 1;
    }

    @keyframes animate
    {
      0%, 100%
      {
        transform: translateY(10px);
      }
      
      50%
      {
        transform: translate(-10px);
      }
    }

    .neoncontainer .box .content
    {
      position: relative;
      left: 0;
      padding: 20px 40px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      z-index: 1;
      transform: 0.5s;
      color: #fff;
    }

    .neoncontainer .box:hover .content
    {
      left: -25px;
      padding: 60px 40px;
    }

    .neoncontainer .box .content h2
    {
      font-size: 2em;
      color: #fff;
      margin-bottom: 10px;
    }

    .neoncontainer .box .content p
    {
      font-size: 1.1em;
      margin-bottom: 10px;
      line-height: 1.4em;
    }

    .neoncontainer .box .content a
    {
      display: inline-block;
      font-size: 1.1em;
      color: #111;
      background: #fff;
      padding: 10px;
      border-radius: 4px;
      text-decoration: none;
      font-weight: 700;
      margin-top: 5px;
    }

    .neoncontainer .box .content a:hover
    {
      background: #ffcf4d;
      border: 1px solid rgba(255, 0, 88, 0.4);
      box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
    }

    I've added it to my product pages and I've change the colour #hex codes. 

    In mobile and desktop view the boxes and crammed on top of each other and overlapping. 

    is there a way I can add some space between each box so they display better on desktop and mobile?

    Maybe it would be better if they stacked on mobile but displayed in a row on desktop? 

    Do you know how to achieve this.  

    This is the link to the URL I've been playing with today with your help. 

    https://www.spacept.com.au/sqaurespace-websites/p/32g3zcipummrllgffz4114v6b5ptcr-lgpam-bbp8n

     

    https://codepen.io/kodplay/pen/oNBreRJ 

    this is the original code pen

    I removed the code for the container it was in, I also removed the buttons

     

     

     

    1. Show previous comments  3 more
    2. Cyperpunk-girl-333

      Cyperpunk-girl-333

      I am happy to pay for your help for this

    3. Cyperpunk-girl-333

      Cyperpunk-girl-333

      @creedon please let me know your price 

    4. creedon

      creedon

      Please post your issue in a public thread so more eyes can get on it.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.