diff --git a/Boq-and-I.jpg b/Boq-and-I.jpg new file mode 100644 index 0000000..8586c39 Binary files /dev/null and b/Boq-and-I.jpg differ diff --git a/about.html b/about.html new file mode 100644 index 0000000..f8b9501 --- /dev/null +++ b/about.html @@ -0,0 +1,94 @@ + + + + + + About Me + + + + +
+
+
+

Hobbies

+ Skiing +

+ Popular team sports include soccer, basketball, baseball, football, + hockey, and volleyball. Individual sports such as tennis, golf, + boxing, gymnastics, swimming, and track and field offer athletes the + chance to compete on their own. There are also extreme and adventure + sports like skateboarding, snowboarding, surfing, rock climbing, and + mountain biking. Combat sports such as martial arts, wrestling, + judo, and kick boxing test strength and technique, while racing sports + like Formula 1, cycling, and horse racing emphasize speed and + endurance. Other unique or recreational sports include table tennis, + badminton, cricket, squash, and archery. +

+
+
+

Entertainment

+ Movie Theater +

+ Watching movies or TV at home or in theaters, listening to music or + podcasts, and playing video games on various platforms. Attending + concerts, music festivals, or sporting events provides exciting + social experiences, while reading books, magazines, or graphic + novels offers a quieter form of entertainment. Dancing, whether at + clubs or in formal settings, remains a popular pastime. Amusement + parks, fairs, escape rooms, arcades, and laser tag offer active fun, + while karaoke nights and open mic events encourage audience + participation. Other hobbies include painting and crafting. +

+
+
+

Work

+ Family +

+ In my family, love is the foundation of everything we do. We support + each other through every high and low, always knowing that no matter what + happens, we have one another to lean on. We show our care not just through + words, but through the little things—sharing meals, checking in after a long day, + and making time to simply be together. There's a deep sense of trust between + us, and even when we disagree or face challenges, we always come back to love, + forgiveness, and understanding. My family is my safe place, where I feel + completely accepted for who I am. Knowing that I am unconditionally loved gives + me the strength and confidence to face whatever life brings. +

+ +
+
+ + + diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..86e455c --- /dev/null +++ b/contact.html @@ -0,0 +1,55 @@ + + + + + + Contact Us + + + + +
+ +
+ + + diff --git a/home.html b/home.html new file mode 100644 index 0000000..25a11d7 --- /dev/null +++ b/home.html @@ -0,0 +1,47 @@ + + + + + + Personal Website + + + + +
+

Coding student

+ + Boq and I +

Soon to be pro coder

+ +
+ + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..5bab1ee --- /dev/null +++ b/index.js @@ -0,0 +1,18 @@ +const firstName = "Alvaro "; +const lastName = "Carvajal"; + +console.log(firstName, lastName); +document.write(firstName, lastName); + +// const abt1 = document.getElementById("abt1"); +// console.log(abt1); +// abt1.textContent = firstName + lastName; +// abt1.textContent += firstName + lastName; + +// const element = document.createElement("h1"); +// element.textContent = "Java Trial"; +// const main = document.getElementsByClassName("mainAbout")[0]; +// console.log(main); +// const abtdiv = document.getElementsByClassName("abtdiv")[1]; +// console.log(abtdiv); +// main.append(element); diff --git a/linkedin.png b/linkedin.png new file mode 100644 index 0000000..9387f58 Binary files /dev/null and b/linkedin.png differ diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 0000000..d1fee89 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,61 @@ + + + + + + Portfolio + + + + +
+
+

CSS Web Development

+ ZOO +
+
+

CSS Web Development

+ FULLSTACK BAKERY +
+
+

CSS Web Development

+ FURNITURE EMPORIUM +
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d898d41 --- /dev/null +++ b/style.css @@ -0,0 +1,220 @@ +html { + background-color: rgb(207, 207, 207); +} + +body { + margin: 0; +} + +nav, +footer { + background-color: rgb(73, 73, 73); + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + height: 3rem; + max-width: 100vw; +} + +header { + color: white; + font-size: 2rem; +} + +div, +aside { + display: flex; + gap: 2rem; + flex-wrap: wrap; +} + +.links, +.contact { + font-size: 1.5rem; + color: white; + text-decoration: none; +} + +#mainHome { + display: grid; + grid-template-columns: repeat(1fr, 3); +} + +#picture { + grid-column: 2/3; + grid-row: 1/3; + width: 30vw; + justify-self: center; +} + +.left { + grid-column: 1/2; + justify-self: center; +} + +.right { + grid-column: 3/4; + justify-self: center; +} + +.top { + text-align: center; + font-size: 2rem; + grid-row: 1/2; + align-self: end; + margin: 1rem; + margin-bottom: 0; +} + +.bottom { + grid-row: 2/3; + margin: 2rem; + text-align: center; + max-width: 35rem; +} + +.logo { + display: flex; + width: 3rem; + margin-right: 2rem; + align-items: center; + justify-content: center; +} + +/* About page specific code*/ + +.mainAbout { + display: flex; + justify-content: center; +} + +.aboutArticle { + display: flex; + flex-direction: column; + background-color: lightslategray; + padding-inline: 3rem; + width: 40rem; +} + +.pabt { + color: white; + font-size: 1.25rem; + margin-bottom: 1rem; + margin-top: 1rem; +} + +.abt { + display: flex; + font-size: 2rem; + color: white; + justify-content: center; + text-align: start; + margin-bottom: 0; + border-bottom-style: inset; + margin-top: 0.5rem; +} + +.pic { + max-width: 20rem; + float: left; + margin: 1rem; +} + +/* Portfolio page */ + +#mainPortfolio { + display: flex; + width: 100vw; + flex-wrap: wrap; + margin: auto; + padding-block: 5rem; + justify-content: space-evenly; + background-image: url(https://ostraining.com/wp-content/uploads/coding/html5-css3-hd.jpg); + background-repeat: no-repeat; + background-size: 8rem; + background-position-x: right; + background-position-y: top; + gap: 3rem; +} + +figure { + margin: 0; +} + +h2 { + display: flex; + justify-content: center; +} + +#projects { + display: flex; + justify-content: center; + background-color: lightslategray; + text-align: center; + padding: 3rem; + color: white; + font-size: 2rem; + max-width: 12rem; + border-radius: 2rem; + overflow-wrap: break-word; + font-family: arial; + font-weight: bolder; + text-decoration: none; +} + +/* Contact Us Page */ + +#contact { + display: flex; + flex-direction: column; + gap: 1rem; +} + +#inquiries { + margin: auto; +} + +.pHome { + display: flex; + color: rgb(0, 0, 0); + font-size: 1.25rem; + justify-content: center; + align-content: space-around; +} + +iframe { + display: flex; + margin: auto; + max-width: 80%; + margin-bottom: 2rem; +} + +/* Media queries limits */ + +@media (max-width: 550px) { + #mainHome { + display: flex; + flex-direction: column; + align-items: center; + } + .top { + margin: auto; + margin-top: 0.5rem; + } + .bottom { + margin: 1rem; + margin-top: 0.5rem; + } +} +@media (width <= 300px) { + html { + display: none; + } +} + +@media (height <= 400px) { + html { + display: none; + } +}