Här ska jag gå igenom den CSS som används på sidan.
Här är den första delen av CSS:
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}Här ställer jag in att alla element har noll i marginal och 0 i padding från början. Detta gör att det blir lättare att sätta eller beräkna marginaler och padding istället för att behöva ta hänsyn till vad webbläsaren gör. Jag använder border-box vilket förenklar att bestämma storleken på element jämfört med content-box som är standard. Där måste man ta hänsyn till padding och border. Jag har också pseudo elementen ::before och ::after för att framtidssäkra om jag behöver använda dom i framtiden. Dessa kan exempelvis användas för att skapa grafiska effekter.
Nästa del är färgerna:
:root {
--navy-dark: #0A1628;
--navy-mid: #1B3A6B;
--blue: #2563EB;
--blue-pale: #93C5FD;
--blue-ghost:#E2EEFF;
--white: #ffffff;
--off-white: #F0F6FF;
--text-dark: #0F172A;
--text-grey: #334155;
}Här sätter jag namn på olika färger jag vill använda för att det ska bli lättare att använda färgerna på olika ställen istället för att skriva hexkoden varje gång. Det blir också tydligare vilken färg jag använder. Jag använder pseudo klassen :root som innehåller alla andra element. Därför kan jag använda variablerna i resten av filen.
Här kommer nästa del:
html {
font-size: 62.5%;
}I font-size sätter jag värdet 62.5% i hela HTML filen, detta gör att 1rem är lika med 10px, istället för 16px. 16 * 62.5% = 10. Detta gör att det blir lättare att sätta storlekar med rem och förstå vad det blir i pixlar.
Nästa del:
body {
font-family: 'Inter', sans-serif;
font-size: 1.6rem;
background: var(--off-white);
color: var(--text-dark);
line-height: 1.7;
}Här ställer jag in några saker som gäller för hela bodyn, först så väljer jag vilken font som ska vara standard på sidan, då undviker jag att behöva ställa in fonten varje gång jag har använt ett nytt element. Sedan väljer jag standard storleken på all text inom bodyn, alltså storleken som den håller ifall jag inte ändrar något. I detta fall 1.6 rem som blir 16 pixlar. Efter det så väljer jag bakgrundsfärg på allt inom bodyn, det är en av färgerna som jag har bestämt. Sedan bestämmer jag textfärgen vilket är en av dom variablerna jag bestämde. Sist så har jag satt line-height på 1.7, detta är avståndet mellan raderna av text, jag har ökat den för att öka läsbarheten.
Nästa del:
a {
color: inherit;
text-decoration: none;
}Webbläsare gör länkar blå som standard, color: inherit gör att färgen på en länk matchar omgivningen. text-decoration: none tar bort understrecket på en länk.
Nästa del:
img {
display: block;
max-width: 100%;
}Display: block; tar bort utrymmet under bilden. Max-width: 100%; gör att bilden inte kan bli större än boxen.
Nästa del:
h1,
h2,
h3 {
font-weight: 500;
line-height: 1.2;
}Ställer in tjockleken på texten, så 500 är lite tjockare än 400 som är standard men inte helt bold. Line height 1.2 sätter bara utrymmet mellan två rader. Eftersom en rubrik är kort så funkar 1.2 utmärkt, istället för 1.7 som är på vanlig text.
Nästa del:
h2 {
font-size: 2rem;
color: var(--navy-mid);
margin-bottom: 1.6rem;
}Här anger jag storlek, färg och marginal under texten på alla h2 headings.
Här har vi navbaren:
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 100;
background: var(--navy-dark);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4rem;
}Position: fixed; gör att navbaren förblir synlig även om man skrollar längre ner. top:0; gör att navbaren hamnar helt längst upp, samma sak gäller left: 0; men att den istället hamnar längst åt vänster där navbaren börjar. Width: 100%; gör att navbaren använder hela viewporten. Height: 60px; gör ju att navbarens höjd håller 60px. z-index: 100; detta gör att navbaren alltid förblir längst upp på sidan istället för att innehållet renderas över navbaren. Sen under z-index så väljer jag en navy dark blå färg. Display: flex; gör att länkarna till dom olika sidorna stackas brevid varandra istället för att dom hamnar under varandra. align-items: center; gör att länkarna/knapparna centreras vertikalt i navbaren. justify-content: space-between; gör att loggan hamnar längst åt vänster och att länkarna trycks iväg mot höger sida på navbaren. Padding: 0 4rem; nollan gör att det är 0 padding vertikalt eftersom redan har centrerat elementen med align-items, 4rem gör att det blir 40 pixlar padding på vänster och höger sida.
Nav logo:
nav a.logo {
color: var(--white);
font-size: 1.7rem;
font-weight: 500;
}Här anger jag färg, storlek och tjocklek.
Nästa del:
nav ul {
list-style: none;
display: flex;
gap: 0.4rem;
}list-style gör att det inte blir någon punkt eller siffror på listan i navbaren. Det är 4 pixlar mellan dom olika list elementen.
Nästa del:
nav ul a {
color: var(--blue-ghost);
font-size: 1.4rem;
padding: 0.6rem 1.2rem;
border-radius: 5px;
transition: background 0.18s, color 0.18s;
}Vi har padding: 0.6rem 1.2rem;, detta är för att skapa distans mellan länkarna i navbaren, för att göra det lättare att klicka på dom speciellt på mobila enheter, så det blir 6 pixlar vertikalt och 12 pixlar padding vänster och höger. Border-radius gör att kanterna blir runda på länkarna. transition element gör att när musen är över en länk så ändras färgen på länken på 0.18 sekunder istället för direkt vilket ger en snyggare övergång.
Nästa del:
nav ul a:hover,
nav ul a.active {
background: var(--blue);
color: var(--white);
}Ändrar färgen på länkarna i navbaren när muspekaren står över länken samt visar vilken sida som man är på.
Banner:
.banner {
background: linear-gradient(135deg, var(--navy-mid) 0%, var(--blue) 100%);
text-align: center;
color: var(--white);
padding: 10rem 2rem 5rem;
}Bakgrundsfärgen är inte den samma över hela bannern, det är en linjär övergång mellan olika blå färger vilket skapar en snyggare sida som blir lite roligare. Text-align gör att texten centreras i bannern. Färgen är satt vit enligt min standard. Padding är 100 pixlar top, 20 pixlar vänster/höger och 50 pixlar längst ner.
.banner är den delen av sidan som är precis under navbaren men som inte innehåller huvudinnehållet:
.banner är den blåa rektangelrutan med headern.
Nästa del:
.banner h1 {
font-size: 3.6rem;
margin-bottom: 1rem;
}
.banner p {
color: var(--blue-ghost);
font-size: 1.6rem;
}Sätter textstorlek, färger och marginaler på text inom .banner
Nästa del:
.hero {
min-height: 100vh;
padding: 8rem 2rem 6rem;
}Här justerar vi minsta storleken för huvudinnehållet på sidan (hero min-height) och padding som är 80 pixlar top, 20pixlar vänster/höger, och 60 pixlar ner.
Nästa del av .hero:
.hero p.eyebrow {
font-size: 1.2rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue-pale);
margin-bottom: 1.2rem;
}Letter spacing är satt på 0.16em, alltså 16% av font size vilket är 1.92px. text-transform: uppercase; gör att all text är versaler.
Nästa av .hero:
.hero h1 {
font-size: 4.8rem;
margin-bottom: 1.6rem;
}Sätter text storlek och marginaler på h1 header i hero elementet.
Nästa av .hero:
.hero p.sub {
font-size: 1.8rem;
max-width: 52rem;
margin: 0 auto 2.4rem;
opacity: 0.9;
}Sätter maxbredd av texten under huvudinnehållet till max 52rem eller 520 pixlar, detta gör att texten radbryter oftare och inte blir en jättelång text sidleds som i den första versionen av Paolos webb. Opacity sätter genomskinligheten på texten.
Nästa del av .hero:
.hero img {
width: 14rem;
height: 14rem;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(255, 255, 255, 0.3);
margin: 3rem auto 0;
}Längst upp anges höjd och bredd. Under sätter jag radien på bordern till 50% av boxen vilket gör att bilden ser ut som en cirkel. object-fit: cover; gör att att bilden passar i cirkel bordern och att allt som hamnar utanför klipps bort. Border: gör att det skapas en vit ring runt bilden med 30% genomskinlighet.
Nästa del av CSS filen:
.btn {
display: inline-block;
padding: 1rem 2.4rem;
border: 1px solid var(--white);
border-radius: 6px;
color: var(--white);
font-size: 1.5rem;
font-weight: 500;
transition: background 0.18s;
}
.btn:hover {
background: rgba(255, 255, 255, 0.15);
}.btn eller button, längst upp anger jag att display: inline-block;, det gör att de element som ska se ut som knappar hamnar i linje med texten. Knapparna har en vit border men ingen bakgrund vilket gör att knappen blir transparent. Jag använder igen transition för att skapa en animation.
.btn:hover gör att jag kan bestämma vad som händer med elementet när muspekaren står över knappen, i detta fall blir bakgrunden vit med en genomskinlighet på 15%.
Nästa del är .content:
.content {
max-width: 96rem;
margin: 0 auto;
padding: 6rem 4rem;
}.content är huvudinnehållet på sidan inom maintaggen med max bredd 96rem vilket är 960 pixlar, marginal 0 över och auto på höger och vänster sida. Padding 60 pixlar över och 40 pixlar vänster/höger sida.
Nu card-grid:
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
gap: 2.4rem;
}Här skapar jag en grid som används för att gruppera korten. Den skapar kolumner som är minst 280 pixlar men som kan växa om utrymmet behöver fyllas. Med auto-fit skapar den så många kolumner som får plats. Det är 24px mellanrum mellan korten.
Nästa del av card:
.card {
background: var(--white);
border: 1px solid rgba(37, 99, 235, 0.15);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card:hover {
border-color: var(--blue);
}Här applicerar jag stilen på korten. Overflow:hidden; gör så korten inte hamnar utanför den runda ramen. När musen hålls över ett kort ändras färgen på ramen.
.card img:
.card img {
width: 100%;
height: 18rem;
object-fit: contain;
background: var(--off-white);
padding: 2rem;
}Här appliceras stilen på bilderna. object-fit: contain; justerar bilden så att den får plats inom kortet.
.card-body:
.card-body {
padding: 2rem;
flex: 1;
}
.card-body h2 {
font-size: 1.8rem;
margin-bottom: 0.8rem;
}
.card-body p {
color: var(--text-grey);
font-size: 1.5rem;
}Här är flex satt till 1. Det gör så att alla korten blir lika höga oavsett mängden text.
.intro:
.intro {
font-size: 1.8rem;
color: var(--text-grey);
max-width: 64rem;
margin-bottom: 3.2rem;
}Applicerar stilen på texten som handlar om Paolo (om.html).
.table:
table {
border-collapse: collapse;
max-width: 52rem;
width: 100%;
margin-bottom: 4rem;
}
th,
td {
padding: 1rem 1.4rem;
border-bottom: 1px solid rgba(37, 99, 235, 0.15);
text-align: left;
}
th {
color: #64748B;
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: 0.05em;
width: 14rem;
}
td a {
color: var(--blue);
}
td a:hover {
color: var(--navy-mid);
}Här appliceras stilen för tabellen som används för Paolos kontaktuppgifter. Border-collapse: collapse; används för att det inte ska bli dubbla linjer där cellerna möts. All text omvandlas till versaler med text-transform: uppercase;. Länkar färgas blått och färgen på länkarna ändras när muspekaren står över med hjälp av hover.
Nästa form och label:
form {
max-width: 56rem;
}
label {
display: block;
font-size: 1.3rem;
font-weight: 500;
color: #64748B;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}Här appliceras stilen på labels i kontaktformuläret. Jag har satt en maxbredd för att det inte ska bli för brett. Jag använder också display: block så att texten hamnar ovanför fältet där man fyller i text.
Nästa del:
input,
textarea {
display: block;
width: 100%;
font-family: 'Inter', sans-serif;
font-size: 1.5rem;
color: var(--text-dark);
background: var(--white);
border: 1px solid #CBD5E1;
border-radius: 6px;
padding: 1rem 1.4rem;
margin-bottom: 1.6rem;
}
input:focus,
textarea:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
textarea {
height: 14rem;
resize: vertical;
}
button[type="submit"] {
font-family: 'Inter', sans-serif;
font-size: 1.5rem;
font-weight: 500;
color: var(--white);
background: var(--blue);
border: none;
border-radius: 6px;
padding: 1.1rem 2.6rem;
cursor: pointer;
transition: background 0.18s;
}
button[type="submit"]:hover {
background: var(--navy-mid);
}Här appliceras stilen på textfälten in formuläret. Input: focus och text-area: focus används för att visa användaren vilket fält som är aktivt. Jag använder button[type=”submit”] för att applicera en stil på knappen. Färgen på knappen ändras när man håller musen över den.
Footer och media query:
footer {
background: var(--navy-dark);
padding: 1.6rem 4rem;
display: flex;
align-items: center;
justify-content: flex-end;
}
footer p {
color: var(--blue-ghost);
font-size: 1.3rem;
}
@media (max-width: 600px) {
nav {
padding: 0 1.6rem;
}
nav a.logo {
font-size: 1.4rem;
}
nav ul a {
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
}
.banner {
padding: 8rem 2rem 4rem;
}
.banner h1 {
font-size: 2.8rem;
}
.hero h1 {
font-size: 3.2rem;
}
.content {
padding: 4rem 2rem;
}
.card-grid {
grid-template-columns: 1fr;
}
footer {
padding: 1.6rem 2rem;
}
}Här appliceras stilen för footern. Jag har en media query som används för skärmar 600px eller lägre för att justera storlekar och padding. Den justerar också så att det blir färre kolumner i card-grid.
Leave a Reply