-
-
-
-
-
-
-
-
-
-
-
-
The Bright Future of Web 3.0?
-
-
-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum vero assumenda omnis ipsam quidem porro tempore. Tempora, fugiat placeat? Dolor.
-
READ MORE
-
-
-
-
-
-
News
-
-
-
-
Hydrogen Vs Electronic cars
-
Will hydrogren-fueled cars ever catch up EVs?
-
-
-
-
Hydrogen Vs Electronic cars
-
Will hydrogren-fueled cars ever catch up EVs?
-
-
-
-
Hydrogen Vs Electronic cars
-
Will hydrogren-fueled cars ever catch up EVs?
-
-
-
-
-
-
-
-
-
-
-
01
-
Reviving Retro PCs
-
What happens when old PCs are given modern upgrades?
+
+
+
+
+
+
+
+
+
+
+
+
Frontend Mentor | News homepage
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The Bright Future of Web 3.0?
+
+
+
+ Lorem ipsum dolor, sit amet consectetur
+ adipisicing elit. Eum vero assumenda omnis ipsam
+ quidem porro tempore. Tempora, fugiat placeat?
+ Dolor.
+
+
READ MORE
+
+
+
+
News
+
+
+
Hydrogen Vs Electronic cars
+
Will hydrogren-fueled cars ever catch up EVs?
+
+
+
+
Hydrogen Vs Electronic cars
+
Will hydrogren-fueled cars ever catch up EVs?
+
+
+
+
Hydrogen Vs Electronic cars
+
Will hydrogren-fueled cars ever catch up EVs?
+
+
+
+
+
+
+
+
+
01
+
Reviving Retro PCs
+
+ What happens when old PCs are given modern upgrades?
+
+
+
+
+
+
+
+
+
02
+
Top 10 laptops now
+
+ What happens when old PCs are given modern upgrades?
+
+
+
+
+
+
+
+
+
03
+
Game khelun jibon bachan
+
+ What happens when old PCs are given modern upgrades?
+
+
+
+
-
-
-
-
-
-
-
-
-
02
-
Top 10 laptops now
-
What happens when old PCs are given modern upgrades?
-
-
-
-
-
-
-
-
-
03
-
Game khelun jibon bachan
-
What happens when old PCs are given modern upgrades?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
From 995d82bba6bce0373b6d6beb76cc8a20aab15880 Mon Sep 17 00:00:00 2001
From: Saadman Galib <73209315+saadman-galib@users.noreply.github.com>
Date: Thu, 23 Mar 2023 20:05:03 +0600
Subject: [PATCH 2/4] Responsive for 1024px
---
index.html | 4 +-
style.css | 129 ++++++++++++++++++++++++++++++-----------------------
2 files changed, 74 insertions(+), 59 deletions(-)
diff --git a/index.html b/index.html
index 38dbb68..dc09fda 100644
--- a/index.html
+++ b/index.html
@@ -41,14 +41,14 @@
WEB3
-
+
diff --git a/style.css b/style.css
index 7aba50c..44139c3 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
* {
padding: 0;
@@ -6,10 +6,9 @@
box-sizing: border-box;
list-style: none;
text-decoration: none;
- font-family: 'Roboto', sans-serif;
+ font-family: "Roboto", sans-serif;
}
-
body {
width: 100%;
min-height: 100vh;
@@ -22,24 +21,23 @@ body {
padding: 0px 30px;
}
-.container header{
+.container header {
display: flex;
justify-content: space-between;
align-items: center;
}
-.container header .logo h1{
+.container header .logo h1 {
font-size: 26px;
color: #222;
padding: 35px 0px;
font-family: url("fonts/static/Inter-ExtraBold.ttf");
}
-.container header .nav ul{
+.container header .nav ul {
display: flex;
align-items: center;
justify-content: center;
-
}
.container header .nav ul li {
@@ -49,11 +47,11 @@ body {
padding-right: 0px;
}
-.container header .nav ul li a{
+.container header .nav ul li a {
color: rgb(28, 48, 85);
font-size: 15px;
}
-.container header .nav ul li a:hover{
+.container header .nav ul li a:hover {
color: rgb(46, 100, 201);
}
main {
@@ -66,12 +64,12 @@ main .content1 {
margin-right: 20px;
}
-main .content1 img{
+main .content1 img {
max-width: 600px;
}
main .content1 .cols {
- display: flex;
+ display: flex;
justify-content: space-between;
}
main .content1 .cols .head {
@@ -87,11 +85,10 @@ main .content1 .cols .texts {
max-width: 320px;
}
-main .content1 .cols .texts p {
+main .content1 .cols .texts p {
font-size: 16px;
word-spacing: 4px;
padding: 20px 0px;
-
}
main .content1 .cols .texts button {
@@ -135,11 +132,9 @@ main .content2 .news-heading p {
main .content2 .news-heading hr {
margin-top: 20px;
- height: .1px;
+ height: 0.1px;
}
-
-
.tech-news {
width: 100%;
margin-top: 10px;
@@ -152,7 +147,7 @@ main .content2 .news-heading hr {
height: 120px;
}
-.tech-news .posts img{
+.tech-news .posts img {
width: 90px;
}
@@ -160,7 +155,6 @@ main .content2 .news-heading hr {
margin-left: 10px;
}
-
.tech-news .posts .content h2 {
font-size: 25px;
color: rgba(0, 0, 0, 0.404);
@@ -170,40 +164,17 @@ main .content2 .news-heading hr {
padding: 5px 0;
}
-
.tech-news .posts .content p {
font-size: 14px;
padding: 5px 0;
}
+.nav-icon {
+ display: none !important;
+}
-
-
-
-
-
-
-
-
-
-
-
-
-
-/*
-
-
-
-@media (max-width: 700px) {
-
- .container {
- max-width: 700px;
- padding: 0px;
- }
- header {
- position: relative;
- }
-
+@media (max-width: 1024px) {
+ /*
header .nav ul{
display: flex;
flex-direction: column;
@@ -224,14 +195,39 @@ main .content2 .news-heading hr {
+ }*/
+
+ .container {
+ margin: 0;
}
- main .content1 {
- width: 100%;
+
+ .container header {
+ width: 600px !important;
+ margin: auto;
+ justify-content: space-between;
+ }
+
+ .container .logo{
+ margin-left: 0;
}
+
+ main {
+ display: flex;
+ flex-direction: column;
+ margin-left: auto;
+ margin-right: auto;
+ width: min-content;
+ align-items: center;
+ justify-content: center;
+ }
+
main .content1 .cols {
- display: flex;
+ display: flex;
flex-direction: column;
}
+ main .content1 {
+ width: 100%;
+ }
main .content1 .cols .head {
width: 100%;
padding: 0;
@@ -239,17 +235,36 @@ main .content2 .news-heading hr {
}
main .content1 .cols .texts {
- width: 100%;
-
- }
+ max-width: 100%;
+ }
+ main .content2 {
+ margin-top: 52px;
+ margin-bottom: 52px;
+ min-width: 100%;
+ padding: 20px;
+ }
-
- main {
- display: flex;
- flex-direction: column;
+ main .content2 h1 {
+ padding-left: 20px;
+ text-align: left;
}
+ .tech-news {
+ flex-direction: column;
+ /* max-width: 400px; */
+ width: 600px;
+ margin: auto;
+ overflow: hidden;
+ }
+ .tech-news .posts {
+ min-width: 100%;
+ max-width: 400px;
+ margin: 20px auto;
+ }
-} */
\ No newline at end of file
+ .tech-news .posts .content {
+ min-width: 100%;
+ }
+}
From a500c03f2f29d924e59c9fa2a64356ac5c04f961 Mon Sep 17 00:00:00 2001
From: Saadman Galib <73209315+saadman-galib@users.noreply.github.com>
Date: Fri, 24 Mar 2023 22:10:15 +0600
Subject: [PATCH 3/4] Responsive for mobile screen
---
index.html | 6 ++-
style.css | 121 ++++++++++++++++++++++++++++++++++++++++++-----------
2 files changed, 100 insertions(+), 27 deletions(-)
diff --git a/index.html b/index.html
index dc09fda..54f0fc0 100644
--- a/index.html
+++ b/index.html
@@ -41,8 +41,8 @@
WEB3
-
-
+
+
Home New Game khelun jibon bachan
+
+
- 
-
- 
+ 
+
+ 
+
+ 
+
+ 
-
- 
-
-