GithubHelp home page GithubHelp logo

siem-p / squad-page-siem Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fdnd-task/connect-your-tribe-squad-page

2.0 2.0 0.0 3.45 MB

Redesign met je squad een squadpagina op basis van een bestaande API.

Home Page: https://kind-red-starfish-hose.cyclic.app/FDND-overzicht

License: GNU General Public License v3.0

JavaScript 22.52% EJS 37.62% CSS 39.86%

squad-page-siem's People

Contributors

koopreynders avatar siem-p avatar

Stargazers

avatar avatar

squad-page-siem's Issues

Unable to write comments in this section

Squad-page-Siem/views/index.ejs

Lines 58 to 83 in fb8efaf

<article class="card">
<div class="image-container">
<div class="colour-circle"></div>
<%
const avatarSrc = member?.avatar // If there is a value for avatar, use it. Otherwise stay empty.
if (avatarSrc && avatarSrc !== 'null') {
%>
<img class="card-image" src="<%- member.avatar %>" alt="Avatar van <%= member.name %>">
<% } else { %>
<img class="card-image" src="/assets/sussybaka.png" alt="Een verdacht poppetje in een schacht">
<% } %>
</div>
<div class="info-area">
<h3><%= member.name + " " + (member.prefix ?? '') + " " + member.surname %></h3>
<div class="tags">
<a class="tag" href="<%= member.website %>" target="_blank">Website</a>
<% if(!member.colour?.hex) {%>
<% } else { %>
<a class="tag" href="#">
<p class="colour-circle" style="--card-circle-colour:<%= member.colour?.hex%>"></p>
</a>
<% } %>
</div>
</div>
</article>

custom properties

Squad-page-Siem/public/css/style.css

Lines 1 to 16 in e19504e

:root {
/* Important Colors */
--primary-purple: #772ce8;
--white: #ffffff;
--dark-grey: #30343f;
/* Light Mode */
--main-light-color: #f7f7f8;
--tag-color: #eaeaeb;
/* Dark Mode */
--main-dark-color: #28282f;
--content-dark-color: #393939;
--dark-tag-color: #212123;
--dark-tag-text-color: #;
}

goed dat je custom properties heb, en dat je er comments bij hebt gezet. is overzichtelijk 👍

extra informatie

image

misschien ervoor zorgen dat je extra informatie kan zien als je op een student/docent drukt en dat het bijv dan groter wordt

Background default img

image

Default images don't have a transparent background, which results in a visible checkerboard pattern behind the image.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.