<!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>Android</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@600;700&display=swap" rel="stylesheet">
<style>
:root{
--colorPrimary: #2962ff;
--Backgrounddark: #f1f1f1;
--Background: rgb(255, 255, 255);
--Text: #020202;
--hover: rgba(36, 35, 35, 0.295);
--blank: #16161667;
--card: #fff;
}
.dark-theme{
--colorPrimary: #7201d4;
--Backgrounddark: #131313;
--Background: rgb(14, 14, 14);
--Text: #f7f7f7;
--hover: rgb(3, 3, 3);
--blank: #4d4d4d67;
--card: #131313;
}
html, body {
margin: 0;
padding: 0;
scroll-behavior: smooth;
overflow-x:hidden;
}
div.background{
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background-color: var(--Background);
transition: background 0.2s;
}
div.blurred_bar{
height: 56px;
width: 100%;
margin: 0;
padding: 0;
display: flex;
position: fixed;
background-color: var(--Backgrounddark);
display: inline-block;
transition: background 0.2s;
}
div.blank1{
height: 56px;
width: 100%;
margin: 0;
padding: 0;
}
div.a_web{
height: 56px;
width: 100%;
margin: 0px;
padding-left: 16px;
display: flex;
align-items: center;
}
div.a_android{
height: 40px;
width: 100%;
margin: 0px;
padding: 0px;
align-items: center;
justify-content: center;
display:none
}
img.logo{
height: 80%;
width: auto;
margin: 24px;
}
.dark{
height: 20px;
width: 20px;
vertical-align: middle;
padding: 3px;
border-radius: 50px;
background-color: rgba(255, 255, 255, 0);
cursor: pointer;
transition: background 0.4s
}
.dark:hover{
background-color: var(--hover);
}
img.actionmore{
height: 20px;
width: 20px;
vertical-align: middle;
padding: 3px;
margin-left: 8px;
margin-right: 16px;
border-radius: 50px;
background-color: rgba(255, 255, 255, 0);
cursor: pointer;
transition: background 0.4s
}
img.actionmore:hover{
background-color: var(--hover);
}
img.actionmore2{
height: 20px;
width: 20px;
vertical-align: middle;
display: none;
padding: 3px;
margin-left: 8px;
margin-right: 16px;
border-radius: 50px;
background-color: rgba(255, 255, 255, 0);
cursor: pointer;
transition: background 0.4s
}
img.actionmore2:hover{
background-color: var(--hover);
}
div.actionbar_items{
height: 100%;
width: 100%;
padding: 8px;
padding-right: 80px;
display: flex;
align-items: center;
justify-content: flex-end;
}
a.tabs{
margin-left: 16px;
margin-right: 16px;
font-size: 14px;
font-family: 'Overpass Mono', monospace;
text-decoration: none;
color: var(--Text);
cursor: pointer;
transition: 0.1s
}
a.sheettext{
font-size: 14px;
font-family: 'Overpass Mono', monospace;
text-decoration: none;
color: var(--Text);
cursor: pointer;
margin-right: 8px;
margin-left: 8px;
margin-top: 4px;
margin-bottom: 8px;
transition: background 0.4s
}
a.tabs:hover{
color: var(--colorPrimary);
transform: scale(1.05);
}
div.buttom_sheet{
box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
background-color: var(--Background);
bottom: 0;
display: none;
position: fixed;
height: 32px;
width: 100%;
align-items:center;
justify-content: flex-end;
transition: background 0.2s;
}
div.clearn{
height: 100vh;
width: 100vw;
background-color: var(--Background);
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
transition: background 0.2s;
}
div.cmore{
height: 100vh;
width: 100vw;
background-color:var(--Background);
display: flex;
align-items:flex-end;
justify-content:center;
transition: background 0.2s;
}
div.ctools{
height: 100vh;
width: 100vw;
background-color:var(--Background);
display: flex;
align-items:flex-end;
justify-content:center;
transition: background 0.2s;
}
div.cabout{
height: 100vh;
width: 100vw;
background-color:var(--Background);
display: flex;
align-items:flex-end;
justify-content:center;
transition: background 0.2s;
}
div.blank{
height: 32px;
width: 100%;
display: none;
position: fixed;
bottom: 0;
align-items: flex-end;
justify-content: center;
}
div.sheet{
height: 100%;
width: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
background-color: var(--blank);
transition: background 0.2s;
}
div.sheetcontent{
height: 48vh;
width: 100%;
padding: 16px;
margin: 0;
background-color: var(--Backgrounddark);
transition: background 0.2s;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div.sheetrow{
width: 100%;
height: 40%;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
div.sheetitem1{
width: 40%;
height: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div.sheetitem2{
width: 40%;
height: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div.sheetitem3{
width: 40%;
height: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div.sheetitem4{
width: 40%;
height: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
img.sheeticon{
height: 28px;
width: 28px;
margin-right: 8px;
margin-left: 8px;
margin-top: 8px;
margin-bottom: 4px;
transition: background 0.4s
}
a.sheettxt{
height: auto;
width: auto;
}
div.headerlearn{
height: 128px;
width: 100%;
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
h2.title1{
width: 100%;
color: #2962ff;
font-family: 'Overpass Mono', monospace;
text-decoration: none;
margin-left: 40px;
}
div.tag{
height: 40px;
width: auto;
border-radius: 50px;
background-color: var(--Backgrounddark);
padding-left: 16px;
padding-right: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 80px;
}
a.tagtext{
font-size: 16px;
font-family: 'Overpass Mono', monospace;
text-decoration: none;
color: var(--Text);
transition: 0.1s
}
div.cardcontainer{
height: 340px;
width: 100%;
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 25% 25% 25%;
gap: 32px;
}
div.card{
height: 100%;
width: 100%;
display: inline-flex;
flex-direction: row;
background-color: var(--card);
border-radius: 16px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
transition: 0.15s
}
img.odfgj{
height: 100%;
width: 48%;
object-fit: cover;
border-radius: 16px 0px 0px 16px ;
}
div.cardcontent{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.topic{
font-size: 16px 24px;
color: var(--Text);
font-family: 'Overpass Mono', monospace;
margin: 0 0 8px 0;
}
a.btn{
height: auto;
width: auto;
font-size: 16px;
color: var(--Background);
font-family: 'Overpass Mono', monospace;
text-decoration: none;
padding: 10px 16px 8px 16px;
background-color: var(--colorPrimary);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
margin: 8px 0 0 0;
cursor: pointer;
transition: 0.15s
}
a.btn:hover{
transform: scale(1.1);
}
@media only screen and (max-width:700px){
div.a_web{
display:none
}
div.blurred_bar, div.blank1{
height: 40px;
}
div.a_android{
display: flex
}
div.blank{
display: flex
}
div.buttom_sheet{
display: flex;
}
div.headerlearn{
height: 72px;
}
h2.title1{
margin-left: 32px;
}
div.tag{
margin-right: 16px;
}
div.cardcontainer{
grid-template-columns: 40% 40%;
}
img.odfgj{
height: 64%;
width: 100%;
border-radius: 16px 16px 0px 0px ;
}
div.card{
flex-direction: column;
cursor: pointer;
}
a.btn{
display: none;
}
a.topic{
margin: 0;
}
div.card:hover{
transform: scale(1.03);
}
}
</style>
</head>
<body>
<div class="blurred_bar">
<div class="a_web">
<img class="logo" src="https://imguploader.net/if/7HTjQ87R3cOt.png" >
<div class="actionbar_items">
<div class="darkmodehover"> <img class="dark mode" src="https://imguploader.net/if/WU6DSX7dwB9d.png" id="icon"></div>
<div class="indigater"></div>
<a class="tabs" id="clearn" href="#learn" >Learn</a>
<a class="tabs" id="cmore" href="#more">More</a>
<a class="tabs" id="ctools" href="#tools">Tools</a>
<a class="tabs" id="cabout" href="#about">About</a>
</div>
</div>
<div class="a_android">
<img class="logo" src="https://imguploader.net/if/7HTjQ87R3cOt.png" >
</div>
</div>
<div class="clearn" id="learn">
<div class="blank1">
</div>
<div class="headerlearn">
<h2 class="title1">Basic Front-end</h1>
<div class="tag"><a class = "tagtext">Learn</a></div>
</div>
<div class ="container">
<div class="cardcontainer">
<div class="card">
<img class="odfgj" src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/09/WHAT-IS-WEB-DESIGN.jpg?auto=format&q=60&w=1860&h=1046.25&fit=crop&crop=faces">
<div class="cardcontent">
<a class="topic">Introduction</a>
<a class="btn">G0!</a>
</div>
</div>
<div class="card">
<img class="odfgj" src="https://s3-ap-southeast-1.amazonaws.com/blog.internshala.com/wp-content/uploads/2018/09/What-is-HTML-and-how-to-learn-it-The-complete-guide-on-HTML-basics-558x372.jpg">
<div class="cardcontent">
<a class="topic">HTML</a>
<a class="btn">G0!</a>
</div>
</div>
<div class="card">
<img class="odfgj" src="https://www.bitdegree.org/learn/storage/media/images/css-tutorial-img1-01.o.png">
<div class="cardcontent">
<a class="topic">CSS</a>
<a class="btn">G0!</a>
</div>
</div>
<div class="card">
<img class="odfgj" src="https://miro.medium.com/max/1838/1*6ahbWjp_g9hqhaTDSJOL1Q.png">
<div class="cardcontent">
<a class="topic">javascript</a>
<a class="btn">G0!</a>
</div>
</div>
</div>
</div>
</div>
<div class="cmore" id="more">
</div>
<div class="ctools" id="tools">
</div>
<div class="cabout" id="about">
</div>
<div class = "blank" id="blank">
<div class="sheet" id="sheet">
<div class="sheetcontent" id="sheetcontent">
<div class= "sheetrow">
<div class="sheetitem1" >
<a class="sheettxt" href="#learn"><img class="sheeticon" src="https://imguploader.net/if/Pwsda2UrbTIi.png" id="i1" ></a>
<a class="sheettext" href="#learn">Learn</a>
</div>
<div class="sheetitem2" >
<a class="sheettxt" href="#more"><img class="sheeticon" src="https://imguploader.net/if/MfzbIagxwbgh.png" id ="i2" ></a>
<a class="sheettext" href="#more">More</a>
</div>
</div>
<div class= "sheetrow">
<div class="sheetitem3" >
<a class="sheettxt" href="#tools"><img class="sheeticon" src="https://imguploader.net/if/UWACXwXkH0E3.png" id="i3" ></tools>
<a class="sheettext" href="#tools">Tools</a>
</div>
<div class="sheetitem4" >
<a class="sheettxt" href="#about"><img class="sheeticon" src="https://imguploader.net/if/zrZ1pQwl8CWk.png" id="i4" ></a>
<a class="sheettext" href="#about">About</a>
</div>
</div>
</div>
</div>
</div>
<div class="buttom_sheet">
<img class="dark mode" src="https://imguploader.net/if/WU6DSX7dwB9d.png" id="icon2">
<img class="actionmore" src="https://imguploader.net/if/BzeQo9DeH9pc.png" id="actionmore">
<img class="actionmore2" src="https://imguploader.net/if/2DaurK2mVD2e.png" id="actionmore2">
</div>
</div>
<script>var icon = document.getElementById("icon");
var icon2 = document.getElementById("icon2");
var more = document.getElementById("actionmore")
var more2 = document.getElementById("actionmore2")
var sheet = document.getElementById("sheet")
var blank = document.getElementById("blank")
var sheetcontent = document.getElementById("sheetcontent")
var i1 = document.getElementById("i1")
var i2 = document.getElementById("i2")
var i3 = document.getElementById("i3")
var i4 = document.getElementById("i4")
sheet.style.display = "none";
more.onclick = function () {
more.style.display = "none";
more2.style.display = "block";
sheet.style.display = "flex";
blank.style.height = "100vh"
}
more2.onclick = function () {
more2.style.display = "none";
more.style.display = "block";
sheet.style.display = "none";
blank.style.height = "32px"
}
sheet.onclick = function () {
more2.style.display = "none";
more.style.display = "block";
sheet.style.display = "none";
blank.style.height = "32px"
}
sheetcontent.onclick = function () {
more.style.display = "none";
more2.style.display = "block";
sheet.style.display = "flex";
blank.style.height = "100vh"
}
var cards = document.querySelectorAll(".dark");
for (var i = 0; i < cards.length; i++) {
var card = cards[i];
card.onclick = function () {
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src = "images/outline_light_mode_white_24dp.png";
icon2.src = "images/outline_light_mode_white_24dp.png";
more.src = "images/outline_grid_view_white_24dp.png";
more2.src = "images/outline_expand_more_white_24dp.png";
i1.src = "images/outline_lightbulb_white_24dp.png";
i2.src = "images/outline_more_white_24dp.png";
i3.src = "images/outline_construction_white_24dp.png";
i4.src = "images/outline_emoji_emotions_white_24dp.png";
}else{
icon.src = "images/outline_dark_mode_black_24dp.png";
icon2.src = "images/outline_dark_mode_black_24dp.png";
more.src = "images/outline_grid_view_black_24dp.png";
more2.src = "images/outline_expand_more_black_24dp.png";
i1.src = "images/outline_lightbulb_black_24dp.png";
i2.src = "images/outline_more_black_24dp.png";
i3.src = "images/outline_construction_black_24dp.png";
i4.src = "images/outline_emoji_emotions_black_24dp.png";
}
}
}
</script>
</body>
</html>