cyberpanda/anotherflexpractice.markdown

## anotherflexpractice.markdown

      
    Raw
  

              anotherflexpractice.markdown
            
          
    anotherflexpractice

A Pen by Cyberpanda on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>

<head>
  <title>Flex it!</title>
</head>

<body>
  <nav>
    <div class="columns">

      <div class="column" id="logo">
        <img src="https://i.pinimg.com/564x/ce/d3/ab/ced3abc2c95d2dc521ebfd6542d47ebe.jpg" alt="logo of the site" width="100px">
        <!-- TODO remove inline style width of img-->

      </div>
      <div id="menue">
        <ul>
          <li><a href="todo">Home</a></li>
          <li><a href="todo">Links</a></li>
          <li><a href="todo">Skills</a></li>
          <li><a href="todo">About</a></li>
        </ul>

      </div>

    </div>
  </nav>
  <main>
    <div class="columns">
      <div class="column" id="main-left">
        LEFT
      </div>
      <div class="column" id="main-center">
        CENTER
      </div>
      <div class="column" id="main-right">
        RIGHT
      </div>

    </div>
  </main>
  <footer>
    <h3>
      Flex it!
    </h3>
    <div id=left>
      © 2021 Cyber Panda</div> <a id="twitterbtn" href="//twitter.com/c0dehard"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
        <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
      </svg> Follow me</a>

    </div>
  </footer>
</body>

</html>

## script.js
// TODO add more content
// TODO add JS if time left

## style.css
:root {
  --bg: #333;
  --b: #000;
  --y: yellow;
  --w: #f9f6ee;
  /*will use gradient later*/
  --gradient1: linear-gradient(25deg, #ff1234 3%, #a2345f 40%, #281ff2);
}
main{
  background:black;
  color:white;
}

nav {
  margin: 0;
  overflow: hidden;
  background: #fc1;
}

#menue {
  background-color: black;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

/*list element style*/
#menue ul {
  margin: 0;
  padding: 0;
}
#menue ul li {
  /* This allow to arrange list items in a row, without using float */
  display: inline-block;
  list-style-type: none;
}

/*first level item style*/
#menue > ul > li > a {
  color: var(--w);
  background-color: var(--gradient1);
  display: block;
  line-height: 2em;
  padding: 0.5em 0.5em;
  text-decoration: none;
}
nav > div > ul > li > a:hover {
  color: var(--b);
  background-color: var(--w);
}

body {
  margin: 2 auto;
  padding: 0;
  font-family: Helvetica neue, Tahoma, Roboto, Arial;
  font-size: 15px;
}

.columns {
  margin-top: -20px;
  text-align: right;
  display: flex;
  height: 180px;
  flex-flow: row wrap;
  justify-content: space-around;
}

#menue {
  padding: 0.5em;
  margin: auto;
}

.column {
  padding: 0.5em;
  margin: auto;
  border: #fff dashed;
}
.column:hover {
  background: #fff;
  color: #000;
}

.column:hover > .column-heading {
  background: #fff;
  color: #0ff;
  border-bottom: dashed 5px #000;
}
footer {
  column-count: 2;
  column-gap: 30vw;
  height: 170px;
  margin-top: 50px;
  text-align: center;
  background-color: #09080b;
  color: #ccc;
  vertical-align: middle;
}

footer h3 {
  text-align: left;
  font-size: 48px;
  margin-left: 30px;
}

footer #left {
  text-align: left;
  color: white;
  font-size: 28px;
  display: inline-block;
  margin-top: 62px;
}
footer #twitterbtn {
  text-decoration: inherit;
  box-shadow: 0px 0px 1px 1px #1da1f2;
  border-radius: 5px;
  padding: 5px;
  padding-bottom: 0 auto;
  margin-left: 10px; /*space between copyright and twitterbtn*/
  color: #1da1f2;
}
footer #twitterbtn:hover {
  background: #1da1f2;
  color: #000;
}
	<!DOCTYPE html>
	<html>

	<head>
	<title>Flex it!</title>
	</head>

	<body>
	<nav>
	<div class="columns">

	<div class="column" id="logo">
	<img src="https://i.pinimg.com/564x/ce/d3/ab/ced3abc2c95d2dc521ebfd6542d47ebe.jpg" alt="logo of the site" width="100px">
	<!-- TODO remove inline style width of img-->

	</div>
	<div id="menue">
	<ul>
	<li><a href="todo">Home</a></li>
	<li><a href="todo">Links</a></li>
	<li><a href="todo">Skills</a></li>
	<li><a href="todo">About</a></li>
	</ul>

	</div>

	</div>
	</nav>
	<main>
	<div class="columns">
	<div class="column" id="main-left">
	LEFT
	</div>
	<div class="column" id="main-center">
	CENTER
	</div>
	<div class="column" id="main-right">
	RIGHT
	</div>

	</div>
	</main>
	<footer>
	<h3>
	Flex it!
	</h3>
	<div id=left>
	© 2021 Cyber Panda</div> <a id="twitterbtn" href="//twitter.com/c0dehard"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
	<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
	</svg> Follow me</a>

	</div>
	</footer>
	</body>

	</html>
	:root {
	--bg: #333;
	--b: #000;
	--y: yellow;
	--w: #f9f6ee;
	/will use gradient later/
	--gradient1: linear-gradient(25deg, #ff1234 3%, #a2345f 40%, #281ff2);
	}
	main{
	background:black;
	color:white;
	}

	nav {
	margin: 0;
	overflow: hidden;
	background: #fc1;
	}

	#menue {
	background-color: black;
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
	}

	/list element style/
	#menue ul {
	margin: 0;
	padding: 0;
	}
	#menue ul li {
	/* This allow to arrange list items in a row, without using float */
	display: inline-block;
	list-style-type: none;
	}

	/first level item style/
	#menue > ul > li > a {
	color: var(--w);
	background-color: var(--gradient1);
	display: block;
	line-height: 2em;
	padding: 0.5em 0.5em;
	text-decoration: none;
	}
	nav > div > ul > li > a:hover {
	color: var(--b);
	background-color: var(--w);
	}

	body {
	margin: 2 auto;
	padding: 0;
	font-family: Helvetica neue, Tahoma, Roboto, Arial;
	font-size: 15px;
	}

	.columns {
	margin-top: -20px;
	text-align: right;
	display: flex;
	height: 180px;
	flex-flow: row wrap;
	justify-content: space-around;
	}

	#menue {
	padding: 0.5em;
	margin: auto;
	}

	.column {
	padding: 0.5em;
	margin: auto;
	border: #fff dashed;
	}
	.column:hover {
	background: #fff;
	color: #000;
	}

	.column:hover > .column-heading {
	background: #fff;
	color: #0ff;
	border-bottom: dashed 5px #000;
	}
	footer {
	column-count: 2;
	column-gap: 30vw;
	height: 170px;
	margin-top: 50px;
	text-align: center;
	background-color: #09080b;
	color: #ccc;
	vertical-align: middle;
	}

	footer h3 {
	text-align: left;
	font-size: 48px;
	margin-left: 30px;
	}

	footer #left {
	text-align: left;
	color: white;
	font-size: 28px;
	display: inline-block;
	margin-top: 62px;
	}
	footer #twitterbtn {
	text-decoration: inherit;
	box-shadow: 0px 0px 1px 1px #1da1f2;
	border-radius: 5px;
	padding: 5px;
	padding-bottom: 0 auto;
	margin-left: 10px; /space between copyright and twitterbtn/
	color: #1da1f2;
	}
	footer #twitterbtn:hover {
	background: #1da1f2;
	color: #000;
	}