🚧 Continued on with coder coder's front end tutorial
This commit is contained in:
z3rOR0ne
parent
99525165c9
commit
3cb8fa2334
3 changed files with 114 additions and 9 deletions
4
aliases
4
aliases
|
|
@ -529,6 +529,10 @@ alias egghead="librewolf https://egghead.io/ &"
|
|||
alias demo2s="librewolf https://www.demo2s.com &"
|
||||
# mothereffinghsl hsl color picker site
|
||||
alias mothereffinghsl="librewolf https://mothereffinghsl.com/ &"
|
||||
# nice color picker for hex/rgb/hsl
|
||||
alias colordesigner="librewolf https://colordesigner.io/ &"
|
||||
# site for calculating clamping for responsive font sizes
|
||||
alias typography-calc="librewolf https://royalfig.github.io/fluid-typography-calculator/ &"
|
||||
# svgsprites creates sprites from dragging svg files into its
|
||||
alias {svgsprites,svgsprite}="librewolf https://svgsprit.es &"
|
||||
# unsplash.com is an api site for developers to import and use photos
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* LEFT OFF AT PART 2 1:07 */
|
||||
/* LEFT OFF AT PART 2 2:09 */
|
||||
|
||||
/* This document contains boilerplate css tips/tricks
|
||||
* garnered from the youtuber, coder_coder's youtube series, "Building a
|
||||
|
|
@ -54,6 +54,12 @@ html {
|
|||
/* 0 out all margin all body to clear default margins */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text1);
|
||||
font-size: var(--fs-18);
|
||||
line-height: 1.56;
|
||||
padding-bottom: 30rem;
|
||||
}
|
||||
|
||||
/* removes default margins */
|
||||
|
|
@ -61,12 +67,67 @@ h1, h2, h3, p {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* once again she uses fluid-topgraphy-calculator to calculate clamp of h1 font
|
||||
* size*/
|
||||
/*
|
||||
* min font size 40px
|
||||
* max font size 88px
|
||||
* min viewport 375px
|
||||
* max viewport 1000px
|
||||
*/
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-size: clamp(2.5rem, 0.7rem + 7.68vw, 5.5rem);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
h1 {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
h1 {
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
/* coder coder's default line-height for p tags */
|
||||
/* line-height: 1.3; */
|
||||
line-height: 1.5;
|
||||
font-size: 1rem;
|
||||
font-size: clamp(1rem, 0.8rem + 0.9vw, 1.125rem);
|
||||
color: var(--text2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
/* automatically adds an ease-in-out animation on color property whenever
|
||||
* there's a hover event change */
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
a.underline {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
line-height: 1.625;
|
||||
letter-spacing: 2.29px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: var(--text1);
|
||||
background-image: linear-gradient(to right, var(--accent) 75%, var(--accent) 75%);
|
||||
background-position: 0 2.1em;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 8px 2px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
|
@ -169,7 +230,10 @@ a:hover {
|
|||
/* HERO */
|
||||
.hero {}
|
||||
|
||||
.hero__wrapper {}
|
||||
.hero__wrapper {
|
||||
padding-bottom: 80px;
|
||||
border-bottom: 1px solid var(--text2);
|
||||
}
|
||||
|
||||
.hero__image {
|
||||
position: absolute;
|
||||
|
|
@ -180,15 +244,38 @@ a:hover {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.hero__rings {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
top: 130px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero__circle {
|
||||
position: absolute;
|
||||
top: 254px;
|
||||
right: 0;
|
||||
translate: 50%;
|
||||
}
|
||||
|
||||
.hero__text {
|
||||
position: relative;
|
||||
/* calculated by the header height - the image height */
|
||||
/* calculated by the header height - the image height + space below towards
|
||||
* main content*/
|
||||
/* she realizes not to use top, but instead margin-top, because top doesn't
|
||||
* effect the entire flow of the page, while margin-top does */
|
||||
margin-top: 295px;
|
||||
margin-top: 335px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* she grabs an interesting css tricks here, using a linear gradeint to create an
|
||||
* underline and using background-position to position it where she desires*/
|
||||
h1 > span {
|
||||
background-image: linear-gradient(to right, var(--accent) 75%, var(--accent) 75%);
|
||||
background-position: 0 1.18em;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 8px 4px;
|
||||
}
|
||||
/* .hero__description {} */
|
||||
|
||||
/* .hero__contact {} */
|
||||
|
|
|
|||
|
|
@ -100,23 +100,37 @@
|
|||
>
|
||||
<source media="(min-width: 37.5em)"
|
||||
srcset="/assets/images/image-profile-tablet.webp"
|
||||
>
|
||||
/>
|
||||
<img
|
||||
class="hero__image"
|
||||
src="/assets/images/image-profile-mobile.webp"
|
||||
alt="picture of Adam Keyes"
|
||||
width="174"
|
||||
height="383"
|
||||
>
|
||||
/>
|
||||
</picture>
|
||||
|
||||
<img
|
||||
class="hero__rings"
|
||||
src="/assets/images/pattern-rings.svg"
|
||||
alt=""
|
||||
width="530"
|
||||
height="129"
|
||||
/>
|
||||
<img
|
||||
class="hero__circle"
|
||||
src="/assets/images/pattern-circle.svg"
|
||||
alt=""
|
||||
width="129"
|
||||
height="129"
|
||||
/>
|
||||
<div class="hero__text">
|
||||
<h1 class="hero__headline">Nice to meet you! I'm Adam Keyes.</h1>
|
||||
<h1 class="hero__headline">Nice to meet you! I'm
|
||||
<span>Adam Keyes</span>.</h1>
|
||||
<p class="hero__description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<a href="" class="hero__contact">Contact me</a>
|
||||
<a href="" class="hero__contact underline">Contact me</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue