Question 36715 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Adding more text HTML – Jquery

I’m making a personal site but I am also a bit of a newbie. I wanted to eventually implement some sort of smooth scrolling but for now, I’m trying to add more text and place it in the center of the screen. I can’t seem to figure out how to do it, I’ve tried a few different things but not what I’m looking for. My vision is a smaller line of text that says "Hi, my name is", then in large text "name". Underneath I want smaller text in more paragraph form. Here is what I currently have:

@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@1,700;1,800&display=swap');
*

{
    margin: 0;
    padding: 0;
    bottom: 0;
    box-sizing: border-box;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body
{
    min-height: 100vh;
    background: linear-gradient(#000, #fff);
}
header
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 50px;
    display: flex;
    justify-content: space-between;
    align-items: top;
}
header .logo
{
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 1px;
}
.header img 
{
    float: left;
    width: 160px;
    height: 150px;
    position: absolute;
    left: 50px;
    top: -20px;

}
  

header ul
{
    display: flex;
    justify-content: center;
    align-items: top;
}
header ul li
{
    list-style: none;
    margin-left: 20px;
    margin-top: 10px;
}
header ul li a
{
    text-decoration: none;
    padding: 6px 15px;
    color: #fff;
    border-radius: 20px;
}
header ul li a:hover ,
header ul li a.active
{
    background: #CEE4F3;
    color: #000;
}
section
{
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 100px;
    z-index: -1000;
    
}
section img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1000;
    opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>personal site</title>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <div class="header">
            <img src="logo-no-background.png" alt="logo" />
          </div>
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Personal Projects</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </header>
    <section>
        <img src="7076118.jpg" id="wavy">
    </section>
</body>
</html>
Tags:

2

Answers


  1. 0

    You can use prompt() to get user input. Then assign that to the innerText of a DOM element.

    const input = prompt('enter your name: ');
const name = document.querySelector('.name');

name.innerText = input;
    <h2>Hi, my name is</h2>
<h1 class="name"></h1>
    Login or Signup to reply.
  2. 0

    I assume you want to achieve something the this?
    You can then play around with the style properties to achieve your desired results. Mark correct if helped😉…

    @import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@1,700;1,800&display=swap');
* {
    margin: 0;
    padding: 0;
    bottom: 0;
    box-sizing: border-box;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    min-height: 100vh;
    background: linear-gradient(#000, #fff);
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 50px;
    display: flex;
    justify-content: space-between;
    align-items: top;
}

header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 1px;
}

.header img  {
    float: left;
    width: 160px;
    height: 150px;
    position: absolute;
    left: 50px;
    top: -20px;

}
  

header ul {
    display: flex;
    justify-content: center;
    align-items: top;
}

header ul li {
    list-style: none;
    margin-left: 20px;
    margin-top: 10px;
}

header ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: #fff;
    border-radius: 20px;
}

header ul li a:hover ,
header ul li a.active {
    background: #CEE4F3;
    color: #000;
}

section {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 100px;
    z-index: -1000;
    
}

section img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1000;
    opacity: 1;
}

.intro {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: 40%;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
}

p {
  color: #fff;
}

.intro p:first-child {
  padding-bottom: 10px;
}

.intro p:last-child {
  font-size: 12px;
}

.intro span {
  font-weight: bold;
  font-size: 1.3rem;
}
    <header>
  <div class="header">
      <img src="logo-no-background.png" alt="logo" />
    </div>
  <ul>
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Personal Projects</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
</header>
<section>
  <img src="https://images.unsplash.com/photo-1478760329108-5c3ed9d495a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" id="wavy">
</section>

<div class="intro">
  <p>
    Hi, my name is:
    <span>Name Surname</span>
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec lobortis nisi, eget faucibus neque. Morbi placerat sem at elementum aliquam. Aenean nec quam id elit ornare eleifend a et sapien.
  </p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search