Hey all!
This is my project which is a fictional brewery.
My first real attempt at making a functional website.
I had a lot of issues starting out but it works pretty good now…I think. Still some responsive issues when I open it via GitHub on my iPhone.
Let me know what you think!
Code: GitHub - XxGr33nGoblinxX/XxGr33nGoblinxX.github.io
Website: https://xxgr33ngoblinxx.github.io/
Hello folks, I hope you are all well and enjoying the codecadamy projects.
Here is my attempt at the website challenge: Funky Husky Band Site!
I hope it gets easier…!
Hello everyone!
Here is my flexbox practice for a photo studio.
The code is here: GitHub - TheAltamar/thealtamar
The website can be seen here: http://altamar.infinityfreeapp.com/photo-studio/studio-index.html
Thanks for your feedback!!
Hello,
this is my project for an imaginary web design studio.
GitHub repo: GitHub - D4GR4SS/Responsive-Landing-Page: Just a prototype of a Home page for web studio - Off Platform Codacademy Challenge
Demo: Scale Studio
Any feedback is welcome!
Grazie 
That looks really great!
Hey everyone! I see a lot of great looking sites on here. Mine is pretty simple by comparison to a lot of these lol.
live: 🥡 T&D's Juicy Dumps
repository: GitHub - klunkyfungus/T-D-s-Juicy-Dumps: Ficticious Company Website made to practice CSS flexbox skills
Let me know if yall have any feedback for me. Thanks
Hi guys!
Just completed my project for a fictional Engineering Firm!
Feedback is very welcome! Thanks for your time and happy coding!
Hello!
My project for the fictional company was a company that sold computers: Desktops, Laptops, and Tablets.
I took some inspiration from other companies that sell these devices and kept it pretty simple and modern in design.
I think it turned out pretty good!
The code can be found here: GitHub - Dbevan770/computer-business-website: Mockup for the landing page of a business website that sells computers.
and the live version can be found here: Computer Business
Wow, lots a beautiful designs and sites for this project. Coding is new to me, so mine is a bit more basic.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Brews and Bubbies</title>
<link rel="stylesheet" href="resources/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--Nav Bar-->
<nav>
<img class="logo" src="resources\images\logo.jpg">
<ul class="navbar">
<li><a href="#banner">Home</a></li>
<li><a href="#locations">Locations</a></li>
<li><a href="#dogs">Bubbies</a></li>
</ul>
</nav>
<!--Banner-->
<div id="banner">
<h1>Brews and Bubbies</h1>
<p>Showcasing bubbies and some breweries</p>
</div>
<!--Locations-->
<div id="locations">
<h2>Breweries That Allow Bubbies</h2>
<div class="container">
<div class="container-location">
<img src="resources\images\mikerphone.jpg">
<h3>Mikerphone</h3>
<p>Garlisch Dr, Elk Grove Village</p>
<p class="location-review">Bubbies allowed both inside and out. Staff & customers love to give pets to good girls and boys. Grassy area for the duties.</p>
</div>
<div class="container-location">
<img src="resources\images\wolfden.jpg">
<h3>Wolfden</h3>
<p>W Lake St, Bloomingdale</p>
<p class="location-review">Bubbies allowed only outside. Large outdoor space for duties with a firepit for the warms. Bubby beer on the menu</p>
</div>
<div class="container-location">
<img src="resources\images\metro.jpg">
<h3>Metropolitan</h3>
<p>N. Rockwell St, Chicago</p>
<p class="location-review">Bubbies allowed both inside and out. Outdoor space on the river for deck watching. Minimal grass area, but great views.</p>
</div>
</div>
</div>
<!--Bubbies-->
<div id="dogs">
<h2>Featured Bubbies</h2>
<div class="dogcontainer">
<div class="container-dogs">
<img src="resources\images\millie.jpg">
<h3>Millie</h3>
<p>Loves to sit in the walkways and beg for pets.</p>
</div>
<div class="container-dogs">
<img src="resources\images\pais.jpg">
<h3>Paisley</h3>
<p>Aspiring actress. Loves to pretend she gets no love.</p>
</div>
<div class="container-dogs">
<img src="resources\images\penny.jpg">
<h3>Penny</h3>
<p>Will herd anything in site. Much softer than you'd expect</p>
</div>
</div>
</div>
<!--Footers-->
<footer>
<p>I do not own the rights to these photos, and neither do you.</p>
<a href="https://www.instagram.com/brewsandbubbies/"><img src="data:image/png;base64,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"></a>
</footer>
</body>
</html>
CSS:
body {
background-color: black;
color: white;
font-size: 16px;
}
h2 {
text-align: center;
font-family: Roboto;
font-size: 1.5625rem;
text-decoration: underline;
opacity: .9;
}
/*Nav Bar*/
nav {
position: fixed;
top: 0px;
display: inline-block;
width: 100%;
z-index: 3;
height: 80px;
background-color: white;
opacity: .7;
padding: 15px 0px;
margin: 0 auto;
color: rgb(41, 41, 41);
border-bottom: .5px white solid;
}
.logo {
width: 100px;
height: 80px;
padding-left: 10px;
display: block;
float: left;
}
.navbar li {
display: inline-block;
list-style-type: none;
float: right;
list-style: none;
padding: 15px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navbar a {
text-decoration: underline;
color: rgb(41, 41, 41);
}
/*Banner*/
#banner {
background-image: url("https://media.istockphoto.com/id/1298643776/video/dark-beer-bubbles.jpg?s=640x640&k=20&c=BrEnvc0SQaE2PwZlKx34YvEXLpLZoKYKNpE_FiZxF2A=");
height: 243px;
width: 100%;
color: white;
opacity: .7;
margin: 150px auto;
text-align: center;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
font-family: Roboto;
}
#banner h1 {
padding-top: 150px;
margin: 0 auto;
font-size: 65px;
text-decoration: underline;
font-weight: normal;
}
#banner p {
padding-top: 0px;
margin-top: 5px;
font-size: 25px;
}
/*Location*/
#locations {
opacity: .95;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.container-location {
text-align: center;
font-family: "Noto serif";
width: 400px;
height: 500px;
border: .1px solid white;
opacity: .85;
background-color:rgb(41, 41, 41);
padding: 7px;
}
.container-location img {
width: 320px;
height: 210px;
padding: 15px;
}
/*Bubbies*/
#dogs {
margin: 7.5rem 1.5625rem 7.5rem 1.5625rem;
border: .1px solid white;
background-image: url("https://static.vecteezy.com/system/resources/thumbnails/001/616/826/original/texture-of-focused-bubbles-in-foreground-and-blurred-bubbles-in-dark-background-in-4k-free-video.jpg");
background-repeat: no-repeat;
background-position: center;
opacity: .9;
height: 43.75rem;
}
.dogcontainer {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.container-dogs {
text-align: center;
font-family: "Noto serif";
width: 18.75rem;
height: 25rem;
padding: 0.4375rem;
opacity: .85;
}
.container-dogs img {
width: 20rem;
height: 18.75rem;
padding: 0.9375rem;
}
@media only screen and (max-width: 1200px) {
.container-dogs {
max-width: 10.75rem;
max-height: 20rem;
}
.container-dogs img {
max-width: 10rem;
max-height: 8.75rem;
}
}
/*Footer*/
footer {
border-top: 1px solid white;
text-align: center;
font-family: Roboto;
padding: 10px 0;
}
footer img {
width: 40px;
height: 40px;
}
Cheers!
Hello! Here is my code for the Company Home Page Challenge. Thanks in advance for taking a look at it!
Black Thumb Nursery - Code Github
Also, I cannot figure out how to share the result through github (if anyone can help me, I’d really appreciate it)… so here is the result and code via Codepen:
Black Thumb Nursery Company Landing Page
Excellent work. Looks professional.
I struggled hardcore with this, still need to get my process right and fine tune my code, as it’s bit of a mess but I have two issues I can’t seem to figure out so any insight or advice would be deeply appreciated!
in the section - titled ‘photos’ lol - with the three photos, I was trying to have the images fill the containers completely, so that they’re displayed like three square images…no idea how to make it work other than cropping the images to all be squares but I’m sure there has to be another way to achieve this.
in the section - titled endbanner, that is currently all black - the background image will just NOT show up…i have no clue what else to try.
I had a lot of fun.
Here is my creation, please rate:
https://basmong.github.io/CompanyMainPage/
I want to say that it’s nicer when you do it yourself from the very beginning, and for example you don’t need to adjust to the dimensions in the designer’s layout.
This is my lively https://kemaldoruk96.github.io/
And these are codes: GitHub - KemalDoruk96/kemaldoruk96.github.io
Can anyone write a commen about my code? Is it clean code or not? by the way I know the site is not very good
Hello
My fictional webpage links. Would really appreciate feedback please.
Regards
Elizabeth
Hi guys,
My project for the Company Home Page of my fictional Paragliding Adventure Company.
Cheers!
Have been learning the full stack-course for just over a month now
Here is my link to my github for my Company Home Page challenge.
Far from perfect I know but any comments or advice would be great!
Hi Emilie,
Great website - love the use of two banners!
I couldn’t find a solution to your first issue but I saw that you added a possible solution in your CSS comments. Did you have any luck?
I used four images in my banner for my project - I used flexbox for this. However, I kept the photos in their original size which was more rectangular than square. The container width is 100% and each img has a width of 25%.
Regarding your second issue, I can see the background image on the endbanner, so I think it’s working as it should.
I’m sorry I couldn’t be more helpful! 
Paige
Hey guys! 
Here’s my fictional interior design website for the project.
Code:
https://github.com/harrp/dune-interiors
Live Page: 
https://harrp.github.io/dune-interiors/
Any feedback on my CSS would be helpful. Especially where to put the media queries. I didn’t know whether to put them at the bottom of the page or after every section.
