Nama : M Naufal Badruttamam
NRP : 5025211240
Kelas : Pemrograman Web A
Tahun : 2022 / 2023 (Genap)
Pada meet ketiga, diadakan secara luring bersama asisten dan diberikan video seputar HTML 5, kami diajarkan beberapa tag HTML baru seperti audio, video, sfx, dll. Setelah itu, kami diberikan tugas untuk membuat simple restaurant seperti contoh yang telah diberikan
Link Repository Github : https://github.com/Caknoooo/PWEB_Tugas_2_Restaurant
Link Deployment : https://cakno-pweb-tugas-2-restaurant.vercel.app/
Source Code:
<!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" />
<!-- css -->
<!-- <link rel="stylesheet" href="style.css" /> -->
<!-- css -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&display=swap");
/* Initial design */
* {
margin: 0;
padding: 0%;
box-sizing: border-box;
font-family: Kanit;
}
h1 {
font-size: 2rem;
font-weight: bold;
}
li {
padding: 1rem;
list-style: none;
}
:root {
--primary-mocca-muda: #df4e15;
--primary-mocca-semi-muda: #9d4d2d;
--primary-mocca: #f38f4d;
}
.red {
color: rgb(115, 1, 1);
}
.mocca-muda {
color: var(--primary-mocca-muda);
}
.mocca {
color: var(--primary-mocca);
}
.mocca-semi-muda {
color: var(--primary-mocca-semi-muda);
}
.outline {
background-color: transparent !important;
}
button {
background-image: linear-gradient(
to right,
var(--primary-mocca-semi-muda),
var(--primary-mocca-muda)
);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1.75rem;
padding-right: 1.75rem;
border-radius: 3rem;
border: none;
cursor: pointer;
}
button:hover {
/* color: rgb(49, 43, 43); */
background-image: linear-gradient(
to right,
var(--primary-mocca-muda),
var(--primary-mocca-semi-muda)
);
}
/* Navbar */
.navbar {
width: 100%;
height: 90px;
background-color: #4e4946;
/* position: fixed; */
}
.navbar .navbar-section {
max-width: 1240px;
margin-right: auto;
margin-left: auto;
padding-left: 1rem;
padding-right: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.navbar .navbar-section .logo {
color: #d1c6c1;
text-decoration: none;
}
.navbar .navbar-section .logo:hover {
color: rgb(49, 43, 43);
}
@media (min-width: 768px) {
.navbar .navbar-section .navbar-feature {
display: flex;
}
}
.navbar .navbar-section .navbar-feature .navbar-items {
display: flex;
color: white;
align-items: center;
}
/* Navbar for mobile */
.navbar .navbar-section .navbar-burger {
display: block;
@media (min-width: 768px) {
.md\:hidden {
display: none;
}
}
}
.mobile-menu {
position: absolute;
top: 90px;
left: 0;
width: 100%;
background-color: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
transition: left 0.5s ease;
left: -100%;
}
.text-2xl {
font-size: 1.5rem /* 24px */;
line-height: 2rem /* 32px */;
}
.text-decor-hidden {
text-decoration: none;
color: white;
font-size: large;
}
.text-decor-hidden:hover {
color: rgb(49, 43, 43);
}
.btn-order:hover {
color: rgb(49, 43, 43);
}
/* Hero Section */
.hero-section-page {
width: 100%;
height: 90vh;
top: 90vh;
}
.hero-section-page .hero-section-video {
object-fit: cover;
height: 100%;
width: 100%;
position: absolute;
z-index: -10;
}
.hero-section-page .hero-section-field {
width: 100%;
height: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
}
.hero-section-page .hero-section-text {
font-size: 1.25rem;
line-height: 1.75rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.hero-section-page .hero-section-story {
text-align: center;
color: white;
font-size: 1.5rem;
line-height: 2rem;
font-weight: bold;
}
/* Order Section */
.order-section-page {
width: 100%;
background-color: #131313;
color: white;
text-align: center;
}
.order-section-page .order-section-field {
max-width: 1240px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
.order-section-page .order-section-field .order-section-card-container {
display: grid;
gap: 1rem;
}
@media (min-width: 640px) {
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.order-section-card {
display: flex;
flex-direction: column;
border: #00d8ff;
justify-content: center;
align-items: center;
border-width: 1px;
text-align: left;
margin-top: 18px;
border-radius: 1rem;
padding-top: 3rem;
padding-bottom: 3rem;
padding-left: 2rem;
padding-right: 2rem;
background-color: #7e826e;
}
.order-section-card-image {
display: inline-flex;
padding: 0.5rem;
border-radius: 1rem;
height: 9rem;
width: 14rem;
}
.order-section-card-h3 {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
padding-top: 1rem;
padding-bottom: 1rem;
justify-content: center;
}
.order-section-card-button {
display: flex;
flex-direction: row;
margin-top: 20px;
align-items: center;
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(4rem * var(--tw-space-x-reverse));
margin-left: calc(4rem * calc(1 - var(--tw-space-x-reverse)));
}
/* About Section */
.about-section-page {
width: 100%;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
background-color: black;
}
.about-section-page .about-section-page-container {
max-width: 1240px;
margin-right: auto;
margin-left: auto;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.md\:flex {
display: flex;
}
}
.about-section-page-image-container {
display: flex;
justify-content: center;
width: 100%;
padding-top: 4rem;
padding-bottom: 4rem;
}
.about-section-page-image-container .about-section-page-image {
max-width: 300px;
border-radius: 5rem;
--tw-shadow: 0 10px 30px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--tw-shadow-color: rgb(6 182 212 / 0.5);
--tw-shadow: var(--tw-shadow-colored);
}
.about-section-page-button {
margin-top: 30px;
display: flex;
flex-direction: row;
padding-top: 20px;
padding-bottom: 30px;
}
.btn-read-more {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-size: 17px;
padding: 1em 2em;
font-weight: 500;
background: #1f2937;
color: white;
border: none;
position: relative;
overflow: hidden;
border-radius: 0.6em;
}
.gradient {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 0.6em;
margin-top: -0.25em;
background-image: linear-gradient(
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.3)
);
}
.label {
position: relative;
top: -1px;
}
.transition {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 500ms;
background-color: var(--primary-mocca-muda);
border-radius: 9999px;
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
button:hover .transition {
width: 14em;
height: 14em;
}
button:active {
transform: scale(0.97);
}
/* Register Section */
.regist-section-page {
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 4rem;
padding-top: 4rem;
background-color: black;
color: white;
text-align: center;
}
.regist-section-page .regist-section-page-container {
padding-top: 1rem;
padding-bottom: 1rem;
}
.regist-section-page
.regist-section-page-container
.regist-section-page-input {
padding: 0.75rem;
border-radius: 1.5rem;
margin-right: 1rem;
}
/* Comment Section */
.card-container {
display: flex;
flex-wrap: wrap;
padding-top: 4rem;
padding-bottom: 4rem;
justify-content: space-between;
margin: 20 auto;
/* max-width: 1200px; */
width: 100%;
background-color: black;
}
@media (min-width: 640px) {
.card-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.card-container {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.card-container .card img {
width: 300px;
height: 300px;
}
.card {
width: calc(33.33% - 20px);
margin-bottom: 40px;
box-shadow: 0px 0px 20px rgba(244, 244, 244, 0.2);
border-radius: 5px;
overflow: hidden;
transition: transform 0.2s ease-in-out;
flex: 0 0 300px;
margin-right: 20px;
margin-left: 20px;
color: white;
}
.card:hover {
transform: translateY(-10px);
}
.card-header {
height: 250px;
display: flex;
align-items: flex-end;
padding: 20px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.card-title {
margin: 0;
font-size: 24px;
font-weight: bold;
color: var(--primary-mocca-muda);
}
.card-body {
padding: 20px;
}
.comments {
margin-bottom: 20px;
}
.comment {
font-size: 16px;
line-height: 1.5;
margin: 0;
margin-bottom: 10px;
}
.rating {
font-size: 24px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.star {
color: #ffd700;
margin-right: 5px;
}
/* Footer Section */
.footer-section-page {
background-color: #4e4946;
}
.footer-section-page .footer-section-page-container {
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
padding-top: 1rem;
}
@media (min-width: 768px) {
.footer-section-page .footer-section-page-container {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.footer-section-text {
font-size: 0.875rem;
line-height: 1.25rem;
font-size: medium;
}
@media (min-width: 640px) {
.footer-section-text {
text-align: center;
}
.footer-section-icon {
justify-content: center;
margin-top: 0;
}
}
.footer-section-icon {
display: flex;
margin-top: 1rem;
}
.footer-section-link {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.footer-section-link:hover {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.footer-section-svg-size {
width: 2rem;
height: 2rem;
}
.footer-section-svg {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(3rem * var(--tw-space-x-reverse));
margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
}
</style>
<title>Coffee</title>
</head>
<body>
<nav class="navbar">
<div class="navbar-section">
<div style="display: inline-flex">
<h1><a href="#" class="logo">Coffee</a></h1>
</div>
<div class="navbar-feature">
<ul class="navbar-items">
<li><a href="#home" class="text-decor-hidden">Home</a></li>
<li><a href="#order" class="text-decor-hidden">Menu</a></li>
<li><a href="#about" class="text-decor-hidden">About</a></li>
<li><a href="#rating" class="text-decor-hidden">Rating</a></li>
<button class="btn-read-more">
<span class="transition"></span>
<span class="gradient"></span>
<span class="label">Order</span>
</button>
</ul>
</div>
</div>
</nav>
<main>
<!-- Hero Section -->
<div class="hero-section-page" id="#home">
<video class="hero-section-video" autoplay loop muted>
<source
src="https://user-images.githubusercontent.com/92671053/221354605-68a74793-e3f4-437d-9662-1c7c7822b879.mp4"
type="video/mp4"
/>
</video>
<div class="hero-section-field">
<h1>Welcome To Coffee Shop (❁´◡`❁)</h1>
<h1 style="padding-top: 0.5rem; padding-bottom: 0.5rem">
Anda Peminat <span class="mocca-muda">Coffee???</span>
</h1>
<p class="hero-section-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit aut
veritatis doloremque unde vitae ad eligendi placeat incidunt,
sapiente itaque pariatur ut illo excepturi nostrum delectus esse
ipsum alias omnis.
</p>
<div>
<button style="margin: 0.5rem" class="btn-order">Coffee</button>
<button style="margin: 0.5rem" class="btn-order">
Cerita tentang kopi
</button>
</div>
<div>
<p class="hero-section-story">
Coffee merupakan teman kita ketika belajar ehehehe
</p>
</div>
</div>
</div>
<!-- Order Section -->
<div class="order-section-page" id="order">
<div class="order-section-field">
<div>
<h1 class="py-4">Order Menus</h1>
<p class="py-4" style="font-size: 1.25rem; line-height: 1.75rem">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Consequatur suscipit recusandae enim minima tempora optio
reiciendis earum architecto voluptatum hic? Reprehenderit
provident accusantium dicta ab excepturi sint tempore. Aliquam,
mollitia.
</p>
</div>
<!-- Card Container -->
<div
class="order-section-card-container sm:grid-cols-2 lg:grid-cols-4"
>
<div class="order-section-card">
<div>
<div>
<img
src="./img/Coffee1.jpg"
alt=""
class="order-section-card-image"
/>
</div>
<h3 class="order-section-card-h3">
Americano Coffee, <span class="mocca">Less Sugar</span>
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Beatae, quibusdam earum odio facere eum perspiciatis at
voluptatum cum deserunt reiciendis dolore ut fugiat,
recusandae id corrupti aliquam voluptate, pariatur dolores?
</p>
</div>
<div class="order-section-card-button space-x-8">
<span class="red">Rp.500.000</span>
<button>Buy</button>
</div>
</div>
<div class="order-section-card">
<div>
<div>
<img
src="./img/Coffee2.jpg"
alt=""
class="order-section-card-image"
/>
</div>
<h3 class="order-section-card-h3">
Bread Coffee, <span class="mocca">is Delicious for you</span>
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Beatae, quibusdam earum odio facere eum perspiciatis at
voluptatum cum deserunt reiciendis dolore ut fugiat,
recusandae id corrupti aliquam voluptate, pariatur dolores?
</p>
</div>
<div class="order-section-card-button space-x-8">
<span class="red">Rp.500.000</span>
<button>Buy</button>
</div>
</div>
<div class="order-section-card">
<div>
<div>
<img
src="./img/Coffee3.jpg"
alt=""
class="order-section-card-image"
/>
</div>
<h3 class="order-section-card-h3">
Reliable, tamper-proof network
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Beatae, quibusdam earum odio facere eum perspiciatis at
voluptatum cum deserunt reiciendis dolore ut fugiat,
recusandae id corrupti aliquam voluptate, pariatur dolores?
</p>
</div>
<div class="order-section-card-button space-x-8">
<span class="mocca-muda">Rp.500.000</span>
<button>Buy</button>
</div>
</div>
<div class="order-section-card">
<div>
<div>
<img
src="./img/Coffee4.jpg"
alt=""
class="order-section-card-image"
/>
</div>
<h3 class="order-section-card-h3">
Reliable, tamper-proof network
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Beatae, quibusdam earum odio facere eum perspiciatis at
voluptatum cum deserunt reiciendis dolore ut fugiat,
recusandae id corrupti aliquam voluptate, pariatur dolores?
</p>
</div>
<div class="order-section-card-button space-x-8">
<span class="mocca-muda">Rp.500.000</span>
<button>Buy</button>
</div>
</div>
</div>
</div>
</div>
<!-- About Section -->
<div class="about-section-page" id="about">
<div class="about-section-page-container md:flex">
<div>
<h1>Coffee is delicious (●'◡'●)</h1>
<p style="margin-top: 20px">
Lorem ipsum
<span class="mocca-muda">dolor sit amet consectetur</span>
adipisicing elit. Quae blanditiis dolorum laudantium nihil harum
veritatis. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Voluptas sunt ad ut aperiam adipisci? Molestiae quis,
laboriosam numquam illum necessitatibus odit temporibus aut
delectus sed, excepturi cumque obcaecati quidem pariatur?
</p>
<div style="margin-top: 20px">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<span class="mocca-muda"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. A
explicabo fuga impedit itaque, nesciunt temporibus quibusdam
in, cum aperiam qui dicta animi expedita magnam? Obcaecati
voluptate vel dolore sed aperiam!</span
>, sint ipsum impedit assumenda repellendus recusandae.
</p>
</div>
<div class="about-section-page-button space-x-8">
<button class="btn-read-more">
<span class="transition"></span>
<span class="gradient"></span>
<span class="label">Read More</span>
</button>
</div>
</div>
<div class="about-section-page-image-container">
<img
src="./img/testimoni.jpg"
alt="testimoni"
class="about-section-page-image"
/>
</div>
</div>
</div>
<!-- Register Section -->
<div class="regist-section-page">
<h1>Registrasi</h1>
<p class="mocca">Ingin memposting makanan anda?</p>
<div class="regist-section-page-container">
<input
type="email"
placeholder="Enter Your Email"
class="regist-section-page-input"
/>
<button>Register</button>
</div>
<div style="margin-top: 10px">
<input type="checkbox" />
<span class=""
>Saya yakin ingin mendaftarkan email saya untuk menjadi penjual
makanan dengan ketentuan yang ada</span
>
</div>
</div>
<!-- Comment Section -->
<div class="card-container" id="rating">
<div class="card">
<img src="./img/foto-zhafran.png" alt="Makanan enak" />
<div class="card-body">
<h5 class="card-title">Zhafran Dzaky</h5>
<div class="comments">
<p class="comment">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
nec lorem nisi. Suspendisse interdum sapien sapien, at dictum
elit tempus in. Sed vestibulum vel magna sit amet bibendum. Ut
tincidunt ultricies eros quis tempor.
</p>
<p class="comment">
Sed consectetur, nulla vel consequat blandit, sem nibh ultricies
nulla, eu hendrerit lacus elit eget elit. Nam bibendum augue a
eros lobortis, quis dignissim turpis posuere.
</p>
</div>
<div class="rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
</div>
</div>
</div>
<div class="card">
<img src="./img/foto-calvin.jpg" alt="Makanan enak" />
<div class="card-body">
<h5 class="card-title">Calvin Janitra</h5>
<div class="comments">
<p class="comment">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
nec lorem nisi. Suspendisse interdum sapien sapien, at dictum
elit tempus in. Sed vestibulum vel magna sit amet bibendum. Ut
tincidunt ultricies eros quis tempor.
</p>
<p class="comment">
Sed consectetur, nulla vel consequat blandit, sem nibh ultricies
nulla, eu hendrerit lacus elit eget elit. Nam bibendum augue a
eros lobortis, quis dignissim turpis posuere.
</p>
</div>
<div class="rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">☆</span>
</div>
</div>
</div>
<div class="card">
<img src="./img/foto-kevin.jpg" alt="Makanan enak" />
<div class="card-body">
<h5 class="card-title">Kevin Nathanael</h5>
<div class="comments">
<p class="comment">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
nec lorem nisi. Suspendisse interdum sapien sapien, at dictum
elit tempus in. Sed vestibulum vel magna sit amet bibendum. Ut
tincidunt ultricies eros quis tempor.
</p>
<p class="comment">
Sed consectetur, nulla vel consequat blandit, sem nibh ultricies
nulla, eu hendrerit lacus elit eget elit. Nam bibendum augue a
eros lobortis, quis dignissim turpis posuere.
</p>
</div>
<div class="rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">☆</span>
<span class="star">☆</span>
</div>
</div>
</div>
<div class="card">
<img src="./img/foto-deekuh.png" alt="Makanan enak" />
<div class="card-body">
<h5 class="card-title">Andhika Lingga</h5>
<div class="comments">
<p class="comment">
Saya pernah memposting makanan disini, tapi jualan saya nggak
laku karena nggak enak
</p>
<p class="comment">
Sed consectetur, nulla vel consequat blandit, sem nibh ultricies
nulla, eu hendrerit lacus elit eget elit. Nam bibendum augue a
eros lobortis, quis dignissim turpis posuere.
</p>
</div>
<div class="rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">☆</span>
</div>
</div>
</div>
</div>
</main>
<!-- Footer Section -->
<footer class="footer-section-page">
<div class="footer-section-page-container">
<span class="footer-section-text">
© 2023 Cakno. All Rights Reserved.
</span>
<div class="footer-section-icon space-x-6">
<a
href="https://www.facebook.com/cakno.comel/"
class="footer-section-link"
>
<svg
class="footer-section-svg-size"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd"
/>
</svg>
<span class="footer-section-svg">Facebook</span>
</a>
<a
href="https://www.instagram.com/cakno_00/"
class="footer-section-link"
>
<svg
class="footer-section-svg-size"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clip-rule="evenodd"
/>
</svg>
<span class="footer-section-svg">Instagram</span>
</a>
<a href="https://twitter.com/Caknocomel" class="footer-section-link">
<svg
class="footer-section-svg-size"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
/>
</svg>
<span class="footer-section-svg">Twitter</span>
</a>
<a href="https://github.com/Caknoooo" class="footer-section-link">
<svg
class="footer-section-svg-size"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd"
/>
</svg>
<span class="footer-section-svg">GitHub</span>
</a>
</div>
</div>
</footer>
</body>
</html>
Komentar
Posting Komentar