Layout HTML Dan CSS

 

MEMBUAT HALAMAN DEPAN MIRIP ANTHIAGO


HTML:

<DCOTYPE html>
<html lang="en>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Belajar Layout Vikas Verlian</title> 
<link rel="stylesheet" type="text/css" href="anthiago.css">
</head>
<body>
<div class="header">
<div class="content">
        <img src="apa.png" width="30" height="30" class="logo>
<h1 class="unitt"> Inicio </h1>
</div>
</div>
<div class="tab">
<h1>Transkrip video online | Desgrabador</h1>
</div>
<div class="tab">
<h7>Saya mengekstrak subtitle bahasa Inggris dari YouTube dan TED Talks. Mengonversi video YouTube menjadi teks.</h7>
</div>
<div class="row">
<button class="btn"><a id="url_desgrabador" href="https://anthiago.com/desgrabador/">Español</a></button>
<button class="btn"><a id="url_transcript" href="https://anthiago.com/transcript/">English</a></button>
<button class="btn"><a id="url_trascrittore" href="https://anthiago.com/trascrittore/">Italiano</a></button>
<button class="btn"><a id="url_transcripteur" href="https://anthiago.com/transcripteur/">Français</a></button>
<button class="bt"><a id="url_feedback" rel="noopener" href="https://anthiago.com/feedback/">Feedback</a></button>
</div>
<div class="col-lg-12 text-center">
<h2 class="anjay">Video apa yang Anda ingin saya dengarkan untuk Anda?</h2>
<div class="container text-center">
<div class="loader" style="">
<img src="img/gallery/vikas.jpg">
</div>
</div>
<p><span id="contador">12728906</span> videos telah diproses</p>
<div class="bahasa"><select class="input-group-text btn-darkish" translate="no" id="codeL" style="width:220px;text-align: left;">
<option value="af">Afrikaans</option>
<option value="az">Azərbaycan</option>
<option selected="" value="id">Bahasa Indonesia</option>
<option value="ms">Bahasa Malaysia</option>
<option value="bs">Bosanski</option>
<option value="ca">Català</option>
<option value="cs">Čeština</option>
<option value="da">Dansk</option>
<option value="de">Deutsch</option>
<option value="et">Eesti</option>
<option value="en">English (US)</option>
<option value="es">Español (España)</option>
<option value="es-419">Español (Latinoamérica)</option>
<option value="eu">Euskara</option>
<option value="fil">Filipino</option>
<option value="fr">Français</option>
<option value="gl">Galego</option>
<option value="hr">Hrvatski</option>
<option value="zu">IsiZulu</option>
<option value="is">Íslenska</option>
<option value="it">Italiano</option>
<option value="sw">Kiswahili</option>
<option value="lv">Latviešu valoda</option>
<option value="lt">Lietuvių</option>
<option value="hu">Magyar</option>
<option value="nl">Nederlands</option>
<option value="no">Norsk</option>
<option value="uz">O‘zbek</option>
<option value="pl">Polski</option>
<option value="pt">Português (Brasil)</option>
<option value="ro">Română</option>
<option value="sq">Shqip</option>
<option value="sk">Slovenčina</option>
<option value="sl">Slovenščina</option>
<option value="fi">Suomi</option>
<option value="sv">Svenska</option>
<option value="vi">Tiếng Việt</option>
<option value="tr">Türkçe</option>
<option value="be">Беларуская</option>
<option value="bg">Български</option>
<option value="ky">Кыргызча</option>
<option value="kk">Қазақ Тілі</option>
<option value="mk">Македонски</option>
<option value="mn">Монгол</option>
<option value="ru">Русский</option>
<option value="sr">Српски</option>
<option value="uk">Українська</option>
<option value="el">Ελληνικά</option>
<option value="hy">Հայերեն</option>
<option value="iw">עברית</option>
<option value="ur">اردو</option>
<option value="ar">العربية</option>
<option value="fa">فارسی</option>
<option value="ne">नेपाली</option>
<option value="mr">मराठी</option>
<option value="hi">हिन्दी</option>
<option value="as">অসমীয়া</option>
<option value="bn">বাংলা</option>
<option value="pa">ਪੰਜਾਬੀ</option>
<option value="gu">ગુજરાતી</option>
<option value="or">ଓଡ଼ିଆ</option>
<option value="ta">தமிழ்</option>
<option value="te">తెలుగు</option>
<option value="kn">ಕನ್ನಡ</option>
<option value="ml">മലയാളം</option>
<option value="si">සිංහල</option>
<option value="th">ภาษาไทย</option>
<option value="lo">ລາວ</option>
<option value="my">ဗမာ</option>
<option value="ka">ქართული</option>
<option value="am">አማርኛ</option>
<option value="km">ខ្មែរ</option>
<option value="ja">日本語</option>
<option value="ko">한국어</option>
<option value="ceb">Cebuano</option>
<option value="zh-Hans">中文 (简体)</option>
<option value="zh-Hant">中文 (繁體)</option>
<option value="co">Corso</option>
<option value="ht">Criollo Haitiano</option>
<option value="eo">Esperanto</option>
<option value="fy">Frisón Occidental</option>
<option value="gd">Gaélico Escocés</option>
<option value="cy">Galés</option>
<option value="ha">Hausa</option>
<option value="haw">Hawaiano</option>
<option value="hmn">Hmong</option>
<option value="ig">Igbo</option>
<option value="ga">Irlandés</option>
<option value="jv">Javanés</option>
<option value="rw">Kinyarwanda</option>
<option value="ku">Kurdo</option>
<option value="la">Latín</option>
<option value="lb">Luxemburgués</option>
<option value="mg">Malgache</option>
<option value="mt">Maltés</option>
<option value="mi">Maorí</option>
<option value="ny">Nyanja</option>
<option value="ps">Pastún</option>
<option value="sm">Samoano</option>
<option value="sn">Shona</option>
<option value="sd">Sindhi</option>
<option value="so">Somalí</option>
<option value="st">Sotho Meridional</option>
<option value="su">Sundanés</option>
<option value="tt">Tártaro</option>
<option value="tg">Tayiko</option>
<option value="tk">Turcomano</option>
<option value="ug">Uigur</option>
<option value="xh">Xhosa</option>
<option value="yi">Yidis</option>
<option value="yo">Yoruba</option>
</select>
</div>
<div>
<input id="url_input" class="input" placeholder="Tempel di sini tautan video YouTube yang ingin Anda hapus rekamannya" type="text" name="frase" style="width:100%;">
</div  class="button">
<button><b>Transkrip</b></button>
<footer id="footer">
<div class=" text-center blue-background text-white py-3"><p class="anjay">Dengan alat gratis ini, Anda akan dapat mengekstrak teks subtitle dari YouTube, TED Talks, video wawancara, kelas, dll. Ini adalah alat praktis yang membantu Anda mengubah video youtube menjadi teks.</p>
<a id="url_me" href="https://anthiago.com" class="foot">© 2022 - anthiago.com</a>
</div>
</footer>
</body>
</html>

CSS :
.header{
width: 1330px;
height: 30px;
background-color: #364e59;
}

.content {
display: flex;
}

.logo{
float: left;
}


.unitt {
        
padding: 16px 40px 16px 48px;
        text-align: justify;
        font-weight: bold;
        flex-direction: column;
font-size: 16px;
color: white;
}

.tab{
    display: block!important;
padding: 16px 40px 16px 48px;
        text-align: justify;
        background-color: #ffffff; 
        font-weight: bold;
        flex-direction: column;
font-size: 16px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
border:5px;
text-align : center;
}

.btn{
background-color: red;
}

.bt{
background-color:  #00cc00;
}


.text-center {
    text-align: center;
background-color: #364e59;
}

.bahasa{
text-align: center;
}

.input{
background-color : white;
width : 50px;
text-align : center;
}

.button{
background-color: white;
}

.foot{
color : white;
}






Komentar

Posting Komentar

Postingan Populer