| This project is all about to make a responsive blog template which contains multiple pages like about,search,blog and contact page..|
1)index.html <!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>iBlog - Welcome to codeweb011</title>
<link rel="stylesheet" href="css/utilis.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<nav class="navigation max-width-1 m-auto">
<div class="nav-left">
<span>codeweb</span>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="nav-right">
<form action="/search.html" method="GET">
<input class="form-input" type="text" placeholder="Search the blog" name="query" />
<button class="btn">Search</button>
</form>
</div>
</nav>
<div class=" max-width-1 m-auto "><hr></div>
<div class="content max-width-1 m-auto my-2">
<div class="content-left">
<img src="img/welcm.jpg" alt="welcome image">
<h1>Welcome to codeweb011</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis
consequatur hic itaque ex voluptas expedita? Assumenda, est! Veritatis
ut eaque quos, quisquam est id aut commodi harum, cupiditate eos esse?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
magnam, numquam unde sequi itaque fuga esse ad est adipisci qui
dignissimos rerum nisi, quas fugiat eaque exercitationem libero
dolorum. Reiciendis!
</p>
</div>
<div class="content-right">
<img src="img/girl.svg" alt="image" />
</div>
</div>
<div class="max-width-1 m-auto"><hr /></div>
<div class="home-posts max-width-1 m-auto font1 my-2">
<h2>Featured Posts</h2>
<div class="year-box adjust-year">
<h3>Year</h3>
<div>
<input type="radio" name="year" id="year">2020</div>
<div> <input type="radio" name="year" id="year">2021</div>
</div>
<div class="home-post">
<div class="home-post-img">
<img src="img/key.jpg" alt="img">
</div>
<div class="home-post-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
<div class="home-post">
<div class="home-post-img">
<img src="img/about3.webp" alt="img">
</div>
<div class="home-post-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
<div class="home-post">
<div class="home-post-img">
<img src="img/pp.jpg" alt="img">
</div>
<div class="home-post-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
<div class="home-post">
<div class="home-post-img">
<img src="img/wb.jpg" alt="wbimg">
</div>
<div class="home-post-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
<div class="home-post">
<div class="home-post-img">
<img src="img/blog.webp" alt="img">
</div>
<div class="home-post-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
</div>
<div class="footer">
copyright © codeweb011.blogspot.com
<a href="https://www.vecteezy.com/free-vector/web " target="_blank">Vectors credits :Vecteezy</a>
</div>
</body>
</html>
2) Search.html <!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>iBlog - Welcome to codeweb011</title>
<link rel="stylesheet" href="css/utilis.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<nav class="navigation max-width-1 m-auto">
<div class="nav-left">
<span>codeweb</span>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="nav-right">
<form action="/search.html" method="GET">
<input class="form-input" type="text" placeholder="Search the blog" name="query" />
<button class="btn">Search</button>
</form>
</div>
</nav>
<div class="max-width-1 m-auto"><hr /></div>
<div class="home-posts max-width-1 m-auto font1 my-2">
<h2>Search Results for CSS (0.05seconds)</h2>
<div class="year-box adjust-year">
<h3>Year</h3>
<div>
<input type="radio" name="year" id="year">2020</div>
<div> <input type="radio" name="year" id="year">2021</div>
</div>
<div class="home-post">
<div class="home-post-img">
<img src="img/wb.jpg" alt="wbimg">
</div>
<div class="home-post-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
<div class="home-post">
<div class="home-post-img">
<img src="img/wb.jpg" alt="wbimg">
</div>
<div class="home-post-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
<div class="home-post">
<div class="home-post-img">
<img src="img/wb.jpg" alt="wbimg">
</div>
<div class="home-post-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
<div class="home-post">
<div class="home-post-img">
<img src="img/wb.jpg" alt="wbimg">
</div>
<div class="home-post-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
<div class="home-post">
<div class="home-post-img">
<img src="img/wb.jpg" alt="wbimg">
</div>
<div class="home-post-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
</div>
<div class="footer">
copyright © codeweb011.blogspot.com
<a href="https://www.vecteezy.com/free-vector/web " target="_blank">Vectors credits :Vecteezy</a>
</div>
</body>
</html> 3)blog.html <!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>iBlog - Welcome to codeweb011</title>
<link rel="stylesheet" href="css/utilis.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/blog.css">
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<nav class="navigation max-width-1 m-auto">
<div class="nav-left">
<span>codeweb</span>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="nav-right">
<form action="/search.html" method="GET">
<input class="form-input" type="text" placeholder="Search the blog" name="query" />
<button class="btn">Search</button>
</form>
</div>
</nav>
<div class=" max-width-1 m-auto "><hr></div>
<div class="post-img max-width-1 m-auto">
<img src="img/37.svg" alt="image">
</div>
<div class="blog-content max-width-2 m-auto my-2">
<h1>Welcome to codeweb011</h1>
<div class="blogpost-meta">
<div class="author-info">
<div> <b> By Shivani</b></div>
<div> 30 June, 6 min read</div>
</div>
<div class="social">
<svg width="29" height="29" class="ho"><path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path></svg>
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" class="ho" style="border-radius:12px;
background-color: black;"><path d="M5 6.36C5 5.61 5.63 5 6.4 5h16.2c.77 0 1.4.61 1.4 1.36v16.28c0 .75-.63 1.36-1.4 1.36H6.4c-.77 0-1.4-.6-1.4-1.36V6.36z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.76 20.9v-8.57H7.89v8.58h2.87zm-1.44-9.75c1 0 1.63-.65 1.63-1.48-.02-.84-.62-1.48-1.6-1.48-.99 0-1.63.64-1.63 1.48 0 .83.62 1.48 1.59 1.48h.01zM12.35 20.9h2.87v-4.79c0-.25.02-.5.1-.7.2-.5.67-1.04 1.46-1.04 1.04 0 1.46.8 1.46 1.95v4.59h2.87v-4.92c0-2.64-1.42-3.87-3.3-3.87-1.55 0-2.23.86-2.61 1.45h.02v-1.24h-2.87c.04.8 0 8.58 0 8.58z" fill="#fff"></path></svg>
<svg width="29" height="29" class="ho"><path d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79"></path></svg>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, accusamus architecto. Quisquam at rem nulla blanditiis! Unde nihil excepturi animi reiciendis! Ducimus, molestias ratione. Aspernatur enim autem facilis voluptatum ipsa asperiores, rem, deserunt ullam numquam vel odio repellat deleniti totam cum animi! Porro, aspernatur molestiae quae incidunt repellat eaque enim quos nesciunt ducimus, maiores, tenetur aliquam! Veritatis neque molestiae consequuntur, vel est ipsam dicta vitae cum nemo laboriosam, ipsum inventore earum ex! Tempore consectetur similique odit temporibus facere architecto aliquam. Magnam cum tempore eius quaerat sapiente, assumenda nam eum architecto ducimus labore praesentium voluptatibus, distinctio alias quibusdam ipsa saepe odit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, eum voluptatibus sint, quam vel asperiores, magni cumque sunt perferendis placeat ipsam. Id ipsam labore voluptatem esse dolorem eos temporibus. Maiores nulla aut debitis magnam explicabo! Dolore cum quis quos laudantium itaque provident maiores nihil iste repudiandae porro dolorem, possimus fugiat blanditiis beatae ab iure amet, quibusdam inventore, deserunt incidunt eius ea odit. Sint architecto totam harum aut laudantium tenetur esse nisi blanditiis repudiandae, accusantium deserunt sunt nostrum quod eius neque incidunt illo quis quidem, reiciendis praesentium itaque animi dolorum aliquid dignissimos! Amet, esse iusto aperiam dolorem quo voluptatum unde natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aliquam sed architecto, doloremque autem ea numquam ipsa sint distinctio impedit voluptatum deserunt sit provident illum repellat accusamus tenetur illo delectus, quam fugit sapiente. Tempora porro magnam dicta ullam! Numquam, corrupti accusamus? Eum illum quos odio, ratione nesciunt suscipit obcaecati qui eligendi quam eveniet delectus, voluptate omnis reiciendis aliquam earum enim. Sed ipsam magni, alias sapiente dolore illo ut maiores facere? Asperiores cum, alias voluptate blanditiis, sapiente in totam distinctio exercitationem deserunt nihil provident excepturi ullam quod laudantium, tenetur ut unde. Exercitationem, iure nesciunt numquam corrupti excepturi inventore alias illum officia. </p>
</div>
</div>
<div class="max-width-1 m-auto"><hr /></div>
<div class="home-posts max-width-1 m-auto font1 my-2">
<h2>People who read this also read</h2>
<div class="row">
<div class="home-post more-post">
<div class="home-post-img">
<img src="img/key.jpg" alt="wbimg">
</div>
<div class="home-blogpost-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
<div class="home-post more-post">
<div class="home-post-img">
<img src="img/about3.webp" alt="wbimg">
</div>
<div class="home-blogpost-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
<div class="home-post more-post">
<div class="home-post-img">
<img src="img/pp.jpg" alt="wbimg">
</div>
<div class="home-blogpost-content">
<a href="/blog.html"><h3>Why Every Developer Should Have A Blog</h2>
</a>
<span>27 june | 4 min read</span>
</div>
</div>
</div>
</div>
<div class="footer">
copyright © codeweb011.blogspot.com
<a href="https://www.vecteezy.com/free-vector/web " target="_blank">Vectors credits :Vecteezy</a>
</div>
</body>
</html>
4) About.html <!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>iBlog - Welcome to codeweb011</title>
<link rel="stylesheet" href="css/utilis.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/about.css">
</head>
<body>
<nav class="navigation max-width-1 m-auto">
<div class="nav-left">
<span>codeweb</span>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="nav-right">
<form action="/search.html" method="GET">
<input class="form-input" type="text" placeholder="Search the blog" name="query" />
<button class="btn">Search</button>
</form>
</div>
</nav>
<div class="max-width-1 m-auto"><hr /></div>
<div class=" about-content max-width-1 m-auto my-2">
<h1>About Me</h1>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa harum minus magni aspernatur earum dolorum animi, perferendis maiores fugit quod culpa repudiandae mollitia numquam assumenda odio. Hic libero dolor, voluptatum adipisci ipsum rerum inventore illo. Expedita, omnis placeat officia, possimus ipsa nesciunt quis vero ex tempora nostrum minus excepturi incidunt quo harum suscipit fuga ea illo voluptatibus magni aliquam molestias! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad quisquam corrupti pariatur facilis asperiores, maiores itaque, incidunt error laborum saepe, ex omnis. Deserunt, nostrum totam unde rerum aut officiis fugiat.
</p> <br>
<h2>About The Blog</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, dolor. Possimus amet, expedita quas excepturi at sequi voluptatem. Voluptatum cum vitae dolorem illum reprehenderit quos natus magnam aliquid accusantium eaque fuga, inventore harum autem, tempora eos, totam nisi voluptas? Culpa repellendus nulla quae maxime error dolor autem? Recusandae reprehenderit facere aliquam repellat et voluptatum consectetur sequi nihil quis vel ut minus, architecto ipsam nulla cumque ratione. Consequuntur, eos? Aliquid maiores perferendis quo rerum. Repellat perferendis rerum modi? Ipsa unde consequuntur nesciunt! Assumenda aut ex dolore optio repellendus esse earum consectetur?
</p>
</div>
</div>
<div class="footer">
copyright © codeweb011.blogspot.com
<a href="https://www.vecteezy.com/free-vector/web " target="_blank">Vectors credits :Vecteezy</a>
</div>
</body>
</html> 5)Contact.html
<!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>iBlog - Welcome to codeweb011</title>
<link rel="stylesheet" href="css/utilis.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/contact.css">
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<nav class="navigation max-width-1 m-auto">
<div class="nav-left">
<span>codeweb</span>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="nav-right">
<form action="/search.html" method="GET">
<input class="form-input" type="text" placeholder="Search the blog" name="query" />
<button class="btn">Search</button>
</form>
</div>
</nav>
<div class="max-width-1 m-auto"><hr /></div>
<div class="content-contact max-width-1 m-auto my-2">
<h2>Contact Us</h2>
<div class="contact-form">
<div class="form-box">
<input type="text" placeholder="Enter Your Full Name">
</div>
<div class="form-box">
<input type="text" placeholder="Enter Your Email Id">
</div>
<div class="form-box">
<input type="text" placeholder="Enter Your Phone Number">
</div>
<div class="form-box">
<textarea name="" id="" cols="30" rows="10"placeholder="How may i help you?"></textarea>
</div>
<div class="form-box">
<button class="btn">Submit</button>
</div>
</div>
</div>
<div class="footer">
copyright © codeweb011.blogspot.com
<a href="https://www.vecteezy.com/free-vector/web " target="_blank">Vectors credits :Vecteezy</a>
</div>
</body>
</html>
=> Here my CSS started- 1)style.css * {
margin: 0;
padding: 0;
}
.navigation {
font-family: var(--font1);
/* height: 80px; */
/* background-color: chartreuse; */
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.nav-left {
font-size: 40px;
display: flex;
font-weight: bolder;
}
.nav-left span {
font-family: var(--font4);
font-size: 65px;
}
.nav-left ul {
display: flex;
align-items: center;
margin: 0 35px;
font-size: 25px;
}
.nav-left ul li a {
text-decoration: none;
color: red;
}
.nav-left ul li a:hover {
color: var(--main-bg-color);
font-weight: bolder;
}
.nav-left ul li {
list-style: none;
margin: 0 14px;
font-family: var(--font2);
}
.content {
height: 100%;
background-color: #fafafa;
display: flex;
}
.content-left {
font-family: var(--font3);
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
line-height: 1.8;
padding-left: 40px;
}
.content-left img {
width: 97px;
transform: rotateZ(-11deg);
}
.content-right {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.content-right img {
height: 280px;
border-radius: 50%;
border: 2px solid;
}
.home-posts {
/* height: 455px; */
padding-top: 12px;
padding-left: 8px;
background-color: rgb(234, 255, 234);
padding-bottom: 3px;
position: relative;
}
.year-box {
position: absolute;
width: 170px;
height: 200px;
right: 0px;
top: 100px;
}
.year-box div {
margin: 12px 0px;
}
.home-post {
display: flex;
margin: 25px;
}
.home-post-img img {
width: 200px;
height: 137px;
}
.home-post-content {
align-self: center;
margin: 0 18px;
}
.home-post-content a {
text-decoration: none;
color: black;
font-family: var(--font2);
}
.home-post-content a:hover{
text-decoration: underline;
}
.footer {
height: 45px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
}
.footer a {
color: white;
} 2)utility.css
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu:wght@300&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kirang+Haerang&display=swap');
:root {
--main-bg-color:blue;
--font1: "Roboto", sans-serif;
--font2: "Ubuntu", sans-serif;
--font3: font-family: 'Baloo 2', cursive;
--font4: 'Kirang Haerang', cursive;
}
.font1{
font-family: var(--font1);
}
.font2{
font-family: var(--font2);
}
.max-width-1 {
max-width: 80vw;
}
.max-width-2 {
max-width: 60vw;
margin: auto;
}
.m-auto {
margin: auto;
}
.my-2{
margin-top: 20px;
margin-bottom: 20px;
}
.form-input {
padding: 5px 4px;
font-size: 13px;
border: 2px solid;
border-radius: 4px;
margin: 0px 3px;
font-family: var(--font2);
}
.btn {
padding: 4px 12px;
border: 2px solid;
border-radius: 4px;
font-size: 14px;
font-family: var(--font2);
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.btn:hover{
color: white;
background-color: var(--main-bg-color);
}
.form-box input, textarea {
width: 50vw;
padding: 8px 8px;
margin: 5px 0px;
font-size: 13px;
font-family: var(--font3);
border-radius: 5px;
border: 2px solid lightpink;
}
3)about.css .about-content{
line-height: 1.5;
height: auto;
}
4)blog.css .post-img img {
width: 100%;
}
.post-img {
height: 272px;
overflow: hidden;
}
.blog-content {
/* background-color: blue; */
line-height: 1.5;
}
.blog-content h1 {
text-align: center;
}
.row {
display: flex;
}
.more-post {
flex-direction: column;
align-items: center;
}
.home-blogpost-content {
align-self: center;
margin: 15px 18px;
text-align: center;
}
.home-blogpost-content a {
text-decoration: none;
color: black;
font-family: var(--font1);
font-size: 11px;
}
.home-blogpost-content span {
font-size: 13px;
}
.blogpost-meta {
display: flex;
/* background-color: red; */
justify-content: space-between;
}
.author-info {
margin: 4px 0;
}
.author-info div {
padding: 4px 0px;
font-family: var(--font1);
font-size: 15px;
}
.social {
padding-right: 50px;
align-self: center;
cursor: pointer;
}
5)contact.css .content-contact {
/* height: 325px;
*/
height: auto;
background-color: #fafafa;
/* display: flex; */
font-family: var(--font3);
padding: 10px;
line-height: 2;
}
6)mobile.css @media screen and (max-width: 1200px) {
.navigation {
flex-direction: column;
margin-bottom: 20px;
}
.nav-left {
flex-direction: column;
text-align: center;
}
.nav-right {
padding-left: 25px;
}
.content-right {
display: none;
}
.home-post {
flex-direction: column;
}
.home-post-img {
text-align: center;
width: 60vw;
}
.year-box {
top: 24px;
left: 55vw;
font-size: 11px;
display: flex;
}
.year-box div {
margin: 0px;
padding: 0 5px;
}
.form-input {
width: 50%;
}
.form-box input,
textarea {
width: 70vw;
}
.row {
flex-direction: column;
}
.social {
padding: 0px;
}
.post-img {
height: auto;
}
.adjust-year {
position: static;
display: flex;
justify-content: flex-end;
width: 100%;
height: auto;
padding: 12px 0px;
}
}
0 Comments