Amelia Zalfa Sahira

<!
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">
<title>AMELIA</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="wrapper">
<div class="logo"><a>WEB</a></div>
<div class="menu">
</div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#tutors">Tutors</a></li>
<li><a href="#partners">Partners</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="" class="tbl-biru">Sign Up<a><li>
</ul>
</nav>
<section id="home">
<img src="https://img.freepik.com/free-vector/programming-concept-
illustration_114360-1351.jpg?
size=338&ext=jpg&ga=GA1.2.475307222.1678504015&semt=sph"/>
<div class="kolom">
<p class="deskripsi">Belajar programming<p>
<h2>Tetap Semangat, Jangan Menyerah demi masa depan</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nam, laborum.</p>
<p><a href="" class="tbl-pink" >Pelajari lebih lanjut</a></p>
</div>
</section>
<section id="courses">
<div class="kolom">
<p class="deskripsi">You Will Need This</p>
<h2>Online Courses</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Natus asperiores distinctio reprehenderit? Harum magnam sunt deserunt ab
eaque, impedit ut.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Natus asperiores distinctio reprehenderit? Harum magnam sunt deserunt ab
eaque, impedit ut.</p>
<p><a href="" class="tbl-biru">Pelajari lebih lanjut</a></p>
</div>
<img src="https://img.freepik.com/free-vector/online-tutorials-
concept_52683-37480.jpg?
size=626&ext=jpg&ga=GA1.2.475307222.1678504015&semt=sph">
</section>
<section id="tutors">
<div class="tengah">
<div class="kolom">
<p class="deskripsi">Our Top Tutors</p>
<h2>Tutors</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Dolorem, nulla?</p>
</div>
<div class="tutor-list">
<div class="kartu-tutor">
<img
src="https://img.apmcdn.org/6ac0d04d3e4998c4961ad00c09ae3be92c4299fc/square/
faa0df-20230105-alex-turner-webp2000.webp"/>
<p>Alex Turner</p>
</div>
<img
<p>Alex Turner</p>
</div>
<img
<p>Alex Turner</p>
</div>
<img
<p>Alex Turner</p>
</div>
</div>
<section id="partners">
<div class="tengah">
<div class="kolom">
<p class="deskripsi">Our Top Partners<p>
<h2>Partners</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Quod illum nam voluptas soluta id sint optio iure labore repudiandae
ipsam!</p>
</div>
<div class="partners-list">
<div class="kartu-partners">
<img
src="https://media.istockphoto.com/id/1150645589/vector/color-logo-of-the-
school.jpg?
s=612x612&w=0&k=20&c=ZkTcftJRC6On3qENe6NLgMvWRsWirSIb9c3dCcNQdcw="/>
</div>
<img
src="https://media.istockphoto.com/id/1135962989/vector/university-campus-
logo-with-text-space-for-your-slogan-tag-line-illustration.jpg?
s=612x612&w=0&k=20&c=QRLY_rl52qazBfxNg1MvqSiQpyRhyizzIDR5waBvZKs="/>
</div>
<img
src="https://t4.ftcdn.net/jpg/04/91/76/63/360_F_491766344_Ei620Y71QdATzR00ubhG
u3AGvUhKfFPa.jpg"/>
</div>
<img
src="https://images-platform.99static.com//Njwsdp2N4AYKlxOF_cm_MwvyTMw=/
0x0:1000x1000/fit-in/500x500/99designs-contests-attachments/125/125896/
attachment_125896981"/>
</div>
<img
src="https://i.pinimg.com/736x/5f/7a/ff/5f7aff7fcf3ebcfaf8038b480a5b51c8.jpg"/
>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
<div id="contact">
<div class="footer">
<div class="footer-section">
<h3>WEB</h3>
elit. Officia, corrupti?</p>
</div>
<h3>About</h3>
elit. Officia, corrupti?</p>
</div>
<h3>Contact</h3>
<p>Jl.Nuri</p>
<p>Kode pos: 65897</p>
</div>
<h3>Social</h3>
<p><b>IG:</b>amelia.zlfa</p>
</div>
</div>
</div>
</div>
<div id="copyright">
©2023. <b>WEB</b> All Rights Reserved.
</div>
</div>
</body>
</html>
CSS
*{
text-decoration: none;
margin: 0px;
padding: 0px;
}
body{
margin:0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
}
.wrapper{
width: 1100px;
margin: auto;
position: relative;
}
.logo a{
font-size: 50px;
font-weight: bold;
float: left;
font-family: 'courier';
color: #364f6b;
}
.menu{
float: right;
}
nav{
width: 100%;
margin: auto;
display: flex;
line-height: 80px;
position: sticky;
position: -webkit-sticky;
top: 0;
background: #FFFFFF;
z-index: 1;
border-bottom: 1px solid #364f6b;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a{
color: black;
font-weight: bold;
text-align: center;
padding: 0px 16px 0px 16px;
}
nav ul li a:hover{
text-decoration: underline ;
}
section{
margin: auto;
display: flex;
margin-bottom: 50px;
}
.kolom{
margin-top: 50px;
}
.kolom .deskripsi{
font-size: 20px;
font-weight: bold;
font-family: 'comic sans ms';
color:#364f6b ;
}
h2{
font-weight: 800;
font-size: 45px;
color:#364f6b ;
width: 100%;
line-height: 50px;
}
a.tbl-biru {
background: #3f72af;
border-radius: 20px;
margin-top: 20px;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
}
a.tbl-biru:hover{
background: #fc5185;
}
a.tbl-pink{
background: #fc5185;
border-radius: 20px;
margin-top: 20px;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
}
a.tbl-pink{
background: #3f72af;
}
p{
margin: 10px 0px 10px 0px;
}
.tengah{
text-align: center;
width: 100%;
}
.tutor-list{
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
}
.kartu-tutor{
width: 20%;
margin: 0 auto;
}
.kartu-tutor img {
width: 80%;
border-radius: 50%;
}
.kartu-tutor p{
font-weight: 800;
font-size: 25px;
text-align: center;
color: #364f6b;
}
.patrners-list{
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
}
.kartu-partners{
width: 20%;
margin: 0 auto;
}
.kartu-partners img{
width: 150px;
border-radius: 50%;
}
#contac {
background: #dedede;
}
.footer {
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
margin: auto;
}
.footer-section {
width: 20%;
margin: 0 auto;
}
h3 {
font-weight: 800;
font-size: 30px;
color: #364f6b;
width: 100%;
line-height: 50px;
}
#copyright{
text-align: center;
width: 100%;
margin-top: 50px;
}
Amelia Zalfa Sahira

220441100082/D

Amelia Zalfa Sahira - 220441100082 - PBW Tugas Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Amelia Zalfa Sahira - 220441100082 - PBW Tugas Css

Uploaded by

Copyright:

Available Formats

<!

You might also like