tomit4/notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🚧 Continued on with coder coder's front end tutorial

Browse source
This commit is contained in:
z3rOR0ne 2023-02-08 03:26:47 -08:00
parent 99525165c9
commit 3cb8fa2334
3 changed files with 114 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

95
coder_coder.css
View file

@ -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 {} */