Skip to main content

get text to custom place in web page

I AM BEGINNER (JUST START). I AM CREATING THIS WEB PAGE TO PRACTICE HTML / CSS /JS. SO I'M FACING SOME TROUBLE HERE. I NEED TO GET THAT "CREATIVE WEB DESIGNER " TEXT UNDER TO THE HEADER . I TRIED DIFFERENT WAYS. BUT I COUDN'T DO THAT PROPERLY.

class = "topic" THAT HOW I NAME IT (THE TEXT I MENTIONED)

  body {
    background-color: #D8D9DA;
  }
  .header h1 {
    color:rgb(13, 2, 0);
    font-family:"verdana", sans-serif ;
    padding-left: 30px;

  }
  .header {
  background-color: #FFF6E0;
  padding:30px;
  align-items: center;
  border-radius: 70px;
  display: flex;
  justify-content: space-between;
}
.social {
  list-style-type: none;
  display: inline;
  padding: 0px;
  margin-right: 10px;
  object-position: 10px;
  margin-top: 20px;
}
.navi{
  list-style-type:none;
  padding: 8px 16px;
  font-family:"verdana", sans-serif  ;
  font-size: 25px;
  display: block;
  width:20%;
}
.nav {
  list-style-type:none;
  padding: 8px 16px;
  font-family:"verdana", sans-serif  ;
  font-size: 25px;
  display: block;
  color: rgb(0, 0, 0);
  background-color: #61677A ;
  width:20%;
}
.navi:hover{
  color:rgb(248, 246, 246);
  background-color: rgb(0, 5, 7);
}

.line {
  width:1px;
  height: 100%;
  background-color: black;
  position: absolute;
  left:28%;
  top: 20%;


}


.quote {
  font-style: italic;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  display:flex;
  flex-direction: column;
  width: 27%;
  padding-top: 120px;

}

.image1 {
  position: relative;
  max-width: 28%;
  height: 100px;
}

.image1 img {
  position: absolute;
  width:50%;
  left:69px;
  padding-top: 50px;
}

.topic {
  padding-left: 30%;

}

#topic {
  position: relative;
  margin-top: 0%;
}
<header class="header"><h1>WELCOME</h1>
  <ul>
    <li class="social"><img class="insta" src="instagram.png" width="20px" ></li>
    <li class="social"><img class="face" src="facebook.png" width="20px"></li>
    <li class="social"><img class="twi" src="twitter.png" width="20px"> </li>
  </ul>
</header>

<br>
<div class="box">
  <ul class="top">
    <li class="nav">HOME</li>
    <li class="navi">NEWS</li>
    <li class="navi">CONTACT</li>
    <li class="navi">ABOUT</li>
  </ul>

</div>
<div class="line"></div>
<br>
<div class="image1">
<img src="Annotation 2021-11-19 141643.png" >
</div>
<br>

<p class="quote">
" Try To Do Something Different " </p>              
<br>
<div id="topic">
<p class="topic" >CREATIVE WEB DESIGNER</p>
</div>

THAT WHAT I EXPECTING

Via Active questions tagged javascript - Stack Overflow https://ift.tt/fl0BcIT
Labels:

Comments

Post a Comment

Popular posts from this blog

Prop `className` did not match in next js app

I have written a sample code ( Github Link here ). this is a simple next js app, but giving me error when I refresh the page. This seems to be the common problem and I tried the fix provided in the internet but does not seem to fix my issue. The error is Warning: Prop className did not match. Server: "MuiBox-root MuiBox-root-1" Client: "MuiBox-root MuiBox-root-2". Did changes for _document.js, modified _app.js as mentioned in official website and solutions in stackoverflow. but nothing seems to work. Could someone take a look and help me whats wrong with the code? Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console
Post a Comment
Read more