How do I place the avatar in the extreme Right? - Ubuntu

deepjyoti7147
September 15, 2022
36 views
0 votes
2 Answers

I want the avatar image to align with the right side of the screen but it’s not aligning. I have tried text-align but that’s also not workinh

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&family=Ubuntu:ital,wght@0,400;0,700;1,400&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  text-transform: capitalize;
  transition: all 0.2s linear;
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  background: #5cdb95;
  font-family: 'Ubuntu', sans-serif;
}


#preloader{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background: #f1f2f3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* navbar starts */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.7rem 10%;
  height: 6.5rem;
  background-color: #5cdb95;
  box-shadow: 0 1px 4px #379683;
}
section {
  min-height: 100vh;
  padding: 2rem 9%;
}
.heading {
  font-size: 3.5rem;
  color: #05386b;
  font-weight: 800;
  text-align: center;
}
.heading span {
  color: rgb(115, 3, 167);
}
header .logo {
  font-size: 1.9rem;
  font-weight: 800;
  text-decoration: none;
  color: #05386b;
}
header .logo i {
  font-size: 2.2rem;
}
header .logo:hover {
  color: #edf5e1;
}
header .navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .navbar li {
  margin-left: 2.5rem;
}
header .navbar ul li a {
  font-size: 1.57rem;
  color: #05386b;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04rem;
  transition: 0.2s;
}
header .navbar ul li a.active,
header .navbar ul li a:hover {
  color: #edf5e1;
  border-bottom: 0.2rem solid #edf5e1;
  padding: 0.5rem 0;
}
/* navbar ends */


/* hero section starts*/
.home {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  min-height: 100vh;
  align-items: center;
}
.home #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.home .content {
  flex: 1 1 40rem;
  padding-top: 1rem;
  z-index: 1;
}

.home .image {
  flex: 1 1 40rem;
  z-index: 1;
  margin-left: auto;
  display: block;
}
.home .image img {
  width: 80%;
  display: block;
  float:right;
}

.home .content h2 {
  font-size: 5rem;
  font-weight: 800;
  color: #edf5e1;
}
.home .content h2 span {
  font-size: 5rem;
  font-weight: 800;
  color: #05386b;
}
.home .content p {
  font-size: 2.5rem;
  color: #000;
  font-weight: 600;
  padding: 1rem 0;
}
.home .content p span {
  font-size: 2.5rem;
  color: rgb(148, 8, 8);
  font-weight: 600;
  padding: 1rem 0;
}
.home .btn {
  margin-top: 1rem;
  position: absolute;
  line-height: 0;
  padding: 1.6rem 3rem;
  border-radius: 4em;
  transition: 0.5s;
  color: #fff;
  background: #2506ad;
  box-shadow: 0px 5px 18px rgba(48, 68, 247, 0.6);
  font-family: "Nunito", sans-serif;
}
.home .btn span {
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.1rem;
}
.home .btn i {
  margin-left: 0.3rem;
  font-size: 1.5rem;
  transition: 0.3s;
}
.home .btn:hover {
  background: #1a047e;
}
.home .btn:hover i {
  transform: translateX(5px);
}
/* social icons start */
.socials {
  position: relative;
  margin-top: 9rem;
}
.socials .social-icons {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.socials .social-icons li {
  display: inline-block;
  margin-bottom: 14px;
}
.social-icons a {
  font-size: 2rem;
  display: inline-block;
  line-height: 44px;
  color: #00d9ff;
  background-color: #09011b;
  width: 44px;
  height: 44px;
  text-align: center;
  margin-right: 8px;
  border-radius: 100%;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.social-icons a:active,
.social-icons a:focus,
.social-icons a:hover {
  color: #fff;
  background-color: #0685da;
}
.social-icons a.github:hover {
  background-color: #0e0e0e;
}
.social-icons a.twitter:hover {
  background-color: #00aced;
}
.social-icons a.linkedin:hover {
  background-color: #007bb6;
}
.social-icons a.dev:hover {
  background-color: #070707;
}
.social-icons a.instagram:hover {
  background-color: #ee00da;
}
/* social icons end */

/* hero media queries starts*/
@media (max-width: 450px) {
  .home .btn {
    margin: 4rem 0;
  }
  .socials {
    margin-top: 12rem;
  }
  .home .image img {
    margin-top: -12rem;
  }
  .home .content p {
    font-size: 2.2rem;
  }
  .home .content p span {
    font-size: 2.2rem;
  }
}
/* hero media queries ends*/
/* hero section end */

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Deepjyoti's Portfolio</title>
      <link id='favicon' rel="shortcut icon" href="static/images/favicon.jpg" type="image/x-jpg">
      <link href="static/css/style.css" rel="stylesheet"/>
      <script src="https://kit.fontawesome.com/24a4de0b47.js" crossorigin="anonymous"></script>
   </head>
   <body>
      <div id="preloader"class="loader-container">
         <img draggable="false" src="static/images/preloader.gif" alt="" width=100px height=100px >
      </div>
      <!-- navbar starts -->
      <header>
         <a href="/" class="logo" ><img draggable="false" class="tilt" src="static/images/logo.gif" style="width:80px;height:auto"; alt=""></a>
         
         <nav class="navbar">
            <ul>
              <div id="menu" class="fas fa-bars fa-2x""></div>
               <li><a class="active" href="#home">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#skills">Skills</a></li>
               <li><a href="#education">Education</a></li>
               <li><a href="#work">Work</a></li>
               <li><a href="#experience">Experience</a></li>
               <li><a href="#contact">Contact</a></li>
            </ul>
         </nav>
      </header>
      <!-- navbar ends -->
      <!-- hero section starts -->
      <section class="home" id="home">
         <div id="particles-js"></div>
         <div class="content">
            <h2>Hi There,<br/> I'm Deepjyoti <span>Purkayastha</span></h2>
            <p>i am into <span class="typing-text"></span></p>
            <a href="#about" class="btn"><span>About Me</span>
            <i class="fas fa-arrow-circle-down"></i>
            </a>
            <div class="socials">
               <ul class="social-icons">
                  <li><a class="linkedin" aria-label="LinkedIn" href="https://www.linkedin.com/in/deepjyoti7147/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
                  <li><a class="github" aria-label="GitHub" href="https://github.com/deepjyoti7147" target="_blank"><i class="fab fa-github"></i></a></li>
                  <li><a class="twitter" aria-label="Twitter" href="https://twitter.com/deepjyoti7147" target="_blank"><i class="fab fa-twitter"></i></a></li>
                  <li><a class="instagram" aria-label="Instagram" href="https://www.instagram.com/deepjyoti7147"><i class="fab fa-instagram" target="_blank"></i></a></li>
                  <li><a class="dev" aria-label="Dev" href="https://dev.to/deepjyoti7147" target="_blank"><i class="fab fa-dev"></i></a></li>
               </ul>
            </div>
         </div>
         <div class="image">
            <img draggable="false" class="tilt" src="static/images/hero2.png" alt="">
         </div>
      </section>
      <!-- hero section ends -->
      <!--JAVA SCRIPTS -->
      <script src="static/js/script.js"></script>
      
      <!--JAVA SCRIPT END-->
   </body>
</html>

Tags: css html

Answers

Try this:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&family=Ubuntu:ital,wght@0,400;0,700;1,400&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  text-transform: capitalize;
  transition: all 0.2s linear;
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  background: #5cdb95;
  font-family: 'Ubuntu', sans-serif;
}


#preloader{
  position: fixed;
  top: 65px;
  right: 0;
  z-index: 10000;
  background: #f1f2f3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
}

/* navbar starts */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.7rem 10%;
  height: 6.5rem;
  background-color: #5cdb95;
  box-shadow: 0 1px 4px #379683;
}
section {
  min-height: 100vh;
  padding: 2rem 9%;
}
.heading {
  font-size: 3.5rem;
  color: #05386b;
  font-weight: 800;
  text-align: center;
}
.heading span {
  color: rgb(115, 3, 167);
}
header .logo {
  font-size: 1.9rem;
  font-weight: 800;
  text-decoration: none;
  color: #05386b;
}
header .logo i {
  font-size: 2.2rem;
}
header .logo:hover {
  color: #edf5e1;
}
header .navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .navbar li {
  margin-left: 2.5rem;
}
header .navbar ul li a {
  font-size: 1.57rem;
  color: #05386b;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04rem;
  transition: 0.2s;
}
header .navbar ul li a.active,
header .navbar ul li a:hover {
  color: #edf5e1;
  border-bottom: 0.2rem solid #edf5e1;
  padding: 0.5rem 0;
}
/* navbar ends */


/* hero section starts*/
.home {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  min-height: 100vh;
  align-items: center;
}
.home #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.home .content {
  flex: 1 1 40rem;
  padding-top: 1rem;
  z-index: 1;
}

.home .image {
  flex: 1 1 40rem;
  z-index: 1;
  margin-left: auto;
  display: block;
}
.home .image img {
  width: 80%;
  display: block;
  float:right;
}

.home .content h2 {
  font-size: 5rem;
  font-weight: 800;
  color: #edf5e1;
}
.home .content h2 span {
  font-size: 5rem;
  font-weight: 800;
  color: #05386b;
}
.home .content p {
  font-size: 2.5rem;
  color: #000;
  font-weight: 600;
  padding: 1rem 0;
}
.home .content p span {
  font-size: 2.5rem;
  color: rgb(148, 8, 8);
  font-weight: 600;
  padding: 1rem 0;
}
.home .btn {
  margin-top: 1rem;
  position: absolute;
  line-height: 0;
  padding: 1.6rem 3rem;
  border-radius: 4em;
  transition: 0.5s;
  color: #fff;
  background: #2506ad;
  box-shadow: 0px 5px 18px rgba(48, 68, 247, 0.6);
  font-family: "Nunito", sans-serif;
}
.home .btn span {
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.1rem;
}
.home .btn i {
  margin-left: 0.3rem;
  font-size: 1.5rem;
  transition: 0.3s;
}
.home .btn:hover {
  background: #1a047e;
}
.home .btn:hover i {
  transform: translateX(5px);
}
/* social icons start */
.socials {
  position: relative;
  margin-top: 9rem;
}
.socials .social-icons {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.socials .social-icons li {
  display: inline-block;
  margin-bottom: 14px;
}
.social-icons a {
  font-size: 2rem;
  display: inline-block;
  line-height: 44px;
  color: #00d9ff;
  background-color: #09011b;
  width: 44px;
  height: 44px;
  text-align: center;
  margin-right: 8px;
  border-radius: 100%;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.social-icons a:active,
.social-icons a:focus,
.social-icons a:hover {
  color: #fff;
  background-color: #0685da;
}
.social-icons a.github:hover {
  background-color: #0e0e0e;
}
.social-icons a.twitter:hover {
  background-color: #00aced;
}
.social-icons a.linkedin:hover {
  background-color: #007bb6;
}
.social-icons a.dev:hover {
  background-color: #070707;
}
.social-icons a.instagram:hover {
  background-color: #ee00da;
}
/* social icons end */

/* hero media queries starts*/
@media (max-width: 450px) {
  .home .btn {
    margin: 4rem 0;
  }
  .socials {
    margin-top: 12rem;
  }
  .home .image img {
    margin-top: -12rem;
  }
  .home .content p {
    font-size: 2.2rem;
  }
  .home .content p span {
    font-size: 2.2rem;
  }
}
/* hero media queries ends*/
/* hero section end */

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Deepjyoti's Portfolio</title>
      <link id='favicon' rel="shortcut icon" href="static/images/favicon.jpg" type="image/x-jpg">
      <link href="static/css/style.css" rel="stylesheet"/>
      <script src="https://kit.fontawesome.com/24a4de0b47.js" crossorigin="anonymous"></script>
   </head>
   <body>
      <div id="preloader"class="loader-container">
         <img draggable="false" src="static/images/preloader.gif" alt="" width=100px height=100px >
      </div>
      <!-- navbar starts -->
      <header>
         <a href="/" class="logo" ><img draggable="false" class="tilt" src="static/images/logo.gif" style="width:80px;height:auto"; alt=""></a>
         
         <nav class="navbar">
            <ul>
              <div id="menu" class="fas fa-bars fa-2x""></div>
               <li><a class="active" href="#home">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#skills">Skills</a></li>
               <li><a href="#education">Education</a></li>
               <li><a href="#work">Work</a></li>
               <li><a href="#experience">Experience</a></li>
               <li><a href="#contact">Contact</a></li>
            </ul>
         </nav>
      </header>
      <!-- navbar ends -->
      <!-- hero section starts -->
      <section class="home" id="home">
         <div id="particles-js"></div>
         <div class="content">
            <h2>Hi There,<br/> I'm Deepjyoti <span>Purkayastha</span></h2>
            <p>i am into <span class="typing-text"></span></p>
            <a href="#about" class="btn"><span>About Me</span>
            <i class="fas fa-arrow-circle-down"></i>
            </a>
            <div class="socials">
               <ul class="social-icons">
                  <li><a class="linkedin" aria-label="LinkedIn" href="https://www.linkedin.com/in/deepjyoti7147/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
                  <li><a class="github" aria-label="GitHub" href="https://github.com/deepjyoti7147" target="_blank"><i class="fab fa-github"></i></a></li>
                  <li><a class="twitter" aria-label="Twitter" href="https://twitter.com/deepjyoti7147" target="_blank"><i class="fab fa-twitter"></i></a></li>
                  <li><a class="instagram" aria-label="Instagram" href="https://www.instagram.com/deepjyoti7147"><i class="fab fa-instagram" target="_blank"></i></a></li>
                  <li><a class="dev" aria-label="Dev" href="https://dev.to/deepjyoti7147" target="_blank"><i class="fab fa-dev"></i></a></li>
               </ul>
            </div>
         </div>
         <div class="image">
            <img draggable="false" class="tilt" src="static/images/hero2.png" alt="">
         </div>
      </section>
      <!-- hero section ends -->
      <!--JAVA SCRIPTS -->
      <script src="static/js/script.js"></script>
      
      <!--JAVA SCRIPT END-->
   </body>
</html>

- SelcukxD
- September 15, 2022 at 4:50 pm
- 0 votes
0
Your snippet doesnt work but i went to your website and checked your CSS.

Since your image in a container that has a width with limit you gotta use position:absolute and then resize the picture with right and top rulers. But simpy add this code and it will fix your problem. Customize it according to your needs. Don’t forget to set different values for mobile version of the website:
```
.home .image img {
    width: 43%;
    position: absolute;
    top: 17%;
    right: 0;
}
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

How do I place the avatar in the extreme Right? – Ubuntu

Answers