HTML CSS Yazı Ortalama

redflu · 18 Şubat 2023

Merhaba arkadaşlar, tasarımcı olarak kendi sitemi kuruyorum fakat kodlama kısmında biraz takıldım. İki yazının da verdiğim Figma çizimindeki yerlerinde olmasını istiyorum. X ekseninde sayfanın tam ortasında ve yine kendi aralarında sağ ve solda ortalanmış olmalarını. Bunu margin ile yapabildim fakat o zaman responsive olmuyor. Daha farklı olarak flex-direction ve align-items denedim fakat başarılı olamadım. Bunu daha kolay nasıl halledebilirim?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <style>
      body {
        font-family: 'Poppins', sans-serif;
        font-size: 36px;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="left">portfolio</div>
    <div class="right">about me</div>
    </body>
</html>

CSS:

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  background: conic-gradient(from 180deg, #fff, #000);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.left {
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}


.right {
  color: #fff;

}

naberr · 18 Şubat 2023

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <style>
      body {
        font-family: 'Poppins', sans-serif;
        font-size: 36px;
        margin: 0;
      }
   body {
    height: 100vh;
    width: 100vw;
    margin: 0;
     background: conic-gradient(from 180deg, #fff, #000);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.left {
  color: black;
 height: 100vh;
    margin: auto;
  width: 50vw;
text-align: center;




}


.right {
  color: #fff;
height: 100vh;
    width: 50vw;
text-align: center;



}

.anadiv {
 float:left;
 height: 100vh;
    width: 100vw;


}
.clear {
  clear:both;
}
.menu {
   position: absolute;
text-align: center;
height: 100vh;
    width: 50vw;
 top: 50%;
}

    </style>
  </head>
  <body>
<div class="anadiv">
<div class="left" style="float:left">  <div class="menu"> portfolio </div>  </div>
<div class="right" style="float:left"> <div class="menu"> about me </div> </div>
</div>
<div class="clear"></div>
</body>
</html>

Ara

Ara

HTML CSS Yazı Ortalama

redflu

naberr

BENZER KONULAR

SON KONULAR

En Son İçerikler

Çevrim içi üyeler

Forum istatistikleri