Skip to content

Instantly share code, notes, and snippets.

@Lanse505

Lanse505/website.css

Created September 18, 2021 19:04
Show Gist options
  • Save Lanse505/9d2e38a13e24c187a6c67cd26616be53 to your computer and use it in GitHub Desktop.
Save Lanse505/9d2e38a13e24c187a6c67cd26616be53 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
website.css
/** Remove Padding and Margin **/
body {
padding: 0;
margin: 0;
}
/** Header CSS **/
/** Grid Container **/
.header_grid_container {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto;
background-color: rgba(44, 44, 44, 0.8);
}
/** Grid Item **/
.header_grid_item {
display: flex;
align-items: center;
justify-content: center;
}
/** Grid Logo **/
.header_grid_item:nth-child(4) {
align-items: initial;
justify-content: initial;
padding-left: 35%;
}
/** Nav Group Container **/
.nav_group {
display: grid;
grid-template-columns: auto;
background-color: rgba(66, 66, 66, 0.8);
}
/** Nav Group Styling **/
.nav_group_styling {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
text-transform: uppercase;
font-size: 15px;
font-stretch: normal;
font-style: normal;
font-weight: bolder;
line-height: 4.27;
letter-spacing: 2px;
text-align: center;
justify-content: center;
color: whitesmoke;
}
/** Nav Grid Container **/
.nav_grid_container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
background-color: rgba(88, 88, 88, 0.8);
}
/** Nav Grid Item **/
.nav_grid_item {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
text-transform: uppercase;
font-size: 15px;
font-stretch: normal;
font-style: normal;
line-height: 4.27;
letter-spacing: 2px;
text-align: center;
justify-content: center;
color: whitesmoke;
border-style:solid;
border-color: rgb(22, 22, 22, 0.2);
border-width: 1px 0px 1px 1px;
padding-left: 5px;
padding-right: 5px;
}
/** Current Nav Grid Item **/
.nav_link_current {
box-shadow: inset 0 -0.3rem rgb(66, 66, 66);
border-width: 1px 0px 1px 1px;
}
/** Main Content Container **/
.content_container {
display: grid;
grid-template-columns: auto auto auto;
background-color: rgba(110, 110, 110, 0.8);
}
/** Main Content **/
.main_content {
align-items: center;
justify-content: center;
}
/** Picture Content **/
.picture {
float: left;
width: 20%;
margin: 10px;
margin-top: 13px;
border-radius: 10px;
}
/** Card Content **/
.card {
background-color: rgba(166, 166, 166, 0.8);
border-radius: 10px;
padding-left: 10px;
margin-left: 22%;
}
/** Final Card **/
.card:last-child {
margin-bottom: 16px;
}
/** Topic **/
.topic {
font-size: 20px;
font-weight: bold;
text-align: center;
color: black;
padding-top: 3px;
margin-top: 13px;
}
/** Remove Paragraph Margin **/
.text {
margin: 0;
margin-bottom: 2px;
}
/** Centered Text + Margin Bottom 0 **/
.text_centered {
text-align: center;
margin-bottom: 0px;
}
/** Create Scrollable Card Box **/
.scrollable {
max-height: 670px;
overflow: auto;
}
/** Horizontal Line Fix **/
.intro_hr {
margin-right: 10px;
color: black;
}
/** Ensure Links are Black and not Purple **/
.link {
color: black;
}
/** Add Bottom-Padding to the Project Links **/
.final_links {
padding-bottom: 32px;
}
/** Spacer Styling **/
.spacer {
background-color: rgba(110, 110, 110, 0.8);
}
/** Footer Links -> Lower-Case **/
.footer_links {
text-transform: lowercase;
border-left: 0px;
}
.validated_icon {
border-width: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
Raw
website.html
<!doctype html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<title>Stålnäbb Simon</title>
<meta name="author" content="Simon Stålnäbb">
<meta name="description" content="Information om H21 Student Simon Stålnäbb i Kurs GIK298">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="./hda_logotype.ico">
<link rel="stylesheet" href="./css/staalnaebb_simon.css" />
</head>
<body>
<!-- Header Navigation -->
<header>
<div class="header_grid_container">
<!-- Home Icon Link To The Group Site -->
<div class="header_grid_item">
<a href="./grupp.html">
<img src="./img/ss_home.svg" alt="Home icon" width="32" height="32">
</a>
</div>
<!-- Empty Grid Element -->
<div></div>
<!-- Empty Grid Element -->
<div></div>
<!-- My Logo -->
<div class="header_grid_item">
<a href="./staalnaebb_simon.html">
<img src="./img/ss_logo.svg" alt="Logo" width="64" height="64">
</a>
</div>
<!-- Empty Grid Element -->
<div></div>
<!-- Empty Grid Element -->
<div></div>
<!-- Empty Grid Element -->
<div></div>
</div>
<nav>
<div>
<!-- Group -->
<a class="nav_group nav_group_styling" href="./grupp.html">Grupp 13</a>
<!-- Group Members -->
<div class="nav_grid_container">
<!-- Alexander Johansson -->
<a class="nav_grid_item" href="./johansson_alexander.html">Alexander</a>
<!-- Anna Sörbo -->
<a class="nav_grid_item" href="./sorbo_anna.html">Anna</a>
<!-- Harald Wallin -->
<a class="nav_grid_item" href="./wallin_harald.html">Harald</a>
<!-- Jamelah Ladero -->
<a class="nav_grid_item" href="./ladero_jamelah.html">Jamelah</a>
<!-- Leo Beischer -->
<a class="nav_grid_item" href="./beischer_leo.html">Leo</a>
<!-- Simon Stålnäbb -->
<a class="nav_grid_item nav_link_current" href="./staalnaebb_simon.html">Simon</a>
</div>
</div>
</nav>
</header>
<!-- Main Content Body -->
<main>
<div class="content_container">
<!-- Empty Grid Element -->
<div></div>
<!-- Main Content -->
<div class="main_content">
<!-- Selfie Picture -->
<img class="picture" src="./img/selfie_1.webp" alt="Bild på Simon Stålnäbb">
<!-- Name Card -->
<div class="card">
<p class="topic">Namn:</p>
<p class="text_centered">Simon Stålnäbb</p>
</div>
<!-- Date of Birth Card-->
<div class="card">
<p class="topic">Ålder & Födelsedag</p>
<p class="text_centered">25</p>
</div>
<!-- Intresste Card -->
<div class="card">
<p class="topic">Intressen:</p>
<p class="text_centered">Matlagning, Programmering</p>
<p class="text_centered" style="font-weight: bold;">Samlande av:</p>
<p class="text_centered">Alkohol, Vin, Retro Konsoler, och Evighets Projekt</p>
</div>
<!-- Introduction Card -->
<div class="card">
<p class="topic"> Kort Introduktion</p>
<p class="text">Hejsan</p>
<p class="text">Jag heter Simon Stålnäbb och är 25 år.</p>
<p class="text">Jag är uppvuxen och har bott hela mitt liv i Borlänge Dalarna.</p>
<p class="text">Jag är även den yngsta utav tre syskon, och är eftersläntraren av gruppen med 7 år mellan mig å min halv-bror Daniel.</p>
<p class="text">
Jag har ungefär 6 års programmerings erfarenhet med allt ifrån
<a class="link" href="https://en.wikipedia.org/wiki/Java_(programming_language)">Java</a> och
<a class="link" href="https://en.wikipedia.org/wiki/C_Sharp_(programming_language)">C#</a> (primärt Java)
till
<a class="link" href="https://en.wikipedia.org/wiki/HTML">HTML</a>,
<a class="link" href="https://en.wikipedia.org/wiki/CSS">CSS</a>,
<a class="link" href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a> och
<a class="link" href="https://en.wikipedia.org/wiki/Python_(programming_language)">Python.</a>
</p>
<p class="text">Detta betyder dock inte att jag är flytande i alla dess språk men jag har erfarenhet med att jobba med dem.</p>
<p class="text">På fritiden så programmerar jag och jobbar på diverse projekt, länkar kommer finnas nedan.</p>
<p class="text">Om jag inte programmerar så lagar jag nog mat eller spelar spel för det mesta.</p>
<p class="text">Rent utbildningsmässigt så är jag utbildad catering kock och kallskänka (slaktare), men har även studerat underhållsteknik och historia.</p>
<hr class="intro_hr">
<p class="text"></p>
<!-- My Projects -->
<p class="topic">Några av projekten jag arbetar på / contributar till:</p>
<p class="text_centered final_links">
<a class="link" href="https://github.com/ParchmentMC/Parchment">Parchment</a>,
<a class="link" href="https://github.com/The-Acronym-Coders/Epos">Epos</a>,
<a class="link" href="https://github.com/InnovativeOnlineIndustries/Titanium">Titanium</a>,
<a class="link" href="https://github.com/MinecraftForge/MinecraftForge">Forge</a>
</p>
</div>
</div>
</div>
<!--Spacer Element-->
<div class="spacer"></div>
</main>
<!--Footer Body-->
<footer class="footer-base">
<div class="nav_grid_container">
<!-- Group Members Emails -->
<p class="nav_grid_item validated_icon">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
<div></div>
<div></div>
<div></div>
<div></div>
<a class="nav_grid_item footer_links" href="mailto:[email protected]">[email protected]</a>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment