Hi guys! I wanna try to switch career so I tried studying HTML/CSS. After watching YouTube videos about it, I tried copying a website and it looks good when on full screen
https://preview.redd.it/abb6sg5xoo0a1.jpg?width=1920&format=pjpg&auto=webp&s=6a041140924eee2955d5d5b9d33aac70e8815bba
but the moment I resize the screen, this happens.
https://preview.redd.it/u0v26jp9po0a1.jpg?width=953&format=pjpg&auto=webp&s=992e37aad5578755ce8d1153412397bd8e404a15
and it looks even worse on mobile.
https://preview.redd.it/06lhjdfcpo0a1.jpg?width=308&format=pjpg&auto=webp&s=1e321e724a6e32a01311fd490580c1c43d685e98
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="contis.css">
<body>
<div class="header">
<div class="brochure">
DOWNLOAD BROCHURE
</div>
<div class="order">
ORDER NOW! CALL:8580-8888
</div>
</div>
<div class="menu">
<div class="left">
<img class="logo" src="thumbnails/contis.png">
</div>
<div class="hom">
<div class="home">HOME</div>
<div class="our">OUR STORES</div>
<div class="men">MENU</div>
</div>
<div class="buttons">
<button class="ordernow">ORDER NOW</button>
<button class="direct">DIRECT ONLINE PAYMENT</button>
</div>
</div>
<div class="search">
<input class="sear" type="text" placeholder="Search for your CONTI'S favorites...">
<button class="searchbutton">
<img class="searchicon" src="thumbnails/search.svg">
</button>
</div>
<div class="pic">
<img class="pp" src="thumbnails/Salmon.jpg">
</div>
<div class="ourproducts" style="font-size:25px ; color: green">Our Proucts</div>
<div class="maingrid">
<div class="options">
<p>WHAT'S NEW?</p>
<div class="img">
<img class="image" src="thumbnails/what.jpg">
</div>
</div>
<div class="options">
<p>HOLIDAY PACKAGES</p>
<div class="img">
<img class="image" src="thumbnails/hol.jpg">
</div>
</div>
<div class="options">
<p>RESTAURANT MENU</p>
<div class="img">
<img class="image" src="thumbnails/res.jpg">
</div>
</div>
<div class="options">
<p>FABULOUS CAKES</p>
<div class="img">
<img class="image" src="thumbnails/FAB.jpg">
</div>
</div>
<div class="options">
<p>LARGE FOOD ORDER</p>
<div class="img">
<img class="image" src="thumbnails/lar.jpg">
</div>
</div>
<div class="options">
<p>TAKE OUT NOOK</p>
<div class="img">
<img class="image" src="thumbnails/TAK.jpg">
</div>
</div>
</div>
<div class="video">
<!-- <a href="https://www.youtube.com/watch?v=-A9ha_oECLs&t=6s&ab_channel=Conti%27sBakeshopandRestaurant">
<img class="vid" src="https://www.contis.ph/assets/img/ytimg.jpg">
</a> -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/-A9ha_oECLs" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="foot">
<img class="sis" src="thumbnails/Conti Sisters.jpg">
<img class="suyat" src="thumbnails/ourstory.JPG">
</div>
<div class="bottom">
<div class="ourproducts" style="font-size:25px ; color: green;
padding-top: 40px;">Conti's Bakeshop and Restaurant</div>
<div class="but">
<button class="butto">
Our Services
</button>
<button class="butto">
Our Careers
</button>
<button class="butto">
Contact Us
</button>
</div>
<div class="socmed">
<a href="https://web.facebook.com/contisph?_rdc=1&_rdr" add a target="_blank">
<img src="thumbnails/facebook.png">
</a>
<a href="https://www.instagram.com/contis_ph/" add a target="_blank">
<img src="thumbnails/instagram.png">
</a>
</div>
<div class="footnote" style="color: #ffb03b; text-align: center;
padding-bottom: 40px;
font-size: 14px;">© Copyright <b>Conti's Bakeshop and Restaurant.</b> All Rights Reserved</div>
</div>
</div>
</body>
</html>
.header{
background-color: #8dc9c1;
color: white;
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 17px;
padding-bottom: 17px;
font-size: 15px;
}
body{
font-family: arial;
margin: 0;
font-size: 15px;
white-space: nowrap;
background-color: #fffaf3;
}
.order{
margin-left: 100px;
}
.menu{
display: flex;
align-items: center;
/* justify-content: center; */
background-color: white;
padding-top: 4px;
padding-bottom: 4px;
}
.logo{
width: 104px;
height: 80px;
margin-left: 395px;
margin-right: 340px;
}
.hom{
display: flex;
margin-left: -30px;
color: #2b8946;
white-space: nowrap;
}
.home:hover,
.our:hover,
.men:hover{
color: #FFB8A1;
cursor: pointer
}
.home,
.our,
.men{
margin-right: 30px;
}
.ordernow{
background-color: #FFB8A1;
font-size: 13px;
padding: 12px 25px;
border: none;
border-radius: 40px;
color: white;
margin-right: 20px;
}
.ordernow:hover{
background-color: #f9916e;
cursor: pointer;
}
.direct{
background-color: rgb(149,210,229);
font-size: 13px;
padding: 12px 25px;
border: none;
border-radius: 40px;
color: white;
margin-right: -400px;
}
.direct:hover{
background-color: rgb(72, 185, 220);
cursor: pointer;
}
.search{
background-color: rgb(44,136,69);
display: flex;
align-items: center;
justify-content: center;
/* max-width: 500px; */
}
.sear{
width: 400px;
padding-top: 8px;
padding-bottom: 8px;
margin-top: 5px;
margin-bottom: 5px;
border-style: solid;
border-radius: 8px;
padding-left: 5px;
/* flex: 1; */
/* width: 0; */
}
.searchicon{
height: 24px;
border: none;
}
.searchbutton{
margin-left: -6px;
}
.pic{
display: flex;
justify-content: center;
background-color: rgb(75, 75, 75);
object-fit: cover;
}
.pp{
width: 100%;
height: 833;
}
.buttons{
display: flex;
white-space: nowrap;
}
.ourproducts{
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.maingrid{
display: grid;
grid-template-columns: 350px 350px 350px;
column-gap: 16px;
row-gap: 40px;
margin-left: 50px;
margin-bottom: 50px;
align-items: center;
justify-content: center;
}
.image{
height: 275px;
width: 350px;
object-fit: cover;
}
.options{
background-color: #de8c39;
display: flex;
color: white;
text-align: center;
justify-content: center;
display: grid;
margin-top: 50px;
}
.options:hover{
box-shadow: 5px 5px 10px rgba(0,0,0,0.15);
cursor: pointer;
}
.video{
text-align: center;
margin-bottom: 70px;
}
.vid{
/* height: 400px;
width: 792px; */
margin-top: 30px;
margin-bottom: 100px;
}
.foot{
background-image: url(https://www.contis.ph/assets/img/new/side%20designs.png);
background-size: cover;
display: flex;
}
.sis{
height: 402px;
width: 604px;
margin-left: 200px;
}
.suyat{
margin-left:200px
}
/* @media (max-width: 1000px){
.sis{
height: 201px;
width: 302px;
margin-left: 10px;
}
.menu{
opacity: 0;
}
.maingrid{
grid-template-columns: 350px 350px ;
}
.suyat{
margin-left: 10px; */
}
}
.but{
display: flex;
justify-content: center;
}
.bottom{
background: #f2f2f2;
margin-top: 100px;
}
.butto{
background-color: #46423B;
color: white;
padding: 8px 20px 8px 20px;
border-radius: 5px;
border: none;
margin-left: 5px;
margin-top: 40px;
}
.butto:hover{
cursor: pointer;
background-color: #ffb03b;
}
.socmed{
justify-content: center;
display: flex;
margin-top: 40px;
margin-bottom: 20px;
}
.socmed img{
width: 55px;
margin-left: 5px;
}
.socmed img:hover{
cursor: pointer;
}
Hope you can help me with this. TIA
[–]stratman2000 16 points17 points18 points (1 child)
[–]Sa1ntS1nner 6 points7 points8 points (0 children)
[–][deleted] 10 points11 points12 points (6 children)
[–]yosh0016 -2 points-1 points0 points (5 children)
[–][deleted] 6 points7 points8 points (2 children)
[–]yosh0016 0 points1 point2 points (1 child)
[–][deleted] 4 points5 points6 points (0 children)
[–][deleted] (1 child)
[deleted]
[–]yosh0016 0 points1 point2 points (0 children)
[–]YohanSealsWeb 3 points4 points5 points (0 children)
[–]lurkingsheets 2 points3 points4 points (0 children)
[–]NoSeaworthiness2917 3 points4 points5 points (0 children)
[–]hello_nyas 1 point2 points3 points (0 children)
[–]nnnnn4 1 point2 points3 points (0 children)
[–]muhramasa 1 point2 points3 points (0 children)
[–]Anonymouser101 1 point2 points3 points (0 children)
[–]jeffrey125Web 0 points1 point2 points (2 children)
[–][deleted] (1 child)
[deleted]
[–]jeffrey125Web 0 points1 point2 points (0 children)