Bahasa Pemrograman Berupa HTML & CSS. Kali Pembahasan/Materi Yang Saya Berikan Berjudul : Cara Membuat desain
Card Profile With/Dengan HTML CSS. Ini Sederhana Banget Dan Fleksibel:v
LANGKA PERTAMA YANG KALIAN HARUS MEMBUAT CARD PROFILE
BUKA TEXT EDITOR YANG KALIAN GUNAKAN UNTUK MENJALANKAN SEBUAH KODE KODE BAHASA
PEMROGRAMAN!
KALIAN JUGA BISA MEMBUAT CARD PROFILE COMPANY ATAU PERUSAHAN KERJA KALIAN, DLL}
BIKIN FILE YANG BERNAMA .html Atau Ekstensi File Nya...
kode:
KODE HYPERTEXT MARKUP LANGUANGE ATAU LEBIH DI KENAL PEMANGGILAN *HTML*
BAHASA MARKAH/MARKUP STANDAR UNTUK MEMBUAT HALAMAN/KONTEN WEBSITE MAU PUN PROJECT DAN INFORMASI LAINNYA
DAN MENAMPILKAN KONTEN WEBSITE YANG KALIAN BUAT KE SOFTWARE BROWSER - CHROME
///
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="author" http-equiv="card-profile">
<!-- css saya link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<title>CARD PROFILE</title>
</head>
<body onload="cardprofilehtmlcss()">
<!-- main -->
<div class="main" data-aos="fade-down"
data-aos-easing="linear"
data-aos-duration="1500">
<div class="container-main">
<div class="col-10">
<div class="image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-7WT78SoXJB531eLjmeRQN3YInMguvj--iQ&usqp=CAU" alt="user" class="rounded-circle">
</div>
<div class="text-main">
<h2>Web Developer</h2>
<br>
<p style="text-align: center; margin-top: -30px; font-size: 15px; font-weight: bold; margin-left: 80px;">@defanvicky.com</p>
</div>
<div class="image-flex">
<div class="label-image">
<label for="image"><img src="https://png.pngtree.com/element_our/md/20180515/md_5afaf0c42f0c8.jpg" alt="fb" width="40"></label>
<label for="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQroQXj8pPlU9HA94R1EdJwMLdkCMFlA3EONg&usqp=CAU" alt="fb" width="40"></label>
<label for="image"><img src="https://asset-a.grid.id/crop/0x0:0x0/x/photo/2019/03/22/3720499105.jpg" alt="fb" width="40" class="rounded-circle"></label>
</div>
</div>
<div class="main-h3">
<h3 style="font-size: 15px; margin-top: 30px; text-align: center; word-spacing: 2px; width: 140%;">Situs Web Komputer Dan Internet</h3>
</div>
<div class="button">
<div class="button-submit">
<button type="submit" name="kirim" class="btn btn-primary">Message</button>
</div>
</div>
</div>
</div>
</div>
<!-- footer copyright -->
<div class="footer">
<div class="footer-copy">
<h5>
<em>Copyright by - TEAM HCT❤</em>
</h5>
</div>
</div>
<!-- javascript -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
SELANJUTNYA KITA MEMBERIKAN SEBUAH KODE CSS UNTUK MENGDESAIN
KONTEN YANG KITA BUAT ATAU WEBSITE
YAITU CSS ATAU CASCADING STYLE SHEET
CSS ADALAH SEBUAH BAHASA STYLE SHEET UNTUK MENGATUR TAG/ELEMENT HTML AGAR WEBSITE KALIAN
MENJADI RESPONSIVE. DAN MENGDESAIN HALAMAN WEBSITE KALIAN..
LANGKA AWAL YANG KITA HARUS BERIKAN CSS DI HTML YAITU TAG <link>
<link rel="stylesheet" type="text/css" href="Nama.css">
KARENA SAYA TIDAK MENGGUNAKAN LINK UNTUK MENGHUBUNGKAN FOLDER/FILE CSS KE HTML
DAN SAYA MENGGUNAKAN TAG di dalam element <head></head> <style></style
KODE CSS:
<style type="text/css" media="screen">
body
{
padding: 0;
margin: 0;
background-color: skyblue;
font-family: sans-serif;
align-items: center;
min-height: 780px;
}
.main{
display: flex;
border: 2px outset;
background: white;
width: 340px;
height: 500px;
margin: auto;
border-color: blue;
margin-top: 40px;
border-radius: 40px;
}
.image img
{
margin-left: 50px;
width: 40%;
margin: 25px;
position: relative;
bottom: 0;
left: 56px;
}
.image{
padding: 10px;
width: 137%;
background: blue;
border-radius: 40px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.text-main h2
{
text-align: center;
font-size: 27px;
margin-top: 30px;
margin-left: 10px;
width: 130%;
}
.image-flex img{
margin: auto;
position: relative;
bottom: -10px;
left: 70px;
padding: 0;
margin-right: 30px;
border-style: none;
}
.image-flex img:hover
{
border: 2px solid;
box-shadow: 1px 1px 1px 1px white;
border-color: white;
width: 30px;
}
.button button{
border-radius: 50px;
width: 100%;
margin-top: 32px;
margin-left: 50px;
transition: 0.6s;
font-style: italic;
animation: defan 6s;
-webkit-animation: defan 6s;
-moz-animation: defan 6s;
}
@keyframes defan
{
20%{background: yellow; color: black; width: 40%;}
}
.button button:hover
{
background: yellow;
color: black;
border-color: yellow;
box-shadow: 10px 10px 10px black;
text-shadow: 1px 1px black;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
font-style: normal;
}
.footer
{
text-align:center;
color: white;
border: 2px solid;
background: black;
text-transform: uppercase;
width: 340px;
border-color: black;
margin: auto;
margin-top: 30px;
border-radius: 40px;
}
.footer h5 em
{
font-size: 14px;
}
</style>
KASIH DI DALAM TAG HEAD. - ELEMENT HEAD INI SEKUMPULAN DATA ATAU META DATA YANG MENGISI INFORMASI
TENTANG DOKUMEN KALIAN
NOTE: MOHON MAAF JIKA ADA KATA - KATA YANG TYPO:)
PARTNER: https://thesevenzerogans.blogspot.com/ (ZeroGans)
#PEMULA
#ITMANADO IN SULAWESI UTARA
Comments
Post a Comment