Building Portfolio Website Using HTML CSS & JavaScript Day108

Building Portfolio Website Using HTML CSS & JavaScript Day108

·

3 min read

Today #Day108 of #365DaysOfCode, I am Building Portfolio Website Using HTML CSS & JavaScript.

Contact me

define a section with class and ID,

define h2 tag and span tag,

<section class="contact section" id="contact">
     <h2 class="section__title">Contact me</h2>
     <span class="section__subtitle">Get in touch</span>
</section>

Now, define another div,

Tip: shortcut for the below HTML snippet: div.contact__container.container.grid>div>div.contact__information

<div class="contact__container container grid">
  <div>
  <div class="contact__information">

  </div>
  </div>
</div>

div>h3.contact__title>span.contact__subtitle

<div>
    <h3 class="contact__title">Call me</h3>
    <span class="contact__subtitle">XXX-XXX-XXX</span>
</div>

duplicate the div with contact__information x2

replace the icons,

 <!-- contact info 2 -->
<div class="contact__information">
    <i class="fa-regular fa-envelope contact__icon"></i>
    <div>
        <h3 class="contact__title">Email me</h3>
        <span class="contact__subtitle">yssdhiraj@gmail.com</span>
    </div>
</div>
<!-- contact info 3 -->
<div class="contact__information">
    <i class="fa-solid fa-earth-asia contact__icon"></i>
    <div>
        <h3 class="contact__title">Location</h3>
        <span class="contact__subtitle">Remote</span>
    </div>
</div>

create a form element with class,

Tip: shortcut for the below HTML snippet:

form.contact__form.grid>div.contact__inputs.grid>div.contact__content>label.contact__label

define a input with class,

<form action="" class="contact__form grid">
  <div class="contact__inputs grid">
      <div class="contact__content">
       <label for="" class="contact__label">Name</label>
       <input type="text" class="contact__input">
      </div>
  </div>
</form>

duplicate with class contact__content x1,

<div class="contact__content">
      <label for="" class="contact__label">Email</label>
      <input type="email" class="contact__input">
</div>

Now, add the below HTML snippet as a child to the form element,

<div class="contact__content">
    <label for="" class="contact__label">Project</label>
    <input type="text" class="contact__input">
</div>
<div class="contact__content">
   <label for="" class="contact__label">Message</label>
   <textarea name="" id="" cols="0" rows="7" class="contact__input">               </textarea>
</div>

define another div to hold the button icon,

<div><a href="#" class="button button--flex">
  Send Message
  <i class="fa-solid fa-paper-plane button__icon"></i>
</a></div>

styling the container,

.contact__container{
  row-gap: 3rem;
}
.contact__information{
  display: flex;
  margin-bottom: var(--mb-2);
}

styling the icons,

.contact__icon{
  font-size: 2rem;
  color: var(--first-color);
  margin-right: var(--mb-0-75);
}

starring title and subtitle,

.contact__title{
  font-size: var(--h3-font-size);
font-weight: var(--font-medium);
}
.contact__subtitle{
font-size: var(--small-font-size);
color: var(--text-color-light);
}

styling content and label and input,

.contact__content{
background-color: var(--input-color);
border-radius: .5rem;
padding: .75rem 1rem .25rem;
}
.contact__input{
  width: 100%;
background-color: var(--input-color);
color: var(--text-color);
font-family: var(--body-font);
font-size: var(--normal-font-size);
border: none;
outline: none;
padding: .25rem .5rem .5rem  0;
}
.contact__label{
  font-size: var(--smaller-font-size);
  color: var(--title-color);
}

Footer

Tip: shortcut for the below HTML snippet:

footer.footer>div.footer__bg>div.footer__container.container.grid>div>h1.footer__title

<footer class="footer">
    <div class="footer__bg">
        <div class="footer__container container grid">
            <div>
                <h1 class="footer__title">Dheeraj</h1>
                <span class="footer__subtitle">Full Stack Developer</span>
            </div>
        </div>
    </div>
</footer>

define a unordered list,

<ul class="foooter__links">
    <li>
        <a href="#services" class="footer__link">Services</a>
    </li>
    <li>
        <a href="#portfolio" class="footer__link">Portfolio</a>
    </li>
    <li>
        <a href="#contact" class="footer__link">Contact</a>
    </li>
</ul>

define HTML for footer socials,

Tip: shortcut for the below HTML snippet:

div.footer__socials>a.footer__social*3

add target attribute to open link in the new tab,

<div class="footer__socials">
    <a href="" class="footer__social" target="_blank">
        <i class="fa-brands fa-linkedin"></i>
    </a>
    <a href="" class="footer__social" target="_blank">
        <i class="fa-brands fa-hashnode"></i>
    </a>
    <a href="" class="footer__social" target="_blank">
        <i class="fa-brands fa-github"></i>
    </a>
</div>

Now, adding p tag with innerHTML All rights reserved,

<p class="footer__copy">&#169 Dheeraj. All rights reserved</p>

styling footer element and class container,

.footer {
  padding-top: 2rem;
}
.footer__container {
  gap: 3.5rem;
}

styling the footer bg,

.footer__bg {
  background-color: var(--first-color-second);
  padding: 2rem 0 3rem;
  border-radius: 10px;
}

styling the title and subtitle,

.footer__title {
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb-0-25);
}
.footer__subtitle {
  font-size: var(--small-font-size);
}

styling the links and adding hover effect to change color,

.foooter__links {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
.footer__link:hover {
  color: var(--first-color-lighter);
}
.footer__social {
  font-size: 1.2rem;
  margin-right: var(--mb-1-5);
}
.footer__social:hover {
  color: var(--first-color-lighter);
}
.footer__copy {
  font-size: var(--smaller-font-size);
  text-align: center;
  color: rgb(0, 0, 0);
  margin-top: var(--mb-3);
}
.footer__title,
.footer__subtitle,
.footer__link,
.footer__social {
  color: rgb(26, 26, 26);
}

I completed the contact portion of my portfolio website and the footer portion.

Code

  1. code

    preview

Source: Bedimcode [Link]

Author: Dheeraj.y

Connect with me:

Did you find this article valuable?

Support dheerajy blog by becoming a sponsor. Any amount is appreciated!