Okay Assalamualaikum and hi! So untuk assigment Introduction to Programming Language kena buat webpage using html and css. Buat blog sendiri. Ikut creativity nak design macam mana. Yang penting kena letak gambar.
Mula-mula buat dulu dekat notepad. Tak kisah guna notepad++ or visual studio code. Macam saya guna visual studio code sebab senang nampak. Lepastu cari je mana-mana contoh html and css kat google. Yang penting ubah lah sikit2 bagi kurangkan sikit plagiarism tu. Lepastu cuba run guna chrome or microsoft edge ke. Macam tu je.
Tapi nak fahamkan dia mula-mula memang susah. Sebab tu kena tengok banyak contoh and rujuk video dekat YouTube. Lepas dah dapat contoh tu buat lah elok-elok. Untuk assignment ni lecturer kasi 11 April and kena submit 15 Mei. Sebulan+bape hari je. Tapi malas sangat sebab penat puasa tu yang baru start buat betul-betul last week. Okaylah still dalam tempoh yang ditetapkan. So bawah ni Index html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Alisya's Blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font awesome icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header -->
<header>
<nav class = "navbar">
<div class = "container">
<a href = "index.html" class = "navbar-brand">Alisya's Blog</a>
<div class = "navbar-nav">
<a href = "">Home</a>
<a href = "">Pictures</a>
<a href = "">Blog</a>
<a href = "">About</a>
</div>
</div>
</nav>
<div class = "banner">
<div class = "container">
<h1 class = "banner-title">
<span>Alisya's</span> Blog
</h1>
<p>Welcome to my blog!</p>
</div>
</div>
</header>
<!-- end of header -->
<!-- design -->
<section class = "design" id = "design">
<div class = "container">
<div class = "title">
<h2>Recent Pictures</h2>
<p>recent pictures on the blog</p>
</div>
<div class = "design-content">
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "images/myself.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
<span>Alisya's Blog</span>
</div>
<div class = "design-title">
<a href = "#">Myself</a>
<p>My name is Nur Alisya Hanim binti Ali Hiraham and I live in Ampang, Selangor. I am 21 years old. My birthday is on 09 January 2001. I am a student of New Media Communication at University of Malaysia Perlis</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "images/family.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
<span>Alisya's blog</span>
</div>
<div class = "design-title">
<a href = "#">Family</a>
<p>There are six people in my family. I have one little sister and two little brothers. My father's name is Ali Hiraham bin Ahmad. My mother's name is Normawati binti Ahmad. My little sister's name is Nur Amierah Nadia binti Ali Hiraham. My little brothers names is Muhammad Adam Riezqie bin Ali Hiraham and Muhammad Nur Ilham bin Ali Hiraham.</p></p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "images/babygirls.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
<span>Alisya's blog</span>
</div>
<div class = "design-title">
<a href = "#">Babygirls</a>
<p>There are my friends. We have been together since high school. They are Nurul Izza, 'Alya' Adibah, Sarah Farhanah and Pirlidaputri</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "images/trio.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
<span>Alisya's blog</span>
</div>
<div class = "design-title">
<a href = "#">Trio</a>
<p>There are my friends. We have been together since Form 6. They are Nur Fatihah and Nur Azmina Afifah</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "images/food.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
<span>Alisya's blog</span>
</div>
<div class = "design-title">
<a href = "#">Food</a>
<p>This is my favourite food which is shellout. Even though I don't eat shrimp but I can eat crab, squids and others. I ate this at Abe Smart Jetak Cafe</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "images/cat.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
<span>Alisya's Blog</span>
</div>
<div class = "design-title">
<a href = "#">Cat</a>
<p>These are my cats. I have 5 kittens now</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "images/skies.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
<span>Alisya's Blog</span>
</div>
<div class = "design-title">
<a href = "#">Skies</a>
<p>I like to take pictures of skies. Blue skies are pretty</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "images/quotes.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
<span>Alisya's Blog</span>
</div>
<div class = "design-title">
<a href = "#">Quotes</a>
<p>I like to read quotes</p>
</div>
</div>
<!-- end of item -->
</div>
</div>
</section>
<!-- end of design -->
<!-- blog -->
<section class = "blog" id = "blog">
<div class = "container">
<div class = "title">
<h2>Latest Blog</h2>
<p>recent blogs about my daily life</p>
</div>
<div class = "blog-content">
<!-- item -->
<div class = "blog-item">
<div class = "blog-img">
<img src = "images/blog-p-1.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
</div>
<div class = "blog-text">
<span>28 March, 2022</span>
<h2>New semester new life</h2>
<p>New semester new life. Second semester starts now. New subjects more assignments</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "blog-item">
<div class = "blog-img">
<img src = "images/blog-p-2.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
</div>
<div class = "blog-text">
<span>4 April, 2022</span>
<h2>Preparation for Ramadan</h2>
<p>Starting my first ramadan at college. Lots of preparation to do</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "blog-item">
<div class = "blog-img">
<img src = "images/blog-p-3.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
</div>
<div class = "blog-text">
<span>11 April, 2022</span>
<h2>Burned out</h2>
<p>Feeling empty and mentally exhausted. I don't see any hope of positive change. Hope I can survive this semester.</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "blog-item">
<div class = "blog-img">
<img src = "images/blog-p-4.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
</div>
<div class = "blog-text">
<span>18 April, 2022</span>
<h2>Feeling better</h2>
<p>It hurts sometimes. Getting adult is stressing. Feeling better than last week</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "blog-item">
<div class = "blog-img">
<img src = "images/blog-p-5.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
</div>
<div class = "blog-text">
<span>25 April, 2022</span>
<h2>Preparation for Eid</h2>
<p>Can't wait to go home. Packing my outfits for this mid semester break. Can't focus this week</p>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "blog-item">
<div class = "blog-img">
<img src = "images/blog-p-6.jpg" alt = "">
<span><i class = "far fa-heart"></i></span>
</div>
<div class = "blog-text">
<span>2 May, 2022</span>
<h2>Eid Mubarak</h2>
<p>Celebrating Eid ul Fitr at Gurun, Kedah. Got "duit raya"</p>
</div>
</div>
<!-- end of item -->
</div>
</div>
</section>
<!-- end of blog -->
<!-- about -->
<section class = "about" id = "about">
<div class = "container">
<div class = "about-content">
<div>
<img src = "images/myself.jpg" alt = "">
</div>
<div class = "about-text">
<div class = "title">
<h2>Nur Alisya Hanim binti Ali Hiraham</h2>
<p>Writing blog is my passion</p>
</div>
<p>My name is Nur Alisya Hanim binti Ali Hiraham and I live in Ampang, Selangor. I am 21 years old. My birthday is on 09 January 2001. I am a student of New Media Communication at University of Malaysia Perlis.</p>
<p>I like reading, watching Korean drama and cooking. Horror and mystery genre are what I like the best now. My favourite novel is "Jangan Baca Novel Ini". My favourite drama is "Mouse" Cooking is something I enjoy and so I watch my Mama make dishes and also help her and sometimes give a try in making them.</p>
</div>
</div>
</div>
</section>
<!-- end of about -->
<!-- footer -->
<footer>
<div class = "social-links">
<a href = "#"><i class = "fab fa-facebook-f"></i></a>
<a href = "#"><i class = "fab fa-twitter"></i></a>
<a href = "#"><i class = "fab fa-instagram"></i></a>
<a href = "#"><i class = "fab fa-pinterest"></i></a>
</div>
<span>Alisya's Blog Page</span>
</footer>
<!-- end of footer -->
</body>
</html>
Yang bawah ni pulak css style
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800;900&family=Quicksand:wght@300;400;500;600;700&display=swap');
:root{
--Playfair: 'Playfair Display', serif;
--Quicksand: 'Quicksand', sans-serif;
--Roboto: 'Roboto', sans-serif;
--dark: #310341;
--exDark: #844474;
}
*{
padding: 0;
margin: 0;
font-family: var(--Quicksand);
}
body{
line-height: 1.4;
color: var(--dark);
}
img{
width: 100%;
display: block;
}
.container{
max-width: 1320px;
margin: 0 auto;
padding: 0 1.2rem;
}
/* header */
header{
min-height: 100vh;
background: linear-gradient(rgba(152, 10, 133, 0.4), rgba(211, 57, 170, 0.4)), url(images/banner-bg.jpg) center/cover no-repeat fixed;
display: flex;
flex-direction: column;
justify-content: stretch;
}
.navbar{
background: rgba(67, 4, 52, 0.6);
padding: 1.2rem;
}
.navbar-brand{
color: #fff;
font-size: 2rem;
display: block;
text-align: center;
text-decoration: none;
font-family: var(--Playfair);
letter-spacing: 1px;
}
.navbar-nav{
padding: 0.8rem 0 0.2rem 0;
text-align: center;
}
.navbar-nav a{
text-transform: uppercase;
font-family: var(--Roboto);
letter-spacing: 1px;
font-weight: 500;
color: #fff;
text-decoration: none;
display: inline-block;
padding: 0.4rem 0.1rem;
letter-spacing: 3px;
transition: opacity 0.5s ease;
}
.navbar-nav a:hover{
opacity: 0.7;
}
.banner{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}
.banner-title{
font-size: 3rem;
font-family: var(--Playfair);
line-height: 1.2;
}
.banner-title span{
font-family: var(--Playfair);
color: var(--exDark);
}
.banner p{
padding: 1rem 0 2rem 0;
font-size: 1.2rem;
text-transform: capitalize;
font-family: var(--Roboto);
font-weight: 300;
word-spacing: 2px;
}
.banner form{
background: #fff;
border-radius: 2rem;
padding: 0.6rem 1rem;
display: flex;
justify-content: space-between;
}
.search-input{
font-family: var(--Roboto);
font-size: 1.1rem;
width: 100%;
outline: 0;
padding: 0.6rem 0;
border: none;
}
.search-input::placeholder{
text-transform: capitalize;
}
.search-btn{
width: 40px;
font-size: 1.1rem;
color: var(--dark);
border: none;
background: transparent;
outline: 0;
cursor: pointer;
}
/* design */
.design{
padding: 4.5rem 0;
}
.title{
text-align: center;
padding: 1rem 0;
}
.title h2{
font-family: var(--Playfair);
font-size: 2.4rem;
}
.title p{
text-transform: uppercase;
padding: 0.6rem 0;
}
.design-content{
margin: 2rem 0;
}
.design-item{
cursor: pointer;
margin: 1.5rem 0;
}
.design-img{
position: relative;
overflow: hidden;
}
.design-img::after{
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.design-img img{
transition: all 0.5s ease;
}
.design-item:hover img{
transform: scale(1.2);
}
.design-img span:first-of-type{
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
background: var(--exDark);
color: #fff;
padding: 0.25rem 1rem;
}
.design-img span:last-of-type{
position: absolute;
z-index: 1;
bottom: 10px;
right: 10px;
color: #fff;
font-weight: 700;
font-size: 1.1rem;
}
.design-title{
padding: 1rem;
font-size: 1.2rem;
text-align: center;
width: 70%;
margin: 0 auto;
}
.design-title a{
color: var(--dark);
text-decoration: none;
text-transform: capitalize;
font-family: var(--Playfair);
}
/* blog */
.blog{
background: #f9f9f9;
padding: 4.5rem 0;
}
.blog-content{
margin: 2rem 0;
}
.blog-img{
position: relative;
}
.blog-img span{
position: absolute;
bottom: 10px;
right: 10px;
background: var(--exDark);
color: #fff;
font-size: 1.4rem;
padding: 0.3rem 0.6rem;
}
.blog-text{
margin: 2.2rem 0;
padding: 0 1rem;
}
.blog-text span{
font-weight: 300;
display: block;
padding-bottom: 0.5rem;
}
.blog-text h2{
font-family: var(--Playfair);
padding: 1rem 0;
font-size: 1.65rem;
font-weight: 500;
}
.blog-text p{
font-weight: 300;
font-size: 1.1rem;
opacity: 0.9;
padding-bottom: 1.2rem;
}
.blog-text a{
font-family: var(--Roboto);
font-size: 1.1rem;
text-decoration: none;
color: var(--dark);
display: inline-block;
background: var(--dark);
color: #fff;
padding: 0.55rem 1.2rem;
transition: all 0.5s ease;
}
.blog-text a:hover{
background: var(--exDark);
}
/* about */
.about{
padding: 4.5rem 0;
}
.about-text{
margin: 2rem 0;
}
.about-text > p{
font-size: 1.1rem;
padding: 0.6rem 0;
opacity: 0.8;
}
/* footer */
footer{
background: var(--exDark);
color: #fff;
text-align: center;
padding: 2rem 0;
}
.social-links{
display: flex;
justify-content: center;
margin-bottom: 1.4rem;
}
.social-links a{
border: 2px solid #fff;
color: #fff;
display: block;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
text-decoration: none;
margin: 0 0.3rem;
transition: all 0.5s ease;
}
.social-links a:hover{
background: #fff;
color: var(--exDark);
}
.footer span{
margin-top: 1rem;
display: block;
font-family: var(--Playfair);
letter-spacing: 2px;
}
/* Media Queries */
@media screen and (min-width: 540px){
.navbar-nav a{
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.banner-title{
font-size: 5rem;
}
.banner form{
margin-top: 1.4rem;
width: 80%;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 768px){
.navbar .container{
display: flex;
align-items: center;
justify-content: space-between;
}
.search-input{
padding: 0.8rem 0;
}
.design-content{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.design-item{
margin: 0;
}
.blog-content{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media screen and (min-width: 992px){
.blog-content{
grid-template-columns: repeat(3, 1fr);
}
.about-content{
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 3rem;
align-items: center;
}
}
@media screen and (min-width: 1200px){
.design-content{
grid-template-columns: repeat(3, 1fr);
}
}
Comments
Post a Comment